[Feature] - Update design tokens (#393)

* Update Colors * pull figma tokens * Comment helper * update config style files * update files * Fixing stylings * Fixing text sizes and deleting arrows * Folder naming * Changed buttons and new component * New component * Change APP variable * added link style * Add ignore generated tokens * fix fishbowl list * fix login and thank you * updated tokens * improve anchor styling * no hover in logo * Alert colors * R1 fixes * R1 fixes * button size * Left text align in mobile * Success message * Improve accessibility * Spacing in title * title spacing plus fix * update test * alert color * Alert padding * hover in dropdown * Fix redirectlink import
Stooa · Apr 26, 2022 · 4782008 · 4782008
1 parent 6ea13ce
commit 4782008
Show file tree

Hide file tree

Showing 101 changed files with 1,289 additions and 1,072 deletions.
diff --git a/frontend/.prettierignore b/frontend/.prettierignore
@@ -15,3 +15,5 @@ coverage
 .next
 .coverage
 src/types/api-platform
+
+src/ui/design-tokens/*
diff --git a/frontend/locales/ca/fishbowl.json b/frontend/locales/ca/fishbowl.json
@@ -33,8 +33,8 @@
         "12": "Desembre"
     },
     "full": "Complet",
-    "join": "Unir-se a la conversa",
-    "leave": "Sortir de la conversa",
+    "join": "Unir-se",
+    "leave": "Sortir",
     "unmute": "Activar",
     "mute": "Silenciar",
     "sameAsSystem": "Mateix que el sistema",

diff --git a/frontend/locales/ca/form.json b/frontend/locales/ca/form.json
@@ -24,14 +24,14 @@
         "selectTimeZone": "Zona horària",
         "advancedOptions": "Opcions avançades",
         "introductionLabel": "Vull començar el Fishbowl amb una introducció.",
-        "introductionTooltip": "Quan iniciïs el Fishbowl, <strong>podràs començar fent una introducció.</strong> La càmera i el micròfon estaran actius només per a tu. Quan acabis, <strong>no oblidis permetre als assistents unir-se a la conversa.</strong>"
+        "introductionTooltip": "Quan iniciïs el Fishbowl, <span>podràs començar fent una introducció.</span> La càmera i el micròfon estaran actius només per a tu. Quan acabis, <span>no oblidis permetre als assistents unir-se a la conversa.</span>"
     },
     "button": {
         "login": "Entra",
         "register": "Següent",
         "createAccount": "Crea un compte!",
         "createFishbowl": "Crear fishbowl",
-        "modifyFishbowl": "Modificar fishbowl",
+        "modifyFishbowl": "Desar canvis",
         "recoverPassword": "Envia un enllaç de recuperació",
         "enterFishbowl": "Entrar al fishbowl",
         "save": "Guardar",

diff --git a/frontend/locales/de/form.json b/frontend/locales/de/form.json
@@ -27,7 +27,7 @@
         "time": "Beginnt um",
         "advancedOptions": "Erweiterte optionen",
         "introductionLabel": "Ich möchte das Fishbowl mit einer Einführung beginnen.",
-        "introductionTooltip": "Wenn Sie das Fishbowl starten, <strong>können Sie zunächst eine Einführung geben</strong>. Die Kamera und das Mikrofon werden nur für Sie aktiv sein. Wenn Sie fertig sind, vergessen Sie nicht, den Teilnehmern zu erlauben, sich an der Unterhaltung zu beteiligen."
+        "introductionTooltip": "Wenn Sie das Fishbowl starten, <span>können Sie zunächst eine Einführung geben</span>. Die Kamera und das Mikrofon werden nur für Sie aktiv sein. Wenn Sie fertig sind, vergessen Sie nicht, den Teilnehmern zu erlauben, sich an der Unterhaltung zu beteiligen."
     },
     "button": {
         "login": "Anmelden",

diff --git a/frontend/locales/en/fishbowl-list.json b/frontend/locales/en/fishbowl-list.json
@@ -1,7 +1,7 @@
 {
     "scheduledFishbowls": "Scheduled fishbowls (<span>{{count}}</span>)",
     "enterFishbowl": "Enter fishbowl",
-    "emptyListTitle": "You haven't sheduled any fishbowls yet. Create one!",
+    "emptyListTitle": "You haven't scheduled any fishbowls yet. Create one!",
     "emptyListDescription": "This is where you will see all of your scheduled fishbowls.",
     "titleEdit": "Edit fishbowl",
     "noSelectedFishbowlTitle": "No fishbowl selected.",

diff --git a/frontend/locales/en/fishbowl.json b/frontend/locales/en/fishbowl.json
@@ -33,8 +33,8 @@
         "12": "December"
     },
     "full": "Full",
-    "join": "Join the conversation",
-    "leave": "Leave the conversation",
+    "join": "Join",
+    "leave": "Leave",
     "unmute": "Unmute",
     "mute": "Mute",
     "sameAsSystem": "Same as system",

diff --git a/frontend/locales/en/form.json b/frontend/locales/en/form.json
@@ -24,14 +24,14 @@
         "selectTimeZone": "Time Zone",
         "advancedOptions": "Advanced Options",
         "introductionLabel": "I want to start the fishbowl giving an introduction.",
-        "introductionTooltip": "When you start the fishbowl, <strong>you can start by making an introduction.</strong> The camera and microphone will be active just for you. When you're done, <strong>don't forget to allow attendees to join the conversation.</strong>"
+        "introductionTooltip": "When you start the fishbowl, <span>you can start by making an introduction.</span> The camera and microphone will be active just for you. When you're done, <span>don't forget to allow attendees to join the conversation.</span>"
     },
     "button": {
         "login": "Log in",
         "register": "Next",
         "createAccount": "Create one!",
         "createFishbowl": "Create fishbowl",
-        "modifyFishbowl": "Modify fishbowl",
+        "modifyFishbowl": "Save changes",
         "recoverPassword": "Send reset link",
         "enterFishbowl": "Enter fishbowl",
         "save": "Save",

diff --git a/frontend/locales/es/fishbowl.json b/frontend/locales/es/fishbowl.json
@@ -33,8 +33,8 @@
         "12": "Diciembre"
     },
     "full": "Lleno",
-    "join": "Unirse a la conversación",
-    "leave": "Salir de la conversación",
+    "join": "Unirse",
+    "leave": "Salir",
     "unmute": "Activar",
     "mute": "Silenciar",
     "sameAsSystem": "Mismo que el sistema",

diff --git a/frontend/locales/es/form.json b/frontend/locales/es/form.json
@@ -24,14 +24,14 @@
         "selectTimeZone": "Selecciona zona horaria",
         "advancedOptions": "Opciones avanzadas",
         "introductionLabel": "Quiero comenzar el fishbowl con una introducción.",
-        "introductionTooltip": "Cuando inicies el Fishbowl, <strong>podrás comenzar haciendo una introducción.</strong> La cámara y el micrófono estarán activos solo para ti. Cuando termines, <strong>no olvides permitir a los asistentes unirse a la conversación.</strong>"
+        "introductionTooltip": "Cuando inicies el Fishbowl, <span>podrás comenzar haciendo una introducción.</span> La cámara y el micrófono estarán activos solo para ti. Cuando termines, <span>no olvides permitir a los asistentes unirse a la conversación.</span>"
     },
     "button": {
         "login": "Entra",
         "register": "Siguiente",
         "createAccount": "¡Crea una cuenta!",
         "createFishbowl": "Crear fishbowl",
-        "modifyFishbowl": "Modificar fishbowl",
+        "modifyFishbowl": "Guardar cambios",
         "recoverPassword": "Envía un enlace de recuperación",
         "enterFishbowl": "Entrar al fishbowl",
         "save": "Guardar",

diff --git a/frontend/locales/fr/fishbowl.json b/frontend/locales/fr/fishbowl.json
@@ -66,10 +66,10 @@
     "lastMinute": "Dernière minute",
     "endFishbowl": "Terminer le fishbowl",
     "full": "Plein",
-    "join": "Rejoindre la conversation",
+    "join": "Rejoindre",
+    "leave": "Quitter",
     "sameAsSystem": "Suivre le système",
     "settings": "Paramètres",
-    "leave": "Quitter la conversation",
     "timesUp": "Le temps est écoulé",
     "unmute": "Activer le son",
     "mute": "Mettre en sourdine",

diff --git a/frontend/locales/fr/form.json b/frontend/locales/fr/form.json
@@ -17,7 +17,7 @@
         "selectTimeZone": "Fuseau horaire",
         "advancedOptions": "Options avancées",
         "introductionLabel": "Je veux commencer le bocal en donnant une introduction.",
-        "introductionTooltip": "Lorsque vous démarrez le bocal, <strong>vous pouvez commencer par faire une introduction</strong>. La caméra et le microphone seront actifs juste pour vous. Lorsque vous avez terminé, <strong>n'oubliez pas d'autoriser les participants à se joindre à la conversation.</strong>"
+        "introductionTooltip": "Lorsque vous démarrez le bocal, <span>vous pouvez commencer par faire une introduction</span>. La caméra et le microphone seront actifs juste pour vous. Lorsque vous avez terminé, <span>n'oubliez pas d'autoriser les participants à se joindre à la conversation.</span>"
     },
     "button": {
         "createAccount": "Créez-en un !",

diff --git a/frontend/locales/id/fishbowl.json b/frontend/locales/id/fishbowl.json
@@ -30,8 +30,8 @@
         "10": "Oktober"
     },
     "full": "Penuh",
-    "join": "Gabung pembicaraan",
-    "leave": "Tinggalkan pembicaraan",
+    "join": "Gabung",
+    "leave": "Tinggalkan",
     "unmute": "Tidak bisukan",
     "sameAsSystem": "Sama dengan sistem",
     "mute": "Bisukan",

diff --git a/frontend/locales/id/form.json b/frontend/locales/id/form.json
@@ -19,7 +19,7 @@
         "selectTimeZone": "Zona Waktu",
         "selectDuration": "Durasi",
         "introductionLabel": "Saya ingin memulai fishbowl memberikan pengantar.",
-        "introductionTooltip": "Saat Anda memulai fishbowl, <strong>Anda dapat memulai dengan membuat pendahuluan.</strong> Kamera dan mikrofon akan aktif hanya untuk Anda. Setelah selesai, <strong>jangan lupa izinkan peserta untuk bergabung dalam percakapan.</strong>"
+        "introductionTooltip": "Saat Anda memulai fishbowl, <span>Anda dapat memulai dengan membuat pendahuluan.</span> Kamera dan mikrofon akan aktif hanya untuk Anda. Setelah selesai, <span>jangan lupa izinkan peserta untuk bergabung dalam percakapan.</span>"
     },
     "validation": {
         "email": "Alamat surel tidak valid",

diff --git a/frontend/src/components/App/ButtonConfig/index.tsx b/frontend/src/components/App/ButtonConfig/index.tsx
@@ -70,7 +70,7 @@ const ButtonConfig = forwardRef(({ unlabeled, selectorPosition }: Props, ref) =>
     <Container>
       <Button
         id="config-button"
-        className="text-sm"
+        className="body-sm"
         onClick={() => handleShowDevices()}
         active={true}
       >
@@ -92,7 +92,7 @@ const ButtonConfig = forwardRef(({ unlabeled, selectorPosition }: Props, ref) =>
                 {devices.audioInputDevices.map(({ deviceId, label }) => (
                   <li key={deviceId}>
                     <Item
-                      className="text-sm device"
+                      className="body-sm device"
                       selected={audioInputDevice.deviceId === deviceId}
                       onClick={handleAudioInput}
                       value={deviceId}
@@ -114,7 +114,7 @@ const ButtonConfig = forwardRef(({ unlabeled, selectorPosition }: Props, ref) =>
                 {devices.audioOutputDevices.map(({ deviceId, label }) => (
                   <li key={deviceId}>
                     <Item
-                      className="text-sm device"
+                      className="body-sm device"
                       selected={audioOutputDevice.deviceId === deviceId}
                       onClick={handleAudioOutput}
                       value={deviceId}
@@ -136,7 +136,7 @@ const ButtonConfig = forwardRef(({ unlabeled, selectorPosition }: Props, ref) =>
                 {devices.videoDevices.map(({ deviceId, label }) => (
                   <li key={deviceId}>
                     <Item
-                      className="text-sm device"
+                      className="body-sm device"
                       selected={videoDevice.deviceId === deviceId}
                       onClick={handleVideoInput}
                       value={deviceId}

diff --git a/frontend/src/components/App/ButtonJoin/index.tsx b/frontend/src/components/App/ButtonJoin/index.tsx
@@ -43,7 +43,7 @@ const ButtonJoin: React.FC<Props> = ({ joined, join, leave, disabled, children }
 
   return (
     <Button
-      className={`text-sm medium ${joined ? 'joined' : ''}`}
+      className={`body-sm medium ${joined ? 'joined' : ''}`}
       onClick={handleJoinClick}
       disabled={disabled}
       active={active}

diff --git a/frontend/src/components/App/ButtonJoin/styles.ts b/frontend/src/components/App/ButtonJoin/styles.ts
@@ -95,6 +95,7 @@ const Button = styled(ActionButton)`
 
     .button {
       background-color: ${COLOR_NEUTRO_400};
+      border-color: ${COLOR_NEUTRO_400};
       color: ${COLOR_NEUTRO_100};
     }
 

diff --git a/frontend/src/components/App/ButtonMic/index.tsx b/frontend/src/components/App/ButtonMic/index.tsx
@@ -46,7 +46,7 @@ const ButtonMic: React.FC<Props> = ({ handleMic, joined, disabled, unlabeled })
 
   return (
     <Button
-      className={`text-sm ${muted ? 'muted' : ''}`}
+      className={`body-sm ${muted ? 'muted' : ''}`}
       onClick={handleOnClick}
       disabled={disabled}
       active={active}

diff --git a/frontend/src/components/App/ButtonVideo/index.tsx b/frontend/src/components/App/ButtonVideo/index.tsx
@@ -46,7 +46,7 @@ const ButtonVideo: React.FC<Props> = ({ handleVideo, joined, disabled, unlabeled
 
   return (
     <Button
-      className={`text-sm ${muted ? 'muted' : ''}`}
+      className={`body-sm ${muted ? 'muted' : ''}`}
       onClick={handleOnClick}
       disabled={disabled}
       active={active}

diff --git a/frontend/src/components/App/Fishbowl/styles.ts b/frontend/src/components/App/Fishbowl/styles.ts
@@ -11,11 +11,11 @@ import styled from 'styled-components';
 
 import Alert from '@/ui/Alert';
 import { COLOR_NEUTRO_600 } from '@/ui/settings';
-import { APP_SM } from '@/ui/Texts';
 import { space } from '@/ui/helpers';
+import { BODY_XS } from '@/ui/Texts';
 
 const StatusBox = styled(Alert)`
-  ${APP_SM}
+  ${BODY_XS}
 
   font-weight: 500;
   padding-left: ${space(1.5)};

diff --git a/frontend/src/components/App/FishbowlInfo/index.tsx b/frontend/src/components/App/FishbowlInfo/index.tsx
@@ -50,18 +50,18 @@ const FishbowlInfo: React.FC<Props> = ({ data }) => {
 
   return (
     <InfoStyled ref={wrapperRef}>
-      <p className="title app-md medium">{data.name}</p>
+      <p className="title body-sm medium">{data.name}</p>
       <Icon onClick={toggleInfo} className={`${active ? 'active' : ''}`}>
         <span className="icon-wrapper">
           <Dots />
         </span>
       </Icon>
       {active && (
         <Description>
-          <p className="app-md medium description__title">{data.name}</p>
-          <p className="info-text app-sm">{data.description}</p>
-          <ButtonCopyUrl variant="small" secondary fid={data.slug} locale={data.locale} />
-          <p className="app-sm description__share-text">
+          <p className="body-sm medium description__title">{data.name}</p>
+          <p className="info-text body-xs">{data.description}</p>
+          <ButtonCopyUrl variant="secondary" size="medium" fid={data.slug} locale={data.locale} />
+          <p className="body-xs description__share-text">
             <Trans i18nKey="fishbowl:fishbowlDescription.shareText" components={{ i: <i /> }} />
           </p>
         </Description>

diff --git a/frontend/src/components/App/FishbowlInfo/styles.ts b/frontend/src/components/App/FishbowlInfo/styles.ts
@@ -42,10 +42,10 @@ const Icon = styled.button`
     border: 1px solid transparent;
     border-radius: 50%;
     display: flex;
-    height: ${space(4)};
+    height: ${space(3.25)};
     justify-content: center;
     transition: background-color 0.1s ease-out;
-    width: ${space(4)};
+    width: ${space(3.25)};
     will-change: background-color;
   }
 

diff --git a/frontend/src/components/App/FishbowlList/FishbowlCard.tsx b/frontend/src/components/App/FishbowlList/FishbowlCard.tsx
@@ -19,9 +19,8 @@ import RedirectLink from '@/components/Web/RedirectLink';
 import { Fishbowl } from '@/types/api-platform/interfaces/fishbowl';
 
 import { CardStyled, CardTitle } from '@/components/App/FishbowlList/styles';
-import { ButtonStyledLinkSmall } from '@/ui/Button';
-import ArrowRight from '@/ui/svg/arrow-right.svg';
 import { convertIntoClassName } from '@/lib/helpers';
+import Button from '@/components/Common/Button';
 
 interface Props {
   fishbowl: Fishbowl;
@@ -72,20 +71,20 @@ const FishbowlCard = ({ fishbowl, selected, onClick }: Props) => {
         <div className="card__time">{time}</div>
       </div>
       <div data-testid="card-actions" className="card__actions">
-        <ButtonCopyUrl data-testid="copy-link" variant="link" fid={slug} locale={locale}>
+        <ButtonCopyUrl data-testid="copy-link" variant="text" fid={slug} locale={locale}>
           {t('common:linkButton')}
         </ButtonCopyUrl>
         {isTimeLessThanNMinutes(startDateTime, 30) && (
           <RedirectLink href={`${ROUTE_FISHBOWL}/${slug}`} locale={locale} passHref>
-            <ButtonStyledLinkSmall
+            <Button
+              as="a"
               data-testid="enter-fishbowl"
               onClick={() => {
                 handleGoToFishbowl;
               }}
             >
               <span>{t('enterFishbowl')}</span>
-              <ArrowRight />
-            </ButtonStyledLinkSmall>
+            </Button>
           </RedirectLink>
         )}
       </div>