From 2ef89200c54eed843b313f38d01bc0e01fe3fd32 Mon Sep 17 00:00:00 2001 From: dora Date: Sun, 27 Jun 2021 05:19:47 -0400 Subject: [PATCH 1/4] email signup component --- components/EmailSignup.module.css | 61 +++++++++++++++++++++++++++++++ 1 file changed, 61 insertions(+) create mode 100644 components/EmailSignup.module.css diff --git a/components/EmailSignup.module.css b/components/EmailSignup.module.css new file mode 100644 index 00000000..d97883d7 --- /dev/null +++ b/components/EmailSignup.module.css @@ -0,0 +1,61 @@ +.container form { + box-sizing: border-box; +} + +.container > * { + margin: 0 0 calc(21rem / 16) 0; +} + +.header { + color: var(--blue-2); + font-weight: 600; + 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); +} + +/* 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); +} */ From 3e445a552cc5a97f009b5bb9d9332d09e86e0d3a Mon Sep 17 00:00:00 2001 From: dora Date: Sun, 27 Jun 2021 05:29:16 -0400 Subject: [PATCH 2/4] add new components to playground, time to sleep :') --- pages/get-involved.tsx | 4 +++- pages/playground.mdx | 18 ++++++++++++++++++ 2 files changed, 21 insertions(+), 1 deletion(-) diff --git a/pages/get-involved.tsx b/pages/get-involved.tsx index 6f45b4b5..12c842b9 100644 --- a/pages/get-involved.tsx +++ b/pages/get-involved.tsx @@ -6,6 +6,9 @@ import { EmailSignup } from "../components/EmailSignup"; import Content from "../content/get-involved.mdx"; import styles from "./get-involved.module.css"; +/** + * @todo fix codey image with svg + */ export default function GetInvolved() { return (
@@ -18,7 +21,6 @@ export default function GetInvolved() { Programme Committee!

- {/* TODO: FIX CODEY SINCE ITS NOT SVG */}
diff --git a/pages/playground.mdx b/pages/playground.mdx index 3a38453a..af488e24 100644 --- a/pages/playground.mdx +++ b/pages/playground.mdx @@ -9,6 +9,8 @@ import { OrganizedContentDemo, ButtonDemo, } from "../components/playground"; +import { ConnectWithUs } from "../components/ConnectWithUs" +import { EmailSignup } from "../components/EmailSignup" import { TeamMemberCard } from "../components/TeamMemberCard"; @@ -90,3 +92,19 @@ The `` component is used on various pages such as Meet the Team! and Our --- + +## `` + +The `` component is used on various pages such as the About page and the Get Involved Page! + + + +--- + +## `` + +The `` component is used on various pages such as the About page and the Get Involved Page! + + + +--- From b8d97e41783ddd3c3aec951f7544d204a5e18d37 Mon Sep 17 00:00:00 2001 From: dora Date: Mon, 28 Jun 2021 00:01:07 -0400 Subject: [PATCH 3/4] fixing code, thanks adi --- components/ConnectWithUs.tsx | 10 ++--- components/EmailSignup.module.css | 45 +------------------ components/EmailSignup.tsx | 10 ++--- components/Input.module.css | 37 +++++++++++++++ components/Input.tsx | 8 ++++ pages/_app.css | 11 +++-- pages/about/our-supporters.tsx | 5 +-- pages/get-involved.module.css | 17 +++---- pages/get-involved.tsx | 6 +-- .../codey.svg} | 0 .../our-supporters/codey.svg} | 0 11 files changed, 74 insertions(+), 75 deletions(-) create mode 100644 components/Input.module.css create mode 100644 components/Input.tsx rename public/images/{get-involved-codey.svg => get-involved/codey.svg} (100%) rename public/{our-supporters/supporters-codey.svg => images/our-supporters/codey.svg} (100%) 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 From 5fad324b30aed9e31ba8ab511f051974e1521d27 Mon Sep 17 00:00:00 2001 From: Aditya Thakral Date: Tue, 29 Jun 2021 15:08:05 -0400 Subject: [PATCH 4/4] Add drone.yml (#77) Removes gitlab ci and adds .drone.yml Still need to setup autodepoly for staging websites, but that's for later. Co-authored-by: Aditya Thakral Reviewed-on: https://git.csclub.uwaterloo.ca/www/www-new/pulls/77 Reviewed-by: n3parikh Co-authored-by: Aditya Thakral Co-committed-by: Aditya Thakral --- .drone.yml | 36 ++++++++++++++++++++++++++++++++++++ .gitlab-ci.yml | 49 ------------------------------------------------- 2 files changed, 36 insertions(+), 49 deletions(-) create mode 100644 .drone.yml delete mode 100644 .gitlab-ci.yml diff --git a/.drone.yml b/.drone.yml new file mode 100644 index 00000000..bca0b8ce --- /dev/null +++ b/.drone.yml @@ -0,0 +1,36 @@ +--- +kind: pipeline +type: docker +name: node14 + +steps: +- name: install-deps + image: node:14 + commands: + - npm install + +- name: lint + image: node:14 + depends_on: + - install-deps + commands: + - npm run lint + +- name: build + image: node:14 + depends_on: + - install-deps + commands: + - npm run build + +- name: export + image: node:14 + depends_on: + - build + commands: + - npm run export + +trigger: + event: + exclude: + - pull_request #avoid double build on PRs \ No newline at end of file diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml deleted file mode 100644 index 55e2e5a6..00000000 --- a/.gitlab-ci.yml +++ /dev/null @@ -1,49 +0,0 @@ -default: - image: node:14 - - cache: - paths: - - node_modules/ - - .next - -stages: - - build - - staging - -variables: - NEXT_PUBLIC_BASE_PATH: '/~a3thakra/csc' - -install_deps: - stage: .pre - script: - - npm install - -lint: - stage: build - script: - - npm run lint - -build: - stage: build - script: - - npm run build - -staging: - stage: staging - script: - - npm run export - artifacts: - paths: - - out - only: - refs: - - main - -deploy_staging: - stage: .post - needs: ["staging"] - script: - - 'curl -XPOST -H "Authorization: Basic $STAGING_SECRET" "https://csclub.uwaterloo.ca/~a3thakra/csc/"' - only: - refs: - - main \ No newline at end of file