Style(JSX) Added global styles & fonts

npm i modern-normalize

font-family: 'Roboto', sans-serif;

package.json

@@ -16,6 +16,7 @@
     "@reduxjs/toolkit": "^1.9.5",
     "@vitejs/plugin-react-swc": "^3.3.2",
     "formik": "^2.4.4",
+    "modern-normalize": "^2.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.15.0",

src/main.jsx

@@ -3,10 +3,12 @@ import { BrowserRouter } from 'react-router-dom';
 import ReactDOM from 'react-dom/client';
 import App from './App.jsx';
 import './index.css';
+import GlobalStyle from './styles/globalStyles.jsx';
 
 ReactDOM.createRoot(document.getElementById('root')).render(
   <React.StrictMode>
     <BrowserRouter basename="/power-pulse">
+      <GlobalStyle />
       <App />
     </BrowserRouter>
   </React.StrictMode>,

src/styles/container.jsx

@@ -0,0 +1,18 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+  width: 100%;
+  margin: 0 auto;
+
+  @media screen and (min-width: 375px) {
+    width: 375px;
+  }
+
+  @media screen and (min-width: 768px) {
+    width: 768px;
+  }
+
+  @media screen and (min-width: 1440px) {
+    width: 1440px;
+  }
+`;

src/styles/globalStyles.jsx

@@ -0,0 +1,87 @@
+import { createGlobalStyle } from 'styled-components';
+import 'modern-normalize';
+import RobotoRegular from '../fonts/Roboto-Regular.ttf';
+import RobotoMedium from '../fonts/Roboto-Medium.ttf';
+import RobotoBold from '../fonts/Roboto-Bold.ttf';
+
+const GlobalStyle = createGlobalStyle`
+
+    @font-face {
+        font-family: 'RobotoRegular';
+        src: local('RobotoRegular'),
+        url(${RobotoRegular}) format('truetype');
+        font-weight: 400;
+        font-style: normal;
+    }
+
+    @font-face {
+        font-family: 'RobotoMedium';
+        src: local('RobotoMedium'),
+        url(${RobotoMedium}) format('truetype');
+        font-weight: 500;
+        font-style: normal;
+    }
+
+    @font-face {
+        font-family: 'RobotoBold';
+        src: local('RobotoBold'),
+        url(${RobotoBold}) format('truetype');
+        font-weight: 700;
+        font-style: normal;
+    }
+
+    
+
+body {
+  margin: 0; 
+  padding: 0;
+  font-family: 'Roboto', sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: 'Roboto', sans-serif;
+}
+
+a {
+    text-decoration: none;
+    color: currentColor;
+  }
+
+p {
+    padding: 0;
+    margin: 0;
+}
+
+
+ul,
+ol {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: 0;
+  padding: 0;
+}
+
+img {
+  display: block;
+  max-width: 100%;
+  height: auto;
+}
+
+button {
+    cursor: pointer;
+    border: none;
+  }
+`;
+
+export default GlobalStyle;