Fix icons page

Author: Blari

public/favicon.png

@@ -8,15 +8,19 @@
     />
     <meta
       name="description"
-      content="React Material Admin Full created by Flatlogic CRUD Generator"
+      content="React Material Admin Full"
     />
     <meta name="theme-color" content="#000000" />
     <meta name="referrer" content="no-referrer-when-downgrade" />
     <link
       rel="stylesheet"
       href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
     />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="favicon.png" sizes="16x16" type="image/png">
+    <link rel="icon" href="favicon.png" sizes="32x32" type="image/png">
+    <link rel="icon" href="favicon.png" sizes="48x48" type="image/png">
+    <link rel="icon" href="favicon.png" sizes="62x62" type="image/png">
+    <link rel="icon" href="favicon.png" sizes="80x80" type="image/png">
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/

public/index.html

@@ -1,18 +1,16 @@
-const hostApi =
-  process.env.NODE_ENV === 'development' ? 'http://localhost' : '';
-const portApi = process.env.NODE_ENV === 'development' ? 8080 : '';
+const hostApi = process.env.NODE_ENV === "development"
+  ? "http://localhost"
+  : "https://sing-generator-node.herokuapp.com";
+const portApi = process.env.NODE_ENV === "development" ? 8080 : "";
 const baseURLApi = `${hostApi}${portApi ? `:${portApi}` : ``}/api`;
-const redirectUrl =
-  process.env.NODE_ENV === 'development'
-    ? 'http://localhost:3000'
-    : 'https://flatlogic.github.io/react-material-admin-full';
+const redirectUrl = process.env.NODE_ENV === "development" ? "http://localhost:3000" : "https://flatlogic.github.io/react-material-admin-full";
 
 export default {
   hostApi,
   portApi,
   baseURLApi,
   redirectUrl,
-  remote: 'https://sing-generator-node.herokuapp.com',
+  remote: "https://sing-generator-node.herokuapp.com",
   isBackend: process.env.REACT_APP_BACKEND,
   auth: {
     email: '[email protected]',

src/config.js

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { Typography, Grid, Tabs, Tab, Paper } from "@mui/material";
 import * as Icons from "@mui/icons-material";
-
+import Widget from "../../components/Widget";
 // styles
 import useStyles from "./styles";
 
@@ -28,8 +28,8 @@ export default function IconsPage() {
           <Tab label="Font Awesome" classes={{ root: classes.tab }} />
         </Tabs>
         {activeTabId === 0 && (
-          <div>
-            <Grid container spacing={2} className="icon-list">
+          <Widget>
+            <Grid container spacing={2} className={classes.iconList}>
               <Grid
                 className={classes.materailIcon}
                 item
@@ -12442,12 +12442,12 @@ export default function IconsPage() {
                 </Typography>
               </Grid>
             </Grid>
-          </div>
+          </Widget>
         )}
 
         {activeTabId === 1 && (
-          <div>
-            <Grid container spacing={2} className="icon-list">
+          <Widget>
+            <Grid container spacing={2} className={classes.iconList}>
               <Grid
                 className={classes.materailIcon}
                 item
@@ -13613,7 +13613,7 @@ export default function IconsPage() {
                 </Typography>
               </Grid>
             </Grid>
-          </div>
+          </Widget>
         )}
       </Paper>
     </>

src/pages/icons/Icons.js

@@ -5,10 +5,12 @@ export default makeStyles(theme => ({
     fontWeight: 600
   },
   iconsBar: {
-    marginBottom: theme.spacing(4),
     borderBottom: "1px solid",
     borderBottomColor: theme.palette.text.hint + "80"
   },
+  iconList: {
+    paddingTop: theme.spacing(2),
+  },
   tab: {
     color: theme.palette.primary.light + "CC"
   },