From 1671c212a9be054c1215d4488ccf011fd989a805 Mon Sep 17 00:00:00 2001 From: nataliepina Date: Wed, 14 Feb 2024 14:53:02 -0600 Subject: [PATCH] app redesign --- index.html | 6 +- public/favicon.ico | Bin 1153 -> 0 bytes public/favicon.svg | 24 ++++++++ public/logo.svg | 24 ++++++++ src/App.tsx | 24 ++++---- src/Theme.tsx | 43 +++++++------- src/components/Button.tsx | 42 +++++++++++--- src/components/Footer.tsx | 14 ++--- src/components/Header.tsx | 52 ++--------------- src/components/Quote.tsx | 31 +++++----- src/components/QuoteContainer.tsx | 90 +++++++++--------------------- src/components/ThemeSelector.tsx | 67 ++++++++++++++++++++++ src/global-styles.js | 38 ++++++++----- src/helpers/helpers.ts | 5 ++ src/hooks/useQuote.tsx | 47 ++++++++++++++++ src/index.tsx | 2 + 16 files changed, 324 insertions(+), 185 deletions(-) delete mode 100644 public/favicon.ico create mode 100644 public/favicon.svg create mode 100644 public/logo.svg create mode 100644 src/components/ThemeSelector.tsx create mode 100644 src/hooks/useQuote.tsx diff --git a/index.html b/index.html index add429b..4aa4a15 100644 --- a/index.html +++ b/index.html @@ -2,7 +2,7 @@ - + @@ -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" /> + hkE{ZPPX^JewsvAENZC8RQ2{BMj=neGeV$RjKhdXo6+6)ZpB`rvr zmvq57x7KxJU<&w_`w!m$ySgcS5O^(d5xu}E;DNHmZvZ|H0^J0T0Xueg3;PqBqopaYD&6-owMQSaYpgRlf!Y*rZ8`y7bKdG>Ai@n8~{p7T_r}{-wqI zZb>gnnv%55pSvjOi@@&X7QRoGc(9838^w zFG14WWii?I`J}O51D@@n0O1DhI0f5VV1)I*Jiw8t;!Q#4g8(Z&@dPkNcJF@#*av)H zHdz?~{P%Z*9Nz(ZJ%=IBX%aXA{2AEJQ}+3V7vU)7F&mSt0|AD(dygN3Bc+QEh)j}g zBirF7u%F1LSyljlZU8ty+~#VL4%afR$PNJGz*}U?-79399=mkDtB5u+OAC9NIP9D&CB8-Mdi+0&T7c99Qll0iHG$Nq1xQUG zHBt&-AF8gVB9T&nbCQ<*aV`~!UO%#mhI8&GNn29oZ=&u2sR^V;EkJ4lsZk4%nm}qK z69Cu(EcqkZ?J(sPFfHkEf9z>vTNzRcFfVCI($6Y-T~#qst^}7PJ&`JZ6Lk|zO&~S; zS%60HSqb`CfVU<6B`N-;W(P>t1lz$mcTm#7s`GSv1uUEKQkSukpxZ0p14+$ycXM6F zN`kHg@b3)Y?-7?I=;tPQPf!bxnm}sQ0;DF;A^PH_N-_Xj&BK)BJIWe0?qmE7CqgY3 TL-C&a00000NkvXXu0mjf^s*3e diff --git a/public/favicon.svg b/public/favicon.svg new file mode 100644 index 0000000..affb2df --- /dev/null +++ b/public/favicon.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/logo.svg b/public/logo.svg new file mode 100644 index 0000000..affb2df --- /dev/null +++ b/public/logo.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/App.tsx b/src/App.tsx index d957de3..e17ce9a 100644 --- 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 => { -
+ +