diff --git a/frontend/__tests__/components/Button.spec.tsx b/frontend/__tests__/components/Button.spec.tsx index ba13e6ee0581..4c0ca6db2746 100644 --- a/frontend/__tests__/components/Button.spec.tsx +++ b/frontend/__tests__/components/Button.spec.tsx @@ -52,7 +52,7 @@ describe("Button component", () => { // }} fa={{ - icon: "keyboard", + icon: "fa-keyboard", }} /> )); @@ -70,7 +70,7 @@ describe("Button component", () => { // }} fa={{ - icon: "keyboard", + icon: "fa-keyboard", fixedWidth: true, }} /> @@ -88,7 +88,7 @@ describe("Button component", () => { }} fa={{ fixedWidth: true, - icon: "keyboard", + icon: "fa-keyboard", }} text="Hello" /> @@ -105,7 +105,7 @@ describe("Button component", () => { // }} fa={{ - icon: "keyboard", + icon: "fa-keyboard", }} text="Hello" /> diff --git a/frontend/src/styles/index.scss b/frontend/src/styles/index.scss index 9d1b742572ce..98f89eaf2c94 100644 --- a/frontend/src/styles/index.scss +++ b/frontend/src/styles/index.scss @@ -15,13 +15,10 @@ } } -// the screenshotting library has some issues with css layers -@import "fonts"; - @layer custom-styles { @import "buttons", "404", "ads", "account", "animations", "caret", - "commandline", "core", "inputs", "keymap", "login", "monkey", "nav", - "notifications", "popups", "profile", "scroll", "settings", + "commandline", "core", "fonts", "inputs", "keymap", "login", "monkey", + "nav", "notifications", "popups", "profile", "scroll", "settings", "account-settings", "leaderboards", "test", "loading", "friends", "media-queries"; diff --git a/frontend/src/styles/vendor.scss b/frontend/src/styles/vendor.scss index 0b716f23a71d..d3845c1879d7 100644 --- a/frontend/src/styles/vendor.scss +++ b/frontend/src/styles/vendor.scss @@ -1,27 +1,6 @@ -@import "fontawesome-5"; // the screenshotting library has some issues with css layers - -/* fontawesome icon styles do not respect the hidden class from the hidden layer. -* By having these rules outside any layer we make sure that the display none is -* correctly applied when an element possesses both a .fa* class and the hidden class */ -.fas.hidden, -.fab.hidden, -.fa.hidden, -.far.hidden { - display: none; -} - -// same for invisible -.fas.invisible, -.fab.invisible, -.fa.invisible, -.far.invisible { - opacity: 0; - pointer-events: none; - visibility: hidden; -} - @import "normalize.css" layer(normalize); @layer vendor { + @import "fontawesome-5"; @import "slim-select/styles"; @import "balloon-css/src/balloon"; } diff --git a/frontend/src/ts/components/common/AsyncContent.tsx b/frontend/src/ts/components/common/AsyncContent.tsx index a36f82caa3fb..5d235672e904 100644 --- a/frontend/src/ts/components/common/AsyncContent.tsx +++ b/frontend/src/ts/components/common/AsyncContent.tsx @@ -52,7 +52,7 @@ export default function AsyncContent( <>
- +
{p.children(value())} @@ -66,7 +66,7 @@ export default function AsyncContent( - + } > diff --git a/frontend/src/ts/components/common/Fa.tsx b/frontend/src/ts/components/common/Fa.tsx index aa994ac26dfd..60604d84f930 100644 --- a/frontend/src/ts/components/common/Fa.tsx +++ b/frontend/src/ts/components/common/Fa.tsx @@ -12,7 +12,7 @@ export function Fa(props: FaProps): JSXElement { const variant = (): string => props.variant ?? "solid"; return ( showModal("Contact")} @@ -38,7 +38,7 @@ export function Footer(): JSXElement { type="text" text="support" fa={{ - icon: "donate", + icon: "fa-donate", fixedWidth: true, }} onClick={() => showModal("Support")} @@ -47,7 +47,7 @@ export function Footer(): JSXElement { type="text" text="github" fa={{ - icon: "code", + icon: "fa-code", fixedWidth: true, }} href="https://github.com/monkeytypegame/monkeytype" @@ -56,7 +56,7 @@ export function Footer(): JSXElement { type="text" text="discord" fa={{ - icon: "discord", + icon: "fa-discord", variant: "brand", fixedWidth: true, }} @@ -66,7 +66,7 @@ export function Footer(): JSXElement { type="text" text="twitter" fa={{ - icon: "twitter", + icon: "fa-twitter", variant: "brand", fixedWidth: true, }} @@ -76,7 +76,7 @@ export function Footer(): JSXElement { type="text" text="terms" fa={{ - icon: "file-contract", + icon: "fa-file-contract", fixedWidth: true, }} href="/terms-of-service.html" @@ -86,7 +86,7 @@ export function Footer(): JSXElement { type="text" text="security" fa={{ - icon: "shield-alt", + icon: "fa-shield-alt", fixedWidth: true, }} /> @@ -95,7 +95,7 @@ export function Footer(): JSXElement { type="text" text="privacy" fa={{ - icon: "lock", + icon: "fa-lock", fixedWidth: true, }} /> diff --git a/frontend/src/ts/components/layout/footer/ScrollToTop.tsx b/frontend/src/ts/components/layout/footer/ScrollToTop.tsx index 7c6238a0bb2f..81aa3602c901 100644 --- a/frontend/src/ts/components/layout/footer/ScrollToTop.tsx +++ b/frontend/src/ts/components/layout/footer/ScrollToTop.tsx @@ -43,7 +43,7 @@ export function ScrollToTop(): JSXElement { }); }} > - + ); diff --git a/frontend/src/ts/components/layout/footer/ThemeIndicator.tsx b/frontend/src/ts/components/layout/footer/ThemeIndicator.tsx index ed4d13ff6098..3be0b6f498f8 100644 --- a/frontend/src/ts/components/layout/footer/ThemeIndicator.tsx +++ b/frontend/src/ts/components/layout/footer/ThemeIndicator.tsx @@ -43,10 +43,10 @@ export function ThemeIndicator(): JSXElement {
- +
- +
{getThemeIndicator().text}
diff --git a/frontend/src/ts/components/layout/footer/VersionButton.tsx b/frontend/src/ts/components/layout/footer/VersionButton.tsx index a335878452e0..a390ec4e9c19 100644 --- a/frontend/src/ts/components/layout/footer/VersionButton.tsx +++ b/frontend/src/ts/components/layout/footer/VersionButton.tsx @@ -46,7 +46,7 @@ export function VersionButton(): JSXElement { return ( } /> @@ -96,7 +96,7 @@ export function Banners(): JSXElement { createEffectOn(() => getBanners().length, setGlobalOffsetSignal); return ( -
+
{(banner) => }
); diff --git a/frontend/src/ts/components/layout/overlays/Overlays.tsx b/frontend/src/ts/components/layout/overlays/Overlays.tsx index 0c66dd4f836b..798c85e0d795 100644 --- a/frontend/src/ts/components/layout/overlays/Overlays.tsx +++ b/frontend/src/ts/components/layout/overlays/Overlays.tsx @@ -29,7 +29,7 @@ export function Overlays(): JSXElement { }} tabIndex="-1" > - + diff --git a/frontend/src/ts/components/modals/ContactModal.tsx b/frontend/src/ts/components/modals/ContactModal.tsx index 6df442935430..9f5e0c31e16a 100644 --- a/frontend/src/ts/components/modals/ContactModal.tsx +++ b/frontend/src/ts/components/modals/ContactModal.tsx @@ -25,7 +25,7 @@ export function ContactModal(): JSXElement { text="Question" class={buttonClass} fa={{ - icon: "question-circle", + icon: "fa-question-circle", fixedWidth: true, }} /> @@ -33,7 +33,7 @@ export function ContactModal(): JSXElement { type="button" href="mailto:contact@monkeytype.com?subject=[Feedback] " fa={{ - icon: "comment-dots", + icon: "fa-comment-dots", fixedWidth: true, }} text="Feedback" @@ -43,7 +43,7 @@ export function ContactModal(): JSXElement { type="button" href="mailto:support@monkeytype.com?subject=[Bug] " fa={{ - icon: "bug", + icon: "fa-bug", fixedWidth: true, }} text="Bug Report" @@ -53,7 +53,7 @@ export function ContactModal(): JSXElement { type="button" href="mailto:support@monkeytype.com?subject=[Account] " fa={{ - icon: "user-circle", + icon: "fa-user-circle", fixedWidth: true, }} text="Account Help" @@ -63,7 +63,7 @@ export function ContactModal(): JSXElement { type="button" href="mailto:jack@monkeytype.com?subject=[Business] " fa={{ - icon: "briefcase", + icon: "fa-briefcase", fixedWidth: true, }} text="Business Inquiry" @@ -73,7 +73,7 @@ export function ContactModal(): JSXElement { type="button" href="mailto:contact@monkeytype.com?subject=[Other] " fa={{ - icon: "ellipsis-h", + icon: "fa-ellipsis-h", fixedWidth: true, }} text="Other" diff --git a/frontend/src/ts/components/modals/SupportModal.tsx b/frontend/src/ts/components/modals/SupportModal.tsx index c60b3b33710e..82349c3ee841 100644 --- a/frontend/src/ts/components/modals/SupportModal.tsx +++ b/frontend/src/ts/components/modals/SupportModal.tsx @@ -19,7 +19,7 @@ export function SupportModal(): JSXElement {
Thank you so much for thinking about supporting this project. It would not be possible without you and your continued support.{" "} - +
@@ -241,13 +241,13 @@ export function AboutPage(): JSXElement { class="ad advertisement ad-h-s place-self-center" >
- +
-

+

After completing a test you will be able to see your wpm, raw wpm, accuracy, character stats, test length, leaderboards info and test @@ -259,7 +259,7 @@ export function AboutPage(): JSXElement {

-

+

If you encounter a bug, or have a feature request - join the Discord server, send me an email, a direct message on Twitter or create an @@ -268,7 +268,7 @@ export function AboutPage(): JSXElement {

-

+

Thanks to everyone who has supported this project. It would not be possible without you and your continued support. @@ -276,7 +276,7 @@ export function AboutPage(): JSXElement {

-

+

If you encounter a bug, have a feature request or just want to say hi - here are the different ways you can contact me directly. @@ -294,25 +294,25 @@ export function AboutPage(): JSXElement {

-

+