Collaborative-Content · jacobmakarsky · May 22, 2022
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,6 +3,9 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.1.1",
+    "@fortawesome/free-solid-svg-icons": "^6.1.1",
+    "@fortawesome/react-fontawesome": "^0.1.18",
     "@primitivefi/hardhat-marmite": "^0.0.4",
     "@remix-project/remixd": "^0.5.5",
     "@testing-library/jest-dom": "^5.16.1",
@@ -15,6 +18,7 @@
     "react-router-dom": "^6.2.1",
     "react-scripts": "5.0.0",
     "react-toastify": "^8.1.0",
+    "styled-components": "^5.3.5",
     "uuid": "^8.3.2",
     "web-vitals": "^1.1.2"
   },

diff --git a/public/index.html b/public/index.html
@@ -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>MintingPress</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/App.js b/src/App.js
@@ -1,41 +1,56 @@
 import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
+import "bootstrap/dist/css/bootstrap.min.css";
+import "react-toastify/dist/ReactToastify.css";
+import React from "react";
+import { ToastContainer } from "react-toastify";
+import StorySingle from "./components/StorySingle";
 import Navigate from "./components/NavBar";
+import Landing from "./pages/Landing";
 import Mint from "./pages/Mint";
 import List from "./pages/List";
 import SubmitPR from "./pages/SubmitPR";
 import Vote from "./pages/Vote";
 import Admin from "./pages/Admin";
-import "bootstrap/dist/css/bootstrap.min.css";
-import "react-toastify/dist/ReactToastify.css";
-import React from "react";
-import { ToastContainer } from "react-toastify";
-import StorySingle from "./components/StorySingle";
+import {ThemeProvider} from "styled-components";
+import { useDarkMode } from "./components/useDarkMode"
+import { GlobalStyles } from "./components/globalStyles";
+import { lightTheme, darkTheme } from "./components/Themes"
 
 function App() {
+  const [theme, themeToggler, mountedComponent] = useDarkMode();
+
+  const themeMode = theme === 'light' ? lightTheme : darkTheme;
 
+  if(!mountedComponent) return <div/>
   return (
-    <Router>
-      <div>
-        <Navigate />
-        <Routes>
-          <Route path="/" element={<List />}></Route>
-          <Route path="/mint" element={<Mint />}></Route>
-          <Route path="/list" element={<List />}></Route>
-          <Route path="/story/:id" element={<StorySingle />}></Route>
-          <Route path="/story/:id/submitPR" element={<SubmitPR />}></Route>
-          <Route path="/story/:id/:pr_id/vote" element={<Vote />}></Route>
-          <Route path="/admin" element={<Admin />}></Route>
-        </Routes>
-      </div>
-      <div>
-        <ToastContainer />
+    <ThemeProvider theme={themeMode}>
+      <>
+        <GlobalStyles/>
+
+        <Router>
+          <div>
+            <Navigate theme={theme} themeToggler={themeToggler}/>
+            <Routes>
+              <Route path="/" element={<Landing />}></Route>
+              <Route path="/mint" element={<Mint />}></Route>
+              <Route path="/list" element={<List />}></Route>
+              <Route path="/story/:id" element={<StorySingle />}></Route>
+              <Route path="/story/:id/submitPR" element={<SubmitPR />}></Route>
+              <Route path="/story/:id/:pr_id/vote" element={<Vote />}></Route>
+              <Route path="/admin" element={<Admin />}></Route>
+            </Routes>
+          </div>
+          <div>
+            <ToastContainer />
 
-        <hr></hr>
-        <p className="text-center">
-          Made with ❤️ by the MintingPress team.
-        </p>
-      </div>
-    </Router>
+            <hr></hr>
+            <p className="footerText text-center">
+              Made with ❤️ by the MintingPress team.
+            </p>
+          </div>
+        </Router>
+    </>
+  </ThemeProvider>
   );
 }
 

diff --git a/src/components/NavBar.js b/src/components/NavBar.js
@@ -1,7 +1,8 @@
 import "bootstrap/dist/css/bootstrap.min.css";
 import { Navbar, Container, Nav } from "react-bootstrap";
+import Toggle from "./Toggler";
 
