From 49cb4ba8f2beea4b2de941c069b5b1c0a64e9e3d Mon Sep 17 00:00:00 2001 From: Spectralitree Date: Mon, 14 Dec 2020 22:26:15 +0100 Subject: [PATCH] Add twemoji --- package-lock.json | 62 ++++++++++++++++++++++++++++++++++++ package.json | 1 + src/Components/MemberCard.js | 9 +++--- src/Components/System.js | 19 +++++++---- src/Custom.scss | 15 +++++++-- 5 files changed, 94 insertions(+), 12 deletions(-) diff --git a/package-lock.json b/package-lock.json index 78df8de9..b6248ae1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9380,6 +9380,11 @@ "resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz", "integrity": "sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0=" }, + "lodash.isequal": { + "version": "4.5.0", + "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz", + "integrity": "sha1-QVxEePK8wwEgwizhDtMib30+GOA=" + }, "lodash.memoize": { "version": "4.1.2", "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz", @@ -12627,6 +12632,16 @@ "prop-types": "^15.6.2" } }, + "react-twemoji": { + "version": "0.3.0", + "resolved": "https://registry.npmjs.org/react-twemoji/-/react-twemoji-0.3.0.tgz", + "integrity": "sha512-y2ZQD3KvpZklETxz9c1NycRdUVF5nKsJ0bPNW3SaRJT+ReK36sMcneYwRPfv9EK2p3s9ph/NczDglnB8wbMJ0g==", + "requires": { + "lodash.isequal": "^4.5.0", + "prop-types": "^15.7.2", + "twemoji": "^13.0.1" + } + }, "reactjs-popup": { "version": "2.0.4", "resolved": "https://registry.npmjs.org/reactjs-popup/-/reactjs-popup-2.0.4.tgz", @@ -15078,6 +15093,53 @@ "resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-0.14.5.tgz", "integrity": "sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q=" }, + "twemoji": { + "version": "13.0.1", + "resolved": "https://registry.npmjs.org/twemoji/-/twemoji-13.0.1.tgz", + "integrity": "sha512-mrTBq+XpCLM4zm76NJOjLHoQNV9mHdBt3Cba/T5lS1rxn8ArwpqE47mqTocupNlkvcLxoeZJjYSUW0DU5ZwqZg==", + "requires": { + "fs-extra": "^8.0.1", + "jsonfile": "^5.0.0", + "twemoji-parser": "13.0.0", + "universalify": "^0.1.2" + }, + "dependencies": { + "fs-extra": { + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-8.1.0.tgz", + "integrity": "sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==", + "requires": { + "graceful-fs": "^4.2.0", + "jsonfile": "^4.0.0", + "universalify": "^0.1.0" + }, + "dependencies": { + "jsonfile": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz", + "integrity": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=", + "requires": { + "graceful-fs": "^4.1.6" + } + } + } + }, + "jsonfile": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-5.0.0.tgz", + "integrity": "sha512-NQRZ5CRo74MhMMC3/3r5g2k4fjodJ/wh8MxjFbCViWKFjxrnudWSY5vomh+23ZaXzAS7J3fBZIR2dV6WbmfM0w==", + "requires": { + "graceful-fs": "^4.1.6", + "universalify": "^0.1.2" + } + } + } + }, + "twemoji-parser": { + "version": "13.0.0", + "resolved": "https://registry.npmjs.org/twemoji-parser/-/twemoji-parser-13.0.0.tgz", + "integrity": "sha512-zMaGdskpH8yKjT2RSE/HwE340R4Fm+fbie4AaqjDa4H/l07YUmAvxkSfNl6awVWNRRQ0zdzLQ8SAJZuY5MgstQ==" + }, "type": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/type/-/type-1.2.0.tgz", diff --git a/package.json b/package.json index 90909599..44e594c5 100644 --- a/package.json +++ b/package.json @@ -26,6 +26,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", diff --git a/src/Components/MemberCard.js b/src/Components/MemberCard.js index 37cb6960..f5d4f39f 100644 --- a/src/Components/MemberCard.js +++ b/src/Components/MemberCard.js @@ -6,6 +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 API_URL from "../Constants/constants.js"; @@ -197,15 +198,15 @@ export default function MemberCard(props) { memberDeleted ? Member Deleted : - {member.name} ({member.id}) - { member.avatar_url ? } className="avatar" modal> + {member.name} ({member.id}) + { member.avatar_url ? } className="avatar" modal> {close => (
close()}>
)} : - } + } @@ -365,7 +366,7 @@ export default function MemberCard(props) { setProxyView(false)}>Exit setProxyMode(true)}>Edit
: "" }

