From 827e3fa21e7e30cb1e474e1d8aaa53aabcc1545c Mon Sep 17 00:00:00 2001 From: Guusvanmeerveld Date: Thu, 22 Jul 2021 19:58:21 +0200 Subject: [PATCH] SCSS variables + Fixed contact form --- src/components/Contact.tsx | 66 ------------------- src/components/Footer.module.scss | 9 ++- src/components/Navbar.module.scss | 32 +++++---- src/components/Navbar.tsx | 42 ++++++------ src/components/Project.module.scss | 3 +- src/components/Project.tsx | 2 +- src/components/Spinner.module.scss | 4 +- src/pages/_app.tsx | 5 +- .../contact.module.scss} | 0 src/pages/contact.tsx | 60 ++++++++++++++++- src/styles/colors.scss | 5 ++ src/styles/global/body.scss | 4 +- src/styles/global/input.scss | 14 +++- src/styles/globals.scss | 10 +-- 14 files changed, 137 insertions(+), 119 deletions(-) delete mode 100644 src/components/Contact.tsx rename src/{components/Contact.module.scss => pages/contact.module.scss} (100%) create mode 100644 src/styles/colors.scss diff --git a/src/components/Contact.tsx b/src/components/Contact.tsx deleted file mode 100644 index 83bcd48..0000000 --- a/src/components/Contact.tsx +++ /dev/null @@ -1,66 +0,0 @@ -import ReCAPTCHA from 'react-google-recaptcha'; -import { useTheme } from 'next-themes'; - -import { FC } from 'react'; - -import styles from './Contact.module.scss'; - -const formURL = 'https://forms.guusvanmeerveld.dev/portfolio'; - -const Contact: FC = () => { - const { theme } = useTheme(); - - return ( -
-
-
- Contact -
-
- - - - - - - - - - - - - -
-
- ); -}; - -export default Contact; diff --git a/src/components/Footer.module.scss b/src/components/Footer.module.scss index 60c464d..d371e2b 100644 --- a/src/components/Footer.module.scss +++ b/src/components/Footer.module.scss @@ -1,6 +1,8 @@ +@import '../styles/colors.scss'; + .body { - background-color: var(--secondary); - border-top: 0.1rem solid var(--borders); + background-color: $bg-secondary; + border-top: 0.1rem solid $borders; padding: 3rem; } @@ -20,9 +22,6 @@ } .socialLink { - // color: var(--primary); - // cursor: pointer; - height: 3rem; width: 3rem; margin-right: 2rem; diff --git a/src/components/Navbar.module.scss b/src/components/Navbar.module.scss index 6c804bb..0eb3ca2 100644 --- a/src/components/Navbar.module.scss +++ b/src/components/Navbar.module.scss @@ -1,7 +1,9 @@ +@import '../styles/colors.scss'; + .bar { z-index: 1; - background-color: var(--secondary); - border-bottom: 0.1rem solid var(--borders); + background-color: $bg-secondary; + border-bottom: 0.1rem solid $borders; position: fixed; top: 0; @@ -10,25 +12,32 @@ width: 100%; } -.select { - border-color: var(--borders); - color: var(--foreground); - background-color: var(--secondary); +.content { + display: flex; - width: 7.5rem; - margin-bottom: 0; + align-items: center; } .header { - font-size: 1.75rem; + flex: 1; + + // height: max-content; + + font-size: 2rem; +} + +.select { + width: 7.5rem; + margin-bottom: 0; } .items { - float: right; display: flex; justify-content: center; + align-items: center; a { + font-size: 1.75rem; margin-left: 1rem; } } @@ -36,8 +45,7 @@ .moon, .sun { font-size: 2rem; - margin-left: 1rem; - margin-top: 0.25rem; + margin: 0.25rem 1.5rem; cursor: pointer; } diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx index 7657393..dbe40da 100644 --- a/src/components/Navbar.tsx +++ b/src/components/Navbar.tsx @@ -19,25 +19,27 @@ const Navbar: FC = () => { return ( @@ -47,8 +49,6 @@ const Navbar: FC = () => { export const getStaticProps: GetStaticProps = async ({ locale }) => { const { default: lngDict = {} } = await import(`../locales/${locale}.json`); - console.log(lngDict); - return { props: { lngDict }, }; diff --git a/src/components/Project.module.scss b/src/components/Project.module.scss index 8143998..b25c8f2 100644 --- a/src/components/Project.module.scss +++ b/src/components/Project.module.scss @@ -35,7 +35,8 @@ @media only screen and (max-width: 600px) { .cover, - .info { + .info, + .right { width: 100%; margin: 2rem 0; text-align: center; diff --git a/src/components/Project.tsx b/src/components/Project.tsx index e2fb67f..a1bda4d 100644 --- a/src/components/Project.tsx +++ b/src/components/Project.tsx @@ -27,7 +27,7 @@ const Project: FC = ({ name, description, buttons, cover, righ {cover ? (
- + {name}
) : null} diff --git a/src/components/Spinner.module.scss b/src/components/Spinner.module.scss index 4e25ec3..2fd3947 100644 --- a/src/components/Spinner.module.scss +++ b/src/components/Spinner.module.scss @@ -11,10 +11,10 @@ width: 64px; height: 64px; margin: 8px; - border: 8px solid var(--foreground); + border: 8px solid $text; border-radius: 50%; animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; - border-color: var(--foreground) transparent transparent transparent; + border-color: $text transparent transparent transparent; &:nth-child(1) { animation-delay: -0.45s; diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index f4151c9..c0a9961 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -6,12 +6,13 @@ import { useRouter } from 'next/router'; import type { AppProps } from 'next/app'; import 'milligram'; + import '@styles/raleway.css'; import '@styles/roboto.css'; import '@styles/globals.scss'; -function App({ Component, pageProps }: AppProps): JSX.Element { +const App = ({ Component, pageProps }: AppProps): JSX.Element => { const router = useRouter(); const { lngDict, ...rest } = pageProps; @@ -22,6 +23,6 @@ function App({ Component, pageProps }: AppProps): JSX.Element { ); -} +}; export default App; diff --git a/src/components/Contact.module.scss b/src/pages/contact.module.scss similarity index 100% rename from src/components/Contact.module.scss rename to src/pages/contact.module.scss diff --git a/src/pages/contact.tsx b/src/pages/contact.tsx index 3e19fd1..1094e84 100644 --- a/src/pages/contact.tsx +++ b/src/pages/contact.tsx @@ -1,14 +1,70 @@ import { NextPage } from 'next'; +import { useTheme } from 'next-themes'; + +import ReCAPTCHA from 'react-google-recaptcha'; import Page from '@components/Page'; import Layout from '@components/Layout'; -import ContactForm from '@components/Contact'; + +import styles from './contact.module.scss'; + +const formURL = 'https://forms.guusvanmeerveld.dev/portfolio'; const Contact: NextPage = () => { + const { theme } = useTheme(); + return ( - +
+
+
+ Contact +
+
+ + + + + + + + + + + + + +
+
); diff --git a/src/styles/colors.scss b/src/styles/colors.scss new file mode 100644 index 0000000..47e7db4 --- /dev/null +++ b/src/styles/colors.scss @@ -0,0 +1,5 @@ +$primary: var(--primary); +$bg-primary: var(--background); +$bg-secondary: var(--secondary); +$borders: var(--borders); +$text: var(--text); diff --git a/src/styles/global/body.scss b/src/styles/global/body.scss index 8302b1c..62aaf92 100644 --- a/src/styles/global/body.scss +++ b/src/styles/global/body.scss @@ -1,7 +1,7 @@ body { margin: 0; - background-color: var(--background); - color: var(--foreground); + background-color: $bg-primary; + color: $text; font-family: 'Raleway'; } diff --git a/src/styles/global/input.scss b/src/styles/global/input.scss index d1c88e4..77135a7 100644 --- a/src/styles/global/input.scss +++ b/src/styles/global/input.scss @@ -2,6 +2,18 @@ input, textarea, select { &:focus { - border-color: var(--primary); + border-color: $primary !important; + } + + color: $text; + border-color: $borders !important; + + font-family: 'Roboto'; + font-size: 1.5rem; +} + +select { + &:focus { + background-image: url('data:image/svg+xml;utf8,'); } } diff --git a/src/styles/globals.scss b/src/styles/globals.scss index d4c81b1..b8c23cf 100644 --- a/src/styles/globals.scss +++ b/src/styles/globals.scss @@ -1,9 +1,9 @@ :root { --primary: #9ccc65; - --background: white; --secondary: #f4f5f6; + --background: white; --borders: #e4e4e4; - --foreground: #606c76; + --text: #606c76; } [data-theme='dark'] { @@ -12,12 +12,14 @@ } --primary: #388e3c; - --background: #212123; --secondary: #1c1c1c; + --background: #212123; --borders: #3c3838; - --foreground: rgb(236, 235, 235); + --text: rgb(236, 235, 235); } +@import './colors.scss'; + @import './global/body.scss'; @import './global/link.scss'; @import './global/input.scss';