Merge pull request #36 from Chamindu36/ts-dev-migration

Add styles and media queries to support mobile UIs and Making this a bit responsive UI.

src/App.js

@@ -9,6 +9,8 @@ import Shop from "./routes/shop/shop.component";
 import Checkout from "./routes/checkout/checkout.component";
 import Spinner from "./components/spinner/spinner.component";
 
+import { GlobalStyle } from "./global.styles";
+
 // import Home from "./routes/home/home.component";
 // import Authentication from "./routes/authentication/authentication.component";
 
@@ -29,6 +31,7 @@ const App = () => {
   //fallback is the component to be rendered while the lazy component is loading
   return (
     <Suspense fallback={<Spinner />}>
+      <GlobalStyle />
       <Routes>
         <Route path="/" element={<Navigation />}>
           <Route index element={<Home />} />

src/components/directory-item/directory-item.styles.tsx

@@ -70,4 +70,8 @@ export const DirectoryItemContainer = styled.div`
       opacity: 0.9;
     }
   }
+
+  @media screen and (max-width: 800px) {
+    height: 200px;
+  }
 `;

src/global.styles.js

@@ -0,0 +1,25 @@
+import { createGlobalStyle } from "styled-components";
+
+export const GlobalStyle = createGlobalStyle`
+    body {
+        margin: 0;
+        padding: 20px 40px;
+        font-family: 'Saira Condensed', sans-serif;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+    }
+
+    code {
+        font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+            monospace;
+    }
+
+    a {
+        text-decoration: none;
+        color: black;
+    }
+
+    * {
+        box-sizing: border-box;
+    }
+`;

src/index.js

@@ -9,7 +9,6 @@ import { Elements } from '@stripe/react-stripe-js';
 import { store, persistor } from './store/store';
 import { stripePromise } from './utils/stripe/stripe.utils';
 
-import './index.scss';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 

src/routes/navigation/navigation.styles.tsx

@@ -7,12 +7,23 @@ export const NavigationContainer = styled.div`
   display: flex;
   justify-content: space-between;
   margin-bottom: 25px;
+
+@media screen and (max-width: 800px) {
+    height: 200px;
+    padding: 10px 20px;
+    margin-bottom: 20px;
+  }
 `;
 
 export const LogoContainer = styled(Link)`
     height: 100 %;
     width: 70px;
     padding: 25px;
+
+    @media screen and (max-width: 800px) {
+        height: 50px;
+        padding: 0px;
+    }
 `;
 
 export const NavLinks = styled.div`
@@ -21,6 +32,10 @@ export const NavLinks = styled.div`
     display: flex;
     align - items: center;
     justify - content: flex - end;
+
+    @media screen and (max-width: 800px) {
+        width: 80%;
+    }
 `;
 
 export const NavLink = styled(Link)`