Add darkmode

package.json

@@ -10,12 +10,15 @@
     "bootstrap": "^4.5.3",
     "discord-markdown": "^2.4.1",
     "node-fetch": "^2.6.1",
+    "node-sass": "^4.14.1",
     "react": "^17.0.1",
     "react-bootstrap": "^1.4.0",
     "react-dom": "^17.0.1",
     "react-icons": "^4.1.0",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.1",
+    "react-toggle": "^4.1.1",
+    "use-dark-mode": "^2.3.1",
     "web-vitals": "^0.2.4"
   },
   "scripts": {

src/App.css

@@ -1,38 +0,0 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}

src/App.js

@@ -4,7 +4,7 @@ import  * as BS from 'react-bootstrap'
 import { useForm } from "react-hook-form";
 import * as fetch from 'node-fetch';
 
-import './App.css';
+import './App.scss';
 import 'bootstrap/dist/css/bootstrap.min.css';
 import { FaLock } from "react-icons/fa";
 
@@ -79,12 +79,12 @@ export default function App() {
               { isSubmit && !localStorage.getItem('user') ? <BS.Alert variant="danger">Something went wrong, please try again.</BS.Alert> : ""}
               { isInvalid ? <BS.Alert variant="danger">Invalid token.</BS.Alert> : "" }
             <BS.Form.Row>
-                <BS.Col xs={12} md={10}>
+                <BS.Col xs={12} lg={10}>
                     <BS.Form.Label>Enter your token here. You can get your token by using <b>"pk;token"</b>.</BS.Form.Label>
                 </BS.Col>
             </BS.Form.Row>
             <BS.Form.Row>
-              <BS.Col xs={12} md={10}>
+              <BS.Col xs={12} lg={10}>
                 <BS.Form.Control required name="pkToken" type="text" ref={register} placeholder="token" />
               </BS.Col>
               <BS.Col>

src/App.scss

@@ -0,0 +1,3 @@
+@import "~bootstrap/scss/bootstrap";
+
+@import "Custom";

src/Components/MemberCard.js

@@ -9,13 +9,21 @@ export default function MemberCard(props) {
     const { toHTML } = require('discord-markdown');
 
     const [ desc, setDesc ] = useState("");
+    const [ color, setColor ] = useState("");
+
     const member = props.member;
 
     useEffect(() => {
         if (member.description) {
             setDesc(toHTML(member.description));
         } else setDesc("(no description)");
-    }, [member.description]);
+
+        if (member.color) {
+            setColor(member.color);
+        }
+        else setColor('transparent');
+
+    }, [member.description, member.color]);
 
     return (
        <> 
@@ -25,14 +33,14 @@ export default function MemberCard(props) {
         <BS.Image src={defaultAvatar} style={{width: 50, height: 50}} className="float-right" roundedCircle />}
         </BS.Accordion.Toggle>
         <BS.Accordion.Collapse eventKey={member.id}>
-            <BS.Card.Body>
+            <BS.Card.Body style={{'border-left': `5px solid #${color}` }}>
             <BS.Row>
-                <BS.Col xs={12} md={3}><b>ID:</b> {member.id}</BS.Col>
+                <BS.Col className="mb-lg-3" xs={12} lg={3}><b>ID:</b> {member.id}</BS.Col>
-                { member.display_name ? <BS.Col xs={12} md={3}><b>AKA: </b>{member.display_name}</BS.Col> : "" }
+                { member.display_name ? <BS.Col className="mb-lg-3" xs={12} lg={3}><b>AKA: </b>{member.display_name}</BS.Col> : "" }
-                { member.birthday ? <BS.Col xs={12} md={3}><b>Birthday:</b> {member.birthday}</BS.Col> : "" }
+                { member.birthday ? <BS.Col className="mb-lg-3" xs={12} lg={3}><b>Birthday:</b> {member.birthday}</BS.Col> : "" }
-                { member.pronouns ? <BS.Col xs={12} md={3}><b>Pronouns:</b> {member.pronouns}</BS.Col> : "" }
+                { member.pronouns ? <BS.Col className="mb-lg-3" xs={12} lg={3}><b>Pronouns:</b> {member.pronouns}</BS.Col> : "" }
+                { member.color ? <BS.Col className="mb-lg-3" xs={12} lg={3}><b>Color:</b> #{member.color}</BS.Col> : "" }
             </BS.Row>
-            <br/>
             <p><b>Description:</b></p>
             <p dangerouslySetInnerHTML={{__html: desc}}></p>
             </BS.Card.Body>

src/Components/Navigation.js

@@ -1,9 +1,15 @@
 import react from 'react';
 import * as BS from 'react-bootstrap'
+import useDarkMode from 'use-dark-mode';
+import Toggle from 'react-toggle'
+import { FaSun, FaMoon } from "react-icons/fa";
 
+import "react-toggle/style.css"
 
 export default function Navigation(props) {
         
+    const darkMode = useDarkMode(false);
+
     function logOut() {
         localStorage.removeItem("token");
         localStorage.removeItem("user");
@@ -11,12 +17,19 @@ export default function Navigation(props) {
     }
 
     return (
-        <BS.Navbar bg="light" className="mb-3 " expand="md">
+        <BS.Navbar className="mb-3 d-flex align-items-center justify-content-between light" expand="md">
             <BS.Navbar.Brand>
                 pk-web
             </BS.Navbar.Brand>
+            <BS.Nav className="mr-md-2">
+            <Toggle
+                defaultChecked={true}
+                icons={false}
+                onChange={darkMode.toggle} />
+                {darkMode.value ? <FaMoon className="m-1"/> : <FaSun className="m-1"/>}
+            </BS.Nav>
             <BS.Form inline>
-            { localStorage.getItem('token') ? <BS.Button className="float-right mr-md-2" variant="primary" onClick={logOut}>Log Out</BS.Button> : "" }
+            { localStorage.getItem('token') ? <BS.Button className=" mr-md-2" variant="primary" onClick={logOut}>Log Out</BS.Button> : "" }
             </BS.Form>
         </BS.Navbar>
     )

src/Components/System.js

@@ -26,11 +26,10 @@ export default function System(props) {
                </BS.Card.Header>
                <BS.Card.Body>
                <BS.Row>
-                    <BS.Col xs={12} md={4}><b>ID:</b> {user.id}</BS.Col>
+                    <BS.Col className="mb-lg-3" xs={12} lg={3}><b>ID:</b> {user.id}</BS.Col>
-                    <BS.Col xs={12} md={4}><b>Tag:</b> {user.tag}</BS.Col>
+                    <BS.Col className="mb-lg-3" xs={12} lg={3}><b>Tag:</b> {user.tag}</BS.Col>
-                    <BS.Col xs={12} md={4}><b>Timezone:</b> {user.tz}</BS.Col>
+                    <BS.Col className="mb-lg-3" xs={12} lg={3}><b>Timezone:</b> {user.tz}</BS.Col>
                 </BS.Row>
-                <br/>
                 <p><b>Description:</b></p>
                 <p dangerouslySetInnerHTML={{__html: desc}}></p>
                 </BS.Card.Body>

src/Custom.scss

@@ -0,0 +1,60 @@
+.dark-mode {
+    background-color: $gray-800;
+    transition: background-color 0.3s ease;
+  }
+
+  .dark-mode .card  {
+    color: $white;
+    background-color: $gray-800;
+    border: 1px solid $gray-900 !important;
+    transition: background-color 0.3s ease;
+  }
+  
+  .dark-mode .card-body  {
+    color: $white;
+    background-color: $gray-800;
+    transition: background-color 0.3s ease;
+  }
+
+  .dark-mode .card .card-header {
+    color: $gray-100;
+    background-color: $gray-900;
+    transition: background-color 0.3s ease;
+  }
+  
+  .navbar-light {
+    background-color: $gray-100;
+  }
+
+  .dark-mode .navbar-light {
+    color: $gray-100;
+    background-color: $gray-900;
+    transition: background-color 0.3s ease;
+  }
+
+  .dark-mode .navbar-brand {
+    color: $gray-100 !important;
+  }
+
+  .dark-mode .form-control {
+    color: $gray-100;
+    border-color: #000000;
+    background-color: $gray-900;
+    transition: background-color 0.3s ease;
+  }
+
+  .dark-mode .form-control:focus {
+    color: $gray-200;
+    border-color: #000000;
+    background-color: $gray-900;
+    transition: background-color 0.3s ease;
+  }
+
+  .dark-mode .alert-danger {
+    color: $white;
+    background-color: $red;
+    border: $gray-900;
+    transition: background-color 0.3s ease;
+  }
+
+  @import "~bootstrap/scss/bootstrap";