diff --git a/public/android-chrome-192x192.png b/public/android-chrome-192x192.png new file mode 100644 index 0000000..dad44bc Binary files /dev/null and b/public/android-chrome-192x192.png differ diff --git a/public/android-chrome-512x512.png b/public/android-chrome-512x512.png new file mode 100644 index 0000000..2e76f1e Binary files /dev/null and b/public/android-chrome-512x512.png differ diff --git a/public/apple-touch-icon.png b/public/apple-touch-icon.png new file mode 100644 index 0000000..eca09b1 Binary files /dev/null and b/public/apple-touch-icon.png differ diff --git a/public/browserconfig.xml b/public/browserconfig.xml new file mode 100644 index 0000000..839c7ca --- /dev/null +++ b/public/browserconfig.xml @@ -0,0 +1,9 @@ + + + + + + #363645 + + + diff --git a/public/favicon-16x16.png b/public/favicon-16x16.png new file mode 100644 index 0000000..587adac Binary files /dev/null and b/public/favicon-16x16.png differ diff --git a/public/favicon-32x32.png b/public/favicon-32x32.png new file mode 100644 index 0000000..f0dd178 Binary files /dev/null and b/public/favicon-32x32.png differ diff --git a/public/favicon.ico b/public/favicon.ico new file mode 100644 index 0000000..75b54a4 Binary files /dev/null and b/public/favicon.ico differ diff --git a/public/index.html b/public/index.html index 8dc3367..52c76f5 100644 --- a/public/index.html +++ b/public/index.html @@ -2,15 +2,37 @@ - - - - + + + + + + + + QuestionForm diff --git a/public/manifest.json b/public/manifest.json index 58031c7..aff5bbb 100644 --- a/public/manifest.json +++ b/public/manifest.json @@ -8,18 +8,18 @@ "type": "image/x-icon" }, { - "src": "logo192.png", + "src": "android-chrome-192x192.png", "type": "image/png", "sizes": "192x192" }, { - "src": "logo512.png", + "src": "android-chrome-512x512.png", "type": "image/png", "sizes": "512x512" } ], - "start_url": ".", + "start_url": "/", "display": "standalone", - "theme_color": "#000000", - "background_color": "#ffffff" + "theme_color": "#6df577", + "background_color": "#363645" } diff --git a/public/mstile-150x150.png b/public/mstile-150x150.png new file mode 100644 index 0000000..2c49f95 Binary files /dev/null and b/public/mstile-150x150.png differ diff --git a/public/safari-pinned-tab.svg b/public/safari-pinned-tab.svg new file mode 100644 index 0000000..10b45b4 --- /dev/null +++ b/public/safari-pinned-tab.svg @@ -0,0 +1,34 @@ + + + + +Created by potrace 1.11, written by Peter Selinger 2001-2013 + + + + + + + diff --git a/public/site.webmanifest b/public/site.webmanifest new file mode 100644 index 0000000..d37fd09 --- /dev/null +++ b/public/site.webmanifest @@ -0,0 +1,19 @@ +{ + "name": "", + "short_name": "", + "icons": [ + { + "src": "/android-chrome-192x192.png", + "sizes": "192x192", + "type": "image/png" + }, + { + "src": "/android-chrome-512x512.png", + "sizes": "512x512", + "type": "image/png" + } + ], + "theme_color": "#363645", + "background_color": "#363645", + "display": "standalone" +} diff --git a/src/components/FormLists/index.tsx b/src/components/FormLists/index.tsx index 2c8ffc5..205e86c 100644 --- a/src/components/FormLists/index.tsx +++ b/src/components/FormLists/index.tsx @@ -1,5 +1,7 @@ import React from 'react' +import styles from './main.module.css' + interface IListsProps { variants: { text: string }[] name: string @@ -25,6 +27,7 @@ const Lists: React.FC = ({ variants, name, type, onChange }) => { type={inputType} name={name} value={el.text} + className={styles.selector} /> {el.text} diff --git a/src/components/FormLists/main.module.css b/src/components/FormLists/main.module.css new file mode 100644 index 0000000..01184c3 --- /dev/null +++ b/src/components/FormLists/main.module.css @@ -0,0 +1,3 @@ +.selector { + margin-right: 0.5rem; +} diff --git a/src/components/Navbar/logo.svg b/src/components/Navbar/logo.svg index db56a90..d4a95b8 100644 --- a/src/components/Navbar/logo.svg +++ b/src/components/Navbar/logo.svg @@ -1,26 +1,73 @@ - - - - + + + + + + + image/svg+xml + + + + + + + + + + + diff --git a/src/components/QuestionsForm/index.tsx b/src/components/QuestionsForm/index.tsx index 0918dfc..05a3284 100644 --- a/src/components/QuestionsForm/index.tsx +++ b/src/components/QuestionsForm/index.tsx @@ -7,6 +7,7 @@ import Lists from '../FormLists' import { useForm } from './hooks' import { QuestionT } from '../../types' import { RefetchQuestionsFT, IFormSubmitMutation } from './types' +import styles from './main.module.css' interface IQuestionsFormProps { formId: number @@ -62,52 +63,63 @@ const QuestionsForm: React.FC = ({ {questions.map((el: QuestionT) => { if (el.__typename === 'InputQuestion') return ( -
  • -
  • + + + changeAnswer(el.number)(e.currentTarget.value) + } + type="text" + />
    • ) if (el.__typename === 'ChoisesQuestion') return ( -
  • -
  • + + {el.type === 'SELECT' ? ( + + ) : ( + + )}
    • ) - return
  • Unknown question type
    • + return
  • Unknown question type
    • })} - {submitLoading ?

    Uploading...

    : } + {submitLoading ? ( +

    Uploading...

    + ) : ( + + )} {submitError &&

    {submitError.message}

    } {submitData?.formSubmit.success &&

    Successfully uploaded

    } diff --git a/src/components/QuestionsForm/main.module.css b/src/components/QuestionsForm/main.module.css new file mode 100644 index 0000000..b14ee0e --- /dev/null +++ b/src/components/QuestionsForm/main.module.css @@ -0,0 +1,56 @@ +.question { + list-style: none; + padding-bottom: 1rem; +} + +.questionTitle { + padding-bottom: 0.5rem; + display: block; + font-weight: bold; + font-size: 1.3rem; +} + +.textInput { + height: 2.3rem; + border-radius: 100vh; + border: none; + outline: none; + font-size: 1.2rem; + padding: 0 0.7rem; + width: 100%; + border-bottom: 0.15rem var(--containerColor) solid; + transition: border 0.1s; +} + +.textInput:focus { + border-bottom-width: 0rem; + border-top: 0.15rem var(--containerColor) solid; +} + +.select { + /* -webkit-appearance: none; */ + /* -moz-appearance: none; */ + /* appearance: none; */ + padding: 0.5rem; + background: var(--accentColor); + border-radius: 20px; + color: #ffffff; +} + +.button { + height: 2.3rem; + border-radius: 100vh; + border: none; + outline: none; + font-size: 1.2rem; + padding: 0 0.7rem; + width: 100%; + cursor: pointer; + background-color: var(--accentColor); + color: var(--onAccentFontColor); + box-shadow: 0 1px 6px 0 var(--accentShadowColor); +} + +.button:active { + box-shadow: none; +} diff --git a/src/components/SubmissionsList/empty.svg b/src/components/SubmissionsList/empty.svg new file mode 100644 index 0000000..6b935e7 --- /dev/null +++ b/src/components/SubmissionsList/empty.svg @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/SubmissionsList/index.tsx b/src/components/SubmissionsList/index.tsx index 79e183d..6ce2765 100644 --- a/src/components/SubmissionsList/index.tsx +++ b/src/components/SubmissionsList/index.tsx @@ -7,6 +7,9 @@ import { ChoisesQuestion, Question, } from '../../apollo/typeDefs.gen' +import emptyIcon from './empty.svg' +import styles from './main.module.css' +import { getDateCreated } from '../../utils' interface ISubmissionListProps { submissions: FormSubmission[] @@ -20,27 +23,31 @@ const SubmissionList: React.FC = ({ return submissions.length > 0 ? (