Added roboto 2.0.3

Author: simmmpleweb

.gitignore

@@ -1,3 +1,4 @@
 node_modules
+yarn.lock
 package-lock.json
 build

CHANGELOG.md

@@ -1,5 +1,10 @@
 # Change Log
 
+## [2.0.3] 2022-09-08
+
+### Update v2.0.3
+
+- We deleted `fonts.js` and now you can change the fonts directly in `src/theme/styles.js`.
 ## [2.0.2] 2022-05-16
 
 ### Update v2.0.2

README.md

@@ -184,7 +184,6 @@ purity-ui-dashboard/
     │   │   └── drawer.js
     │   ├── foundations
     │   │   ├── breakpoints.js
-    │   │   ├── fonts.js
     │   │   └── text.js
     │   ├── styles.js
     │   └── theme.js

public/index.html

@@ -67,7 +67,10 @@
     <link
       href="https://fonts.googleapis.com/icon?family=Material+Icons"
       rel="stylesheet"
-    />
+    />    
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
     <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE"></script>
     <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
     <!--

src/theme/foundations/fonts.js

@@ -1,20 +1,20 @@
-import { mode } from "@chakra-ui/theme-tools";
+import { mode } from '@chakra-ui/theme-tools';
 
 export const globalStyles = {
-  colors: {
-    gray: {
-      700: "#1f2733",
-    },
-  },
-  styles: {
-    global: (props) => ({
-      body: {
-        bg: mode("gray.50", "gray.800")(props),
-        fontFamily: 'Helvetica, sans-serif'
-      },
-      html: {
-        fontFamily: 'Helvetica, sans-serif'
-      }
-    }),
-  },
+	colors: {
+		gray: {
+			700: '#1f2733'
+		}
+	},
+	styles: {
+		global: (props) => ({
+			body: {
+				bg: mode('gray.50', 'gray.800')(props),
+				fontFamily: "'Roboto', sans-serif"
+			},
+			html: {
+				fontFamily: "'Roboto', sans-serif"
+			}
+		})
+	}
 };

src/theme/styles.js

@@ -1,30 +1,28 @@
-import { extendTheme } from "@chakra-ui/react";
-import { globalStyles } from "./styles";
-import { font } from "./foundations/fonts";
-import { breakpoints } from "./foundations/breakpoints";
-import { buttonStyles } from "./components/button";
-import { badgeStyles } from "./components/badge";
-import { linkStyles } from "./components/link";
-import { drawerStyles } from "./components/drawer";
-import { CardComponent } from "./additions/card/Card";
-import { CardBodyComponent } from "./additions/card/CardBody";
-import { CardHeaderComponent } from "./additions/card/CardHeader";
-import { MainPanelComponent } from "./additions/layout/MainPanel";
-import { PanelContentComponent } from "./additions/layout/PanelContent";
-import { PanelContainerComponent } from "./additions/layout/PanelContainer";
+import { extendTheme } from '@chakra-ui/react';
+import { globalStyles } from './styles';
+import { breakpoints } from './foundations/breakpoints';
+import { buttonStyles } from './components/button';
+import { badgeStyles } from './components/badge';
+import { linkStyles } from './components/link';
+import { drawerStyles } from './components/drawer';
+import { CardComponent } from './additions/card/Card';
+import { CardBodyComponent } from './additions/card/CardBody';
+import { CardHeaderComponent } from './additions/card/CardHeader';
+import { MainPanelComponent } from './additions/layout/MainPanel';
+import { PanelContentComponent } from './additions/layout/PanelContent';
+import { PanelContainerComponent } from './additions/layout/PanelContainer';
 // import { mode } from "@chakra-ui/theme-tools";
 export default extendTheme(
-  { breakpoints }, // Breakpoints
-  globalStyles,
-  font, // Global styles
-  buttonStyles, // Button styles
-  badgeStyles, // Badge styles
-  linkStyles, // Link styles
-  drawerStyles, // Sidebar variant for Chakra's drawer
-  CardComponent, // Card component
-  CardBodyComponent, // Card Body component
-  CardHeaderComponent, // Card Header component
-  MainPanelComponent, // Main Panel component
-  PanelContentComponent, // Panel Content component
-  PanelContainerComponent // Panel Container component
+	{ breakpoints }, // Breakpoints
+	globalStyles,
+	buttonStyles, // Button styles
+	badgeStyles, // Badge styles
+	linkStyles, // Link styles
+	drawerStyles, // Sidebar variant for Chakra's drawer
+	CardComponent, // Card component
+	CardBodyComponent, // Card Body component
+	CardHeaderComponent, // Card Header component
+	MainPanelComponent, // Main Panel component
+	PanelContentComponent, // Panel Content component
+	PanelContainerComponent // Panel Container component
 );