From ce316baf3c5615122e3ab41ceedbc78137e86b48 Mon Sep 17 00:00:00 2001 From: Hassan Abouelela <47495861+HassanAbouelela@users.noreply.github.com> Date: Mon, 4 Jan 2021 02:25:55 +0300 Subject: Updates Models Changes the models to match the backend. Signed-off-by: Hassan Abouelela <47495861+HassanAbouelela@users.noreply.github.com> --- src/tests/components/FormListing.test.tsx | 12 ++++++++---- src/tests/pages/LandingPage.test.tsx | 6 ++++-- 2 files changed, 12 insertions(+), 6 deletions(-) (limited to 'src/tests') diff --git a/src/tests/components/FormListing.test.tsx b/src/tests/components/FormListing.test.tsx index ad76381..f071c33 100644 --- a/src/tests/components/FormListing.test.tsx +++ b/src/tests/components/FormListing.test.tsx @@ -17,9 +17,11 @@ const openFormListing: Form = { "id": "my-question", "name": "My question", "type": QuestionType.ShortText, - "data": {} + "data": {}, + required: false } - ] + ], + webhook: null }; const closedFormListing: Form = { @@ -32,9 +34,11 @@ const closedFormListing: Form = { "id": "what-should-i-ask", "name": "What should I ask?", "type": QuestionType.ShortText, - "data": {} + "data": {}, + required: false } - ] + ], + webhook: null }; test("renders form listing with specified title", () => { diff --git a/src/tests/pages/LandingPage.test.tsx b/src/tests/pages/LandingPage.test.tsx index 5635e63..e461815 100644 --- a/src/tests/pages/LandingPage.test.tsx +++ b/src/tests/pages/LandingPage.test.tsx @@ -17,9 +17,11 @@ const testingForm: forms.Form = { "id": "my-question", "name": "My Question", "type": QuestionType.ShortText, - "data": {} + "data": {}, + required: true } - ] + ], + "webhook": null }; test("renders landing page", () => { -- cgit v1.2.3 From d2cc29d22203cfea0adc61ceaa72ba936070045a Mon Sep 17 00:00:00 2001 From: Hassan Abouelela <47495861+HassanAbouelela@users.noreply.github.com> Date: Mon, 4 Jan 2021 02:29:27 +0300 Subject: Updates HeaderBar Changes header bar component to accept a description, and render it properly on different screens. Additionally adds a button to return to the home page. Updates tests. Signed-off-by: Hassan Abouelela <47495861+HassanAbouelela@users.noreply.github.com> --- src/components/HeaderBar/index.tsx | 131 ++++++++++++++++++++++---------- src/components/HeaderBar/logo.svg | 3 + src/tests/components/HeaderBar.test.tsx | 23 +++++- 3 files changed, 115 insertions(+), 42 deletions(-) create mode 100644 src/components/HeaderBar/logo.svg (limited to 'src/tests') diff --git a/src/components/HeaderBar/index.tsx b/src/components/HeaderBar/index.tsx index dfe3957..439851d 100644 --- a/src/components/HeaderBar/index.tsx +++ b/src/components/HeaderBar/index.tsx @@ -1,59 +1,110 @@ /** @jsx jsx */ -import { css, jsx } from "@emotion/react"; +import { jsx, css } from "@emotion/react"; import Header1 from "./header_1.svg"; import Header2 from "./header_2.svg"; +import Logo from "./logo.svg"; + +import { Link } from "react-router-dom"; interface HeaderBarProps { - title?: string + title?: string + description?: string } const headerImageStyles = css` -z-index: -1; -top: 0; -position: absolute; -width: 100%; -transition: height 1s; + * { + z-index: -1; + top: 0; + position: absolute; + width: 100%; + transition: height 1s; + } +`; + +const headerTextStyles = css` + transition: margin 1s; + font-family: "Uni Sans", "Hind", "Arial", sans-serif; + + margin: 0 2rem 10rem 2rem; + + .title { + font-size: 3vmax; + margin-bottom: 0; + } + + .description { + font-size: 1.5vmax; + } + + .title, .description { + transition: font-size 1s; + } + + @media (max-width: 480px) { + margin-top: 7rem; + text-align: center; + + .title { + font-size: 5vmax; + } + + .description { + font-size: 2vmax; + } + } +`; + +const homeButtonStyles = css` + svg { + transform: scale(0.25); + transition: top 300ms, transform 300ms; + + @media (max-width: 480px) { + transform: scale(0.15); + } + } + + * { + position: absolute; + top: -10rem; + right: 1rem; + + z-index: 0; + transform-origin: right; + + @media (max-width: 700px) { + top: -11.5rem; + } + + @media (max-width: 480px) { + top: -12.5rem; + } + } `; -function HeaderBar({ title }: HeaderBarProps): JSX.Element { +function HeaderBar({ title, description }: HeaderBarProps): JSX.Element { if (!title) { title = "Python Discord Forms"; } - - return
+ + return (
- - +
+ + +
+ +
+

{title}

+

{description}

+
+ + + +
-

- {title} -

-
; + ); } export default HeaderBar; diff --git a/src/components/HeaderBar/logo.svg b/src/components/HeaderBar/logo.svg new file mode 100644 index 0000000..e7f43fc --- /dev/null +++ b/src/components/HeaderBar/logo.svg @@ -0,0 +1,3 @@ + +image/svg+xml + diff --git a/src/tests/components/HeaderBar.test.tsx b/src/tests/components/HeaderBar.test.tsx index 9c232ad..dd77c8b 100644 --- a/src/tests/components/HeaderBar.test.tsx +++ b/src/tests/components/HeaderBar.test.tsx @@ -2,16 +2,35 @@ import React from "react"; import { render } from "@testing-library/react"; import "@testing-library/jest-dom/extend-expect"; import HeaderBar from "../../components/HeaderBar"; +import { MemoryRouter } from "react-router-dom"; test("renders header bar with title", () => { - const { getByText } = render(); + const { getByText } = render(); const formListing = getByText(/Python Discord Forms/i); expect(formListing).toBeInTheDocument(); }); test("renders header bar with custom title", () => { - const { getByText } = render(); + const { getByText } = render(); const formListing = getByText(/Testing title/i); expect(formListing).toBeInTheDocument(); }); +test("renders header bar with custom description", () => { + const { getByText } = render(); + const formListing = getByText(/Testing description/i); + expect(formListing).toBeInTheDocument(); +}); + +test("renders header bar with custom title and description", () => { + const { getByText } = render( + + + + ); + + const title = getByText(/Testing title/i); + const description = getByText(/Testing description/i); + expect(title).toBeInTheDocument(); + expect(description).toBeInTheDocument(); +}); -- cgit v1.2.3 From 996c14afb9d81e962ef66b99bd869bce4f3688f0 Mon Sep 17 00:00:00 2001 From: Hassan Abouelela <47495861+HassanAbouelela@users.noreply.github.com> Date: Wed, 6 Jan 2021 08:00:31 +0300 Subject: Breaks Up CSS Into Components Moves the styles from the CSS file, into emotion CSS in each component's file to make navigation easier, and keep CSS and JSX together.Drops raw-loader dependency. Signed-off-by: Hassan Abouelela <47495861+HassanAbouelela@users.noreply.github.com> --- package.json | 1 - src/colors.ts | 2 + src/commonStyles.tsx | 39 +++ src/components/InputTypes/Checkbox.tsx | 62 ++++- src/components/InputTypes/Radio.tsx | 4 +- src/components/InputTypes/Range.tsx | 101 ++++++- src/components/InputTypes/Select.tsx | 109 +++++++- src/components/InputTypes/ShortText.tsx | 3 +- src/components/InputTypes/TextArea.tsx | 14 +- src/components/Question.tsx | 61 ++++- src/components/ScrollToTop.tsx | 3 +- src/pages/FormPage.tsx | 168 ++++++++++-- src/pages/css/FormPage.css | 452 -------------------------------- src/tests/pages/FormPage.test.tsx | 2 +- webpack.config.js | 6 - yarn.lock | 8 - 16 files changed, 498 insertions(+), 537 deletions(-) create mode 100644 src/commonStyles.tsx delete mode 100644 src/pages/css/FormPage.css (limited to 'src/tests') diff --git a/package.json b/package.json index e74aa57..c3e21ce 100644 --- a/package.json +++ b/package.json @@ -22,7 +22,6 @@ "fs-extra": "9.0.1", "html-webpack-plugin": "4.5.1", "identity-obj-proxy": "3.0.0", - "raw-loader": "4.0.2", "react": "17.0.1", "react-app-polyfill": "2.0.0", "react-dom": "17.0.1", diff --git a/src/colors.ts b/src/colors.ts index e9c74b1..52b48cb 100644 --- a/src/colors.ts +++ b/src/colors.ts @@ -1,8 +1,10 @@ export default { blurple: "#7289DA", + darkerBlurple: "#4E609C", darkButNotBlack: "#2C2F33", notQuiteBlack: "#23272A", greyple: "#99AAB5", + darkerGreyple: "#6E7D88", error: "#f04747", success: "#43b581" }; diff --git a/src/commonStyles.tsx b/src/commonStyles.tsx new file mode 100644 index 0000000..d47dea7 --- /dev/null +++ b/src/commonStyles.tsx @@ -0,0 +1,39 @@ +import { css } from "@emotion/react"; + +const selectable = css` + -moz-user-select: text; + -webkit-user-select: text; + -ms-user-select: text; + user-select: text; +`; + +const unselectable = css` + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + user-select: none; +`; + +const textInputs = css` + display: inline-block; + width: min(20rem, 90%); + height: 100%; + min-height: 2rem; + + background: whitesmoke; + + color: black; + padding: 0 1rem; + font: inherit; + + margin-bottom: 0; + + border: 0.1rem solid black; + border-radius: 8px; +`; + +export { + selectable, + unselectable, + textInputs +}; diff --git a/src/components/InputTypes/Checkbox.tsx b/src/components/InputTypes/Checkbox.tsx index ed02b83..07872d6 100644 --- a/src/components/InputTypes/Checkbox.tsx +++ b/src/components/InputTypes/Checkbox.tsx @@ -1,6 +1,7 @@ /** @jsx jsx */ -import { jsx } from "@emotion/react"; +import { jsx, css } from "@emotion/react"; import React, { ChangeEvent } from "react"; +import colors from "../../colors"; interface CheckboxProps { index: number, @@ -8,13 +9,66 @@ interface CheckboxProps { handler: (event: ChangeEvent) => void } +const generalStyles = css` + label { + display: inline-block; + position: relative; + top: 0.25em; + + width: 1em; + height: 1em; + + margin: 1rem 0.5rem 0 0; + border: whitesmoke 0.2rem solid; + border-radius: 25%; + + transition: background-color 300ms; + } + + .unselected { + background-color: white; + } + + .unselected:hover { + background-color: lightgray; + } + + input { + position: absolute; + opacity: 0; + height: 0; + width: 0; + } + + .checkmark { + position: absolute; + } +`; + +const activeStyles = css` + .selected { + background-color: ${colors.blurple}; + } + + .selected .checkmark { + width: 0.30rem; + height: 0.60rem; + left: 0.25em; + + border: solid white; + border-width: 0 0.2rem 0.2rem 0; + + transform: rotate(45deg); + } +`; + export default function Checkbox(props: CheckboxProps): JSX.Element { return ( -