Description:

-

+ { localStorage.getItem('twemoji') ?

:

} { proxyView ? "" : privacyMode ? "" : privacyView ? "" : setEditMode(true)}>Edit} } diff --git a/src/Components/System.js b/src/Components/System.js index 619c2026..13590de4 100644 --- a/src/Components/System.js +++ b/src/Components/System.js @@ -5,9 +5,11 @@ import autosize from 'autosize'; import moment from 'moment'; import 'moment-timezone'; import Popup from 'reactjs-popup'; +import Twemoji from 'react-twemoji'; import API_URL from "../Constants/constants.js"; +import history from "../History.js"; import defaultAvatar from '../default_discord_avatar.png' import { FaAddressCard } from "react-icons/fa"; @@ -26,6 +28,7 @@ export default function System(props) { const [ user, setUser ] = useState(JSON.parse(localStorage.getItem('user'))); + const [ name, setName ] = useState(""); const [ tag, setTag ] = useState(""); const [ timezone, setTimezone ] = useState(""); const [ avatar, setAvatar ] = useState(""); @@ -43,6 +46,10 @@ export default function System(props) { useEffect(() => { const { toHTML } = require('../Functions/discord-parser.js'); + if (user.name) { + setName(user.name); + } else setName(''); + if (user.tag) { setTag(user.tag); } else setTag(''); @@ -60,7 +67,7 @@ export default function System(props) { setEditDesc(user.description); } else { setDesc("(no description)"); setEditDesc(""); -}}, [user.description, user.tag, user.avatar_url, user.tz]); +}}, [user.description, user.tag, user.avatar_url, user.tz, user.name]); useEffect(() => { autosize(document.querySelector('textarea')); @@ -107,8 +114,8 @@ const submitPrivacy = data => { return ( - {user.name} - { user.avatar_url ? } className="avatar" modal> + {name} ({user.id}) + { user.avatar_url ? } className="avatar" modal> {close => (
close()}> @@ -126,7 +133,7 @@ const submitPrivacy = data => { Name: - + Tag: @@ -200,8 +207,8 @@ const submitPrivacy = data => { setPrivacyView(false)}>Exit setPrivacyMode(true)}>Edit
: "" }

Description:

-

- { privacyMode ? "" : privacyView ? "" : setEditMode(true)}>Edit} } + { localStorage.getItem('twemoji') ?

:

} + { privacyMode ? "" : privacyView ? "" : <> setEditMode(true)}>Edit history.push(`/pk-webs/profile/${user.id}`)}>Profile} } ) diff --git a/src/Custom.scss b/src/Custom.scss index e4a70161..fb77d1f9 100644 --- a/src/Custom.scss +++ b/src/Custom.scss @@ -129,6 +129,13 @@ body { transition: background-color 0.3s ease; } +.dark-mode .alert-primary { + color: $white; + background-color: $primary; + border: $gray-900; + transition: background-color 0.3s ease; +} + .dark-mode .alert-light { color: $white; background-color: $gray-900; @@ -249,9 +256,13 @@ blockquote { } .d-emoji { - height: 25px; + height: 22px; + width: auto; +} + +.twemoji { + height: 22px; width: auto; - image-rendering: crisp-edges; }