various other small alignment and styling changes

gchq · Feb 21, 2024 · 6973c03 · 6973c03
1 parent 0a6580f
commit 6973c03
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 10 deletions.
diff --git a/frontend/src/MessageAlert.tsx b/frontend/src/MessageAlert.tsx
@@ -22,7 +22,7 @@ type MessageAlertProps = {
   message?: string
   severity?: AlertProps['severity']
   'data-test'?: string
-  hideContactUs?: boolean
+  slimView?: boolean
 } & PartialMessageAlertProps
 
 export default function MessageAlert({
@@ -31,7 +31,7 @@ export default function MessageAlert({
   linkText,
   href,
   'data-test': dataTest,
-  hideContactUs = false,
+  slimView = false,
 }: MessageAlertProps) {
   const alertRef = useRef<HTMLDivElement>(null)
   const [showContactMessage, setShowContactMessage] = useState(false)
@@ -57,7 +57,12 @@ export default function MessageAlert({
   if (!message) return null
 
   return (
-    <Alert severity={severity} sx={{ mb: 2, mt: 2 }} ref={alertRef} data-test={dataTest}>
+    <Alert
+      severity={severity}
+      sx={{ mb: 2, mt: 2, maxHeight: slimView ? '70px' : 'none' }}
+      ref={alertRef}
+      data-test={dataTest}
+    >
       <Stack spacing={1}>
         <Stack direction='row' spacing={1} alignItems='center'>
           <Typography>{message}</Typography>
@@ -75,7 +80,7 @@ export default function MessageAlert({
           )}
         </Stack>
         <Typography>{!!(href && linkText) && <Link href={href}>{linkText}</Link>}</Typography>
-        {severity === 'error' && !hideContactUs && (
+        {severity === 'error' && !slimView && (
           <>
             <div>
               <Button

diff --git a/frontend/src/model/accessRequests/AccessRequestDisplay.tsx b/frontend/src/model/accessRequests/AccessRequestDisplay.tsx
@@ -1,5 +1,5 @@
 import CommentIcon from '@mui/icons-material/ChatBubble'
-import { Card, Divider, Grid, Stack, Typography } from '@mui/material'
+import { Card, Grid, Stack, Typography } from '@mui/material'
 import { groupBy } from 'lodash-es'
 import { useEffect, useState } from 'react'
 import UserDisplay from 'src/common/UserDisplay'
@@ -101,8 +101,7 @@ export default function AccessRequestDisplay({ accessRequest }: AccessRequestDis
                 </Grid>
               </Card>
             </Stack>
-            {reviewsWithLatestResponses.length > 0 && <Divider sx={{ my: 2 }} />}
-            <Stack direction='row' justifyContent='space-between' spacing={2}>
+            <Stack direction='row' justifyContent='space-between' spacing={2} sx={{ pt: 2 }}>
               <ReviewDisplay reviews={reviewsWithLatestResponses} />
               {accessRequest.comments.length > 0 && (
                 <Stack direction='row' spacing={1}>

diff --git a/frontend/src/wrapper/ModelSearchField.tsx b/frontend/src/wrapper/ModelSearchField.tsx
@@ -3,6 +3,7 @@ import { Box, InputBase, List, ListItemButton, ListItemText, Popover, Stack } fr
 import { alpha, styled, useTheme } from '@mui/material/styles'
 import { useListModels } from 'actions/model'
 import { ChangeEvent, useMemo, useState } from 'react'
+import EmptyBlob from 'src/common/EmptyBlob'
 import Loading from 'src/common/Loading'
 import useDebounce from 'src/hooks/useDebounce'
 import Link from 'src/Link'
@@ -82,7 +83,7 @@ export default function ModelSearchField() {
   }
 
   if (isModelsError) {
-    return <MessageAlert message={isModelsError.info.message} severity='error' hideContactUs />
+    return <MessageAlert message={isModelsError.info.message} severity='error' slimView />
   }
 
   return (
@@ -105,14 +106,14 @@ export default function ModelSearchField() {
           anchorEl={anchorEl}
           disableAutoFocus
           disableEnforceFocus
-          sx={{ maxHeight: '400px' }}
+          sx={{ maxHeight: '400px', minWidth: '272px' }}
           anchorOrigin={{
             vertical: 'bottom',
             horizontal: 'center',
           }}
           transformOrigin={{
             vertical: 'top',
-            horizontal: 'center',
+            horizontal: 152,
           }}
         >
           {isModelsLoading && <Loading />}
@@ -121,6 +122,11 @@ export default function ModelSearchField() {
               {modelList}
             </List>
           )}
+          {!isModelsLoading && modelList.length === 0 && (
+            <Box sx={{ p: 4, minWidth: '272px' }}>
+              <EmptyBlob text='No models found' />
+            </Box>
+          )}
         </Popover>
       )}
     </Stack>