-export default function Navigate() {
+export default function Navigate(props) {
   return (
     <Navbar
       bg="dark"
@@ -13,12 +14,12 @@ export default function Navigate() {
         <Navbar.Brand href="/">MintingPress</Navbar.Brand>
         <Navbar.Toggle aria-controls="basic-navbar-nav" />
         <Navbar.Collapse id="basic-navbar-nav">
-          <Nav className="me-auto">
-            <Nav.Link href="/mint">Mint Your Story</Nav.Link>
-            <Nav.Link href="/list">Stories List</Nav.Link>
-            <Nav.Link href="/vote">Vote on Stories</Nav.Link>
+          <Nav className="ms-auto">
+            <Nav.Link href="/mint">Mint Story</Nav.Link>
+            <Nav.Link href="/list">Stories</Nav.Link>
             <Nav.Link href="/admin">Admin Controls</Nav.Link>
           </Nav>
+          <Toggle theme={props.theme} toggleTheme={props.themeToggler} />
         </Navbar.Collapse>
       </Container>
     </Navbar>

diff --git a/src/components/StoryCard.js b/src/components/StoryCard.js
@@ -1,25 +1,26 @@
 import React from 'react';
-import { Container, Card, Nav } from 'react-bootstrap';
+import { Button, Card } from 'react-bootstrap';
 
 export default function StoryCard({ story }) {
 
   return (
-    <>
-      <div style={{ marginBottom: "20px", borderWidth: 10, borderColor: 'blue' }}>
-      <Container>
-      <Card>
+    <Card className='darkCard mb-4 shadow-sm'>
+      <Card.Header>{story.token_symbol}</Card.Header>
+
       <Card.Body>
-        <Card.Title>{story.token_symbol}</Card.Title>
         <Card.Text>
           {story.content}
         </Card.Text>
-        <Nav.Link href={"story/" + story.content_token_id}>
-          <a className="btn btn-primary">View Story</a>
-        </Nav.Link>
       </Card.Body>
+
+      <Card.Footer className="text-muted">
+          <Button 
+            variant="primary" 
+            href={"story/" + story.content_token_id}
+          >
+            View Story
+          </Button>
+      </Card.Footer>
     </Card>
-    </Container>
-    </div>
-    </>
   );
-}
+}
diff --git a/src/components/StorySingle.js b/src/components/StorySingle.js
@@ -1,7 +1,6 @@
 import React from 'react';
-import { Container, Card, Nav } from 'react-bootstrap';
-import { useHistory, useParams } from 'react-router-dom'
-import SubmitPR from '../pages/SubmitPR';
+import { Container, Card, Button } from 'react-bootstrap';
+import { useParams } from 'react-router-dom'
 import ViewPR from '../components/ViewPR';
 import { getSpecifiedContent, getPRsList } from '../utils/Contracts';
 
@@ -27,25 +26,32 @@ export default function StorySingle() {
   return (
     <>
       <div style={{ marginBottom: "20px", borderWidth: 10, borderColor: 'blue' }}>
+
       <Container>
-        <Card>
-        <Card.Body>
-          <Card.Title>{specifiedStory.token_symbol}</Card.Title>
-          <Card.Text>
-            {specifiedStory.content}
-          </Card.Text>
-          <Nav.Link href={id + "/submitPR"}>
-            <a className="btn btn-primary">Submit PR</a>
-          </Nav.Link>
-        </Card.Body>
+        <Card className='darkCard mb-4 shadow-sm'>
+          <Card.Header>{specifiedStory.token_symbol}</Card.Header>
+
+          <Card.Body>
+            <Card.Text>
+              {specifiedStory.content}
+            </Card.Text>
+          </Card.Body>
+
+          <Card.Footer className="text-muted">
+              <Button 
+                variant="primary" 
+                href={id + "/submitPR"}
+              >
+                Submit PR
+              </Button>
+          </Card.Footer>
         </Card>
       </Container>
+
       <Container>
         <ul>
           {PRsList.map(singlePR => (
-            <li key={singlePR.key}>
-              <ViewPR singlePR={singlePR} />
-            </li>
+            <ViewPR key={singlePR.key} singlePR={singlePR}/>
           ))}
         </ul>
       </Container>

diff --git a/src/components/Themes.js b/src/components/Themes.js
@@ -0,0 +1,18 @@
+export const lightTheme = {
+    body: '#FFFFFF',
+    text: '#363537',
+    toggleBorder: '#FFFFFF',
+    background: '#363537',
+    cardBackground: "", // leave as defaults
+    cardText: "",
+    footerText: "",
+}
+export const darkTheme = {
+    body: '#363537',
+    text: '#000000',
+    toggleBorder: '#6B8096',
+    background: '#999999',
+    cardBackground: "#505050 !important",
+    cardText: "#F7F7F7",
+    footerText: "FFFFFF",
+}
diff --git a/src/components/Toggler.js b/src/components/Toggler.js
@@ -0,0 +1,17 @@
+import React from 'react'
+import { func, string } from 'prop-types';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faCloudMoon, faSun } from '@fortawesome/free-solid-svg-icons'
+
+const Toggle = ({theme,  toggleTheme }) => {
+    return (
+        <FontAwesomeIcon icon={theme === 'light' ? faCloudMoon : faSun} onClick={toggleTheme} inverse/>
+    );
+};
+
+Toggle.propTypes = {
+    theme: string.isRequired,
+    toggleTheme: func.isRequired,
+}
+
+export default Toggle;
diff --git a/src/components/ViewPR.js b/src/components/ViewPR.js
@@ -1,7 +1,6 @@
 import React from 'react';
-import { Container, Card, Nav } from 'react-bootstrap';
-import { useHistory, useParams } from 'react-router-dom'
-import { getSpecifiedContent } from '../utils/Contracts';
+import { Card, Button } from 'react-bootstrap';
+import { useParams } from 'react-router-dom'
 
 export default function ViewPR({ singlePR }) {
 
@@ -10,25 +9,22 @@ export default function ViewPR({ singlePR }) {
   console.log("View PR component, PR details ", singlePR);
 
   return (
-    <>
-      <div style={{ marginBottom: "20px", borderWidth: 10, borderColor: 'blue' }}>
-      <Container>
-      <Card>
+    <Card className='darkCard mb-4 shadow-sm'>
+      <Card.Header>PR #{singlePR.index}</Card.Header>
+
       <Card.Body>
-        <Card.Title>{singlePR.index}</Card.Title>
-        <Card.Text>
-          {singlePR.content}
-        </Card.Text>
-        <Card.Text>
-          {singlePR.author}
-        </Card.Text>
-        <Nav.Link href={id + "/" + singlePR.index + "/vote"}>
-          <a className="btn btn-primary">Vote</a>
-        </Nav.Link>
+        <Card.Text className='mb-4'>{singlePR.content}</Card.Text>
+        <Card.Text>Author: {singlePR.author}</Card.Text>
       </Card.Body>
+
+      <Card.Footer className="text-muted">
+          <Button 
+            variant="primary" 
+            href={id + "/" + singlePR.index + "/vote"}
+          >
+            Vote
+          </Button>
+      </Card.Footer>
     </Card>
-    </Container>
-    </div>
-    </>
   );
 }
diff --git a/src/components/globalStyles.js b/src/components/globalStyles.js
@@ -0,0 +1,16 @@
+import { createGlobalStyle} from "styled-components"
+
+export const GlobalStyles = createGlobalStyle`
+  body {
+    background: ${({ theme }) => theme.body};
+    color: ${({ theme }) => theme.text};
+    font-family: Tahoma, Helvetica, Arial, Roboto, sans-serif;
+  }
+  .darkCard {
+    background: ${props => props.theme.cardBackground};
+    color: ${props => props.theme.cardText};
+  }
+  .footerText {
+    color: ${props => props.theme.cardText};
+  }
+  `
diff --git a/src/components/useDarkMode.js b/src/components/useDarkMode.js
@@ -0,0 +1,24 @@
+import { useEffect, useState } from 'react';
+
+export const useDarkMode = () => {
+    const [theme, setTheme] = useState('light');
+
+    const [mountedComponent, setMountedComponent] = useState(false)
+
+    const setMode = mode => {
+        window.localStorage.setItem('theme', mode)
+        setTheme(mode)
+    };
+
+    const themeToggler = () => {
+        theme === 'light' ? setMode('dark') : setMode('light')
+    };
+
+    useEffect(() => {
+        const localTheme = window.localStorage.getItem('theme');
+        localTheme ? setTheme(localTheme) : setMode('light')
+        setMountedComponent(true)
+    }, []);
+
+    return [theme, themeToggler, mountedComponent]
+};