Merge pull request #1003 from julisod/pre-STAG-node-22

Styling updates + general fixes

Author: onnilinnala

frontend/jsconfig.json

@@ -3,7 +3,6 @@
         "module": "commonjs",
         "target": "es2016",
         "jsx": "preserve",
-        "checkJs": true,
         "baseUrl": "./src"
     },
     "exclude": ["node_modules", "**/node_modules/*"]

frontend/package-lock.json

@@ -1,7 +1,7 @@
 import React from 'react'
 
-import Select from '@mui/material/Select'
-import MenuItem from '@mui/material/MenuItem'
+import { Select, MenuItem, InputBase } from '@mui/material/'
+import { styled } from '@mui/material/styles'
 
 import { useTranslation } from 'react-i18next'
 
@@ -19,20 +19,21 @@ export default () => {
     } else {
         currentLanguage = i18n.language
     }
+
+    const SelectBox = styled(Select)({
+        backgroundColor: 'white',
+        borderWidth: '2px',
+        borderColor: 'black',
+        borderRadius: '0.5rem',
+        paddingLeft: '0.5rem',
+    })
+
     return (
-        <Select
-            labelId="demo-simple-select-label"
-            id="demo-simple-select"
+        <SelectBox
             value={currentLanguage}
             onChange={handleChange}
             defaultValue={'en'}
-            className="tw-text-black tw-border-1 tw-border-2 tw-border-solid tw-border-black tw-px-2 tw-py-0 tw-bg-white tw-rounded-lg"
-            // style={{
-            //     padding: '8px 0px 8px 16px',
-            //     color: 'white',
-            //     backgroundColor: 'black',
-            // }}
-            disableUnderline
+            input={<InputBase />} // Removes the default border
         >
             {/* <MenuItem value={'fi'}>
                 <span role="img" aria-label="fi">
@@ -50,6 +51,6 @@ export default () => {
                     ZH 🇨🇳
                 </span>
             </MenuItem>
-        </Select>
+        </SelectBox>
     )
 }

frontend/src/components/LanguageMenu/index.js

@@ -21,19 +21,18 @@ export default () => {
 
     return (
         <Box display="flex" flexDirection="row" alignItems="center">
-            <div className="tw-rounded-full tw-border-8 tw-border-white">
-                <IconButton onClick={handleClick}>
-                    <Avatar
-                        className="tw-w-12 tw-h-12"
-                        src={profile?.avatar}
-                        alt="Avatar"
-                        style={{
-                            border: `2px solid ${color['primary'].main}`,
-                            borderRadius: '50%',
-                        }}
-                    />
-                </IconButton>
-            </div>
+            <IconButton onClick={handleClick}>
+                <Avatar
+                    src={profile?.avatar}
+                    alt="Avatar"
+                    style={{
+                        border: `2px solid ${color['primary'].main}`,
+                        borderRadius: '50%',
+                        height: '3rem',
+                        width: '3rem',
+                    }}
+                />
+            </IconButton>
         </Box>
     )
 }

frontend/src/components/UserAvatar/index.js

@@ -1,67 +1,48 @@
-import React, { useState } from 'react'
-import { useDispatch, useSelector } from 'react-redux'
-// import { push } from 'connected-react-router'
-import { Box, ListItem, ListItemText, Grid } from '@mui/material'
+import React from 'react'
+import { useSelector } from 'react-redux'
 import * as AuthSelectors from 'reducers/auth/selectors'
-import JunctionTheme from 'junctionTheme.js'
+import { useNavigate } from 'react-router-dom'
+
+import Box from '@mui/material/Box'
+import { styled } from '@mui/material/styles'
 import Button from 'components/generic/Button'
 import UserAvatar from 'components/UserAvatar'
-import { useMyProfilePreview } from 'graphql/queries/userProfile'
-import { styled } from '@mui/system'
-import { useLocation, useNavigate } from 'react-router-dom'
+import LanguageMenu from 'components/LanguageMenu'
 
 import { useTranslation } from 'react-i18next'
-import LanguageMenu from 'components/LanguageMenu'
 
 export default () => {
     const { t } = useTranslation()
     const navigate = useNavigate()
-    const location = useLocation()
     const idTokenPayload = useSelector(AuthSelectors.getIdTokenPayload)
     const userId = idTokenPayload?.sub
-    const dispatch = useDispatch()
-    // const classes = useStyles()
 
-    if (!userId) {
-        return (
-            <Box display="flex" flexDirection="row" alignItems="center">
-                <Grid container spacing={0}>
-                    <Grid item xs={12}>
-                        <Button
-                            onClick={() =>
-                                navigate('/login', {
-                                    state: { nextRoute: location.pathname },
-                                })
-                            }
-                            strong={true}
-                        >
-                            {t('Sign_in_')}
-                        </Button>
-                    </Grid>
-                </Grid>
-            </Box>
-        )
-    }
+    const UserMenu = styled(Box)(({ theme }) => ({
+        display: 'flex',
+        alignItems: 'center',
+        flexDirection: 'column',
+        [theme.breakpoints.up('sm')]: {
+            flexDirection: 'row',
+        },
+        gap: '0.5em',
+    }))
 
     return (
-        <Box className="tw-gap-2 tw-flex tw-flex-col md:tw-flex-row tw-items-center">
+        <UserMenu>
             <LanguageMenu />
             {userId ? (
                 <>
                     <Button
                         onClick={() => navigate('/dashboard/default/')}
                         strong={true}
                         variant="contained"
-                        // className={classes.menuBox}
                     >
                         {t('Dashboard_')}
                     </Button>
                     <Button
                         onClick={() => navigate('/logout')}
                         strong={true}
                         variant="outlined"
-                        className={'tw-bg-white tw-text-black'}
-                        // className={classes.menuBox}
                     >
                         {t('Log_out_')}
                     </Button>
@@ -76,6 +57,6 @@ export default () => {
                     {t('Sign_in_')}
                 </Button>
             )}
-        </Box>
+        </UserMenu>
     )
 }