style: restyle presenter card

AAISS · Nov 25, 2023 · 667155a · 667155a
1 parent 0736e98
commit 667155a
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 24 deletions.
diff --git a/frontend/src/Components/presenters/PresenterCard.jsx b/frontend/src/Components/presenters/PresenterCard.jsx
@@ -24,30 +24,40 @@ const PresenterCard = ({ name, photo, desc, logo, onClick, showButton = true, sh
         onClick={onClick}
       >
         <CardContent>
-          <Stack alignItems="center" justifyContent="center" gap={1}>
-            <Image
-              src={`${URL.baseURL}${photo}`}
-              style={{
-                width: '190px',
-                height: '190px',
-                borderRadius: '10px',
-                objectFit: 'cover',
-                objectPosition: 'center',
-              }}
-            />
-            <Typography
-              sx={{
-                textAlign: 'center',
-                borderBottom: showDivider && '1px solid var(--light-text-color-lighter)',
-                width: '100%',
-              }}
-              variant="h5"
-            >
-              {name}
-            </Typography>
-            {role && <Chip label={role} />}
+          <Stack alignItems="center" justifyContent="space-between" gap={1} sx={{ height: '100%' }}>
+            <Stack flexDirection="column" alignItems="center">
+              <Image
+                src={`${URL.baseURL}${photo}`}
+                style={{
+                  width: '190px',
+                  height: '190px',
+                  borderRadius: '10px',
+                  objectFit: 'cover',
+                  objectPosition: 'center',
+                }}
+              />
+              <Typography
+                sx={{
+                  textAlign: 'center',
+                  borderBottom: showDivider && '1px solid var(--light-text-color-lighter)',
+                  width: '100%',
+                }}
+                variant="h5">
+                {name}
+              </Typography>
+            </Stack>
+            {role && <Chip label={role}/>}
             {logo && (
-              <Stack flexDirection="column" alignItems="center" gap={1}>
+              <Stack flexDirection="column" alignItems="center" gap={1}
+                     sx={{
+                       bgcolor: '#3f579a',
+                       padding: '10px',
+                       boxSizing: 'border-box',
+                       borderRadius: '10px',
+                       width: '100%',
+                       minHeight: '115px',
+                       position: 'relative',
+                     }}>
                 <Image
                   src={`${URL.baseURL}${logo}`}
                   style={{
@@ -58,7 +68,11 @@ const PresenterCard = ({ name, photo, desc, logo, onClick, showButton = true, sh
                     objectPosition: 'center',
                   }}
                 />
-                <Typography fontSize="15px" style={{ fontWeight: 'lighter' }}>
+                <Typography fontSize="15px" sx={{
+                  fontWeight: 'lighter',
+                  textWrap: 'balance',
+                  textAlign: 'center',
+                }}>
                   {desc}
                 </Typography>
               </Stack>

diff --git a/frontend/src/css/PresenterCard.css b/frontend/src/css/PresenterCard.css
@@ -9,4 +9,16 @@
 .MuiCard-root {
   max-width: 260px !important;
   min-width: 260px !important;
+}
+
+.presenter-card > div {
+  height: 100% !important;
+}
+
+.presenter-card .MuiCardContent-root {
+  height: 100% !important;
+}
+
+.presenter-card .MuiCardActions-root {
+  margin-top: 0 !important;
 }