From 667155a5341112f6718a847d8aa7c940b2c06bb5 Mon Sep 17 00:00:00 2001
From: mh-zeynal <mh.zeynal@gmail.com>
Date: Sat, 25 Nov 2023 17:44:12 +0330
Subject: [PATCH] style: restyle presenter card

---
 .../Components/presenters/PresenterCard.jsx   | 62 ++++++++++++-------
 frontend/src/css/PresenterCard.css            | 12 ++++
 2 files changed, 50 insertions(+), 24 deletions(-)

diff --git a/frontend/src/Components/presenters/PresenterCard.jsx b/frontend/src/Components/presenters/PresenterCard.jsx
index d52ffdb..c93c112 100644
--- 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
index cbadce6..1b8b1b8 100644
--- 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;
 }
\ No newline at end of file