Merge pull request #2 from TrevisfoX/dev

update: styles and protection
TrevisfoX · Sep 16, 2022 · 6d9f5ea · 6d9f5ea
2 parents b7b0a31 + 99db218
commit 6d9f5ea
Show file tree

Hide file tree

Showing 18 changed files with 172 additions and 815 deletions.
diff --git a/.gitignore b/.gitignore
@@ -5,7 +5,7 @@
 /.pnp
 .pnp.js
 node_modules
-
+.env
 # testing
 /coverage
 

diff --git a/package.json b/package.json
@@ -3,7 +3,6 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@ant-design/icons": "^4.7.0",
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",
     "@mui/icons-material": "^5.10.3",
@@ -13,9 +12,9 @@
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^13.0.0",
     "@testing-library/user-event": "^13.2.1",
-    "antd": "^4.23.0",
     "axios": "^0.27.2",
     "chart.js": "^3.9.1",
+    "dotenv": "^16.0.2",
     "html-react-parser": "^3.0.4",
     "millify": "^5.0.0",
     "moment": "^2.29.4",

diff --git a/public/index.html b/public/index.html
@@ -2,8 +2,8 @@
 <html lang="en">
 	<head>
 		<meta charset="utf-8" />
-
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<link rel="shortcut icon" href="./logo.svg" type="image/x-icon" />
 		<meta name="theme-color" content="#000000" />
 		<meta
 			name="description"

diff --git a/public/logo.svg b/public/logo.svg
diff --git a/public/manifest.json b/public/manifest.json
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,5 +1,4 @@
 import React from "react";
-import "./App.scss";
 import { Route, Routes } from "react-router-dom";
 import { Container } from "@mui/system";
 import Navbar from "./components/Navigation/Navbar";
@@ -17,24 +16,22 @@ function App() {
 			</header>
 			<main>
 				<Container>
-					<div className="rotes">
-						<Routes>
-							<Route path="/" element={<Homepage />}></Route>
-							<Route
-								path="/favorites"
-								element={<Favorites />}
-							></Route>
-							<Route
-								path="/cryptocurrencies"
-								element={<Cryptocurrencies />}
-							></Route>
-							<Route
-								path="/crypto/:coinId"
-								element={<CryptoDetails />}
-							></Route>
-							<Route path="/news" element={<News />}></Route>
-						</Routes>
-					</div>
+					<Routes>
+						<Route path="/" element={<Homepage />}></Route>
+						<Route
+							path="/favorites"
+							element={<Favorites />}
+						></Route>
+						<Route
+							path="/cryptocurrencies"
+							element={<Cryptocurrencies />}
+						></Route>
+						<Route
+							path="/crypto/:coinId"
+							element={<CryptoDetails />}
+						></Route>
+						<Route path="/news" element={<News />}></Route>
+					</Routes>
 				</Container>
 			</main>
 		</div>

diff --git a/src/App.scss b/src/App.scss
diff --git a/src/app/store.js → src/app/store.jsx b/src/app/store.js → src/app/store.jsx
diff --git a/src/assets/image/cryptocurrency.png b/src/assets/image/cryptocurrency.png
diff --git a/src/components/Chart/LineChart.jsx b/src/components/Chart/LineChart.jsx
@@ -1,6 +1,5 @@
 import React from "react";
 import { Line } from "react-chartjs-2";
-import { Col, Row, Typography } from "antd";
 import {
 	Chart,
 	LineController,
@@ -9,8 +8,13 @@ import {
 	LinearScale,
 	CategoryScale,
 } from "chart.js";
-
-const { Title } = Typography;
+import {
+	TableCell,
+	TableContainer,
+	TableRow,
+	Typography,
+	Table,
+} from "@mui/material";
 
 const LineChart = ({ coinHistory, currentPrice, coinName }) => {
 	Chart.register(
@@ -22,11 +26,9 @@ const LineChart = ({ coinHistory, currentPrice, coinName }) => {
 	);
 	const coinPrice = [];
 	const coinTimestamp = [];
-
 	for (let i = 0; i < coinHistory?.data?.history?.length; i += 1) {
 		coinPrice.push(coinHistory?.data?.history[i].price);
 	}
-
 	for (let i = 0; i < coinHistory?.data?.history?.length; i += 1) {
 		coinTimestamp.push(
 			//Incorrect time data in API
@@ -36,7 +38,6 @@ const LineChart = ({ coinHistory, currentPrice, coinName }) => {
 			new Date().toLocaleDateString()
 		);
 	}
-
 	const data = {
 		labels: coinTimestamp,
 		datasets: [
@@ -49,7 +50,6 @@ const LineChart = ({ coinHistory, currentPrice, coinName }) => {
 			},
 		],
 	};
-
 	const options = {
 		scales: {
 			y: [
@@ -64,19 +64,21 @@ const LineChart = ({ coinHistory, currentPrice, coinName }) => {
 
 	return (
 		<>
-			<Row className="chart-header">
-				<Title level={2} className="chart-title">
-					{coinName} Price Chart{" "}
-				</Title>
-				<Col className="price-container">
-					<Title level={5} className="price-change">
-						Change: {coinHistory?.data?.change}%
-					</Title>
-					<Title level={5} className="current-price">
-						Current {coinName} Price: $ {currentPrice}
-					</Title>
-				</Col>
-			</Row>
+			<TableContainer>
+				<Table>
+					<TableRow>
+						<Typography>{coinName} Price Chart </Typography>
+						<TableCell>
+							<Typography>
+								Change: {coinHistory?.data?.change}%
+							</Typography>
+							<Typography>
+								Current {coinName} Price: $ {currentPrice}
+							</Typography>
+						</TableCell>
+					</TableRow>
+				</Table>
+			</TableContainer>
 			<Line data={data} options={options} />
 		</>
 	);