From 64e3702d6d5ea620a77b1236dbcf95cef67b0fbf Mon Sep 17 00:00:00 2001 From: Matchu Date: Thu, 10 Aug 2023 20:09:30 -0700 Subject: [PATCH] Fix typography on wardrobe 2020 page Add the green body color back in, and add the Delicious font! --- app/assets/stylesheets/_layout.sass | 1 + app/assets/stylesheets/fonts.sass | 14 ++++++++++++++ app/javascript/wardrobe-2020/AppProvider.js | 10 ++++++++-- app/views/outfits/edit.html.haml | 1 + config/initializers/assets.rb | 2 +- 5 files changed, 25 insertions(+), 3 deletions(-) create mode 100644 app/assets/stylesheets/fonts.sass diff --git a/app/assets/stylesheets/_layout.sass b/app/assets/stylesheets/_layout.sass index 257205d5..a3e025a5 100644 --- a/app/assets/stylesheets/_layout.sass +++ b/app/assets/stylesheets/_layout.sass @@ -1,4 +1,5 @@ @import "partials/icon" +@import fonts @import url(//fonts.googleapis.com/css?family=Droid+Sans:400,700) @import url(//fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic) @import url(//fonts.googleapis.com/css?family=Calligraffitti) diff --git a/app/assets/stylesheets/fonts.sass b/app/assets/stylesheets/fonts.sass new file mode 100644 index 00000000..f9fec655 --- /dev/null +++ b/app/assets/stylesheets/fonts.sass @@ -0,0 +1,14 @@ +/* A font by Jos Buivenga (exljbris) -> www.exljbris.nl +@font-face + font-family: Delicious + src: local("Delicious"), font-url("Delicious-Roman.otf") + +@font-face + font-family: Delicious + font-weight: bold + src: local("Delicious"), font-url("Delicious-Bold.otf") + +@font-face + font-family: Delicious + font-style: italic + src: local("Delicious"), font-url("Delicious-Italic.otf") diff --git a/app/javascript/wardrobe-2020/AppProvider.js b/app/javascript/wardrobe-2020/AppProvider.js index 333ab415..6aa29d3a 100644 --- a/app/javascript/wardrobe-2020/AppProvider.js +++ b/app/javascript/wardrobe-2020/AppProvider.js @@ -2,7 +2,7 @@ import React from "react"; import * as Sentry from "@sentry/react"; import { Integrations } from "@sentry/tracing"; import { Auth0Provider } from "@auth0/auth0-react"; -import { ChakraProvider, Box } from "@chakra-ui/react"; +import { ChakraProvider, Box, useColorModeValue } from "@chakra-ui/react"; import { ApolloProvider } from "@apollo/client"; import { useAuth0 } from "@auth0/auth0-react"; import { BrowserRouter } from "react-router-dom"; @@ -141,6 +141,8 @@ function setupLogging() { * ScopedCSSReset applies a copy of Chakra UI's CSS reset, but only to its * children (or, well, any element with the chakra-css-reset class). * + * We also apply some base styles, like the default text color. + * * TODO: What about Chakra's portal elements like toast messages, which are * intentionally mounted elsewhere in the document? * @@ -150,9 +152,13 @@ function setupLogging() { * the selector `:where(.chakra-css-reset) h1` is lower specificity. */ function ScopedCSSReset({ children }) { + const baseTextColor = useColorModeValue("green.800", "green.50"); + return ( <> - {children} + + {children} +