From 053eea7689d0e63032aeac644147467598ab1834 Mon Sep 17 00:00:00 2001 From: Aarni Halinen Date: Tue, 29 Dec 2020 01:28:09 +0200 Subject: [PATCH] Unify form styles --- package-lock.json | 15 ++++ package.json | 2 + .../SignupQuestionsWidget.tsx | 16 +++- src/pages/admin/AdminCommonPage.tsx | 19 +++-- src/pages/admin/EventCreatePage.tsx | 1 - src/views/SignUpPage/SignUpPageView.tsx | 63 +++------------- src/views/admin/AdminCreateCommon.tsx | 75 ++----------------- src/views/common/FormWrapper.tsx | 67 +++++++++++++++++ 8 files changed, 125 insertions(+), 133 deletions(-) create mode 100644 src/views/common/FormWrapper.tsx diff --git a/package-lock.json b/package-lock.json index 2014576..41f4721 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1707,6 +1707,15 @@ "csstype": "^2.2.0" } }, + "@types/react-beautiful-dnd": { + "version": "13.0.0", + "resolved": "https://registry.npmjs.org/@types/react-beautiful-dnd/-/react-beautiful-dnd-13.0.0.tgz", + "integrity": "sha512-by80tJ8aTTDXT256Gl+RfLRtFjYbUWOnZuEigJgNsJrSEGxvFe5eY6k3g4VIvf0M/6+xoLgfYWoWonlOo6Wqdg==", + "dev": true, + "requires": { + "@types/react": "*" + } + }, "@types/react-csv": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/@types/react-csv/-/react-csv-1.1.1.tgz", @@ -1774,6 +1783,12 @@ "@types/react-router": "*" } }, + "@types/shortid": { + "version": "0.0.29", + "resolved": "https://registry.npmjs.org/@types/shortid/-/shortid-0.0.29.tgz", + "integrity": "sha1-gJPuBBam4r8qpjOBCRFLP7/6Dps=", + "dev": true + }, "@types/styled-components": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/@types/styled-components/-/styled-components-5.1.1.tgz", diff --git a/package.json b/package.json index 00565e9..bb7bb61 100644 --- a/package.json +++ b/package.json @@ -47,11 +47,13 @@ "@types/js-cookie": "2.2.4", "@types/node": "10.14.7", "@types/react": "16.8.18", + "@types/react-beautiful-dnd": "13.0.0", "@types/react-csv": "1.1.1", "@types/react-dom": "16.8.4", "@types/react-helmet": "6.0.0", "@types/react-jsonschema-form": "1.7.3", "@types/react-router-dom": "5.1.5", + "@types/shortid": "0.0.29", "@types/styled-components": "5.1.1", "@typescript-eslint/eslint-plugin": "^4.8.2", "@typescript-eslint/parser": "^4.8.2", diff --git a/src/components/Widgets/SignupQuestionsWidget/SignupQuestionsWidget.tsx b/src/components/Widgets/SignupQuestionsWidget/SignupQuestionsWidget.tsx index e8905ba..e850309 100644 --- a/src/components/Widgets/SignupQuestionsWidget/SignupQuestionsWidget.tsx +++ b/src/components/Widgets/SignupQuestionsWidget/SignupQuestionsWidget.tsx @@ -4,6 +4,7 @@ import shortid from "shortid"; import { DragDropContext, Droppable } from "react-beautiful-dnd"; import { Question } from "." import AddIcon from "@assets/img/add-icon.png"; +import colors from "@theme/colors"; import QuestionList from "./QuestionList"; const Widget = styled.div` @@ -24,6 +25,14 @@ const Widget = styled.div` } `; +const AddQuestionButton = styled.button` + background-color: ${colors.blue1}; + color: ${colors.white}; + border: none; + outline: none; + cursor: pointer; +`; + interface SignupQuestionsWidgetProps { value: string; onChange: (value: string) => void; @@ -78,9 +87,10 @@ const SignupQuestionsWidget: React.FC = ({ value, on )} - + + + New Question + ); } diff --git a/src/pages/admin/AdminCommonPage.tsx b/src/pages/admin/AdminCommonPage.tsx index b1e396c..4af446b 100644 --- a/src/pages/admin/AdminCommonPage.tsx +++ b/src/pages/admin/AdminCommonPage.tsx @@ -16,6 +16,17 @@ const Main = styled.main` align-items: flex-start; flex: 1; + h1 { + margin-top: 0; + } + + & > div { + padding: 0 1rem; + width: 100%; + max-width: 1000px; + margin: auto; + } + @media screen and (max-width: ${breakpoints.mobile}) { flex-flow: column nowrap; @@ -24,14 +35,6 @@ const Main = styled.main` } } - & > div { - padding: 0 1rem; - width: 100%; - } - - h1 { - margin-top: 0; - } `; export interface AdminCommonPageProps { diff --git a/src/pages/admin/EventCreatePage.tsx b/src/pages/admin/EventCreatePage.tsx index b31f007..5456f03 100644 --- a/src/pages/admin/EventCreatePage.tsx +++ b/src/pages/admin/EventCreatePage.tsx @@ -9,7 +9,6 @@ import DatetimeWidget from "@components/Widgets/DatetimeWidget"; import SectionDividerWidget from "@components/Widgets/SectionDividerWidget/SectionDividerWidget"; import MarkdownEditorWidget from "@components/Widgets/MarkdownEditorWidget"; - const widgets = { datetime: DatetimeWidget, section_divider: SectionDividerWidget, diff --git a/src/views/SignUpPage/SignUpPageView.tsx b/src/views/SignUpPage/SignUpPageView.tsx index 7d425f6..42fa4b6 100644 --- a/src/views/SignUpPage/SignUpPageView.tsx +++ b/src/views/SignUpPage/SignUpPageView.tsx @@ -1,12 +1,13 @@ import React from "react"; import styled from "styled-components"; -import Form, { IChangeEvent, ISubmitEvent, ErrorSchema } from "react-jsonschema-form"; +import { IChangeEvent, ISubmitEvent, ErrorSchema } from "react-jsonschema-form"; import { SignupForm } from "@models/SignupForm"; import { buildFormSchema, buildUISchema } from "./FormUtils"; import Checkboxes from "@components/Widgets/Checkbox/Checkboxes"; import RadioButtonWidget from "@components/Widgets/RadioButton/RadioButtonWidget"; import { TextSection } from "@components/index"; import { colors } from "@theme/colors"; +import FormWrapper from "@views/common/FormWrapper"; const customWidgets = { "radio": RadioButtonWidget, @@ -37,7 +38,6 @@ const renderList = (signUpForm: SignupForm) => { } const StyledSection = styled(TextSection)` - & > div { & > span { color: ${colors.orange1}; @@ -54,45 +54,6 @@ const StyledSection = styled(TextSection)` color: ${colors.blue1}; } } - - form { - legend { - display: none; - } - - & > div:last-child { - display: flex; - justify-content: center; - - button[type="submit"] { - color: blue; - } - } - } - - fieldset { - border: none; - padding: 0; - margin: 1rem 0; - - .form-group { - padding-bottom: 0.5rem; - - & > label { - margin: 0.5rem 0; - font-weight: 600; - display: block; - } - } - - input[type="text"], input[type="email"], input[type="number"] { - display: block; - height: 48px; - width: 100%; - font-size: 1.5rem; - padding: 0 16px; - } - } `; const SignUpPageView: React.FC = ({ @@ -108,17 +69,15 @@ const SignUpPageView: React.FC = ({ const uiSchema = buildUISchema(signUpForm); return ( - <> -
- + ); } diff --git a/src/views/admin/AdminCreateCommon.tsx b/src/views/admin/AdminCreateCommon.tsx index 9d593d7..2ebd2ec 100644 --- a/src/views/admin/AdminCreateCommon.tsx +++ b/src/views/admin/AdminCreateCommon.tsx @@ -1,81 +1,18 @@ import React from "react"; import styled from "styled-components"; -import Form, { ISubmitEvent, IChangeEvent, ErrorSchema } from "react-jsonschema-form"; -import { colors }from "@theme/colors"; +import { ISubmitEvent, IChangeEvent, ErrorSchema } from "react-jsonschema-form"; +import { colors } from "@theme/colors"; import { Event } from "@models/Event"; import { Post } from "@models/Feed"; import { SignupForm } from "@models/SignupForm"; import { JobAd } from "@models/JobAd"; +import FormWrapper from "@views/common/FormWrapper"; const Common = styled.div` - width: 100%; - - fieldset { - border: none; - padding: 0; - margin: 1rem 0; - } - - option { - padding: 4px 8px; - cursor: pointer; - } - - label { - margin-bottom: 0.5rem; - } - - input, - select { - padding: 0.3rem 0.5rem; - margin-bottom: 0.5rem; - } - - input[type="text"], - textarea { - padding: 0.5rem 0.5rem; - border: none; - overflow: visible; - box-sizing: border-box; - } - - input[type="text"], - textarea, - select { - width: 100%; - } - - input[type="submit"] { - border: none; - outline: none; - background-color: ${colors.orange2}; - padding: 0.5rem 1rem; - color: ${colors.white}; - } - legend { font-weight: bold; margin: 0.5rem 0; } - - button { - background-color: ${colors.blue1}; - color: ${colors.white}; - padding: 0.5rem 1rem; - border: none; - outline: none; - cursor: pointer; - } - - .checkbox { - label { - display: flex; - - input { - margin-right: 0.5rem; - } - } - } `; const SuccessMsg = styled.p` @@ -139,7 +76,7 @@ const AdminCreateCommon: React.FC = ({ {statusMessage && ( {statusMessage} )} - = ({ onChange={onChange} onSubmit={onSubmit} onError={onError} - onFocus={onFocus} /> - + onFocus={onFocus} + /> {error && ( {error} )} diff --git a/src/views/common/FormWrapper.tsx b/src/views/common/FormWrapper.tsx new file mode 100644 index 0000000..606e490 --- /dev/null +++ b/src/views/common/FormWrapper.tsx @@ -0,0 +1,67 @@ +import Form from "react-jsonschema-form"; +import styled from "styled-components"; +import colors from "@theme/colors"; + +const FormStyleWrapper = styled(Form)` + legend { + display: none; + } + + fieldset { + border: none; + padding: 0; + margin: 1rem 0; + } + + .form-group { + padding-bottom: 0.5rem; + + & > label { + margin: 0.5rem 0; + font-weight: 600; + display: block; + } + } + + & > div:last-child { + text-align: center; + + button[type="submit"] { + background-color: ${colors.blue1}; + color: ${colors.white}; + padding: 0.5rem 1rem; + border: none; + outline: none; + cursor: pointer; + } + } + + input, + option, + select { + font-size: 1.5rem; + padding: 0.3rem; + } + + input[type="text"], + input[type="email"], + input[type="number"] { + height: 3rem; + } + + input[type="text"], + input[type="email"], + input[type="number"], + textarea, + select + { + display: block; + width: 100%; + } + + option { + cursor: pointer; + } +`; + +export default FormStyleWrapper; \ No newline at end of file