Modify CSS for categories and work experience cards

Mildred14 · Dec 13, 2024 · 44830ac · 44830ac
1 parent a5909b6
commit 44830ac
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 5 deletions.
diff --git a/src/components/Card/Card.js b/src/components/Card/Card.js
@@ -12,10 +12,10 @@ export const Card = ({name, imgIcon, id, selected, status}) => {
   }
 
   return (
-    <div className={`card card-${id}`} key={id}>
-      <a className="more-info" onClick={handleClick} title="more-info">
+      <a className={`more-info card card-${id}`} onClick={handleClick} title="more-info" key={id}>
+      <div className="img-wrapper">
         <img src={plusIcon} width="30"/>
-      </a>
+      </div>
       <div>
         <img src={imgIcon} className="img-category" />
       </div>
@@ -24,6 +24,6 @@ export const Card = ({name, imgIcon, id, selected, status}) => {
           {name}
         </p>
       </div>
-    </div>
+      </a>
   )
 }
diff --git a/src/components/Card/Card.scss b/src/components/Card/Card.scss
@@ -18,6 +18,12 @@
     box-sizing: border-box;
   }
 
+  & > .img-wrapper {
+    text-align: end;
+    padding: 20px 20px 0 0;
+    box-sizing: border-box;
+  }
+
   & > .title {
     width: 100%;
     display: flex;

diff --git a/src/components/WorkExperience/WorkExperience.scss b/src/components/WorkExperience/WorkExperience.scss
@@ -7,7 +7,7 @@
   align-items: center;
 
   > .work-experience--card {
-    border: 1px solid utilities.$grayLight;
+    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -82,5 +82,8 @@
       }
     }
   }
+}
 
+.work-experience--card:hover {
+  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
 }