Fix colors and copies (#154)

Stooa · Jan 20, 2022 · 6da48c8 · 6da48c8
1 parent 6140036
commit 6da48c8
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 24 deletions.
diff --git a/frontend/locales/ca/form.json b/frontend/locales/ca/form.json
@@ -9,19 +9,18 @@
     "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",
+        "selectTime": "Hora",
         "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": "Zona horària",
         "advancedOptions": "Opcions avançades"
     },
     "button": {

diff --git a/frontend/locales/de/form.json b/frontend/locales/de/form.json
@@ -18,12 +18,11 @@
         "selectDuration": "Wählen Sie die Dauer",
         "description": "Beschreibung (optional)",
         "timezone": "Zeitzone",
-        "selectTimeZone": "Wählen Sie eine Zeitzone aus",
+        "selectTimeZone": "Zeitzone",
         "day": "Datum",
         "selectTime": "Wählen Sie eine Uhrzeit aus",
         "selectDay": "Wählen Sie ein Tag aus",
         "title": "Titel",
-        "topic": "Gesprächsthema",
         "time": "Beginnt um",
         "advancedOptions": "Erweiterte optionen"
     },

diff --git a/frontend/locales/en/form.json b/frontend/locales/en/form.json
@@ -8,7 +8,6 @@
     "haveAccount": "Already have an account?",
     "noAccount": "No account?",
     "fishbowl": {
-        "topic": "Conversation topic",
         "title": "Title",
         "day": "Date",
         "selectDay": "Select day",
@@ -18,10 +17,10 @@
         "hours": "h",
         "minutes": "m",
         "duration": "Duration",
-        "selectDuration": "Select Duration",
+        "selectDuration": "Duration",
         "description": "Description (optional)",
         "timezone": "Time Zone",
-        "selectTimeZone": "Select Time Zone",
+        "selectTimeZone": "Time Zone",
         "advancedOptions": "Advanced Options"
     },
     "button": {

diff --git a/frontend/locales/es/form.json b/frontend/locales/es/form.json
@@ -8,7 +8,6 @@
     "haveAccount": "¿Ya tienes una cuenta?",
     "noAccount": "¿No tienes cuenta?",
     "fishbowl": {
-        "topic": "Tema de conversación",
         "title": "Título",
         "day": "Fecha",
         "selectDay": "Selecciona el día",

diff --git a/frontend/locales/fr/form.json b/frontend/locales/fr/form.json
@@ -1,7 +1,6 @@
 {
     "defaultTitle": "Rencontre Fishbowl - {{name}}",
     "fishbowl": {
-        "topic": "Sujet de conversation",
         "title": "Titre",
         "selectDay": "Sélectionnez le jour",
         "language": "Langue",
@@ -18,7 +17,7 @@
         "advancedOptions": "Options avancées"
     },
     "button": {
-        "createAccount": "Créez-en un !",
+        "createAccount": "Créez-en un !",
         "createFishbowl": "Créer un fishbowl",
         "recoverPassword": "Envoyer le lien de réinitialisation",
         "save": "Enregistrer",

diff --git a/frontend/ui/Form.ts b/frontend/ui/Form.ts
@@ -96,7 +96,10 @@ const InputStyled = styled.div`
     }
   `}
 
-  svg { pointer-events: none; }
+  svg {
+    pointer-events: none;
+    color: ${COLOR_NEUTRO_600};
+  }
 
   .dropdown-icon {
     height: ${rems(16)};
@@ -113,15 +116,19 @@ const InputStyled = styled.div`
 
   &.disabled {
     .icon path,
-    .dropdown-icon path { fill: ${COLOR_NEUTRO_500}; }
+    .dropdown-icon path {
+      fill: ${COLOR_NEUTRO_500};
+    }
 
     input:disabled,
     textarea:disabled,
     select:disabled {
       border: 1px solid ${COLOR_NEUTRO_300};
       color: ${COLOR_NEUTRO_600};
 
-      & + label { color: ${COLOR_NEUTRO_600}; }
+      & + label {
+        color: ${COLOR_NEUTRO_600};
+      }
 
       .icon path {
         color: ${COLOR_NEUTRO_500};
@@ -132,9 +139,13 @@ const InputStyled = styled.div`
   &.withicon {
     input,
     select,
-    &.datepicker input { padding-left: ${space(6)}; }
+    &.datepicker input {
+      padding-left: ${space(6)};
+    }
 
-    label { left: ${space(6)}; }
+    label {
+      left: ${space(6)};
+    }
 
     .icon {
       height: ${space(4)};
@@ -168,11 +179,15 @@ const InputStyled = styled.div`
       border: 1px solid ${COLOR_NEUTRO_700};
     }
 
-    &.invalid { border-color: ${COLOR_RED_500}; }
+    &.invalid {
+      border-color: ${COLOR_RED_500};
+    }
   }
 
   input,
-  select { height: ${space(6.5)}; }
+  select {
+    height: ${space(6.5)};
+  }
 
   textarea {
     height: 100%;
@@ -189,7 +204,7 @@ const InputStyled = styled.div`
     pointer-events: none;
     position: absolute;
     top: ${space(2.25)};
-    transition: .1s ease-out;
+    transition: 0.1s ease-out;
   }
 
   input::placeholder {
@@ -210,11 +225,10 @@ const InputStyled = styled.div`
 
   select + label,
   &.datepicker label.small {
-      color: ${COLOR_NEUTRO_700};
-      top: ${space(1.3)};
+    color: ${COLOR_NEUTRO_700};
+    top: ${space(1.3)};
 
-      ${TEXT_XXS};
-    }
+    ${TEXT_XXS};
   }
 
   .help {
@@ -225,7 +239,7 @@ const InputStyled = styled.div`
 
   &:not(:last-child) .help {
     margin-bottom: ${space(2)};
-    }
+  }
 `;
 
 const DatePickerStyled = styled(InputStyled)`