From 6ef34c6ab8012845f041f779cfbc1c395c81cf95 Mon Sep 17 00:00:00 2001
From: Dm1tr1y147 <me@dmitriy.icu>
Date: Sat, 7 Nov 2020 06:07:27 +0500
Subject: [PATCH] Added styles for form creation page and all components in it.
 Some minor improvements in another pages

---
 src/components/FormLists/index.tsx            |   2 +-
 src/components/FormLists/main.module.css      |  11 ++
 src/components/QuestionsForm/main.module.css  |   3 -
 src/components/SubmissionsList/index.tsx      |   2 +-
 .../SubmissionsList/main.module.css           |   6 +
 src/views/CreateForm/hooks.ts                 |   9 +
 src/views/CreateForm/index.tsx                | 175 +++++++++++-------
 src/views/CreateForm/main.module.css          | 150 +++++++++++++++
 src/views/CreateForm/types.ts                 |   3 +
 src/views/DoForm/index.tsx                    |   2 +-
 src/views/Home/index.tsx                      |   5 +-
 src/views/Home/main.module.css                |  25 +++
 src/views/Login/index.tsx                     |   5 +-
 src/views/Login/main.module.css               |   4 +
 src/views/Register/index.tsx                  |   6 +-
 15 files changed, 331 insertions(+), 77 deletions(-)
 create mode 100644 src/views/CreateForm/main.module.css

