Formatting

SamHillierDev · Aug 2, 2024 · 88e6d22 · 88e6d22
1 parent 25617de
commit 88e6d22
Show file tree

Hide file tree

Showing 15 changed files with 792 additions and 456 deletions.
diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-# ENJindex, explore NFTs and crypto collectibles.
+# ENJindex, explore NFTs and crypto collectibles
 
 <div align="center">
     <img src="frontend/src/assets/images/ntuLogoTitle.webp" alt="Nottingham Trent University Logo" width="250">

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -1,11 +1,11 @@
-import './App.css';
-import { useState, useMemo } from 'react';
-import PriceTracker from './components/PriceTracker';
-import Nav from './components/Nav';
-import Footer from './components/Footer';
-import Card from './components/Card';
-import tokens from './tokens';
-import TokenModal from './components/TokenModal';
+import "./App.css";
+import { useState, useMemo } from "react";
+import PriceTracker from "./components/PriceTracker";
+import Nav from "./components/Nav";
+import Footer from "./components/Footer";
+import Card from "./components/Card";
+import tokens from "./tokens";
+import TokenModal from "./components/TokenModal";
 
 interface Token {
   name: string;
@@ -17,8 +17,8 @@ interface Token {
 }
 
 const App = () => {
-  const [currentFilter, setCurrentFilter] = useState<string>('All');
-  const [searchQuery, setSearchQuery] = useState<string>('');
+  const [currentFilter, setCurrentFilter] = useState<string>("All");
+  const [searchQuery, setSearchQuery] = useState<string>("");
   const [selectedToken, setSelectedToken] = useState<Token | null>(null);
 
   const handleFilterChange = (filterName: string) => {
@@ -31,12 +31,13 @@ const App = () => {
 
   const filteredTokens = useMemo(() => {
     let result = tokens.filter((token: Token) => {
-      return currentFilter === 'All' || token.type === currentFilter;
+      return currentFilter === "All" || token.type === currentFilter;
     });
     if (searchQuery) {
-      result = result.filter((token: Token) =>
-        token.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
-        token.collection.toLowerCase().includes(searchQuery.toLowerCase())
+      result = result.filter(
+        (token: Token) =>
+          token.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+          token.collection.toLowerCase().includes(searchQuery.toLowerCase())
       );
     }
     return result;
@@ -56,7 +57,10 @@ const App = () => {
         <h1>Explore Tokens</h1>
         <PriceTracker />
       </header>
-      <Nav onNavLinkClick={handleFilterChange} onSearchChange={handleSearchChange} />
+      <Nav
+        onNavLinkClick={handleFilterChange}
+        onSearchChange={handleSearchChange}
+      />
       <section className="cardContainer">
         {filteredTokens.length > 0 ? (
           filteredTokens.map((token: Token) => (
@@ -77,7 +81,11 @@ const App = () => {
         )}
       </section>
       {selectedToken && (
-        <TokenModal isOpen={!!selectedToken} onClose={closeModal} token={selectedToken} />
+        <TokenModal
+          isOpen={!!selectedToken}
+          onClose={closeModal}
+          token={selectedToken}
+        />
       )}
       <Footer />
     </section>

diff --git a/frontend/src/components/Card.module.css b/frontend/src/components/Card.module.css
@@ -1,102 +1,110 @@
 .card {
-    display: flex;
-    width: 300px;
-    height: 400px;
-    box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.25);
-    border-radius: 10px;
-    padding: 16px;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-    text-align: center;
-    background-image: radial-gradient(circle at center, #48555A 0%, #383D40 100%);
-    flex-direction: column;
-    align-items: center;
-    overflow: hidden;
-    transition: transform 0.5s ease, background-color 0.1s ease, box-shadow 0.1s ease;
+  display: flex;
+  width: 300px;
+  height: 400px;
+  box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.25);
+  border-radius: 10px;
+  padding: 16px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  text-align: center;
+  background-image: radial-gradient(circle at center, #48555a 0%, #383d40 100%);
+  flex-direction: column;
+  align-items: center;
+  overflow: hidden;
+  transition: transform 0.5s ease, background-color 0.1s ease,
+    box-shadow 0.1s ease;
 }
 
 .card:hover {
-    background-image: radial-gradient(circle at center, #4F6267 0%, #383c3f 100%);
-    transform: scale(1.02);
-    cursor: pointer;
-    box-shadow: 0 0 5px 2px hsl(var(--text2));
+  background-image: radial-gradient(circle at center, #4f6267 0%, #383c3f 100%);
+  transform: scale(1.02);
+  cursor: pointer;
+  box-shadow: 0 0 5px 2px hsl(var(--text2));
 }
 
 .card:active {
-    background-image: radial-gradient(circle at center, #48555A 0%, #383D40 100%);
-    transform: scale(1.00);
+  background-image: radial-gradient(circle at center, #48555a 0%, #383d40 100%);
+  transform: scale(1);
 }
 
-.card h3, .card h4, .card p {
-    flex-shrink: 0;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    width: 100%;
-    box-sizing: border-box;
+.card h3,
+.card h4,
+.card p {
+  flex-shrink: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 100%;
+  box-sizing: border-box;
 }
 
 .card h3 {
-    color: white;
-    font-size: 18px;
-    min-height: 24px;
-    transition: color 0.1s ease, text-shadow 0.1s ease;
+  color: white;
+  font-size: 18px;
+  min-height: 24px;
+  transition: color 0.1s ease, text-shadow 0.1s ease;
 }
 
 .card:hover h3 {
-    color: hsl(var(--text2));
-    text-shadow: 1px 1px 8px rgba(0, 0, 0, 0.25);
+  color: hsl(var(--text2));
+  text-shadow: 1px 1px 8px rgba(0, 0, 0, 0.25);
 }
 
 .card:active h3 {
-    color: #fff;
-    text-shadow: 0 0 8px hsl(var(--text3));
+  color: #fff;
+  text-shadow: 0 0 8px hsl(var(--text3));
 }
 
 .card h4 {
-    margin-bottom: 8px;
-    font-size: 14px;
-    color: #919292;
+  margin-bottom: 8px;
+  font-size: 14px;
+  color: #919292;
 }
 
 .card p {
-    color: white;
-    margin-bottom: 10px;
-    width: 100%;
-    min-height: 22px;
-    font-size: 16px;
-    background-image: radial-gradient(circle at center, #7569B5 0%, #8376D8 50%, #6258A4 100%);
-    border-radius: 50px;
-    padding: 5px 0;
+  color: white;
+  margin-bottom: 10px;
+  width: 100%;
+  min-height: 22px;
+  font-size: 16px;
+  background-image: radial-gradient(
+    circle at center,
+    #7569b5 0%,
+    #8376d8 50%,
+    #6258a4 100%
+  );
+  border-radius: 50px;
+  padding: 5px 0;
 }
 
 .card img {
-    width: 100%;
-    height: 275px;
-    border-radius: 10px;
-    object-fit: cover;
-    object-position: center;
+  width: 100%;
+  height: 275px;
+  border-radius: 10px;
+  object-fit: cover;
+  object-position: center;
 }
 
 /* Media Queries */
 @media (max-width: 768px) {
-    .card {
-        width: 250px;
-        height: 350px;
-    }
+  .card {
+    width: 250px;
+    height: 350px;
+  }
+
+  .card h3 {
+    font-size: 16px;
+  }
 
-    .card h3 {
-        font-size: 16px;
-    }
+  .card h4 {
+    font-size: 14px;
+  }
 
-    .card h4 {
-        font-size: 14px;
-    }
-
-    .card p {
-        font-size: 14px;
-    }
+  .card p {
+    font-size: 14px;
+  }
 
-    .card img {
-        height: 225px;
-    }
-}
+  .card img {
+    height: 225px;
+  }
+}
diff --git a/frontend/src/components/Card.tsx b/frontend/src/components/Card.tsx
@@ -1,4 +1,4 @@
-import styles from './Card.module.css';
+import styles from "./Card.module.css";
 
 interface CardProps {
   name: string;
@@ -10,7 +10,14 @@ interface CardProps {
   onCardClick: (token: any) => void;
 }
 
-function Card({ name, collection, type, imageUrl, link, onCardClick }: CardProps) {
+function Card({
+  name,
+  collection,
+  type,
+  imageUrl,
+  link,
+  onCardClick,
+}: CardProps) {
   const handleClick = () => {
     const token = { name, collection, type, imageUrl, link };
     onCardClick(token);

diff --git a/frontend/src/components/Footer.module.css b/frontend/src/components/Footer.module.css
@@ -1,56 +1,56 @@
 footer {
-    width: 100%;
-    padding: 10px;
-    border-radius: 10px;
+  width: 100%;
+  padding: 10px;
+  border-radius: 10px;
 }
 
 .footerContainer {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 }
 
 .footerContainer:first-of-type {
-    margin-bottom: 12px;
+  margin-bottom: 12px;
 }
 
 /* Footer Logo */
 .footerLogo img {
-    max-height: 30px;
+  max-height: 30px;
 }
 
 /* Footer Page Links */
 .footerContainer ul {
-    display: flex;
-    list-style: none;
-    flex-wrap: wrap;
-    gap: var(--space-lg);
+  display: flex;
+  list-style: none;
+  flex-wrap: wrap;
+  gap: var(--space-lg);
 }
 
 /* Footer Social Media Links */
 .footerSocial {
-    font-size: var(--fs-300);
+  font-size: var(--fs-300);
 }
 
 /* Footer Copyright */
 .footerLegal {
-    color: #707070;
+  color: #707070;
 }
 
 /* Media Queries */
 @media (max-width: 768px) {
-    footer {
-        padding: 20px;
-        font-size: var(--fs-100);
-    }
-    
-    .footerContainer {
-        flex-direction: column;
-        gap: var(--space-md);
-    }
-
-    .footerContainer ul {
-        justify-content: center;
-        gap: var(--space-md);
-    }
+  footer {
+    padding: 20px;
+    font-size: var(--fs-100);
+  }
+
+  .footerContainer {
+    flex-direction: column;
+    gap: var(--space-md);
+  }
+
+  .footerContainer ul {
+    justify-content: center;
+    gap: var(--space-md);
+  }
 }