Use MUI select component

packages/frontend/src/components/projects/create/Configure.tsx

@@ -5,13 +5,14 @@ import { useNavigate, useSearchParams } from 'react-router-dom';
 import { useMediaQuery } from 'usehooks-ts';
 import { AddEnvironmentVariableInput, AuctionParams, Deployer } from 'gql-client';
 
+import { Select, MenuItem, FormControl, FormHelperText } from '@mui/material';
+
 import {
   ArrowRightCircleFilledIcon,
   LoadingIcon,
 } from 'components/shared/CustomIcon';
 import { Heading } from '../../shared/Heading';
 import { Button } from '../../shared/Button';
-import { Select, SelectOption } from 'components/shared/Select';
 import { Input } from 'components/shared/Input';
 import { useToast } from 'components/shared/Toast';
 import { useGQLClient } from '../../../context/GQLClientContext';
@@ -206,24 +207,14 @@ const Configure = () => {
                 control={methods.control}
                 render={({ field: { value, onChange } }) => (
                   <Select
-                    label="Configuration Options"
+                    value={value}
-                    value={
+                    onChange={(event) => onChange(event.target.value)}
-                      {
+                    size='small'
-                        value: value || 'LRN',
+                    displayEmpty
-                        label:
+                  >
-                          value === 'Auction'
+                    <MenuItem value="LRN">Deployer LRN</MenuItem>
-                            ? 'Create Auction'
+                    <MenuItem value="Auction">Create Auction</MenuItem>
-                            : 'Deployer LRN',
+                  </Select>
-                      } as SelectOption
-                    }
-                    onChange={(value) =>
-                      onChange((value as SelectOption).value)
-                    }
-                    options={[
-                      { value: 'LRN', label: 'Deployer LRN' },
-                      { value: 'Auction', label: 'Create Auction' },
-                    ]}
-                  />
                 )}
               />
             </div>
@@ -240,21 +231,26 @@ const Configure = () => {
                   name="lrn"
                   control={methods.control}
                   rules={{ required: true }}
-                  render={({ field: { value, onChange } }) => (
+                  render={({ field: { value, onChange }, fieldState }) => (
-                    <Select
+                    <FormControl fullWidth error={Boolean(fieldState.error)}>
-                      label="Select deployer LRN"
+                      <span className="text-sm text-elements-high-em mb-4">
-                      value={{
+                        Select deployer LRN
-                        value: value || '',
+                      </span>
-                        label: value || ''
+                      <Select
-                      } as SelectOption}
+                        value={value}
-                      onChange={(selectedOption) =>
+                        onChange={(event) => onChange(event.target.value)}
-                        onChange((selectedOption as SelectOption).value)
+                        displayEmpty
-                      }
+                        size='small'
-                      options={deployers.map(deployer => ({
+
-                        value: deployer.deployerLrn,
+                      >
-                        label: deployer.deployerLrn
+                        {deployers.map((deployer) => (
-                      }))}
+                          <MenuItem key={deployer.deployerId} value={deployer.deployerLrn}>
-                    />
+                            {deployer.deployerLrn}
+                          </MenuItem>
+                        ))}
+                      </Select>
+                      {fieldState.error && <FormHelperText>{fieldState.error.message}</FormHelperText>}
+                    </FormControl>
                   )}
                 />
               </div>

packages/frontend/src/components/projects/project/overview/Activity/AuctionCard.tsx

@@ -17,6 +17,16 @@ import { Button, Heading, Tag } from 'components/shared';
 
 const WAIT_DURATION = 5000;
 
+const DIALOG_STYLE = {
+  backgroundColor: 'rgba(0,0,0, .9)',
+  padding: '2em',
+  borderRadius: '0.5em',
+  marginLeft: '0.5em',
+  marginRight: '0.5em',
+  color: 'gray',
+  fontSize: 'small',
+};
+
 export const AuctionCard = ({ project }: { project: Project }) => {
   const [auctionStatus, setAuctionStatus] = useState<string>('');
   const [deployers, setDeployers] = useState<Deployer[]>([]);
@@ -140,7 +150,7 @@ export const AuctionCard = ({ project }: { project: Project }) => {
         maxWidth="md"
       >
         <DialogTitle>Auction Details</DialogTitle>
-        <DialogContent>
+        <DialogContent style={DIALOG_STYLE}>
           {auctionDetails && (
             <pre>{JSON.stringify(auctionDetails, null, 2)}</pre>
           )}