change in css

Author: vivek-gofynd

App.jsx

@@ -1,10 +1,68 @@
 import React from "react";
 import { Home } from "./pages/Home";
+
+const globalStyles = `
+  html {
+    height: 100%;
+    width: 100%;
+    font-size: 8px;
+  }
+
+  body {
+    margin: 0;
+    font-family: 'Inter', sans-serif;
+    background-color: #f8f8f8 !important;
+    width: 100%;
+    height: 100%;
+    -webkit-font-smoothing: antialiased;
+  }
+
+  .root {
+    font-family: 'Inter', sans-serif;
+  }
+
+  /* Common utility classes */
+  .flex-column {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .flex-row {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 10px;
+  }
+
+  .mr-r-12 {
+    margin-right: 12px;
+  }
+
+  .cl-RoyalBlue {
+    color: #2e31be;
+    margin-left: 2px;
+  }
+
+  .loader {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .loader img {
+    height: 100px;
+  }
+`;
+
 function App() {
   return (
-    <div className="root">
-      <Home />
-    </div>
+    <>
+      <style>{globalStyles}</style>
+      <div className="root">
+        <Home />
+      </div>
+    </>
   );
 }
 

pages/style/home.css

@@ -10,13 +10,12 @@ body {
   background-color: #f8f8f8 !important;
   width: 100%;
   height: 100%;
-  @media @mobile {
+  @media (max-width: 768px) {
     -webkit-tap-highlight-color: transparent;
   }
 }
 
 .products-container {
-  font-family: Inter;
   position: relative;
   box-sizing: border-box;
   background: #fff;
@@ -48,9 +47,10 @@ body {
 .section .heading a {
   text-decoration: none;
   color: #2e31be;
-  &:hover {
-    text-decoration: underline;
-  }
+}
+
+.section .heading a:hover {
+  text-decoration: underline;
 }
 
 .section .description {
@@ -63,30 +63,13 @@ body {
 .product-list-container {
   display: flex;
   border: 1px solid #e4e5e6;
-  -webkit-font-smoothing: antialiased;
   min-height: 102px;
   padding: 16px;
   border-radius: 4px;
   margin-bottom: 16px;
   box-sizing: border-box;
 }
 
-.flex-column {
-  display: flex;
-  flex-direction: column;
-}
-
-.flex-row {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: 10px;
-}
-
-.mr-r-12 {
-  margin-right: 12px;
-}
-
 .card-avatar {
   min-height: 60px;
   min-width: 60px;
@@ -103,11 +86,6 @@ body {
   border-radius: 50%;
 }
 
-.flex-column {
-  display: flex;
-  flex-direction: column;
-}
-
 .product-name {
   font-weight: 600;
   font-size: 14px;
@@ -131,9 +109,10 @@ body {
   gap: 2px;
 }
 
-.product-category{
+.product-category {
   font-size: 12px;
 }
+
 .cl-RoyalBlue {
   color: #2e31be;
   margin-left: 2px;