feat: closer and closer

mattc41190 · Jun 10, 2021 · 482a62a · 482a62a
1 parent 63fa1d3
commit 482a62a
Show file tree

Hide file tree

Showing 18 changed files with 464 additions and 382 deletions.
diff --git a/READLIST.md b/READLIST.md
@@ -39,6 +39,7 @@ This is a collection of documentation items pertaining to the Utilities for Me a
     - [React Does NOT Go In Brackets](https://stackoverflow.com/questions/39423054/react-jsx-file-giving-error-cannot-read-property-createelement-of-undefined)
     - [Amazing Video on useRef](https://www.youtube.com/watch?v=t2ypzz6gJm0)
     - [Good Example of Fetch](https://googlechrome.github.io/samples/fetch-api/fetch-post.html)
+    - [Using Props on Router Components](https://ui.dev/react-router-v5-pass-props-to-components/)
 - Webpack (General Bundling Solution)
     - [Webpack Reference Docs](https://webpack.js.org/)
     - [Amazing Webpack Setup Tutorial -- Swashbuckling](https://www.youtube.com/watch?v=TOb1c39m64A)

diff --git a/postcss.config.js b/postcss.config.js
@@ -3,23 +3,24 @@ const autoprefixer = require('autoprefixer')
 const purgecss = require('@fullhuman/postcss-purgecss')
 const cssnano = require('cssnano')
 
-let _autoprefixer = process.env.NODE_ENV === 'production' ? autoprefixer : null
-let _cssnano = process.env.NODE_ENV === 'production' ? cssnano({ preset: 'default' }) : null
-let _purgecss = process.env.NODE_ENV === 'production' ? purgecss({
-  content: [
-    'utilities_for_me/web_app/templates/**/*.html',
-    'utilities_for_me/web_app/client/react/**/*.js',
-    'utilities_for_me/web_app/client/react/**/*.jsx'
-  ],
-  defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
-}) : null
-
+const _autoprefixer = process.env.NODE_ENV === 'production' ? autoprefixer : null
+const _cssnano = process.env.NODE_ENV === 'production' ? cssnano({ preset: 'default' }) : null
+const _purgecss = process.env.NODE_ENV === 'production'
+  ? purgecss({
+      content: [
+        'utilities_for_me/web_app/templates/**/*.html',
+        'utilities_for_me/web_app/client/react/**/*.js',
+        'utilities_for_me/web_app/client/react/**/*.jsx'
+      ],
+      defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
+    })
+  : null
 
 module.exports = {
   plugins: [
     tailwindcss,
     _autoprefixer,
     _cssnano,
-    _purgecss,
+    _purgecss
   ]
 }
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -1,78 +1,77 @@
 const backgroundColors = {
-  "primary-fill": "var(--primary-fill)",
-  "secondary-fill": "var(--secondary-fill)",
-  "emphasis-fill": "var(--emphasis-fill)",
+  'primary-fill': 'var(--primary-fill)',
+  'secondary-fill': 'var(--secondary-fill)',
+  'emphasis-fill': 'var(--emphasis-fill)',
 
-  "input-primary-fill": "var(--primary-fill)",
-  "input-secondary-fill": "var(--secondary-fill)",
-  "input-emphasis-fill": "var(--secondary-fill)",
+  'input-primary-fill': 'var(--primary-fill)',
+  'input-secondary-fill': 'var(--secondary-fill)',
+  'input-emphasis-fill': 'var(--secondary-fill)',
 
-  "btn-primary-fill": "var(--btn-primary-fill)",
-  "btn-primary-fill-hover": "var(--btn-primary-fill)",
-  "btn-primary-fill-disabled": "var(--btn-primary-fill)",
-  "btn-secondary-fill": "var(--btn-secondary-fill)",
-  "btn-secondary-fill-hover": "var(--btn-secondary-fill)",
-  "btn-secondary-fill-disabled": "var(--btn-secondary-fill)",
-  "btn-emphasis-fill": "var(--btn-emphasis-fill)",
-  "btn-emphasis-fill-hover": "var(--btn-emphasis-fill)",
-  "btn-emphasis-fill-disabled": "var(--btn-emphasis-fill)",
+  'btn-primary-fill': 'var(--btn-primary-fill)',
+  'btn-primary-fill-hover': 'var(--btn-primary-fill)',
+  'btn-primary-fill-disabled': 'var(--btn-primary-fill)',
+  'btn-secondary-fill': 'var(--btn-secondary-fill)',
+  'btn-secondary-fill-hover': 'var(--btn-secondary-fill)',
+  'btn-secondary-fill-disabled': 'var(--btn-secondary-fill)',
+  'btn-emphasis-fill': 'var(--btn-emphasis-fill)',
+  'btn-emphasis-fill-hover': 'var(--btn-emphasis-fill)',
+  'btn-emphasis-fill-disabled': 'var(--btn-emphasis-fill)',
 
-  "comp-primary-fill": "var(--comp-primary-fill)",
-  "comp-secondary-fill": "var(--comp-secondary-fill)",
-  "comp-emphasis-fill": "var(--comp-emphasis-fill)",
+  'comp-primary-fill': 'var(--comp-primary-fill)',
+  'comp-secondary-fill': 'var(--comp-secondary-fill)',
+  'comp-emphasis-fill': 'var(--comp-emphasis-fill)'
 }
 
 const borderColors = {
-  "primary-complement": "var(--primary-complement)",
-  "secondary-complement": "var(--secondary-complement)",
-  "emphasis-complement": "var(--emphasis-complement)",
+  'primary-complement': 'var(--primary-complement)',
+  'secondary-complement': 'var(--secondary-complement)',
+  'emphasis-complement': 'var(--emphasis-complement)',
 
-  "input-primary-complement": "var(--primary-complement)",
-  "input-secondary-complement": "var(--secondary-complement)",
-  "input-emphasis-complement": "var(--secondary-complement)",
+  'input-primary-complement': 'var(--primary-complement)',
+  'input-secondary-complement': 'var(--secondary-complement)',
+  'input-emphasis-complement': 'var(--secondary-complement)',
 
-  "btn-primary-complement": "var(--btn-primary-complement)",
-  "btn-primary-complement-hover": "var(--btn-primary-complement)",
-  "btn-primary-complement-disabled": "var(--btn-primary-complement)",
-  "btn-secondary-complement": "var(--btn-secondary-complement)",
-  "btn-secondary-complement-hover": "var(--btn-secondary-complement)",
-  "btn-secondary-complement-disabled": "var(--btn-secondary-complement)",
-  "btn-emphasis-complement": "var(--btn-emphasis-complement)",
-  "btn-emphasis-complement-hover": "var(--btn-emphasis-complement)",
-  "btn-emphasis-complement-disabled": "var(--btn-emphasis-complement)",
+  'btn-primary-complement': 'var(--btn-primary-complement)',
+  'btn-primary-complement-hover': 'var(--btn-primary-complement)',
+  'btn-primary-complement-disabled': 'var(--btn-primary-complement)',
+  'btn-secondary-complement': 'var(--btn-secondary-complement)',
+  'btn-secondary-complement-hover': 'var(--btn-secondary-complement)',
+  'btn-secondary-complement-disabled': 'var(--btn-secondary-complement)',
+  'btn-emphasis-complement': 'var(--btn-emphasis-complement)',
+  'btn-emphasis-complement-hover': 'var(--btn-emphasis-complement)',
+  'btn-emphasis-complement-disabled': 'var(--btn-emphasis-complement)',
 
-  "comp-primary-complement": "var(--color-component-complement)",
-  "comp-secondary-complement": "var(--color-component-complement)",
-  "comp-emphasis-complement": "var(--color-component-complement)",
+  'comp-primary-complement': 'var(--color-component-complement)',
+  'comp-secondary-complement': 'var(--color-component-complement)',
+  'comp-emphasis-complement': 'var(--color-component-complement)'
 }
 
 const textColors = {
-  "primary": "var(--text-primary)",
-  "secondary": "var(--text-secondary)",
-  "muted": "var(--text-muted)",
-  "emphasis": "var(--text-emphasis)",
+  primary: 'var(--text-primary)',
+  secondary: 'var(--text-secondary)',
+  muted: 'var(--text-muted)',
+  emphasis: 'var(--text-emphasis)',
 
-  "input-primary": "var(--primary-fill)",
-  "input-secondary": "var(--secondary-fill)",
-  "input-emphasis": "var(--secondary-fill)",
+  'input-primary': 'var(--primary-fill)',
+  'input-secondary': 'var(--secondary-fill)',
+  'input-emphasis': 'var(--secondary-fill)',
 
-  "btn-primary": "var(--btn-text-primary)",
-  "btn-primary-hover": "var(--btn-text-primary)",
-  "btn-primary-disabled": "var(--btn-text-primary)",
-  "btn-secondary": "var(--btn-text-secondary)",
-  "btn-secondary-hover": "var(--btn-text-secondary)",
-  "btn-secondary-disabled": "var(--btn-text-secondary)",
-  "btn-emphasis": "var(--btn-text-emphasis)",
-  "btn-emphasis-hover": "var(--btn-text-emphasis)",
-  "btn-emphasis-disabled": "var(--btn-text-emphasis)",
+  'btn-primary': 'var(--btn-text-primary)',
+  'btn-primary-hover': 'var(--btn-text-primary)',
+  'btn-primary-disabled': 'var(--btn-text-primary)',
+  'btn-secondary': 'var(--btn-text-secondary)',
+  'btn-secondary-hover': 'var(--btn-text-secondary)',
+  'btn-secondary-disabled': 'var(--btn-text-secondary)',
+  'btn-emphasis': 'var(--btn-text-emphasis)',
+  'btn-emphasis-hover': 'var(--btn-text-emphasis)',
+  'btn-emphasis-disabled': 'var(--btn-text-emphasis)',
 
-  "comp-primary": "var(--comp-text-primary)",
-  "comp-secondary": "var(--comp-text-secondary)",
-  "comp-muted": "var(--comp-text-muted)",
-  "comp-emphasis": "var(--comp-text-emphasis)",
+  'comp-primary': 'var(--comp-text-primary)',
+  'comp-secondary': 'var(--comp-text-secondary)',
+  'comp-muted': 'var(--comp-text-muted)',
+  'comp-emphasis': 'var(--comp-text-emphasis)'
 }
 
-
 module.exports = {
   purge: [
     'utilities_for_me/web_app/static/**/*.js'
@@ -83,18 +82,17 @@ module.exports = {
       center: true
     },
     extend: {
-      backgroundColor: { theme: backgroundColors }, // bg-theme-[key], 
-      borderColor: { theme: borderColors }, 
+      backgroundColor: { theme: backgroundColors }, // bg-theme-[key],
+      borderColor: { theme: borderColors },
       ringColor: { theme: borderColors },
-      textColor: { theme: textColors },
+      textColor: { theme: textColors }
     }
   },
   variants: {
     extend: {
       fontWeight: ['hover', 'focus'],
-      borderColor: ['hover', 'focus'],
+      borderColor: ['hover', 'focus']
     }
   },
   plugins: []
 }
-
diff --git a/utilities_for_me/web_app/client/react/App.jsx b/utilities_for_me/web_app/client/react/App.jsx
@@ -18,44 +18,46 @@ import CountdownClock from './CountdownClock'
 import Footer from './Footer'
 
 function App () {
-  const cookieTheme = getCookie("theme")
-  let defaultTheme = "theme-green"
-  const [theme, setTheme] = useState(cookieTheme ? cookieTheme : defaultTheme)
+  const cookieTheme = getCookie('theme')
+  const defaultTheme = 'theme-light'
+  const [theme, setTheme] = useState(cookieTheme || defaultTheme)
 
   useEffect(() => {
-    const app = document.getElementById("app")
-    const color = getComputedStyle(app)["backgroundColor"]
+    const app = document.getElementById('app')
+    const color = window.getComputedStyle(app).backgroundColor
 
-    const root = document.getElementById("root")
-    const html = document.getElementsByTagName("html")[0]
+    const root = document.getElementById('root')
+    const html = document.getElementsByTagName('html')[0]
     const body = document.body
 
     body.style.backgroundColor = color
     html.style.backgroundColor = color
     root.style.backgroundColor = color
 
-    setCookie("theme", theme, 365)
-  }, [theme]);
+    setCookie('theme', theme, 365)
+  }, [theme])
 
   return (
-      <main id="app" className={`${theme} flex flex-col h-screen bg-theme-primary-fill text-theme-primary`}>
-        <Navbar currentTheme={theme} setTheme={setTheme} />
-        <div className='container mx-auto flex-1'>
-          <Switch>
-            <Route exact path='/' component={Home} />
-            <Route path='/echo' component={Echo} />
-            <Route path='/prettify' component={Prettify} />
-            <Route path='/case-transform' component={CaseTransform} />
-            <Route path='/calculate-percent' component={CalculatePercent} />
-            <Route path='/generate-random-string' component={GenerateRandomString} />
-            <Route path='/encrypt-decrypt' component={EncryptDecrypt} />
-            <Route path='/timer' component={Timer} />
-            <Route path='/countdown-clock' component={CountdownClock} />
-            <Route component={Error} />
-          </Switch>
-        </div>
-        <Footer currentTheme={theme} setTheme={setTheme} />
-      </main>
+    <main id='app' className={`${theme} flex flex-col h-screen bg-theme-primary-fill text-theme-primary`}>
+      <Navbar currentTheme={theme} setTheme={setTheme} />
+      <div className='container mx-auto flex-1'>
+        <Switch>
+          <Route exact path='/'>
+            <Home currentTheme={theme} />
+          </Route>
+          <Route path='/echo' component={Echo} />
+          <Route path='/prettify' component={Prettify} />
+          <Route path='/case-transform' component={CaseTransform} />
+          <Route path='/calculate-percent' component={CalculatePercent} />
+          <Route path='/generate-random-string' component={GenerateRandomString} />
+          <Route path='/encrypt-decrypt' component={EncryptDecrypt} />
+          <Route path='/timer' component={Timer} />
+          <Route path='/countdown-clock' component={CountdownClock} />
+          <Route component={Error} />
+        </Switch>
+      </div>
+      <Footer currentTheme={theme} setTheme={setTheme} />
+    </main>
   )
 }
 

diff --git a/utilities_for_me/web_app/client/react/CountdownClock.jsx b/utilities_for_me/web_app/client/react/CountdownClock.jsx
@@ -173,7 +173,7 @@ function CountdownClock () {
   const holidayUIData = getDateUIData(_date.label)
 
   return (
-    <div className="mt-6 text-skin-primary">
+    <div className='mt-6 text-skin-primary'>
       <CountdownClockHeader />
       <hr />
       <CountdownClockBody

diff --git a/utilities_for_me/web_app/client/react/Footer.jsx b/utilities_for_me/web_app/client/react/Footer.jsx
@@ -1,33 +1,31 @@
-import React, {useState} from 'react'
-
-
-function Footer ({currentTheme, setTheme}) {
+import React from 'react'
 
+function Footer ({ currentTheme, setTheme }) {
   const handleThemeToggle = (e) => setTheme(e.target.value)
 
   return (
     <div className='mt-6 bg-theme-secondary-fill border-t-2 border-theme-secondary-complement'>
       <div className='flex items-center justify-center h-16'>
         <span className='text-xl text-skin-primary hover:text-skin-emphasis mr-3'>
-          <button value="theme-light" className="focus:outline-none" onClick={handleThemeToggle}>🤍</button>
+          <button value='theme-light' className='focus:outline-none' onClick={handleThemeToggle}>🤍</button>
         </span>
         <span className='text-xl text-skin-primary hover:text-skin-emphasis mr-3'>
-          <button value="theme-dark" className="focus:outline-none" onClick={handleThemeToggle}>🖤</button>
+          <button value='theme-dark' className='focus:outline-none' onClick={handleThemeToggle}>🖤</button>
         </span>
         <span className='text-xl text-skin-primary hover:text-skin-emphasis mr-3'>
-          <button value="theme-blue" className="focus:outline-none" onClick={handleThemeToggle}>💙</button>
+          <button value='theme-blue' className='focus:outline-none' onClick={handleThemeToggle}>💙</button>
         </span>
         <span className='text-xl text-skin-primary hover:text-skin-emphasis mr-3'>
-          <button value="theme-green" className="focus:outline-none" onClick={handleThemeToggle}>💚</button>
+          <button value='theme-green' className='focus:outline-none' onClick={handleThemeToggle}>💚</button>
         </span>
         <span className='text-xl text-skin-primary hover:text-skin-emphasis mr-3'>
-          <button value="theme-orange" className="focus:outline-none" onClick={handleThemeToggle}>🧡</button>
+          <button value='theme-orange' className='focus:outline-none' onClick={handleThemeToggle}>🧡</button>
         </span>
         <span className='text-xl text-skin-primary hover:text-skin-emphasis mr-3'>
-          <button value="theme-purple" className="focus:outline-none" onClick={handleThemeToggle}>💜</button>
+          <button value='theme-purple' className='focus:outline-none' onClick={handleThemeToggle}>💜</button>
         </span>
         <span className='text-xl text-skin-primary hover:text-skin-emphasis mr-3'>
-          <button value="theme-pink" className="focus:outline-none" onClick={handleThemeToggle}>💖</button>
+          <button value='theme-pink' className='focus:outline-none' onClick={handleThemeToggle}>💖</button>
         </span>
       </div>
     </div>