From 64e3702d6d5ea620a77b1236dbcf95cef67b0fbf Mon Sep 17 00:00:00 2001
From: Matchu <matchu1993@gmail.com>
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 (
     <>
-      <Box className="chakra-css-reset">{children}</Box>
+      <Box className="chakra-css-reset" color={baseTextColor}>
+        {children}
+      </Box>
       <Global
         styles={`
           :where(.chakra-css-reset) {
diff --git a/app/views/outfits/edit.html.haml b/app/views/outfits/edit.html.haml
index 4ade26ae..2430bb86 100644
--- a/app/views/outfits/edit.html.haml
+++ b/app/views/outfits/edit.html.haml
@@ -4,6 +4,7 @@
     %meta{charset: 'utf-8'}
     %title Dress to Impress
     %link{href: image_path('favicon.png'), rel: 'icon'}
+    = stylesheet_link_tag 'fonts'
     = javascript_include_tag 'wardrobe-2020-page', defer: true
   %body
     #wardrobe-2020-root
diff --git a/config/initializers/assets.rb b/config/initializers/assets.rb
index 2eeef966..ec985f86 100644
--- a/config/initializers/assets.rb
+++ b/config/initializers/assets.rb
@@ -9,4 +9,4 @@ Rails.application.config.assets.version = "1.0"
 # Precompile additional assets.
 # application.js, application.css, and all non-JS/CSS in the app/assets
 # folder are already added.
-# Rails.application.config.assets.precompile += %w( admin.js admin.css )
+Rails.application.config.assets.precompile += %w( fonts.css )