Added styles for form creation page and all components in it. Some minor improvements in another pages

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

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;
+  }
+}

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;

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}>

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;

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,

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>
+        <div className={styles.pageHeader}>
-          Title:
+          <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>
+        <div className={styles.mainFormContainer}>
-          <legend>Content</legend>
+          <fieldset className={styles.mainForm}>
-          <ul>
+            <div className={styles.mainFormTop} />
-            {creationsArray.flatMap((questionType, index) =>
+            <legend className={styles.fieldsetTitle}>Content</legend>
-              questionType.enabled
+            <ul>
-                ? [
+              {form.questions.map((quesstion, questionIndex) => (
-                    <li key={index}>
+                <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>,
+                    </>
-                  ]
+                  )}
-                : []
+                </li>
-            )}
+              ))}
-          </ul>
+            </ul>
-          <ul>
+            <ul>
-            {form.questions.map((quesstion, questionIndex) => (
+              {creationsArray.flatMap((questionType, index) =>
-              <li key={questionIndex}>
+                questionType.enabled
-                <p>{quesstion.type} question:</p>
+                  ? [
-                <input
+                      <li className={styles.questionCreatorLI} key={index}>
-                  required
+                        <button
-                  type="text"
+                          className={styles.button}
-                  name="questionTitle"
+                          type="button"
-                  placeholder="Title"
+                          onClick={() => addQuestion(questionType.type)}
-                  value={quesstion.title}
+                        >
-                  onChange={(e) => handleQuestionTitleChange(questionIndex, e)}
+                          + {questionType.title}
-                />
+                        </button>
-                {(quesstion.type === 'CHECK' ||
+                      </li>,
-                  quesstion.type === 'CHOOSE' ||
+                    ]
-                  quesstion.type === 'SELECT') && (
+                  : []
-                  <>
+              )}
-                    <ul>
+            </ul>
-                      {quesstion.variants.map((variant, variantIndex) => (
+          </fieldset>
-                        <li key={variantIndex}>
+        </div>
-                          <input
+        <div className={styles.submitContainer}>
-                            required
+          {submitLoading ? (
-                            placeholder="Variant"
+            'Loading...'
-                            type="text"
+          ) : (
-                            value={variant}
+            <input
-                            onChange={(e) =>
+              className={[styles.button, styles.submitButton].join(' ')}
-                              handleAnswerVariantChange(
+              type="submit"
-                                questionIndex,
+              value="Submit"
-                                variantIndex,
+            />
-                                e
+          )}
-                              )
+        </div>
-                            }
-                          />
-                        </li>
-                      ))}
-                    </ul>
-                    <button
-                      type="button"
-                      onClick={() => addVariant(questionIndex)}
-                    >
-                      +
-                    </button>
-                  </>
-                )}
-              </li>
-            ))}
-          </ul>
-        </fieldset>
-        {submitLoading ? 'Loading...' : <input type="submit" value="Submit" />}
       </form>
       {submitData?.createForm.success && 'Successfully uploaded'}
       {submitError && submitError.message}
-    </>
+    </div>
   )
 }
 

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;
+  }
+}

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

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>

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>
 

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;

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}

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;

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}