From a6286b506410c15abadd5a683bf5936676517129 Mon Sep 17 00:00:00 2001
From: ifirmawan <firmawaneiwan@gmail.com>
Date: Fri, 15 Sep 2023 14:27:05 +0700
Subject: [PATCH] [#1584] Refactoring invite expert card styles

---
 .../modules/experts/invite-expert-card.jsx    |  6 +-
 .../experts/invite-expert-card.module.scss    | 82 +++++++++----------
 2 files changed, 42 insertions(+), 46 deletions(-)

diff --git a/frontend/src/modules/experts/invite-expert-card.jsx b/frontend/src/modules/experts/invite-expert-card.jsx
index fee6855b2..eaaaeec47 100644
--- a/frontend/src/modules/experts/invite-expert-card.jsx
+++ b/frontend/src/modules/experts/invite-expert-card.jsx
@@ -8,12 +8,10 @@ const InviteExpertCard = ({ setIsShownModal }) => {
       <div className="invite-expert-image-wrapper">
         <img src="/stakeholder-overview/megaphone-icon.svg" alt="" />
       </div>
-      <div>
+      <div className="invite-expert-button-wrapper">
         <h3 className="invite-expert-text">Do you know an expert?</h3>
         <Button
-          shape="round"
-          size="medium"
-          className="invite-expert-button"
+          size="small"
           onClick={() => setIsShownModal(true)}
         >
           Suggest an expert
diff --git a/frontend/src/modules/experts/invite-expert-card.module.scss b/frontend/src/modules/experts/invite-expert-card.module.scss
index fd13ec64a..f567c72f5 100644
--- a/frontend/src/modules/experts/invite-expert-card.module.scss
+++ b/frontend/src/modules/experts/invite-expert-card.module.scss
@@ -1,50 +1,48 @@
-@import "../../vars.scss";
+@import '../../vars.scss';
+@import '../../styles/vars.scss';
+
 .inviteExpertCard {
   padding: 8px;
   max-width: 370px;
   height: 153px;
-  :global {
-    .ant-card-body {
-      display: flex;
-      height: calc(153px - calc(8px * 2));
-      flex-direction: row !important;
-      padding: 0 !important;
-      justify-content: unset !important;
-      align-items: center;
-    }
-    .invite-expert-image-wrapper {
-      display: flex;
-      background-color: #fafbfd;
-      width: 210px;
-      margin-right: 15px;
-      height: 100%;
-      clip-path: polygon(0 0, 100% 0, 75% 100%, 0% 100%);
-      img {
-        width: 90px;
-        margin-left: 30px;
+  :global(.ant-card-body) {
+    display: flex;
+    height: calc(153px - calc(8px * 2));
+    flex-direction: row;
+    padding: 0;
+    justify-content: unset;
+    align-items: center;
+    :global {
+      .invite-expert-image-wrapper {
+        display: flex;
+        background-color: $primaryGrey;
+        width: 210px;
+        margin-right: 15px;
+        height: 100%;
+        clip-path: polygon(0 0, 100% 0, 75% 100%, 0% 100%);
+        img {
+          width: 90px;
+          margin-left: 30px;
+        }
       }
-    }
-    .invite-expert-text {
-      font-weight: 700;
-      font-size: 16px;
-      line-height: 20px;
-      text-transform: uppercase;
-      color: #a5b0c9;
-      margin-bottom: 0;
-    }
-    .invite-expert-button {
-      display: flex;
-      justify-content: center;
-      place-items: center;
-      border: 2px solid #67bea1;
-      font-weight: 600;
-      font-size: 14px;
-      color: #67bea1;
-      margin-top: 24px;
-      transition: all 0.15s ease-out;
-      &:hover {
-        background-color: #67bea1;
-        color: white;
+      .invite-expert-button-wrapper {
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        justify-content: space-between;
+        padding-top: 8px;
+        .invite-expert-text {
+          font-weight: 700;
+          font-size: 16px;
+          line-height: 20px;
+          text-transform: uppercase;
+          color: $primaryDarkBlue4;
+        }
+        .ant-btn.ant-btn-sm {
+          font-size: $fzXXS !important;
+          padding: 8px 16px !important;
+        }
       }
     }
   }