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
Download Patch File Download Diff File Expand all files Collapse all files

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,8 +1,14 @@
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");
@@ -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>