diff --git a/src/components/FormLists/index.tsx b/src/components/FormLists/index.tsx
index 205e86c..3dc8d1e 100644
--- a/src/components/FormLists/index.tsx
+++ b/src/components/FormLists/index.tsx
@@ -14,7 +14,7 @@ const Lists: React.FC<IListsProps> = ({ variants, name, type, onChange }) => {
     (type === 'CHECK' && 'check') || (type === 'CHOOSE' && 'radio') || undefined
 
   return (
-    <div>
+    <div className={styles.variantsList}>
       {variants.map((el, index) => (
         <label key={index}>
           <input
diff --git a/src/components/FormLists/main.module.css b/src/components/FormLists/main.module.css
index 01184c3..bd74ed2 100644
--- a/src/components/FormLists/main.module.css
+++ b/src/components/FormLists/main.module.css
@@ -1,3 +1,14 @@
 .selector {
   margin-right: 0.5rem;
 }
+
+.variantsList {
+  display: flex;
+  gap: 0.5rem;
+}
+
+@media (orientation: portrait) {
+  .variantsList {
+    flex-direction: column;
+  }
+}
diff --git a/src/components/QuestionsForm/main.module.css b/src/components/QuestionsForm/main.module.css
index b14ee0e..a57b325 100644
--- a/src/components/QuestionsForm/main.module.css
+++ b/src/components/QuestionsForm/main.module.css
@@ -28,9 +28,6 @@
 }
 
 .select {
-  /* -webkit-appearance: none; */
-  /* -moz-appearance: none; */
-  /* appearance: none; */
   padding: 0.5rem;
   background: var(--accentColor);
   border-radius: 20px;
diff --git a/src/components/SubmissionsList/index.tsx b/src/components/SubmissionsList/index.tsx
index 6ce2765..4459710 100644
--- a/src/components/SubmissionsList/index.tsx
+++ b/src/components/SubmissionsList/index.tsx
@@ -21,7 +21,7 @@ const SubmissionList: React.FC<ISubmissionListProps> = ({
   questions,
 }) => {
   return submissions.length > 0 ? (
-    <ul>
+    <ul className={styles.container}>
       {submissions.map((submission, submissionIndex) => (
         <li className={styles.listItem} key={submissionIndex}>
           <h2 className={styles.itemHeader}>
diff --git a/src/components/SubmissionsList/main.module.css b/src/components/SubmissionsList/main.module.css
index 72850e6..f0f4402 100644
--- a/src/components/SubmissionsList/main.module.css
+++ b/src/components/SubmissionsList/main.module.css
@@ -1,3 +1,9 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: 2.3rem;
+}
+
 .listItem {
   list-style-type: none;
   border: 0.1rem var(--containerColor) solid;
diff --git a/src/views/CreateForm/hooks.ts b/src/views/CreateForm/hooks.ts
index 6dcec4a..d0948cc 100644
--- a/src/views/CreateForm/hooks.ts
+++ b/src/views/CreateForm/hooks.ts
@@ -14,6 +14,7 @@ import {
   HandleQuestionTitleChangeFT,
   HandleAnswerVariantChangeFT,
   AddVariantFT,
+  RemoveQuestionFT,
 } from './types'
 
 const initialState = { title: '', questions: [] }
@@ -52,6 +53,13 @@ export const useFormCreator = <T extends string>(
     }))
   }
 
+  const removeQuestion: RemoveQuestionFT = (number) => {
+    setState(({ title, questions }) => ({
+      title,
+      questions: questions.filter((_, index) => index !== number),
+    }))
+  }
+
   const handleQuestionTitleChange: HandleQuestionTitleChangeFT = (
     questionNumber,
     e
@@ -107,6 +115,7 @@ export const useFormCreator = <T extends string>(
     {
       handleFormTitleChange,
       addQuestion: createQuestion,
+      removeQuestion,
       handleQuestionTitleChange,
       handleAnswerVariantChange,
       addVariant,
diff --git a/src/views/CreateForm/index.tsx b/src/views/CreateForm/index.tsx
index e109891..d281516 100644
--- a/src/views/CreateForm/index.tsx
+++ b/src/views/CreateForm/index.tsx
@@ -3,6 +3,7 @@ import React from 'react'
 import { QuestionTypes } from './types'
 import { useFormCreator } from './hooks'
 import { creationsArray, formatQuestionsToSubmit } from './utils'
+import styles from './main.module.css'
 
 const CreateForm: React.FC = () => {
   const [
@@ -10,6 +11,7 @@ const CreateForm: React.FC = () => {
     [formSubmit, { submitData, submitError, submitLoading }],
     {
       addQuestion,
+      removeQuestion,
       handleFormTitleChange,
       handleQuestionTitleChange,
       handleAnswerVariantChange,
@@ -19,94 +21,133 @@ const CreateForm: React.FC = () => {
   ] = useFormCreator<QuestionTypes>(formatQuestionsToSubmit)
 
   return (
-    <>
+    <div className={styles.container}>
       <form
         onSubmit={(e) => {
           formSubmit(e)
           resetForm()
         }}
       >
-        <label>
-          Title:
+        <div className={styles.pageHeader}>
+          <h1 className={styles.pageTitle}>Create form</h1>
           <input
+            className={styles.textInput}
             type="text"
             name="Title"
+            placeholder="title"
             value={form.title}
             onChange={handleFormTitleChange}
             required
           />
-        </label>
+        </div>
 
-        <fieldset>
-          <legend>Content</legend>
-          <ul>
-            {creationsArray.flatMap((questionType, index) =>
-              questionType.enabled
-                ? [
-                    <li key={index}>
+        <div className={styles.mainFormContainer}>
+          <fieldset className={styles.mainForm}>
+            <div className={styles.mainFormTop} />
+            <legend className={styles.fieldsetTitle}>Content</legend>
+            <ul>
+              {form.questions.map((quesstion, questionIndex) => (
+                <li className={styles.questionToCreateLI} key={questionIndex}>
+                  <div className={styles.questionHeader}>
+                    <h3 className={styles.questionTitle}>
+                      {quesstion.type} question:
+                    </h3>
+                    <input
+                      className={[styles.textInput, styles.fullWidth].join(' ')}
+                      required
+                      type="text"
+                      name="questionTitle"
+                      placeholder="Title"
+                      value={quesstion.title}
+                      onChange={(e) =>
+                        handleQuestionTitleChange(questionIndex, e)
+                      }
+                    />
+                    <button
+                      className={styles.button}
+                      onClick={(e) => {
+                        e.preventDefault()
+                        removeQuestion(questionIndex)
+                      }}
+                    >
+                      x
+                    </button>
+                  </div>
+                  {(quesstion.type === 'CHECK' ||
+                    quesstion.type === 'CHOOSE' ||
+                    quesstion.type === 'SELECT') && (
+                    <>
+                      <h4 className={styles.variantsHeader}>Variants</h4>
+                      <ul>
+                        {quesstion.variants.map((variant, variantIndex) => (
+                          <li key={variantIndex}>
+                            <input
+                              className={[
+                                styles.textInput,
+                                styles.fullWidth,
+                                styles.variantText,
+                              ].join(' ')}
+                              required
+                              placeholder="Variant"
+                              type="text"
+                              value={variant}
+                              onChange={(e) =>
+                                handleAnswerVariantChange(
+                                  questionIndex,
+                                  variantIndex,
+                                  e
+                                )
+                              }
+                            />
+                          </li>
+                        ))}
+                      </ul>
                       <button
                         type="button"
-                        onClick={() => addQuestion(questionType.type)}
+                        onClick={() => addVariant(questionIndex)}
+                        className={[styles.button, styles.addVariant].join(' ')}
                       >
-                        {questionType.title}
+                        +
                       </button>
-                    </li>,
-                  ]
-                : []
-            )}
-          </ul>
-          <ul>
-            {form.questions.map((quesstion, questionIndex) => (
-              <li key={questionIndex}>
-                <p>{quesstion.type} question:</p>
-                <input
-                  required
-                  type="text"
-                  name="questionTitle"
-                  placeholder="Title"
-                  value={quesstion.title}
-                  onChange={(e) => handleQuestionTitleChange(questionIndex, e)}
-                />
-                {(quesstion.type === 'CHECK' ||
-                  quesstion.type === 'CHOOSE' ||
-                  quesstion.type === 'SELECT') && (
-                  <>
-                    <ul>
-                      {quesstion.variants.map((variant, variantIndex) => (
-                        <li key={variantIndex}>
-                          <input
-                            required
-                            placeholder="Variant"
-                            type="text"
-                            value={variant}
-                            onChange={(e) =>
-                              handleAnswerVariantChange(
-                                questionIndex,
-                                variantIndex,
-                                e
-                              )
-                            }
-                          />
-                        </li>
-                      ))}
-                    </ul>
-                    <button
-                      type="button"
-                      onClick={() => addVariant(questionIndex)}
-                    >
-                      +
-                    </button>
-                  </>
-                )}
-              </li>
-            ))}
-          </ul>
-        </fieldset>
-        {submitLoading ? 'Loading...' : <input type="submit" value="Submit" />}
+                    </>
+                  )}
+                </li>
+              ))}
+            </ul>
+            <ul>
+              {creationsArray.flatMap((questionType, index) =>
+                questionType.enabled
+                  ? [
+                      <li className={styles.questionCreatorLI} key={index}>
+                        <button
+                          className={styles.button}
+                          type="button"
+                          onClick={() => addQuestion(questionType.type)}
+                        >
+                          + {questionType.title}
+                        </button>
+                      </li>,
+                    ]
+                  : []
+              )}
+            </ul>
+          </fieldset>
+        </div>
+        <div className={styles.submitContainer}>
+          {submitLoading ? (
+            'Loading...'
+          ) : (
+            <input
+              className={[styles.button, styles.submitButton].join(' ')}
+              type="submit"
+              value="Submit"
+            />
+          )}
+        </div>
       </form>
       {submitData?.createForm.success && 'Successfully uploaded'}
       {submitError && submitError.message}
-    </>
+    </div>
   )
 }
 
diff --git a/src/views/CreateForm/main.module.css b/src/views/CreateForm/main.module.css
new file mode 100644
index 0000000..adcb2c6
--- /dev/null
+++ b/src/views/CreateForm/main.module.css
@@ -0,0 +1,150 @@
+.container {
+  height: calc(100vh - 4rem);
+}
+
+.container form {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.pageHeader {
+  display: flex;
+  gap: 1rem;
+  padding: 2.3rem;
+}
+
+.pageTitle {
+  margin-top: -0.3rem;
+}
+
+.textInput {
+  height: 2.3rem;
+  border-radius: 100vh;
+  border: none;
+  display: inline;
+  outline: none;
+  font-size: 1.2rem;
+  padding: 0 0.7rem;
+  border-bottom: 0.15rem var(--containerColor) solid;
+  transition: border 0.1s;
+}
+
+.textInput:focus {
+  border-bottom-width: 0rem;
+  border-top: 0.15rem var(--containerColor) solid;
+}
+
+.mainFormContainer {
+  margin-top: 2.3rem;
+  padding: 2.3rem;
+  padding-top: 0;
+  flex-grow: 1;
+  position: relative;
+  background: #ffffff;
+}
+
+.mainFormTop {
+  top: -2.3rem;
+  left: 0rem;
+  position: absolute;
+  height: 2.3rem;
+  width: 100%;
+  border-top-left-radius: 20px;
+  border-top-right-radius: 20px;
+  background: #ffffff;
+}
+
+.mainForm {
+  border: none;
+}
+
+.fieldsetTitle {
+  font-size: 1.4rem;
+  font-weight: bold;
+  padding-bottom: 2rem;
+}
+
+.questionCreatorLI {
+  list-style: none;
+  display: inline;
+  padding-right: 0.5rem;
+}
+
+.button {
+  height: 2.3rem;
+  border-radius: 100vh;
+  border: none;
+  outline: none;
+  font-size: 1.2rem;
+  padding: 0 0.7rem;
+  cursor: pointer;
+  background-color: var(--accentColor);
+  color: var(--onAccentFontColor);
+  box-shadow: 0 1px 6px 0 var(--accentShadowColor);
+}
+
+.button:active {
+  box-shadow: none;
+}
+
+.questionToCreateLI {
+  margin-bottom: 2.3rem;
+  list-style: none;
+  border: 0.1rem var(--containerColor) solid;
+  border-radius: 20px;
+  padding: 2.3rem;
+}
+
+.questionHeader {
+  display: grid;
+  grid-template-columns: auto 1fr 2.3rem;
+  gap: 0.5rem;
+}
+
+.questionTitle {
+  line-height: 2.3rem;
+}
+
+.fullWidth {
+  width: 100%;
+}
+
+.variantsHeader {
+  margin: 1rem 0;
+}
+
+.variantText {
+  margin: 0.5rem;
+}
+
+.addVariant {
+  width: 2.3rem;
+  margin: auto;
+  display: block;
+  line-height: 2.3rem;
+}
+
+.submitContainer {
+  padding: 2.3rem;
+  background-color: #ffffff;
+}
+
+.submitButton {
+  width: 100%;
+}
+
+@media (orientation: portrait) {
+  .pageHeader {
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .pageTitle {
+    margin-top: 0;
+  }
+
+  .questionHeader {
+    grid-template-columns: 1fr;
+  }
+}
diff --git a/src/views/CreateForm/types.ts b/src/views/CreateForm/types.ts
index b954215..3e1f61a 100644
--- a/src/views/CreateForm/types.ts
+++ b/src/views/CreateForm/types.ts
@@ -28,6 +28,8 @@ export type HandleFormTitleChangeFT = (e: ChangeEvent<HTMLInputElement>) => void
 
 export type CreateQuestionFT<T extends string> = (type: T) => void
 
+export type RemoveQuestionFT = (number: number) => void
+
 export type HandleQuestionTitleChangeFT = (
   questionNumber: number,
   e: ChangeEvent<HTMLInputElement>
@@ -54,6 +56,7 @@ export type UseFormCreatorHookTurpleT<T extends string> = [
   {
     handleFormTitleChange: HandleFormTitleChangeFT
     addQuestion: CreateQuestionFT<T>
+    removeQuestion: RemoveQuestionFT
     handleQuestionTitleChange: HandleQuestionTitleChangeFT
     handleAnswerVariantChange: HandleAnswerVariantChangeFT
     addVariant: AddVariantFT
diff --git a/src/views/DoForm/index.tsx b/src/views/DoForm/index.tsx
index ac05326..ed06478 100644
--- a/src/views/DoForm/index.tsx
+++ b/src/views/DoForm/index.tsx
@@ -41,7 +41,7 @@ const DoForm: React.FC = () => {
         </p>
       </header>
       <main className={styles.main}>
-        <div className={styles.mainTop}></div>
+        <div className={styles.mainTop} />
         {form.submissions ? (
           <>
             <h1 className={styles.mainHeader}>Submissions</h1>
diff --git a/src/views/Home/index.tsx b/src/views/Home/index.tsx
index e3e6dd7..1e4af4f 100644
--- a/src/views/Home/index.tsx
+++ b/src/views/Home/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import { useQuery } from '@apollo/client'
 import { generateFromString } from 'generate-avatar'
-import { Redirect, useHistory } from 'react-router-dom'
+import { Redirect, useHistory, Link } from 'react-router-dom'
 
 import Card from '../../components/Card'
 import { USER } from '../../apollo'
@@ -55,6 +55,9 @@ const Home: React.FC = () => {
               <Card title={form.title} id={form.id} />
             </li>
           ))}
+          <Link className={styles.createNew} to="/create">
+            <span>Create new</span> <h3>+</h3>
+          </Link>
         </ul>
       </div>
 
diff --git a/src/views/Home/main.module.css b/src/views/Home/main.module.css
index f72e9e3..4e21b56 100644
--- a/src/views/Home/main.module.css
+++ b/src/views/Home/main.module.css
@@ -30,6 +30,31 @@
   overflow-y: auto;
 }
 
+.createNew:hover {
+  border-color: var(--containerColor);
+  color: var(--containerColor);
+}
+
+.createNew {
+  padding: 1rem;
+  border-radius: 0.5rem;
+  border: 0.1rem var(--accentColor) solid;
+  text-decoration: none;
+  color: var(--accentColor);
+  display: flex;
+  gap: 0.5rem;
+  justify-content: center;
+}
+
+.createNew span {
+  font-weight: bold;
+  line-height: 1.17em;
+}
+
+.createNew h3 {
+  line-height: 1.17em;
+}
+
 .rightPad {
   display: flex;
   flex-direction: column;
diff --git a/src/views/Login/index.tsx b/src/views/Login/index.tsx
index 1ae3ef1..ae96851 100644
--- a/src/views/Login/index.tsx
+++ b/src/views/Login/index.tsx
@@ -5,6 +5,7 @@ import { LOGIN } from '../../apollo'
 import { MutationLoginArgs, ServerAnswer } from '../../apollo/typeDefs.gen'
 import styles from './main.module.css'
 import meme from './meme.png'
+import { Link } from 'react-router-dom'
 
 interface ILoginMutation {
   login: ServerAnswer
@@ -47,7 +48,9 @@ const Login: React.FC = () => {
             </div>
           ) : (
             <>
-              <h1 className={styles.header}>Login</h1>
+              <h1 className={styles.header}>
+                Log In / <Link to="/register">Register</Link>
+              </h1>
               <input
                 required
                 className={styles.input}
diff --git a/src/views/Login/main.module.css b/src/views/Login/main.module.css
index 7434858..cff9004 100644
--- a/src/views/Login/main.module.css
+++ b/src/views/Login/main.module.css
@@ -48,6 +48,10 @@
   text-align: center;
 }
 
+.header a {
+  color: var(--accentColor);
+}
+
 .input {
   border-bottom: 0.15rem var(--containerColor) solid !important;
   transition: border 0.1s;
diff --git a/src/views/Register/index.tsx b/src/views/Register/index.tsx
index 761df3b..f7f8635 100644
--- a/src/views/Register/index.tsx
+++ b/src/views/Register/index.tsx
@@ -1,6 +1,6 @@
 import { useMutation } from '@apollo/client'
 import React, { FormEvent } from 'react'
-import { Redirect } from 'react-router-dom'
+import { Redirect, Link } from 'react-router-dom'
 
 import { REGISTER } from '../../apollo'
 import { MutationRegisterArgs, ServerAnswer } from '../../apollo/typeDefs.gen'
@@ -40,7 +40,9 @@ const Register: React.FC = () => {
           alt='Questionform says: "Is mailbox a password?"'
         />
         <form className={styles.form} onSubmit={handleSubmit}>
-          <h1 className={styles.header}>Register</h1>
+          <h1 className={styles.header}>
+            Register / <Link to="/login">Log In</Link>
+          </h1>
           <input
             required
             className={styles.input}