stying main page

sae-csc/src/styles/app/styles/pages/_main.scss

@@ -26,7 +26,7 @@
       }
     }
 
-    .delete-button{
+    .delete-button {
       border: 0;
       border-radius: 100%;
       background: #F2F2F2;
@@ -37,11 +37,13 @@
       left: 92%;
       top: 50px;
       width: 37px;
-      &:hover{
+
+      &:hover {
         background: #888;
         color: #222;
       }
     }
+
     textarea {
       width: 648px;
       height: 236px;
@@ -51,6 +53,7 @@
       box-shadow: 0 19px 29px 0 rgba(30, 31, 34, 0.05);
       border-width: 0;
       padding: 11px 14px;
+      color: variables.$csc-textarea-color;
     }
 
   }
@@ -63,7 +66,20 @@
 
 .filter-group {
 
-  .search{
+  .input-box{
+    margin-left: -1rem;
+    i{
+      position: relative;
+      left: 2rem;
+
+    }
+    input{
+      padding-left: 2rem;
+      padding-top: 6px;
+      padding-bottom: 6px;
+    }
+  }
+  .search {
     display: flex;
     min-height: 42px;
     max-height: 42px;
@@ -72,6 +88,7 @@
     gap: var(--Spacing-Spacing-20, 8px);
     align-self: stretch;
   }
+
   .chips-listing {
     margin-top: 16px;
     border-radius: 4px;
@@ -84,14 +101,39 @@
     .chips {
       background: variables.$csc-chips-bg-color;
       color: white;
-      border-radius: 100px;
       padding: 12px 16px;
       border: solid 1px variables.$csc-chips-bg-color;
       width: 100%;
+      border-radius: 20px;
+
     }
   }
 }
 
+.bottom-navigation {
+  .nav-item {
+
+    display: inline-flex;
+    padding: 12px 16px;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+
+    color: var(--color-text-title, #255B8E);
+    leading-trim: both;
+    text-edge: cap;
+
+    /* Text/text-button */
+    font-family: var(--Fonts-Font-text, Barlow);
+    font-size: var(--Font-Base, 14px);
+    font-style: normal;
+    font-weight: 600;
+    line-height: 100%; /* 14px */
+    letter-spacing: 1.12px;
+
+  }
+}
+
 .fixed-navigation {
   display: flex;
   position: fixed;
@@ -102,6 +144,9 @@
   align-items: center;
   background: white;
 
+  box-shadow: 0 -10px 20px 0 rgba(30, 31, 34, 0.05);
+
+
   .next-step {
     display: flex;
     padding: 12px;