UI fix

replyre · replyre · commit 3ad1b9988ea6 · 2023-10-12T17:37:30.000+05:30
diff --git a/.gitignore b/.gitignore
@@ -3,7 +3,8 @@
 # dependencies
 /node_modules
 /.pnp
-.pnp.js
+/.pnp.js
+
 
 # testing
 /coverage
diff --git a/public/crypto.png b/public/crypto.png
diff --git a/public/index.html b/public/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="./crypto.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta
@@ -24,7 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>Crypto Provider</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
diff --git a/src/App.js b/src/App.js
@@ -3,12 +3,6 @@ import "./App.css";
 import Header from "./components/Header";
 import Homepage from "./pages/Homepage";
 import Coinpage from "./pages/Coinpage";
-import {
-  Container,
-  createTheme,
-  makeStyles,
-  ThemeProvider,
-} from "@material-ui/core";
 
 function App() {
   const styles = {
@@ -19,7 +13,7 @@ function App() {
     },
   };
   return (
-    <BrowserRouter basename="/">
+    <BrowserRouter basename="">
       <div style={styles.App}>
         <Header />
         <Routes>
diff --git a/src/components/CoinInformation.js b/src/components/CoinInformation.js
@@ -2,7 +2,6 @@ import React, { useEffect, useState } from "react";
 import { CryptoState } from "../pages/CrptoCoins";
 import axios from "axios";
 import { HistoricalChart } from "../config/api";
-import { ThemeProvider } from "react-bootstrap";
 import { CircularProgress, createTheme } from "@mui/material";
 import "./CoinInformation.css";
 import {
diff --git a/src/pages/CoinsTable.js b/src/pages/CoinsTable.js
@@ -67,7 +67,10 @@ const CoinsTable = () => {
   return (
     <ThemeProvider theme={darkTheme}>
       <Container sx={{ textAlign: "center" }}>
-        <Typography variant="h4" sx={{ margin: 8, fontFamily: "monospace" }}>
+        <Typography
+          variant="h4"
+          sx={{ margin: "8px auto ", fontFamily: "monospace" }}
+        >
           Cryptocurrency Prices as per Market Cap
         </Typography>
 
@@ -174,9 +177,10 @@ const CoinsTable = () => {
         </TableContainer>
         <Pagination
           sx={{
-            padding: 2,
+            paddingY: 2,
             width: "100%",
             display: "flex",
+            flexWrap: "wrap",
             justifyContent: "center",
             "& .MuiPaginationItem-root": {
               color: "orange",
