app redesign

nataliepina · Feb 14, 2024 · 1671c21 · 1671c21
1 parent 30d2977
commit 1671c21
Show file tree

Hide file tree

Showing 16 changed files with 324 additions and 185 deletions.
diff --git a/index.html b/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="/favicon.ico" />
+    <link rel="icon" href="/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="description" content="Stoic Quote Generator" />
     <meta name="Stoic Quote" content="Stoic Quotes" />
@@ -14,6 +14,10 @@
       href="https://fonts.googleapis.com/css2?family=Fraunces:ital,wght@0,100;0,300;0,400;0,500;1,300&display=swap"
       rel="stylesheet"
     />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap"
+      rel="stylesheet"
+    />
     <link
       href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&display=swap"
       rel="stylesheet"

diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/favicon.svg b/public/favicon.svg
diff --git a/public/logo.svg b/public/logo.svg
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,24 +1,27 @@
 import './App.css';
+
 import { useState } from 'react';
+
+import { ThemeSelector } from 'components/ThemeSelector';
 import styled, { ThemeProvider } from 'styled-components';
-import GlobalStyles from './global-styles';
-import { theme as primaryTheme } from './Theme';
-import { Header } from './components/Header';
+
 import { Footer } from './components/Footer';
+import { Header } from './components/Header';
 import StoicQuote from './components/QuoteContainer';
+import GlobalStyles from './global-styles';
+import { theme as primaryTheme } from './Theme';
 
 export const Container = styled.main`
-  text-align: center;
-  height: 100vh;
-  font-size: calc(10px + 2vmin);
-  display: flex;
+  height: 100%;
+  /* text-align: center; */
+  /* display: flex;
   flex-direction: column;
-  justify-content: space-between;
+  justify-content: space-between; */
   padding: 1rem;
 `;
 
 const TITLE = 'Stoic Quote';
-const COPYRIGHT = 'Natalie Pina \u00A9 2023';
+const COPYRIGHT = 'Natalie Pina \u00A9 2024';
 
 const App = (): React.ReactElement => {
   const [theme, setTheme] = useState(primaryTheme);
@@ -27,7 +30,8 @@ const App = (): React.ReactElement => {
     <ThemeProvider theme={theme}>
       <GlobalStyles />
       <Container>
-        <Header title={TITLE} setTheme={setTheme} />
+        <ThemeSelector setTheme={setTheme} />
+        <Header title={TITLE} />
         <StoicQuote />
         <Footer copyright={COPYRIGHT} />
       </Container>