diff --git a/components/ConnectWithUs.tsx b/components/ConnectWithUs.tsx index 21097db5..4431f42d 100644 --- a/components/ConnectWithUs.tsx +++ b/components/ConnectWithUs.tsx @@ -5,17 +5,17 @@ import { Link } from "./Link"; export function ConnectWithUs() { return ( - <> +

Connect with us!

-

+

Drop by any of our social media outlets to learn more about us, keep up-to-date with our upcoming events, or to chat with our members!
{/* TODO: fix feedback form link */} - Send feedback through our Feedback Form -

- + Send feedback through our Feedback Form +
+
); } diff --git a/components/EmailSignup.module.css b/components/EmailSignup.module.css index d97883d7..a5b30a6f 100644 --- a/components/EmailSignup.module.css +++ b/components/EmailSignup.module.css @@ -12,50 +12,7 @@ margin: 0 0 calc(21rem / 16) 0; } -.form input { - display: block; - width: 100%; - margin: calc(21rem / 16) 0; - - box-sizing: border-box; - border: 0; - border-radius: calc(20rem / 16); - - background-color: var(--grey-24); -} - -.form input::placeholder { - color: var(--grey); - font-weight: 700; -} - -.form input[type="text"], -.form input[type="email"] { - padding: calc(10rem / 16) calc(31rem / 16); - font-family: Poppins; - - font-size: calc(18rem / 16); - line-height: calc(30rem / 16); - color: var(--dark-grey); -} - -.form input:is(:active, :hover, :focus) { - box-sizing: border-box; - border: calc(3rem / 16) solid var(--blue-1); - border-radius: calc(20rem / 16); - outline: none; - padding: calc(7rem / 16) calc(28rem / 16); -} - .button { margin-top: calc(34rem / 16); + display: block; } - -/* TODO: make this only happen if the form is clicked on? */ -/* .form input:invalid { - box-sizing: border-box; - border: calc(3rem / 16) solid var(--red); - border-radius: calc(20rem / 16); - outline: none; - padding: calc(7rem / 16) calc(28rem / 16); -} */ diff --git a/components/EmailSignup.tsx b/components/EmailSignup.tsx index b16d3280..66630791 100644 --- a/components/EmailSignup.tsx +++ b/components/EmailSignup.tsx @@ -1,18 +1,16 @@ import React from "react"; import styles from "./EmailSignup.module.css"; import { Button } from "./Button"; +import { Input } from "./Input"; export function EmailSignup() { return (

Join Our Mailing List!

- - - -
- -
+ + +
); diff --git a/components/Input.module.css b/components/Input.module.css new file mode 100644 index 00000000..9ace06a8 --- /dev/null +++ b/components/Input.module.css @@ -0,0 +1,37 @@ +.input { + display: block; + width: 100%; + margin: calc(21rem / 16) 0; + padding: calc(10rem / 16) calc(31rem / 16); + + box-sizing: border-box; + border: 0; + border-radius: calc(20rem / 16); + + background-color: var(--grey-1-24); + font-size: calc(18rem / 16); + line-height: calc(30rem / 16); + color: var(--grey-3); +} + +.input::placeholder { + color: var(--grey-2); + font-weight: 700; +} + +.input:is(:active, :hover, :focus) { + box-sizing: border-box; + border: calc(3rem / 16) solid var(--blue-1); + border-radius: calc(20rem / 16); + outline: none; + padding: calc(7rem / 16) calc(28rem / 16); +} + +/* TODO: make this only happen if the form is clicked on? */ +/* .form input:invalid { + box-sizing: border-box; + border: calc(3rem / 16) solid var(--red); + border-radius: calc(20rem / 16); + outline: none; + padding: calc(7rem / 16) calc(28rem / 16); +} */ diff --git a/components/Input.tsx b/components/Input.tsx new file mode 100644 index 00000000..477b3045 --- /dev/null +++ b/components/Input.tsx @@ -0,0 +1,8 @@ +import React, { InputHTMLAttributes } from "react"; +import styles from "./Input.module.css"; + +export function Input(props: InputHTMLAttributes) { + return ( + + ); +} diff --git a/pages/_app.css b/pages/_app.css index 5d3df978..3d6a41ce 100644 --- a/pages/_app.css +++ b/pages/_app.css @@ -13,9 +13,10 @@ body { --purple-1: #525284; --purple-2: #2a2a62; --black: #000000; - --grey: #bbbbbb; - --grey-24: rgba(196, 196, 196, 0.24); - --dark-grey: #6b6b6b; + --grey-1: #c4c4c4; + --grey-1-24: #c4c4c440; + --grey-2: #bbbbbb; + --grey-3: #6b6b6b; --red: #9f616a; --gradient-blue-green: linear-gradient( 99.94deg, @@ -81,3 +82,7 @@ h4 { font-size: calc(18rem / 16); font-weight: 600; } + +input { + font-family: "Poppins", "sans-serif"; +} diff --git a/pages/about/our-supporters.tsx b/pages/about/our-supporters.tsx index e6a13c06..a135a488 100644 --- a/pages/about/our-supporters.tsx +++ b/pages/about/our-supporters.tsx @@ -8,10 +8,7 @@ export default function OurSupporters() { <>

Our Supporters

- +
diff --git a/pages/get-involved.module.css b/pages/get-involved.module.css index c2d80824..37703dba 100644 --- a/pages/get-involved.module.css +++ b/pages/get-involved.module.css @@ -6,12 +6,12 @@ .headerText h1 { color: var(--purple-2); - margin: 0 0 0.5rem 0; + margin: 0 0 calc(8rem / 16) 0; } .headerText p { color: var(--black); - margin: 0 0 1.375rem 0; + margin: 0 0 calc(22rem / 16) 0; } .codey { @@ -21,7 +21,7 @@ .content { margin-top: calc(32rem / 16); - margin-bottom: calc(52.77rem / 16); + margin-bottom: calc(52rem / 16); } .content h2 { @@ -34,11 +34,7 @@ font-weight: 600; color: var(--purple-2); margin-top: calc(30rem / 16); - margin-bottom: calc(15rem / 16); -} - -.content p { - margin: 0; + margin-bottom: 1rem; } .connectWithUs { @@ -46,12 +42,13 @@ } .emailSignup { - margin-bottom: calc(57.81rem / 16); + margin-bottom: calc(58rem / 16); } .pageContainer { - margin-top: calc(172rem / 16); + margin-top: calc(50rem / 16); } +/* @todo aaaaaa */ @media only screen and (max-width: calc(768rem / 16)) { } diff --git a/pages/get-involved.tsx b/pages/get-involved.tsx index 12c842b9..26c0e2eb 100644 --- a/pages/get-involved.tsx +++ b/pages/get-involved.tsx @@ -21,11 +21,11 @@ export default function GetInvolved() { Programme Committee!

- + -
+
-
+
diff --git a/public/images/get-involved-codey.svg b/public/images/get-involved/codey.svg similarity index 100% rename from public/images/get-involved-codey.svg rename to public/images/get-involved/codey.svg diff --git a/public/our-supporters/supporters-codey.svg b/public/images/our-supporters/codey.svg similarity index 100% rename from public/our-supporters/supporters-codey.svg rename to public/images/our-supporters/codey.svg