[Feature]: On Boarding - Advanced Options (#143)

* New copy for title * Add advanced options Form@ * Add text divider * Text and aditional changes * Change in Timezone select
Stooa · Jan 20, 2022 · 6140036 · 6140036
1 parent 778ef4b
commit 6140036
Show file tree

Hide file tree

Showing 7 changed files with 72 additions and 23 deletions.
diff --git a/frontend/components/Web/Forms/CreateFishbowl.tsx b/frontend/components/Web/Forms/CreateFishbowl.tsx
@@ -20,7 +20,7 @@ import { locales } from '@/i18n';
 import { useAuth } from '@/contexts/AuthContext';
 import { CREATE_FISHBOWL } from '@/lib/gql/Fishbowl';
 import { formatDateTime, nearestQuarterHour } from '@/lib/helpers';
-import FormikForm from '@/ui/Form';
+import FormikForm, { TextDivider } from '@/ui/Form';
 import Input from '@/components/Common/Fields/Input';
 import Textarea from '@/components/Common/Fields/Textarea';
 import Select from '@/components/Common/Fields/Select';
@@ -88,8 +88,8 @@ const Form = (props: FormProps & FormikProps<FormValues>) => {
     <FormikForm full={props.full ? props.full : undefined}>
       <fieldset className="fieldset-inline">
         <Input
-          placeholder={t('defaultTitle', { name: user.name ? user.name.split(' ')[0] : ''})}
-          label={t('fishbowl.topic')}
+          placeholder={t('defaultTitle', { name: user.name ? user.name.split(' ')[0] : '' })}
+          label={t('fishbowl.title')}
           name="title"
           type="text"
           autoComplete="off"
@@ -108,6 +108,7 @@ const Form = (props: FormProps & FormikProps<FormValues>) => {
           dateFormat="dd/MM/yyyy"
           icon="calendar"
           autoComplete="off"
+          variant="sm"
         />
         <DatePicker
           label={t('fishbowl.time')}
@@ -151,9 +152,19 @@ const Form = (props: FormProps & FormikProps<FormValues>) => {
             );
           })}
         </Select>
-        <Select label={t('fishbowl.timezone')} name="timezone" icon="world" autoComplete="off">
+      </fieldset>
+      <fieldset className="fieldset-inline advanced-options">
+        <TextDivider>
+          <p>{t('fishbowl.advancedOptions')}</p>
+          <span></span>
+        </TextDivider>
+        <Select
+          className="select"
+          label={t('fishbowl.timezone')}
+          name="timezone"
+          icon="world"
+          autoComplete="off">
           <option value="">{t('fishbowl.selectTimeZone')}</option>
