Home page list block UI

src/components/home/Home.module.scss

@@ -9,7 +9,9 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 0 2rem 5rem;
+    padding: 0 3rem 5rem;
+    border-bottom-right-radius: 3rem;
+    border-bottom-left-radius: 3rem;
 
     .profileImage {                
         display: block;
@@ -38,7 +40,6 @@
     .userDetails {
         width: calc(100% - 12rem);
         display: grid;
-        grid-template-columns: 1fr 1fr 1fr;        
         
         h2 {
             grid-column-start: 1;
@@ -68,7 +69,7 @@
     display: flex;
     border-radius: 3rem;
     height: 5rem;
-    width: calc(100% - 4rem);
+    width: calc(100% - 6rem);
     margin: -2.5rem auto 2.5rem;
     align-items: center;
     justify-content: space-between;
@@ -89,6 +90,112 @@
     }
 }
 
+.blockHeader {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+
+    h4 {
+        font-size: 1.6rem;
+        color: var(--black);
+        flex-grow: 1;
+
+        svg {
+            width: 2rem;
+            height: 2rem;
+            fill: var(--black);
+            vertical-align: middle;
+            margin-right: 1rem;
+        }
+    }
+
+    button {
+        background-color: var(--teal);
+        width: 3rem;
+        height: 3rem;
+        border: none;
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-left: 1rem;
+
+        svg {
+            fill: white;
+            width: 1.2rem;
+        }
+    }
+}
+
+
+$block-padding: 0 2rem;
+
 .List {
-    
+    padding: #{$block-padding};
+
+    ul {
+        list-style: none;
+    }
+
+    li {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin: 2rem 0;
+
+        &:nth-child(1) .icon {
+            background-color: var(--red);
+        }
+
+        &:nth-child(2) .icon {
+            background-color: var(--orange);
+        }
+
+        &:nth-child(3) .icon {
+            background-color: var(--blue);
+        }
+        
+        .icon {
+            width: 4rem;
+            height: 4rem;
+            background-color: var(--grey);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border-radius: 50%;
+
+            svg {
+                fill: white;
+                width: 3rem;
+            }
+        }
+
+        .info {
+            width: calc(100% - 5rem);
+
+            label, span {
+                display: block;
+            }
+
+            label {
+                font-size: 1.2rem;
+                color: var(--black);
+                font-weight: 700;
+            }
+
+            span {
+                font-size: 1rem;
+                color: var(--grey);
+                font-weight: 500;
+            }
+        }
+    }
+}
+
+.Shelf {
+    padding: #{$block-padding};
+
+    ul {
+        list-style: none;
+    }
 }

src/components/home/Home.tsx

@@ -59,25 +59,31 @@ export const Home: React.FC = () => {
             </header>
             <ul>
                 <li>
-                    <div className="icon">
+                    <div className={styles.icon}>
                         <TimeIcon />
                     </div>
-                    <label> Upcoming </label>
-                    <span> 5 Words </span>
+                    <div className={styles.info}>
+                        <label> Upcoming </label>
+                        <span> 5 Words </span>
+                    </div>
                 </li>
                 <li>
-                    <div className="icon">
+                    <div className={styles.icon}>
                         <ActivityIcon />
                     </div>
-                    <label> Active </label>
-                    <span> 1 Word </span>
+                    <div className={styles.info}>
+                        <label> Active </label>
+                        <span> 1 Word </span>
+                    </div>
                 </li>
                 <li>
-                    <div className="icon">
+                    <div className={styles.icon}>
                         <CheckCircleIcon />
                     </div>
-                    <label> Completed </label>
-                    <span> 18 Words </span>
+                    <div className={styles.info}>
+                        <label> Completed </label>
+                        <span> 18 Words </span>
+                    </div>
                 </li>
             </ul>
         </section>
@@ -138,28 +144,28 @@ export const Home: React.FC = () => {
             </header>
             <ul>
                 <li>
-                    <div className="icon">
+                    <div className={styles.icon}>
                         <TimeIcon />
                     </div>
                     <label> Vocabulary </label>
                     <span> 5 Shelves </span>
                 </li>
                 <li>
-                    <div className="icon">
+                    <div className={styles.icon}>
                         <BookMarkIcon />
                     </div>
                     <label> Books </label>
                     <span> 3 Shelves </span>
                 </li>
                 <li>
-                    <div className="icon">
+                    <div className={styles.icon}>
                         <PersonSpeakerIcon />
                     </div>
                     <label> IELTS </label>
                     <span> 5 Shelves </span>
                 </li>
                 <li>
-                    <div className="icon">
+                    <div className={styles.icon}>
                         <BrainIcon />
                     </div>
                     <label> GRE </label>

src/index.css

@@ -15,7 +15,7 @@
     --blue: #668fe1;
     --teal: #4e9096;
     --black: #11253d;
-    --brownish-black: rgb(71, 32, 32);
+    --brownish-black: #472020;
     --grey: #586471;
     --light-grey: #84919e;
     --creamy-white: #fef8ec;