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

yeet react-twemoji and use-dark-mode

Browse Source
This commit is contained in:
Spectralitree 2021-10-03 16:40:25 +02:00
parent 4968635298
commit af8b913ca8
11 changed files with 21605 additions and 299 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21788
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

6
package.json
View File

@ -1,7 +1,7 @@
{
"homepage": "https://pk-webs.spectralitree.com",
"name": "pk-web",
"version": "0.1.0",
"name": "pk-webs",
"version": "0.1.2",
"private": true,
"dependencies": {
"@hookform/resolvers": "^1.1.2",
@ -27,9 +27,7 @@
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.1",
"react-toggle": "^4.1.1",
"react-twemoji": "^0.3.0",
"reactjs-popup": "^2.0.4",
"use-dark-mode": "^2.3.1",
"web-vitals": "^0.2.4",
"yup": "^0.32.8"
},

3
src/App.js
View File

@ -16,6 +16,7 @@ import Template from './Pages/Template.js'
import Navbar from './Components/Navbar.js'
export default function App() {
const [isLoading, setIsLoading] = useState(false);
const [isSubmit, setIsSubmit] = useState(false);
const [isInvalid, setIsInvalid] = useState(false);
@ -24,7 +25,7 @@ export default function App() {
const forceUpdate = useCallback(() => updateState({}), []);
return (
<div className={ `contents ${localStorage.getItem('opendyslexic') ? "opendyslexic" : ""}`}>
<div className={ `contents ${localStorage.getItem('opendyslexic') ? "opendyslexic" : ""} ${localStorage.getItem("pk-darkmode") ? "dark-mode" : ""}`}>
<Router history={history}>
<Navbar forceUpdate={forceUpdate} setIsSubmit={setIsSubmit} />
<div className="content">

15
src/Components/Navbar.js
View File

@ -3,12 +3,17 @@ import React from 'react';
import * as BS from 'react-bootstrap'
import Toggle from 'react-toggle'
import { FaSun, FaMoon } from "react-icons/fa";
import useDarkMode from 'use-dark-mode';
import history from "../History.js";
const Navbar = ({ setIsSubmit, forceUpdate}) => {
const darkMode = useDarkMode(false);
function toggleDarkMode() {
if (localStorage.getItem("pk-darkmode"))
localStorage.removeItem("pk-darkmode");
else localStorage.setItem("pk-darkmode", "true");
forceUpdate();
};
function logOut() {
setIsSubmit(false);
@ -16,7 +21,7 @@ const Navbar = ({ setIsSubmit, forceUpdate}) => {
localStorage.removeItem("user");
history.push("/");
forceUpdate();
}
};
return(
<BS.Navbar className="mb-5 align-items-center">
@ -36,8 +41,8 @@ const Navbar = ({ setIsSubmit, forceUpdate}) => {
<Toggle
defaultChecked={true}
icons={false}
onChange={darkMode.toggle} />
{darkMode.value ? <FaMoon className="m-1"/> : <FaSun className="m-1"/>}
onClick={() => toggleDarkMode()} />
{localStorage.getItem("pk-darkmode") ? <FaMoon className="m-1"/> : <FaSun className="m-1"/>}
</BS.Nav>
</BS.Navbar>
);

13
src/Components/Private/MemberCard.js
View File

@ -7,7 +7,7 @@ import Popup from 'reactjs-popup';
import 'reactjs-popup/dist/index.css';
import autosize from 'autosize';
import LazyLoad from 'react-lazyload';
import Twemoji from 'react-twemoji';
import twemoji from 'twemoji';
import API_URL from "../../Constants/constants.js";
@ -297,14 +297,13 @@ export default function MemberCard(props) {
<>
<BS.Row>
<BS.Col className="mb-lg-3" xs={12} lg={3}><b>ID:</b> {member.id}</BS.Col>
{ member.display_name ? localStorage.getItem('twemoji') ? <BS.Col className="mb-lg-3" xs={12} lg={3}><Twemoji options={{ className: 'twemoji' }}><b>Display name: </b>{displayName}</Twemoji></BS.Col> :
<BS.Col className="mb-lg-3" xs={12} lg={3}><b>Display name:</b> {displayName}</BS.Col> : "" }
{ member.display_name ?
<BS.Col className="mb-lg-3" xs={12} lg={3}><b>Display name:</b> { localStorage.getItem("twemoji") ? <span dangerouslySetInnerHTML={{__html: twemoji.parse(displayName)}}></span> : <span dangerouslySetInnerHTML={{__html: displayName}}></span>}</BS.Col> : "" }
{ member.birthday ? <BS.Col className="mb-lg-3" xs={12} lg={3}><b>Birthday:</b> {birthday}</BS.Col> : "" }
{ member.pronouns ? localStorage.getItem('twemoji') ? <BS.Col className="mb-lg-3" xs={12} lg={3}><Twemoji options={{ className: 'twemoji' }}><b>Pronouns:</b> <span dangerouslySetInnerHTML={{__html: pronouns}}></span></Twemoji></BS.Col> :
<BS.Col className="mb-lg-3" xs={12} lg={3}><b>Pronouns:</b> <span dangerouslySetInnerHTML={{__html: pronouns}}></span></BS.Col> : "" }
{ member.pronouns ? <BS.Col className="mb-lg-3" xs={12} lg={3}><b>Pronouns:</b> { localStorage.getItem("twemoji") ? <span dangerouslySetInnerHTML={{__html: twemoji.parse(pronouns)}}></span> : <span dangerouslySetInnerHTML={{__html: pronouns}}></span>}</BS.Col> : "" }
{ member.color ? <BS.Col className="mb-lg-3" xs={12} lg={3}><b>Color:</b> {color}</BS.Col> : "" }
{ privacyView ? "" : proxyView ? "" : <BS.Col className="mb-lg-3" xs={12} lg={3}><b>Privacy:</b> <BS.Button variant="light" size="sm" onClick={() => setPrivacyView(true)}>View</BS.Button></BS.Col> }
{ privacyView ? "" : proxyView ? "" : <BS.Col className="mb-lg-3" xs={12} lg={3}><b>Proxy tags:</b> <BS.Button variant="light" size="sm" onClick={() => setProxyView(true)}>View</BS.Button></BS.Col> }
{ privacyView ? "" : proxyView ? "" : <BS.Col className="mb-lg-3" xs={12} lg={3}><b>Proxy tags:</b> <BS.Button variant="light" size="sm" onClick={() => setProxyView(true)}>View</BS.Button></BS.Col> }0
{ privacyView || proxyView || !member.banner ? "" :
<BS.Col className="mb-lg-3" xs={12} lg={3}>
<b>Banner:</b>{" "}
@ -428,7 +427,7 @@ export default function MemberCard(props) {
<BS.Button variant="light" onClick={() => setProxyView(false)}>Exit</BS.Button> <BS.Button variant="primary" onClick={() => setproxyEdit(true)}>Edit</BS.Button>
<hr/></> : "" }
<p><b>Description:</b></p>
{ localStorage.getItem('twemoji') ? <Twemoji options={{ className: 'twemoji' }}><p dangerouslySetInnerHTML={{__html: desc}}></p></Twemoji> : <p dangerouslySetInnerHTML={{__html: desc}}></p>}
{ localStorage.getItem("twemoji") ? <p dangerouslySetInnerHTML={{__html: twemoji.parse(desc)}}></p> : <p dangerouslySetInnerHTML={{__html: desc}}></p>}
{ !member.banner || !localStorage.getItem("bottombanners") ? "" :
<BS.Image rounded className="mb-2" style={{width: '100%', maxHeight: '15rem', objectFit: 'cover'}} src={banner}/>
}

10
src/Components/Private/MemberPage.js
View File

@ -6,7 +6,7 @@ import moment from 'moment';
import Popup from 'reactjs-popup';
import 'reactjs-popup/dist/index.css';
import autosize from 'autosize';
import Twemoji from 'react-twemoji';
import twemoji from 'twemoji';
import API_URL from "../../Constants/constants.js";
import history from "../../History.js";
@ -324,11 +324,9 @@ export default function MemberPage(props) {
<>
<BS.Row>
<BS.Col className="mb-lg-3" xs={12} lg={3}><b>ID:</b> {member.id}</BS.Col>
{ member.display_name ? localStorage.getItem('twemoji') ? <BS.Col className="mb-lg-3" xs={12} lg={3}><Twemoji options={{ className: 'twemoji' }}><b>Display name: </b>{displayName}</Twemoji></BS.Col> :
<BS.Col className="mb-lg-3" xs={12} lg={3}><b>Display name:</b> {displayName}</BS.Col> : "" }
{ member.display_name ? <BS.Col className="mb-lg-3" xs={12} lg={3}><b>Display name:</b> { localStorage.getItem("twemoji") ? <span dangerouslySetInnerHTML={{__html: twemoji.parse(displayName)}}></span> : <span dangerouslySetInnerHTML={{__html: displayName}}></span>}</BS.Col> : "" }
{ member.birthday ? <BS.Col className="mb-lg-3" xs={12} lg={3}><b>Birthday:</b> {birthday}</BS.Col> : "" }
{ member.pronouns ? localStorage.getItem('twemoji') ? <BS.Col className="mb-lg-3" xs={12} lg={3}><Twemoji options={{ className: 'twemoji' }}><b>Pronouns:</b> <span dangerouslySetInnerHTML={{__html: pronouns}}></span></Twemoji></BS.Col> :
<BS.Col className="mb-lg-3" xs={12} lg={3}><b>Pronouns:</b> <span dangerouslySetInnerHTML={{__html: pronouns}}></span></BS.Col> : "" }
{ member.pronouns ? <BS.Col className="mb-lg-3" xs={12} lg={3}><b>Pronouns:</b> { localStorage.getItem("twemoji") ? <span dangerouslySetInnerHTML={{__html: twemoji.parse(pronouns)}}></span> : <span dangerouslySetInnerHTML={{__html: pronouns}}></span>}</BS.Col> : "" }
{ member.color ? <BS.Col className="mb-lg-3" xs={12} lg={3}><b>Color:</b> {color}</BS.Col> : "" }
{ privacyView ? "" : proxyView ? "" : <BS.Col className="mb-lg-3" xs={12} lg={3}><b>Privacy:</b> <BS.Button variant="light" size="sm" onClick={() => setPrivacyView(true)}>View</BS.Button></BS.Col> }
{ privacyView ? "" : proxyView ? "" : <BS.Col className="mb-lg-3" xs={12} lg={3}><b>Proxy tags:</b> <BS.Button variant="light" size="sm" onClick={() => setProxyView(true)}>View</BS.Button></BS.Col> }
@ -455,7 +453,7 @@ export default function MemberPage(props) {
<BS.Button variant="light" onClick={() => setProxyView(false)}>Exit</BS.Button> <BS.Button variant="primary" onClick={() => setProxyMode(true)}>Edit</BS.Button>
<hr/></> : "" }
<p><b>Description:</b></p>
{ localStorage.getItem('twemoji') ? <Twemoji options={{ className: 'twemoji' }}><p dangerouslySetInnerHTML={{__html: desc}}></p></Twemoji> : <p dangerouslySetInnerHTML={{__html: desc}}></p>}
{ localStorage.getItem("twemoji") ? <p dangerouslySetInnerHTML={{__html: twemoji.parse(desc)}}></p> : <p dangerouslySetInnerHTML={{__html: desc}}></p>}
{ !member.banner || !localStorage.getItem("bottombanners") ? "" :
<BS.Image rounded className="mb-2" style={{width: '100%', maxHeight: '15rem', objectFit: 'cover'}} src={banner}/>
}

10
src/Components/Private/System.js
View File

@ -4,7 +4,7 @@ import { useRouteMatch } from "react-router-dom";
import autosize from "autosize";
import "moment-timezone";
import Popup from "reactjs-popup";
import Twemoji from "react-twemoji";
import twemoji from 'twemoji';
import history from "../../History.js";
import defaultAvatar from "../../default_discord_avatar.png";
@ -244,13 +244,7 @@ export default function System(props) {
<p>
<b>Description:</b>
</p>
{localStorage.getItem("twemoji") ? (
<Twemoji options={{ className: "twemoji" }}>
<p dangerouslySetInnerHTML={{ __html: desc }}></p>
</Twemoji>
) : (
<p dangerouslySetInnerHTML={{ __html: desc }}></p>
)}
{ localStorage.getItem("twemoji") ? <p dangerouslySetInnerHTML={{__html: twemoji.parse(desc)}}></p> : <p dangerouslySetInnerHTML={{__html: desc}}></p>}
{ !user.banner || !localStorage.getItem("bottombanners") ? "" :
<BS.Image rounded className="mb-2" style={{width: '100%', maxHeight: '15rem', objectFit: 'cover'}} src={banner}/>
}

5
src/Components/Public/Profile.js
View File

@ -3,8 +3,7 @@ import { useRouteMatch } from 'react-router-dom';
import { useParams } from 'react-router-dom';
import * as BS from 'react-bootstrap';
import Popup from 'reactjs-popup';
import Twemoji from 'react-twemoji';
import twemoji from 'twemoji';
import { FaAddressCard } from "react-icons/fa";
import defaultAvatar from '../../default_discord_avatar.png'
import Loading from "../Loading.js";
@ -121,7 +120,7 @@ export default function Profile () {
: "" }
</BS.Row>
<p><b>Description:</b></p>
{ localStorage.getItem('twemoji') ? <Twemoji options={{ className: 'twemoji' }}><p dangerouslySetInnerHTML={{__html: desc}}></p></Twemoji> : <p dangerouslySetInnerHTML={{__html: desc}}></p>}
{ localStorage.getItem("twemoji") ? <p dangerouslySetInnerHTML={{__html: twemoji.parse(desc)}}></p> : <p dangerouslySetInnerHTML={{__html: desc}}></p>}
{ !system.banner || !localStorage.getItem("bottombanners") ? "" :
<BS.Image rounded className="mb-2" style={{width: '100%', maxHeight: '15rem', objectFit: 'cover'}} src={banner}/>
}

10
src/Components/Public/ProfileCard.js
View File

@ -6,7 +6,7 @@ import Popup from 'reactjs-popup';
import 'reactjs-popup/dist/index.css';
import autosize from 'autosize';
import LazyLoad from 'react-lazyload';
import Twemoji from 'react-twemoji';
import twemoji from 'twemoji';
import defaultAvatar from '../../default_discord_avatar.png'
import { FaLink } from "react-icons/fa";
@ -88,11 +88,9 @@ export default function MemberCard(props) {
<BS.Card.Body style={{borderLeft: `5px solid #${color}` }}>
<BS.Row>
<BS.Col className="mb-lg-3" xs={12} lg={3}><b>ID:</b> {member.id}</BS.Col>
{ member.display_name ? localStorage.getItem('twemoji') ? <BS.Col className="mb-lg-3" xs={12} lg={3}><Twemoji options={{ className: 'twemoji' }}><b>Display name: </b>{displayName}</Twemoji></BS.Col> :
<BS.Col className="mb-lg-3" xs={12} lg={3}><b>Display name:</b> {displayName}</BS.Col> : "" }
{ member.display_name ? <BS.Col className="mb-lg-3" xs={12} lg={3}><b>Display name:</b> {displayName}</BS.Col> : "" }
{ member.birthday ? <BS.Col className="mb-lg-3" xs={12} lg={3}><b>Birthday:</b> {birthday}</BS.Col> : "" }
{ member.pronouns ? localStorage.getItem('twemoji') ? <BS.Col className="mb-lg-3" xs={12} lg={3}><Twemoji options={{ className: 'twemoji' }}><b>Pronouns:</b> <span dangerouslySetInnerHTML={{__html: pronouns}}></span></Twemoji></BS.Col> :
<BS.Col className="mb-lg-3" xs={12} lg={3}><b>Pronouns:</b> <span dangerouslySetInnerHTML={{__html: pronouns}}></span></BS.Col> : "" }
{ member.pronouns ? <BS.Col className="mb-lg-3" xs={12} lg={3}><b>Pronouns:</b> <span dangerouslySetInnerHTML={{__html: pronouns}}></span></BS.Col> : "" }
{ member.color ? <BS.Col className="mb-lg-3" xs={12} lg={3}><b>Color:</b> {color}</BS.Col> : "" }
{ proxyView ? "" : <BS.Col className="mb-lg-3" xs={12} lg={3}><b>Proxy tags:</b> <BS.Button variant="light" size="sm" onClick={() => setProxyView(true)}>View</BS.Button></BS.Col> }
{ proxyView || !member.banner ? "" :
@ -130,7 +128,7 @@ export default function MemberCard(props) {
<BS.Button variant="light" onClick={() => setProxyView(false)}>Exit</BS.Button>
<hr/></> : "" }
<p><b>Description:</b></p>
{ localStorage.getItem('twemoji') ? <Twemoji options={{ className: 'twemoji' }}><p dangerouslySetInnerHTML={{__html: desc}}></p></Twemoji> : <p dangerouslySetInnerHTML={{__html: desc}}></p>}
{ localStorage.getItem("twemoji") ? <p dangerouslySetInnerHTML={{__html: twemoji.parse(desc)}}></p> : <p dangerouslySetInnerHTML={{__html: desc}}></p>}
{ !member.banner || !localStorage.getItem("bottombanners") ? "" :
<BS.Image rounded className="mb-2" style={{width: '100%', maxHeight: '15rem', objectFit: 'cover'}} src={banner}/>
}

10
src/Components/Public/ProfilePage.js
View File

@ -5,7 +5,7 @@ import moment from 'moment';
import Popup from 'reactjs-popup';
import 'reactjs-popup/dist/index.css';
import autosize from 'autosize';
import Twemoji from 'react-twemoji';
import twemoji from 'twemoji';
import defaultAvatar from '../../default_discord_avatar.png'
import { FaLink } from "react-icons/fa";
@ -111,11 +111,9 @@ export default function ProfilePage(props) {
<BS.Card.Body style={{ borderLeft: localStorage.getItem('colorbg') ? `5px solid #${color}` : ''}}>
<BS.Row>
<BS.Col className="mb-lg-3" xs={12} lg={3}><b>ID:</b> {member.id}</BS.Col>
{ member.display_name ? localStorage.getItem('twemoji') ? <BS.Col className="mb-lg-3" xs={12} lg={3}><Twemoji options={{ className: 'twemoji' }}><b>Display name: </b>{displayName}</Twemoji></BS.Col> :
<BS.Col className="mb-lg-3" xs={12} lg={3}><b>Display name:</b> {displayName}</BS.Col> : "" }
{ member.display_name ? <BS.Col className="mb-lg-3" xs={12} lg={3}><b>Display name:</b> { localStorage.getItem("twemoji") ? <span dangerouslySetInnerHTML={{__html: twemoji.parse(displayName)}}></span> : <span dangerouslySetInnerHTML={{__html: displayName}}></span>}</BS.Col> : "" }
{ member.birthday ? <BS.Col className="mb-lg-3" xs={12} lg={3}><b>Birthday:</b> {birthday}</BS.Col> : "" }
{ member.pronouns ? localStorage.getItem('twemoji') ? <BS.Col className="mb-lg-3" xs={12} lg={3}><Twemoji options={{ className: 'twemoji' }}><b>Pronouns:</b> <span dangerouslySetInnerHTML={{__html: pronouns}}></span></Twemoji></BS.Col> :
<BS.Col className="mb-lg-3" xs={12} lg={3}><b>Pronouns:</b> <span dangerouslySetInnerHTML={{__html: pronouns}}></span></BS.Col> : "" }
{ member.pronouns ? <BS.Col className="mb-lg-3" xs={12} lg={3}><b>Pronouns:</b> { localStorage.getItem("twemoji") ? <span dangerouslySetInnerHTML={{__html: twemoji.parse(pronouns)}}></span> : <span dangerouslySetInnerHTML={{__html: pronouns}}></span>}</BS.Col> : "" }
{ member.color ? <BS.Col className="mb-lg-3" xs={12} lg={3}><b>Color:</b> {color}</BS.Col> : "" }
{ proxyView ? "" : <BS.Col className="mb-lg-3" xs={12} lg={3}><b>Proxy tags:</b> <BS.Button variant="light" size="sm" onClick={() => setProxyView(true)}>View</BS.Button></BS.Col> }
{ proxyView || !member.banner ? "" :
@ -153,7 +151,7 @@ export default function ProfilePage(props) {
<BS.Button variant="light" onClick={() => setProxyView(false)}>Exit</BS.Button>
<hr/></> : "" }
<p><b>Description:</b></p>
{ localStorage.getItem('twemoji') ? <Twemoji options={{ className: 'twemoji' }}><p dangerouslySetInnerHTML={{__html: desc}}></p></Twemoji> : <p dangerouslySetInnerHTML={{__html: desc}}></p>}
{ localStorage.getItem("twemoji") ? <p dangerouslySetInnerHTML={{__html: twemoji.parse(desc)}}></p> : <p dangerouslySetInnerHTML={{__html: desc}}></p>}
{ !member.banner || !localStorage.getItem("bottombanners") ? "" :
<BS.Image rounded className="mb-2" style={{width: '100%', maxHeight: '15rem', objectFit: 'cover'}} src={banner}/>
}

20
src/Custom.scss
View File

@ -7,19 +7,16 @@
z-index: -5;
}
html {
html, body {
position: relative;
min-height: 100vh;
}
body {
position: relative;
}
.contents {
display: flex;
flex-flow: column;
height: 100vh
flex: 1;
min-height: 100vh;
}
.content {
@ -279,14 +276,9 @@ blockquote {
margin-right: -100px; ;
}
.d-emoji {
height: 22px;
width: auto;
}
.twemoji {
height: 22px;
width: auto;
.emoji, .d-emoji {
width: 1.25em;
height: auto;
}
.backdrop {