@campxdev/shared 1.9.2 → 1.9.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@campxdev/shared",
-  "version": "1.9.2",
+  "version": "1.9.3",
   "main": "./exports.ts",
   "scripts": {
     "start": "react-scripts start",

package/src/components/Institutions/InsititutionsDialog.tsx

@@ -1,4 +1,4 @@
-import { Box, Stack, Typography, styled } from '@mui/material'
+import { Box, Typography, styled } from '@mui/material'
 import { InsititutionsStore } from '../../shared-state/InstitutionsStore'
 import Image from '../Image/Image'
 
@@ -6,13 +6,7 @@ export default function InsititutionsDialog({ close }) {
   const { institutions } = InsititutionsStore.useState((s) => s)
 
   return (
-    <Stack
-      gap={4}
-      sx={{
-        padding: '20px',
-        alignItems: 'center',
-      }}
-    >
+    <Box sx={{ padding: '20px' }}>
       <Typography variant="h3" textAlign={'center'}>
         Select an Instituition
       </Typography>
@@ -22,7 +16,7 @@ export default function InsititutionsDialog({ close }) {
           <InstitutionCard institution={item} key={index} />
         ))}
       </StyledInstitutionContainer>
-    </Stack>
+    </Box>
   )
 }
 
@@ -36,39 +30,37 @@ const InstitutionCard = ({ institution }) => {
   }
 
   return (
-    <Box
-      sx={{
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        gap: '20px',
-        padding: '14px',
-        border: '1px solid black',
-        borderRadius: '10px',
-        cursor: 'pointer',
-        width: '200px',
-        flexShrink: 0,
-      }}
-      onClick={handleClick}
-    >
+    <StyledInstitutionCard onClick={handleClick}>
       <Image
         alt="logo"
-        height={100}
-        width="auto"
+        height={'100px'}
+        width="100%"
         src={institution?.images?.url}
       />
       <Typography variant="body2">{institution?.name}</Typography>
-    </Box>
+    </StyledInstitutionCard>
   )
 }
 
+const StyledInstitutionCard = styled(Box)(({ theme }) => ({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  gap: '20px',
+  padding: '14px',
+  border: '1px solid black',
+  borderRadius: '10px',
+  cursor: 'pointer',
+  width: '200px',
+  flexShrink: 0,
+}))
+
 export const StyledInstitutionContainer = styled(Box)(({ theme }) => ({
-  width: '87%',
-  overflowX: 'auto',
+  marginTop: '20px',
   display: 'flex',
-  flex: 1,
-  justifyContent: 'flex-start',
+  justifyContent: 'center',
   padding: '20px',
+  flexWrap: 'wrap',
   gap: '20px',
   '&::-webkit-scrollbar': {
     width: '0.5em',

package/src/hooks/useAuth.ts

@@ -113,6 +113,7 @@ function handleInstitutions(institutions) {
         dialogProps: {
           disableEscapeKeyDown: true,
           onClose: () => {},
+          maxWidth: 'md',
         },
       })
     }