yeet react-twemoji and use-dark-mode

package.json

@@ -1,7 +1,7 @@
 {
   "homepage": "https://pk-webs.spectralitree.com",
-  "name": "pk-web",
+  "name": "pk-webs",
-  "version": "0.1.0",
+  "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"
   },

src/App.js

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

src/Components/Navbar.js

@@ -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} />
+                onClick={() => toggleDarkMode()} />
-                {darkMode.value ? <FaMoon className="m-1"/> : <FaSun className="m-1"/>}
+                {localStorage.getItem("pk-darkmode") ? <FaMoon className="m-1"/> : <FaSun className="m-1"/>}
             </BS.Nav>
         </BS.Navbar>
     );

src/Components/Private/MemberCard.js

@@ -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> :
+                { member.display_name ?
-                <BS.Col className="mb-lg-3" xs={12} lg={3}><b>Display name:</b> {displayName}</BS.Col> : "" }
+                <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> : 
+                { 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> : "" }
-                <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> : "" }
                 { 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}/>
             }

src/Components/Private/MemberPage.js

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

src/Components/Private/System.js

@@ -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") ? (
+            { localStorage.getItem("twemoji") ? <p dangerouslySetInnerHTML={{__html: twemoji.parse(desc)}}></p> : <p dangerouslySetInnerHTML={{__html: desc}}></p>}
-              <Twemoji options={{ className: "twemoji" }}>
-                <p dangerouslySetInnerHTML={{ __html: desc }}></p>
-              </Twemoji>
-            ) : (
-              <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}/>
             }

src/Components/Public/Profile.js

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

src/Components/Public/ProfileCard.js

@@ -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> :
+                { member.display_name ? <BS.Col className="mb-lg-3" xs={12} lg={3}><b>Display name:</b> {displayName}</BS.Col> : "" }
-                <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> : 
+                { member.pronouns ? <BS.Col className="mb-lg-3" xs={12} lg={3}><b>Pronouns:</b> <span dangerouslySetInnerHTML={{__html: pronouns}}></span></BS.Col> : "" }
-                <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}/>
             }

src/Components/Public/ProfilePage.js

@@ -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> :
+                { 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> : "" }
-                <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> : 
+                { 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> : "" }
-                <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 ? "" : 
@@ -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}/>
             }

src/Custom.scss

@@ -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 {
+.emoji, .d-emoji {
-  height: 22px;
+  width: 1.25em;
-  width: auto;
+  height: auto;
-}
-
-.twemoji {
-  height: 22px;
-  width: auto;
 }
 
 .backdrop {