-          {/* TODO: NORMALIZE TIMEZONE VALUES */}
           {Object.keys(timezones).map((zone, index) => {
             const text = `(GTM${timezones[zone].utcOffsetStr}) ${timezones[zone].name}`;
             return (
@@ -164,7 +175,8 @@ const Form = (props: FormProps & FormikProps<FormValues>) => {
           })}
         </Select>
         <Select
-          label={t('fishbowl.selectLanguage')}
+          className="select"
+          label={t('fishbowl.language')}
           name="language"
           icon="language"
           autoComplete="off">

diff --git a/frontend/locales/ca/form.json b/frontend/locales/ca/form.json
@@ -8,19 +8,21 @@
     "haveAccount": "Ja tens un compte?",
     "noAccount": "No tens compte?",
     "fishbowl": {
+        "title": "Titul",
         "topic": "Tema de conversa",
         "day": "Data",
         "selectDay": "Selecciona el dia",
         "time": "Comença a les",
         "selectTime": "Selecciona l'hora",
-        "selectLanguage": "Selecciona l'idioma",
+        "language": "Idioma",
         "hours": "h",
         "minutes": "m",
         "duration": "Durada",
         "selectDuration": "Selecciona una durada",
         "description": "Descripció (opcional)",
         "timezone": "Zona horària",
-        "selectTimeZone": "Selecciona zona horària"
+        "selectTimeZone": "Selecciona zona horària",
+        "advancedOptions": "Opcions avançades"
     },
     "button": {
         "login": "Entra",

diff --git a/frontend/locales/de/form.json b/frontend/locales/de/form.json
@@ -11,7 +11,7 @@
         "equalPassword": "Die beiden Passwörter müssen gleich sein"
     },
     "fishbowl": {
-        "selectLanguage": "Wählen Sie eine Sprache",
+        "language": "Sprache",
         "hours": "St.",
         "minutes": "Min.",
         "duration": "Dauer",
@@ -22,8 +22,10 @@
         "day": "Datum",
         "selectTime": "Wählen Sie eine Uhrzeit aus",
         "selectDay": "Wählen Sie ein Tag aus",
+        "title": "Titel",
         "topic": "Gesprächsthema",
-        "time": "Beginnt um"
+        "time": "Beginnt um",
+        "advancedOptions": "Erweiterte optionen"
     },
     "button": {
         "title": "Ungültiger titel. Bitte fügen Sie ein Gesprächsthema ein",

diff --git a/frontend/locales/en/form.json b/frontend/locales/en/form.json
@@ -9,18 +9,20 @@
     "noAccount": "No account?",
     "fishbowl": {
         "topic": "Conversation topic",
+        "title": "Title",
         "day": "Date",
         "selectDay": "Select day",
         "time": "Starts at",
         "selectTime": "Select time",
-        "selectLanguage": "Select language",
+        "language": "Language",
         "hours": "h",
         "minutes": "m",
         "duration": "Duration",
         "selectDuration": "Select Duration",
         "description": "Description (optional)",
         "timezone": "Time Zone",
-        "selectTimeZone": "Select Time Zone"
+        "selectTimeZone": "Select Time Zone",
+        "advancedOptions": "Advanced Options"
     },
     "button": {
         "login": "Log in",

diff --git a/frontend/locales/es/form.json b/frontend/locales/es/form.json
@@ -9,18 +9,20 @@
     "noAccount": "¿No tienes cuenta?",
     "fishbowl": {
         "topic": "Tema de conversación",
+        "title": "Título",
         "day": "Fecha",
         "selectDay": "Selecciona el día",
         "time": "Empieza a las",
         "selectTime": "Selecciona la hora",
-        "selectLanguage": "Selecciona el idioma",
+        "language": "Idioma",
         "hours": "h",
         "minutes": "m",
         "duration": "Duración",
         "selectDuration": "Selecciona la duración",
         "description": "Descripción (opcional)",
         "timezone": "Zona horaria",
-        "selectTimeZone": "Selecciona zona horaria"
+        "selectTimeZone": "Selecciona zona horaria",
+        "advancedOptions": "Opciones avanzadas"
     },
     "button": {
         "login": "Entra",

diff --git a/frontend/locales/fr/form.json b/frontend/locales/fr/form.json
@@ -2,8 +2,9 @@
     "defaultTitle": "Rencontre Fishbowl - {{name}}",
     "fishbowl": {
         "topic": "Sujet de conversation",
+        "title": "Titre",
         "selectDay": "Sélectionnez le jour",
-        "selectLanguage": "Sélectionnez la langue",
+        "language": "Langue",
         "day": "Date",
         "time": "Commence à",
         "selectTime": "Sélectionner l'heure",
@@ -13,7 +14,8 @@
         "selectDuration": "Sélectionnez la durée",
         "description": "Description (facultatif)",
         "timezone": "Fuseau horaire",
-        "selectTimeZone": "Sélectionnez le fuseau horaire"
+        "selectTimeZone": "Sélectionnez le fuseau horaire",
+        "advancedOptions": "Options avancées"
     },
     "button": {
         "createAccount": "Créez-en un !",

diff --git a/frontend/ui/Form.ts b/frontend/ui/Form.ts
@@ -35,12 +35,12 @@ const FormikForm = styled(Form)`
   text-align: left;
   width: 100%;
 
-  &:not(:last-child)  {
+  &:not(:last-child) {
     margin-bottom: ${space(4)};
   }
 
   fieldset {
-    margin: ${space(3.5)} 0;
+    margin-bottom: ${space(3.5)};
 
     &:first-child {
       margin-top: 0;
@@ -52,6 +52,9 @@ const FormikForm = styled(Form)`
     > *:not(:last-child) {
       margin-bottom: ${space(2)};
     }
+    > .textarea {
+      margin-bottom: ${space(4)};
+    }
   }
 
   .form__footer {
@@ -106,7 +109,6 @@ const InputStyled = styled.div`
   .icon,
   .dropdown-icon {
     z-index: 1;
-
   }
 
   &.disabled {
@@ -145,7 +147,6 @@ const InputStyled = styled.div`
 
   &.textarea {
     height: ${space(14)};
-
   }
 
   input,
@@ -191,6 +192,10 @@ const InputStyled = styled.div`
     transition: .1s ease-out;
   }
 
+  input::placeholder {
+    color: ${COLOR_NEUTRO_700};
+  }
+
   input:focus,
   input.filled,
   textarea:focus,
@@ -199,7 +204,7 @@ const InputStyled = styled.div`
       color: ${COLOR_NEUTRO_700};
       top: ${space(1.3)};
 
-      ${TEXT_XXS}
+      ${TEXT_XXS};
     }
   }
 
@@ -208,7 +213,7 @@ const InputStyled = styled.div`
       color: ${COLOR_NEUTRO_700};
       top: ${space(1.3)};
 
-      ${TEXT_XXS}
+      ${TEXT_XXS};
     }
   }
 
@@ -285,5 +290,27 @@ const FormError = styled(Alert)`
   margin-top: ${space(2)};
 `;
 
-export { CheckboxStyled, DatePickerStyled, FormError, InputStyled };
+const TextDivider = styled.div`
+  display: flex;
+  align-items: center;
+  position: relative;
+  font-size: ${FONT_BASE_SIZE}px;
+  font-weight: 200;
+  width: 100%;
+
+  p {
+    margin-right: ${space(2)};
+  }
+
+  span {
+    flex-grow: 1;
+    position: inline-block;
+    vertical-align: middle;
+    height: 1px;
+    width: auto;
+    background-color: ${COLOR_NEUTRO_500};
+  }
+`;
+
+export { CheckboxStyled, DatePickerStyled, FormError, InputStyled, TextDivider };
 export default FormikForm;