fix: page design issues

Author: sanjam-deriv

src/features/Home/Benefits/Benefits.module.scss

@@ -12,17 +12,19 @@
     width: 100%;
     flex-wrap: nowrap;
     margin-bottom: rem(6.4);
-    gap: rem(3);
+    gap: rem(20);
     display: flex;
-    justify-content: space-evenly;
+    justify-content: center;
     padding: 0 rem(1);
 
     @media screen and (max-width: 992px) {
       margin-top: rem(3);
+      gap: rem(8.8);
     }
 
     @media screen and (max-width: 425px) {
       flex-direction: column;
+      gap: rem(3);
     }
   }
 
@@ -39,10 +41,6 @@
       margin: rem(1.6) 0;
     }
 
-    img {
-      margin-bottom: rem(4);
-    }
-
     @media screen and (max-width: 992px) {
       flex-wrap: wrap;
       width: 90%;

src/features/Home/Benefits/__tests__/Benefits.test.tsx

@@ -23,7 +23,7 @@ describe('Benefits', () => {
     expect(execution).toBeInTheDocument();
   });
   it('should render personalize your trading information', () => {
-    const title = screen.getByText(/Personalize your trading$/i);
+    const title = screen.getByText(/Personalise your trading$/i);
     const information = screen.getByText(/create charts and views/i);
 
     expect(title).toBeInTheDocument();

src/styles/index.scss

@@ -29,7 +29,7 @@
   --ifm-menu-link-sublist-icon-2: url(/img/arrow_sidebar.svg);
   --ifm-menu-link-padding-vertical: 9px;
   --doc-sidebar-width: 283px !important;
-  --search-result: #FF9BA3;
+  --search-result: #ff9ba3;
   --schema-string: #21d169;
   --schema-array: #ff8fc8;
   --schema-number: #acb2ff;
@@ -204,61 +204,61 @@ div[class*='sidebarViewport'] {
           z-index: 1;
         }
       }
-      &+ div[class*='searchBox'] {
-          position: fixed;
-          min-width: rem(32);
-          max-width: rem(79.2);
-          max-height: rem(48);
-          top: 5%;
-          width: 100%;
-          height: 100%;
-          border-radius: rem(1.6);
-          left: 50%;
-          transform: translateX(-50%);
-          padding: 0;
-          background-color: var(--ifm-color-white);
-          
-          @media (max-width: 768px) {
-            min-width: unset;
-            max-width: unset;
-            max-height: unset;
-            border-radius: unset;
-            top: 0;
-          }
+      & + div[class*='searchBox'] {
+        position: fixed;
+        min-width: rem(32);
+        max-width: rem(79.2);
+        max-height: rem(48);
+        top: 5%;
+        width: 100%;
+        height: 100%;
+        border-radius: rem(1.6);
+        left: 50%;
+        transform: translateX(-50%);
+        padding: 0;
+        background-color: var(--ifm-color-white);
+
+        @media (max-width: 768px) {
+          min-width: unset;
+          max-width: unset;
+          max-height: unset;
+          border-radius: unset;
+          top: 0;
+        }
 
-          span[class*='searchBar'] {
+        span[class*='searchBar'] {
+          width: 100%;
+          span[class*='dropdownMenu'] {
             width: 100%;
-            span[class*='dropdownMenu'] {
-              width: 100%;
-              max-width: unset;
-              background-color: unset;
+            max-width: unset;
+            background-color: unset;
+            box-shadow: none;
+            padding: 0;
+            div[class*='hitFooter'] a {
+              color: var(--colors-coral500);
+            }
+            div[class*='suggestion'] {
               box-shadow: none;
-              padding: 0;
-              div[class*='hitFooter'] a {
-                color: var(--colors-coral500);
+              border-radius: 0;
+              height: rem(4);
+              span[class*='hitAction'] {
+                display: none;
               }
-              div[class*='suggestion'] {
-                box-shadow: none;
-                border-radius: 0;
-                height: rem(4);
-                span[class*='hitAction'] {
-                  display: none;
-                }
-                span[class*='hitWrapper'] {
-                  span[class*='hitTitle'],
-                  span[class*='hitPath'] {
-                    text-align: left;
-                    mark {
-                      color: var(--colors-coral500);
-                    }
+              span[class*='hitWrapper'] {
+                span[class*='hitTitle'],
+                span[class*='hitPath'] {
+                  text-align: left;
+                  mark {
+                    color: var(--colors-coral500);
                   }
-                } 
-                &[class*='cursor'] {
-                  background-color: var(--search-result);
                 }
               }
+              &[class*='cursor'] {
+                background-color: var(--search-result);
+              }
             }
           }
+        }
         .navbar__search {
           margin: 0;
           margin-top: rem(2);
@@ -320,6 +320,10 @@ div[class*='sidebarViewport'] {
   }
 }
 
+.navbar__item {
+  padding: rem(0.4) rem(1.6) rem(0.4) rem(1.6);
+}
+
 main[class*='docMainContainer'] .container {
   padding-top: rem(4) !important; // Have to use important since docusaurus does the same.
   margin: 0 rem(4);