[#1584] Refactoring invite expert card styles

akvo · Sep 15, 2023 · a6286b5 · a6286b5
1 parent 28b75e2
commit a6286b5
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 46 deletions.
diff --git 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
@@ -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;
+ }
  }
  }
  }