fix: ResourceList empty message

galv-team · Oct 23, 2024 · dea305b · dea305b
1 parent a8ebb44
commit dea305b
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 4 deletions.
diff --git a/src/Components/ResourceList.tsx b/src/Components/ResourceList.tsx
@@ -97,7 +97,31 @@ export function ResourceList<T extends GalvResource>({
                 />
             ))
     } else {
-        content = 'No resources to show.'
+        content = (
+            <Typography
+                variant={'body1'}
+                className={classes.resourceListBlankBody}
+            >
+                There is nothing to show.
+                {!user && (
+                    <>
+                        {' '}
+                        You may see more if you are signed in.
+                        <Button
+                            variant="outlined"
+                            size={'small'}
+                            onClick={() => setLoginFormOpen(true)}
+                        >
+                            Log in now
+                        </Button>
+                    </>
+                )}
+                {user && (<>
+                    {' '}
+                    Why not get started by creating something?
+                    </>)}
+            </Typography>
+        )
     }
 
     return (

diff --git a/src/UserLogin.tsx b/src/UserLogin.tsx
@@ -591,7 +591,7 @@ export default function UserLogin() {
         <ButtonGroup
             disableElevation
             variant="contained"
-            title="Disabled elevation buttons"
+            title="Log in and registration buttons"
         >
             <Button
                 onClick={() => {

diff --git a/src/styles/UseStyles.ts b/src/styles/UseStyles.ts
@@ -375,8 +375,21 @@ export default makeStyles()((theme) => {
             marginRight: theme.spacing(1),
             color: theme.palette.text.disabled,
         },
+        resourceListBlankBody: {
+            paddingTop: theme.spacing(8),
+            paddingRight: theme.spacing(0),
+            paddingBottom: theme.spacing(8),
+            paddingLeft: theme.spacing(0),
+            '& .MuiButton-root': {
+                display: 'inline-block',
+                float: 'inline-end',
+            },
+        },
         resourceSummary: {
-            padding: [theme.spacing(0), theme.spacing(2)],
+            paddingTop: theme.spacing(0),
+            paddingRight: theme.spacing(2),
+            paddingBottom: theme.spacing(0),
+            paddingLeft: theme.spacing(2),
             '& > .MuiStack-root': {
                 display: 'flex',
                 lineHeight: '2em',
@@ -388,7 +401,12 @@ export default makeStyles()((theme) => {
         },
         resourceSummaryCard: {
             padding: 0,
-            '& kbd': { padding: [theme.spacing(0), theme.spacing(2)] },
+            '& kbd': {
+                paddingTop: theme.spacing(0),
+                paddingRight: theme.spacing(2),
+                paddingBottom: theme.spacing(0),
+                paddingLeft: theme.spacing(2),
+            },
             '& img': { maxWidth: '100%' },
             '& .MuiAlert-root': {
                 width: '100%',