Responsify form pages

src/components/button/button.tsx

@@ -18,30 +18,30 @@ export default function Button(props: {
         case 'flat-light-blue':
             variantClasses = disabled
                 ? 'bg-gray-200 text-gray-400 icon-gray cursor-not-allowed '
-                : 'bg-blue-50 text-blue-900 icon-dark-blue ringable';
-            loadingClasses = 'bg-blue-100 text-blue-900 icon-dark-blue';
+                : 'bg-blue-50 text-blue-900 icon-dark-blue ringable ';
+            loadingClasses = 'bg-blue-100 text-blue-900 icon-dark-blue ';
             break;
         case 'light-on-dark':
             variantClasses =
-                'bg-gray-200 hover:bg-white shadow text-gray-800 hover:text-gray-900 icon-blue ringable';
+                'bg-gray-200 hover:bg-white shadow text-gray-800 hover:text-gray-900 icon-blue ringable ';
             // loadingClasses not used yet
             break;
         case 'dark-on-dark':
             variantClasses =
-                'hover:bg-gray-700 text-gray-200 hover:text-white icon-blue ringable';
+                'hover:bg-gray-700 text-gray-200 hover:text-white icon-blue ringable ';
             // loadingClasses not used yet
             break;
         default:
             variantClasses =
-                'bg-white hover:bg-gray-100 shadow text-gray-900 icon-blue ringable';
-            loadingClasses = 'bg-gray-50 shadow text-blue-900 icon-blue';
+                'bg-white hover:bg-gray-100 shadow text-gray-900 icon-blue ringable ';
+            loadingClasses = 'bg-gray-50 shadow text-blue-900 icon-blue ';
             break;
     }
 
     function Linker(props: {children: React.ReactNode}) {
         const classNames =
             'p-0.5 rounded flex-row-center ' +
-            'text-base md:text-sm h-10 sm:h-8 md:h-7' +
+            'text-base md:text-sm h-10 sm:h-8 md:h-7 ' +
             'no-selection ringable relative overflow-hidden ' +
             'font-weight-700 md:font-weight-600 ' +
             variantClasses;
@@ -69,9 +69,8 @@ export default function Button(props: {
             {loading && (
                 <div
                     className={
-                        'flex-row-center space-x-0.5 font-weight-600 ' +
-                        'absolute top-0 left-0 w-full h-full ' +
-                        'backdrop-filter backdrop-blur-[2.5px] z-10 ' +
+                        'flex-row-center space-x-0.5 font-weight-600 z-10 ' +
+                        'absolute top-0 left-0 w-full h-full rounded ' +
                         loadingClasses
                     }
                 >

src/components/layout/main-content.tsx

@@ -10,24 +10,30 @@ function MainContent(props: {children: React.ReactNode}) {
 
     return (
         <React.Fragment>
-            <header>
-                <div className='absolute top-0 left-0 h-12 m-4 lg:h-16'>
+            <header className='relative top-0 left-0 w-full bg-gray-200 md:absolute flex-row-left'>
+                <div className='h-12 m-4 lg:h-16'>
                     <Link
                         to={logoURL}
                         className={'ringable rounded centering-row'}
                     >
                         <img
                             src={RocketLogo}
                             alt='FastSurvey Icon'
-                            className='w-12 h-12 p-1 lg:w-16 lg:h-16 lg:p-2'
+                            className='w-16 h-16 p-2'
                         />
-                        <div className='mx-2 text-xl text-grey-500 lg:text-2xl font-weight-700 rubik'>
+                        <div className='mx-2 text-2xl text-gray-900 lg:text-2xl font-weight-700 lg:font-weigh-600'>
                             FastSurvey
                         </div>
                     </Link>
                 </div>
             </header>
-            <main className='w-screen min-h-screen px-2 pt-24 pb-20 bg-gray-100 xl:pb-32 xl:pt-16 centering-col'>
+            <main
+                className={
+                    'w-screen min-h-screen px-2 bg-gray-200 ' +
+                    'pb-12 pt-4 md:pb-26 ' +
+                    'flex-col-top'
+                }
+            >
                 {props.children}
             </main>
         </React.Fragment>

src/components/survey-field/field-form/email-form.tsx

@@ -22,7 +22,7 @@ function EmailForm(props: {
 
     return (
         <>
-            <div className='w-full mb-0.5 text-lg text-left text-gray-700 font-weight-700'>
+            <div className='w-full mb-1 text-lg text-left text-black md:text-gray-700 font-weight-700'>
                 {fieldIndex + 1}. {fieldConfig.title}
             </div>
             {fieldConfig.description.replace(' ', '').length > 0 && (
@@ -35,10 +35,10 @@ function EmailForm(props: {
                 onChange={handleChange}
                 className={
                     'w-full mt-2 px-3 py-2 rounded font-weight-600 ' +
-                    'bg-gray-100 focus:bg-gray-50 text-sm ' +
+                    'bg-gray-100 focus:bg-gray-50 text-base md:text-sm ' +
                     'text-gray-700 focus:text-gray-900 placeholder-gray-400 ' +
                     'outline-none ring ring-transparent focus:ring-blue-200 ' +
-                    'transition-colors duration-100 leading-6'
+                    'transition-colors duration-100 leading-7 md:leading-6'
                 }
                 onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) => {
                     if (e.key === 'Escape') {

src/components/survey-field/field-form/option-form.tsx

@@ -19,20 +19,21 @@ function OptionForm(props: {
 
     return (
         <>
-            <div className='w-full mb-1 text-lg text-left text-gray-700 font-weight-700'>
+            <div className='w-full mb-1 text-lg text-left text-black md:text-gray-700 font-weight-700'>
                 {fieldIndex + 1}. {fieldConfig.title}
             </div>
             <button
                 className={
-                    'w-full mt-1 space-x-2 flex-row-left no-selection ' +
+                    'w-full space-x-2 flex-row-left no-selection ' +
+                    'mt-0 py-2 md:mt-1 md:py-0 ' +
                     'focus:outline-none ring ring-transparent focus:ring-blue-300 rounded'
                 }
                 onClick={toggle}
             >
                 <div className={'flex-shrink-0 w-8 h-8 p-1 cursor-pointer'}>
                     {fieldData ? icons.checkboxFilled : icons.checkboxEmpty}
                 </div>
-                <div className='w-full text-sm leading-tight text-justify text-gray-900 markdown font-weight-500 flex-row-left'>
+                <div className='w-full text-base leading-tight text-justify text-gray-900 md:text-sm markdown font-weight-500 flex-row-left'>
                     {fieldConfig.description.replace(' ', '').length === 0
                         ? 'Yes'
                         : fieldConfig.description}

src/components/survey-field/field-form/radio-form.tsx

@@ -28,33 +28,30 @@ function RadioForm(props: {
 
     return (
         <>
-            <div className='w-full mb-0.5 text-lg text-left text-gray-700 font-weight-700'>
+            <div className='w-full mb-0.5 text-lg text-left text-black md:text-gray-700 font-weight-700'>
                 {fieldIndex + 1}. {fieldConfig.title}
             </div>
             {fieldConfig.description.replace(' ', '').length > 0 && (
                 <div className='w-full mt-0.5 mb-2 text-sm leading-tight text-justify text-gray-700 font-weight-500'>
                     {fieldConfig.description}
                 </div>
             )}
-            <div className='w-full mt-2 text-sm leading-tight text-left text-blue-800 font-weight-600'>
-                Select 1 option
-            </div>
             {fieldConfig.options.map((fieldOption, optionIndex: number) => (
                 <button
                     key={optionIndex}
                     onClick={toggle(fieldOption)}
                     className={
                         'w-full mt-2 ringable rounded ' +
                         (fieldData === fieldOption
-                            ? 'bg-gray-100 text-gray-900 '
-                            : 'bg-gray-200 text-gray-500 ')
+                            ? 'bg-gray-100 text-black font-weight-700 '
+                            : 'bg-gray-200 text-gray-500 font-weight-600 ')
                     }
                 >
                     <div
                         className={
                             'w-full flex-row-left no-selection ' +
                             'pl-3 pr-2 py-2 cursor-pointer ' +
-                            'font-weight-600 text-sm '
+                            'text-base leading-7 md:leading-6 md:text-sm '
                         }
                     >
                         {fieldOption}

src/components/survey-field/field-form/selection-form.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import {types} from '@types';
-import {without} from 'lodash';
-import {icons} from '../../../assets/icons/index';
+import {icons} from '@assets/icons/index';
 
 function SelectionForm(props: {
     fieldConfig: types.SelectionField;
@@ -33,34 +32,30 @@ function SelectionForm(props: {
 
     return (
         <>
-            <div className='w-full mb-0.5 text-lg text-left text-gray-700 font-weight-700'>
+            <div className='w-full mb-0.5 text-lg text-left text-black md:text-gray-700 font-weight-700'>
                 {fieldIndex + 1}. {fieldConfig.title}
             </div>
             {fieldConfig.description.replace(' ', '').length > 0 && (
                 <div className='w-full mt-0.5 mb-2 text-sm leading-tight text-justify text-gray-700 font-weight-500'>
                     {fieldConfig.description}
                 </div>
             )}
-            <div className='w-full mt-2 text-sm leading-tight text-left text-blue-800 font-weight-600'>
-                Select between {fieldConfig.min_select} and{' '}
-                {fieldConfig.max_select} options
-            </div>
             {fieldConfig.options.map((fieldOption, optionIndex: number) => (
                 <button
                     key={optionIndex}
                     onClick={toggle(fieldOption)}
                     className={
                         'w-full mt-2 ringable rounded ' +
                         (fieldData.includes(fieldOption)
-                            ? 'bg-gray-100 text-gray-900 '
-                            : 'bg-gray-200 text-gray-500 ')
+                            ? 'bg-gray-100 text-black font-weight-700 '
+                            : 'bg-gray-200 text-gray-500 font-weight-600 ')
                     }
                 >
                     <div
                         className={
                             'w-full flex-row-left no-selection ' +
                             'pl-3 pr-2 py-2 cursor-pointer ' +
-                            'font-weight-600 text-sm '
+                            'text-base leading-7 md:leading-6 md:text-sm '
                         }
                     >
                         {fieldOption}

src/components/survey-field/field-form/text-form.tsx

@@ -23,7 +23,7 @@ function TextForm(props: {
 
     return (
         <>
-            <div className='w-full mb-0.5 text-lg text-left text-gray-700 font-weight-700'>
+            <div className='w-full mb-0.5 text-lg text-left text-black md:text-gray-700 font-weight-700'>
                 {fieldIndex + 1}. {fieldConfig.title}
             </div>
             {fieldConfig.description.replace(' ', '').length > 0 && (
@@ -36,10 +36,10 @@ function TextForm(props: {
                 onChange={handleChange}
                 className={
                     'w-full px-3 py-2 mt-2 rounded font-weight-600 ' +
-                    'bg-gray-100 focus:bg-gray-50 text-sm ' +
+                    'bg-gray-100 focus:bg-gray-50 text-base md:text-sm ' +
                     'text-gray-700 focus:text-gray-900 placeholder-gray-400 ' +
                     'outline-none ring ring-transparent focus:ring-blue-200 ' +
-                    'transition-colors duration-100 leading-6'
+                    'transition-colors duration-100 leading-7 md:leading-6'
                 }
                 style={{minHeight: '5rem'}}
                 onKeyDown={(e: React.KeyboardEvent<HTMLTextAreaElement>) => {

src/components/survey-field/survey-field.tsx

@@ -68,7 +68,7 @@ function SurveyField(props: {
             <div
                 className={
                     'w-full px-3 text-justify flex-row-left space-x-2 ' +
-                    'border-t-2 h-10 rounded-b bg-gray-50 border-gray-200 ' +
+                    'border-t-2 h-12 md:h-10 rounded-b bg-gray-50 border-gray-200 ' +
                     (formValidation[fieldIndex]
                         ? 'text-green-900 '
                         : 'text-red-900 ')
@@ -84,7 +84,7 @@ function SurveyField(props: {
                 >
                     {formValidation[fieldIndex] ? icons.check : icons.error}
                 </div>
-                <div className='text-sm text-left font-weight-600'>
+                <div className='text-base text-left md:text-sm font-weight-600'>
                     {formUtils.getFieldValidationMessage(
                         fieldConfig,
                         formData[fieldIndex],

src/components/text-card/visual-info-card.tsx

@@ -35,11 +35,15 @@ function VisualInfoCard(props: {variant: 'email-auth' | 'change-later'}) {
         <div
             className={
                 'w-full p-3 pr-4 lg:pr-6 text-justify flex-row-top space-x-2 ' +
-                'rounded shadow bg-gray-50 text-grey-600'
+                'rounded shadow bg-gray-50 text-gray-800'
             }
         >
-            <div className='flex-shrink-0 w-5 h-5 icon-blue'>{icons.info}</div>
-            <div className='text-sm font-weight-500'>{content}</div>
+            <div className='flex-shrink-0 w-6 h-6 mr-0.5 md:mr-0 md:w-5 md:h-5 icon-blue'>
+                {icons.info}
+            </div>
+            <div className='text-base md:text-sm font-weight-500'>
+                {content}
+            </div>
         </div>
     );
 }

src/components/text-card/visual-text-card.tsx

@@ -5,11 +5,11 @@ import '@styles/markdown.css';
 
 function VisualTextCard(props: {title: string; children: React.ReactNode}) {
     return (
-        <div className='w-full px-4 py-2 bg-white rounded shadow lg:px-6 lg:py-4 centering-col'>
-            <div className='text-xl text-blue-800 font-weight-700'>
+        <div className='w-full px-4 py-4 bg-white rounded shadow md:py-2 lg:px-6 lg:py-4 centering-col'>
+            <div className='text-2xl text-gray-900 md:text-xl font-weight-700 md:font-weight-600'>
                 {props.title}
             </div>
-            <div className='w-full mt-1 text-sm text-gray-800 lg:mt-3 markdown font-weight-500'>
+            <div className='w-full mt-1.5 text-base text-gray-800 md:text-sm lg:mt-3 markdown font-weight-500'>
                 {props.children}
             </div>
         </div>

src/components/text-card/visual-user-text-card.tsx

@@ -5,13 +5,13 @@ import '@styles/markdown.css';
 
 function VisualUserTextCard(props: {title: string; text: string}) {
     return (
-        <div className='w-full px-4 py-2 bg-white rounded shadow lg:px-6 lg:py-4 centering-col'>
-            <div className='text-xl text-blue-800 font-weight-700'>
+        <div className='w-full px-4 py-3 bg-white rounded shadow lg:px-6 lg:py-4 centering-col'>
+            <div className='text-2xl text-gray-800 md:text-xl font-weight-700 md:font-weight-600'>
                 {props.title}
             </div>
             {props.text.replace(/\s*/, '').length > 0 && (
                 <div
-                    className='w-full mt-2 text-sm text-gray-800 lg:mt-3 markdown font-weight-500'
+                    className='w-full mt-3 text-base text-gray-800 markdown font-weight-500'
                     dangerouslySetInnerHTML={{
                         __html: ''.concat(
                             ...props.text

src/components/time-pill/visual-time-pill.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import {icons} from '../../assets/icons/index';
 
 function VisualTimePill(props: {
     variant: 'pending' | 'running' | 'finished';
@@ -11,7 +10,7 @@ function VisualTimePill(props: {
             colorClasses = 'bg-yellow-100 text-yellow-800 ring-yellow-200 ';
             break;
         case 'running':
-            colorClasses = 'bg-green-100 text-green-700 ring-green-200 ';
+            colorClasses = 'bg-green-100 text-green-800 ring-green-200 ';
             break;
         case 'finished':
         default:
@@ -21,9 +20,10 @@ function VisualTimePill(props: {
     return (
         <div
             className={
-                'rounded px-3 py-0.5 font-weight-600 text-sm shadow ' +
+                'rounded px-3 py-0.5 shadow flex-row-center ' +
                 colorClasses +
-                ' flex-row-center'
+                'text-sm font-weight-700 ' +
+                'md:text-sm md:font-weight-600'
             }
         >
             {props.phrase}

src/pages/survey-page/form.tsx

@@ -75,6 +75,7 @@ function SurveyFormPage(props: {
                 text: 'Please fill out all the fields first!',
                 variant: 'error',
             });
+            setIsSubmitting(false);
         }
     };
 

src/styles/tailwind.css

@@ -64,6 +64,19 @@
         @apply focus:ring-blue-100;
         @apply group-focus:ring-blue-100;
     }
+
+    .flex-col-center {
+        @apply flex;
+        @apply flex-col;
+        @apply items-center;
+        @apply justify-center;
+    }
+    .flex-col-top {
+        @apply flex;
+        @apply flex-col;
+        @apply items-center;
+        @apply justify-start;
+    }
 }
 
 .centering-row {
@@ -73,13 +86,6 @@
     @apply justify-center;
 }
 
-.flex-col-center {
-    @apply flex;
-    @apply flex-col;
-    @apply items-center;
-    @apply justify-center;
-}
-
 .flex-row-center {
     @apply flex;
     @apply flex-row;