fixing code, thanks adi

pull/76/head
dora 1 year ago
parent 2eec46e18e
commit 42337a58c2
  1. 10
      components/ConnectWithUs.tsx
  2. 45
      components/EmailSignup.module.css
  3. 10
      components/EmailSignup.tsx
  4. 37
      components/Input.module.css
  5. 8
      components/Input.tsx
  6. 11
      pages/_app.css
  7. 5
      pages/about/our-supporters.tsx
  8. 17
      pages/get-involved.module.css
  9. 6
      pages/get-involved.tsx
  10. 0
      public/images/get-involved/codey.svg
  11. 0
      public/images/our-supporters/codey.svg

@ -5,17 +5,17 @@ import { Link } from "./Link";
export function ConnectWithUs() {
return (
<>
<div>
<h2 className={styles.header}>Connect with us!</h2>
<p className={styles.text}>
<div className={styles.text}>
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!
<div className={styles.socialLinks}>
<SocialLinks color="gradient" size="big" />
</div>
{/* TODO: fix feedback form link */}
Send feedback through our <Link href="">Feedback Form</Link>
</p>
</>
Send feedback through our <Link href="#">Feedback Form</Link>
</div>
</div>
);
}

@ -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);
} */

@ -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 (
<div className={styles.container}>
<h2 className={styles.header}>Join Our Mailing List!</h2>
<form className={styles.form} action="">
<input type="text" placeholder="Full Name*" required />
<input type="email" placeholder="Email*" required />
<div className={styles.button}>
<Button>Subscribe</Button>
</div>
<Input type="text" placeholder="Full Name*" required />
<Input type="email" placeholder="Email*" required />
<Button className={styles.button}>Subscribe</Button>
</form>
</div>
);

@ -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);
} */

@ -0,0 +1,8 @@
import React, { InputHTMLAttributes } from "react";
import styles from "./Input.module.css";
export function Input(props: InputHTMLAttributes<HTMLInputElement>) {
return (
<input {...props} className={`${styles.input} ${props.className ?? ""}`} />
);
}

@ -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";
}

@ -8,10 +8,7 @@ export default function OurSupporters() {
<>
<div className={styles.headerContainer}>
<h1 className={styles.header}>Our Supporters</h1>
<Image
src="our-supporters/supporters-codey.svg"
className={styles.codey}
/>
<Image src="images/our-supporters/codey.svg" className={styles.codey} />
</div>
<div className={styles.content}>
<Content />

@ -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)) {
}

@ -21,11 +21,11 @@ export default function GetInvolved() {
<Link href="/about/team">Programme Committee</Link>!
</p>
</div>
<Image src="images/get-involved-codey.svg" className={styles.codey} />
<Image src="images/get-involved/codey.svg" className={styles.codey} />
</div>
<div className={styles.content}>
<main className={styles.content}>
<Content />
</div>
</main>
<div className={styles.connectWithUs}>
<ConnectWithUs />
</div>

Before

Width:  |  Height:  |  Size: 25 KiB

After

Width:  |  Height:  |  Size: 25 KiB

Before

Width:  |  Height:  |  Size: 6.7 KiB

After

Width:  |  Height:  |  Size: 6.7 KiB

Loading…
Cancel
Save