liz/PluralKit
liz/PluralKit
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add darkmode

Browse Source
This commit is contained in:
Spectralitree 2020-12-09 17:45:11 +01:00
parent 18ee1a14ae
commit bc13cced34
10 changed files with 898 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.eslintcache
View File

File diff suppressed because one or more lines are too long

796
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

3
package.json
View File

@ -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": {

38
src/App.css
View File

@ -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);
}
}

6
src/App.js
View File

@ -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>

3
src/App.scss Normal file
View File

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

22
src/Components/MemberCard.js
View File

@ -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>
{ member.display_name ? <BS.Col xs={12} md={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.pronouns ? <BS.Col xs={12} md={3}><b>Pronouns:</b> {member.pronouns}</BS.Col> : "" }
<BS.Col className="mb-lg-3" xs={12} lg={3}><b>ID:</b> {member.id}</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 className="mb-lg-3" xs={12} lg={3}><b>Birthday:</b> {member.birthday}</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>

17
src/Components/Navigation.js
View File

@ -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>
)

7
src/Components/System.js
View File

@ -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 xs={12} md={4}><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>ID:</b> {user.id}</BS.Col>
<BS.Col className="mb-lg-3" xs={12} lg={3}><b>Tag:</b> {user.tag}</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>

60
src/Custom.scss Normal file
View File

@ -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";