From 7168f929b38504ba32384d827b34cf50f451b0a5 Mon Sep 17 00:00:00 2001
From: ronronscelestes <julie.plantey@gmail.com>
Date: Thu, 31 Mar 2022 11:40:53 +0200
Subject: [PATCH] feedback review: spacing and translation

---
 .../components/Form/index.js                  |  25 +-
 .../components/LogoInput/index.js             |   7 +-
 .../ApplicationInfosPage/tests/index.test.js  | 263 +++++++++---------
 .../core/admin/admin/src/translations/en.json |   1 +
 4 files changed, 149 insertions(+), 147 deletions(-)

diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/components/Form/index.js b/packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/components/Form/index.js
index d7d5d6fb04..b303962c81 100644
--- a/packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/components/Form/index.js
+++ b/packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/components/Form/index.js
@@ -2,7 +2,6 @@ import React, { useState, useEffect } from 'react';
 import { useIntl } from 'react-intl';
 import { Grid, GridItem } from '@strapi/design-system/Grid';
 import { Box } from '@strapi/design-system/Box';
-import { Stack } from '@strapi/design-system/Stack';
 import { Typography } from '@strapi/design-system/Typography';
 import LogoInput from '../LogoInput';
 import { useConfigurations } from '../../../../../../hooks';
@@ -37,19 +36,17 @@ const Form = () => {
       paddingRight={6}
       paddingLeft={6}
     >
-      <Stack spacing={5}>
-        <Typography variant="delta" as="h3">
-          {formatMessage({
-            id: 'Settings.application.customization',
-            defaultMessage: 'Customization',
-          })}
-        </Typography>
-        <Grid>
-          <GridItem col={6} s={12}>
-            <LogoInput customLogo={customMenuLogo} defaultLogo={menu.default} />
-          </GridItem>
-        </Grid>
-      </Stack>
+      <Typography variant="delta" as="h3">
+        {formatMessage({
+          id: 'Settings.application.customization',
+          defaultMessage: 'Customization',
+        })}
+      </Typography>
+      <Grid paddingTop={5}>
+        <GridItem col={6} s={12}>
+          <LogoInput customLogo={customMenuLogo} defaultLogo={menu.default} />
+        </GridItem>
+      </Grid>
     </Box>
   );
 };
diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/components/LogoInput/index.js b/packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/components/LogoInput/index.js
index d2a86f43ef..bb36a96957 100644
--- a/packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/components/LogoInput/index.js
+++ b/packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/components/LogoInput/index.js
@@ -35,7 +35,12 @@ const LogoInput = ({ customLogo, defaultLogo }) => {
         </CarouselActions>
       }
     >
-      <CarouselSlide label="logo slide">
+      <CarouselSlide
+        label={formatMessage({
+          id: 'Settings.application.customization.carousel-slide.label',
+          defaultMessage: 'Logo slide',
+        })}
+      >
         <Box
           maxHeight="40%"
           maxWidth="40%"
diff --git a/packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/tests/index.test.js b/packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/tests/index.test.js
index 538a93fb65..ac506ee261 100644
--- a/packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/tests/index.test.js
+++ b/packages/core/admin/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/tests/index.test.js
@@ -54,12 +54,12 @@ describe('Application page', () => {
         padding-top: 4px;
       }
 
-      .c35 {
+      .c36 {
         max-width: 40%;
         max-height: 40%;
       }
 
-      .c38 {
+      .c39 {
         display: -webkit-box;
         display: -webkit-flex;
         display: -ms-flexbox;
@@ -73,21 +73,21 @@ describe('Application page', () => {
         outline: none;
       }
 
-      .c38 svg {
+      .c39 svg {
         height: 12px;
         width: 12px;
       }
 
-      .c38 svg > g,
-      .c38 svg path {
+      .c39 svg > g,
+      .c39 svg path {
         fill: #ffffff;
       }
 
-      .c38[aria-disabled='true'] {
+      .c39[aria-disabled='true'] {
         pointer-events: none;
       }
 
-      .c38:after {
+      .c39:after {
         -webkit-transition-property: all;
         transition-property: all;
         -webkit-transition-duration: 0.2s;
@@ -102,11 +102,11 @@ describe('Application page', () => {
         border: 2px solid transparent;
       }
 
-      .c38:focus-visible {
+      .c39:focus-visible {
         outline: none;
       }
 
-      .c38:focus-visible:after {
+      .c39:focus-visible:after {
         border-radius: 8px;
         content: '';
         position: absolute;
@@ -117,7 +117,7 @@ describe('Application page', () => {
         border: 2px solid #4945ff;
       }
 
-      .c39 {
+      .c40 {
         display: -webkit-box;
         display: -webkit-flex;
         display: -ms-flexbox;
@@ -134,26 +134,26 @@ describe('Application page', () => {
         width: 2rem;
       }
 
-      .c39 svg > g,
-      .c39 svg path {
+      .c40 svg > g,
+      .c40 svg path {
         fill: #8e8ea9;
       }
 
-      .c39:hover svg > g,
-      .c39:hover svg path {
+      .c40:hover svg > g,
+      .c40:hover svg path {
         fill: #666687;
       }
 
-      .c39:active svg > g,
-      .c39:active svg path {
+      .c40:active svg > g,
+      .c40:active svg path {
         fill: #a5a5ba;
       }
 
-      .c39[aria-disabled='true'] {
+      .c40[aria-disabled='true'] {
         background-color: #eaeaef;
       }
 
-      .c39[aria-disabled='true'] svg path {
+      .c40[aria-disabled='true'] svg path {
         fill: #666687;
       }
 
@@ -295,6 +295,10 @@ describe('Application page', () => {
         padding-top: 4px;
       }
 
+      .c24 {
+        padding-top: 20px;
+      }
+
       .c15 {
         display: grid;
         grid-template-columns: repeat(12,1fr);
@@ -376,7 +380,7 @@ describe('Application page', () => {
         display: flex;
       }
 
-      .c27 {
+      .c28 {
         background: #f6f6f9;
         padding: 8px;
         border-radius: 4px;
@@ -384,40 +388,40 @@ describe('Application page', () => {
         border: 1px solid #dcdce4;
       }
 
-      .c28 {
+      .c29 {
         position: relative;
       }
 
-      .c30 {
+      .c31 {
         padding-right: 8px;
         padding-left: 8px;
         width: 100%;
       }
 
-      .c32 {
+      .c33 {
         height: 124px;
       }
 
-      .c36 {
+      .c37 {
         position: absolute;
         bottom: 4px;
         width: 100%;
       }
 
-      .c40 {
+      .c41 {
         padding-top: 8px;
         padding-right: 16px;
         padding-left: 16px;
       }
 
-      .c25 {
+      .c26 {
         font-weight: 600;
         color: #32324d;
         font-size: 0.75rem;
         line-height: 1.33;
       }
 
-      .c41 {
+      .c42 {
         color: #666687;
         display: block;
         white-space: nowrap;
@@ -427,13 +431,13 @@ describe('Application page', () => {
         line-height: 1.33;
       }
 
-      .c42 {
+      .c43 {
         color: #666687;
         font-size: 0.75rem;
         line-height: 1.33;
       }
 
-      .c26 {
+      .c27 {
         display: -webkit-box;
         display: -webkit-flex;
         display: -ms-flexbox;
@@ -447,7 +451,7 @@ describe('Application page', () => {
         align-items: center;
       }
 
-      .c33 {
+      .c34 {
         display: -webkit-box;
         display: -webkit-flex;
         display: -ms-flexbox;
@@ -465,17 +469,17 @@ describe('Application page', () => {
         align-items: center;
       }
 
-      .c29 {
+      .c30 {
         display: grid;
         grid-template-columns: auto 1fr auto;
         grid-template-areas: 'startAction slides endAction';
       }
 
-      .c31 {
+      .c32 {
         grid-area: slides;
       }
 
-      .c24 {
+      .c25 {
         display: -webkit-box;
         display: -webkit-flex;
         display: -ms-flexbox;
@@ -485,25 +489,25 @@ describe('Application page', () => {
         flex-direction: column;
       }
 
-      .c24 > * {
+      .c25 > * {
         margin-top: 0;
         margin-bottom: 0;
       }
 
-      .c24 > * + * {
+      .c25 > * + * {
         margin-top: 4px;
       }
 
-      .c37 > * {
+      .c38 > * {
         margin-left: 0;
         margin-right: 0;
       }
 
-      .c37 > * + * {
+      .c38 > * + * {
         margin-left: 4px;
       }
 
-      .c34 {
+      .c35 {
         display: -webkit-box;
         display: -webkit-flex;
         display: -ms-flexbox;
@@ -746,125 +750,120 @@ describe('Application page', () => {
                   <div
                     class="c11"
                   >
-                    <div
-                      class="c12"
-                      spacing="5"
+                    <h3
+                      class="c13"
+                    >
+                      Customization
+                    </h3>
+                    <div
+                      class="c24 c15"
                     >
-                      <h3
-                        class="c13"
-                      >
-                        Customization
-                      </h3>
                       <div
-                        class="c15"
+                        class="c16"
                       >
                         <div
-                          class="c16"
+                          class=""
                         >
-                          <div
-                            class=""
-                          >
-                            <div>
-                              <div
-                                class="c24"
-                                spacing="1"
+                          <div>
+                            <div
+                              class="c25"
+                              spacing="1"
+                            >
+                              <label
+                                class="c26"
+                                for="carouselinput-1"
                               >
-                                <label
-                                  class="c25"
-                                  for="carouselinput-1"
-                                >
-                                  <div
-                                    class="c26"
-                                  >
-                                    Logo
-                                  </div>
-                                </label>
                                 <div
-                                  class=""
-                                  id="carouselinput-1"
+                                  class="c27"
                                 >
-                                  <div
-                                    class="c27"
+                                  Logo
+                                </div>
+                              </label>
+                              <div
+                                class=""
+                                id="carouselinput-1"
+                              >
+                                <div
+                                  class="c28"
+                                >
+                                  <section
+                                    aria-label="Logo"
+                                    aria-roledescription="carousel"
+                                    class="c29 c30"
                                   >
-                                    <section
-                                      aria-label="Logo"
-                                      aria-roledescription="carousel"
-                                      class="c28 c29"
+                                    <div
+                                      aria-live="polite"
+                                      class="c31 c32"
+                                      width="100%"
                                     >
                                       <div
-                                        aria-live="polite"
-                                        class="c30 c31"
-                                        width="100%"
+                                        aria-label="Logo slide"
+                                        aria-roledescription="slide"
+                                        class="c33 c34 c35"
+                                        height="124px"
+                                        role="group"
                                       >
-                                        <div
-                                          aria-label="logo slide"
-                                          aria-roledescription="slide"
-                                          class="c32 c33 c34"
-                                          height="124px"
-                                          role="group"
-                                        >
-                                          <img
-                                            alt="Logo"
-                                            class="c35"
-                                            src="IMAGE_MOCK"
-                                          />
-                                        </div>
+                                        <img
+                                          alt="Logo"
+                                          class="c36"
+                                          src="IMAGE_MOCK"
+                                        />
                                       </div>
-                                      <div
-                                        class="c36 c33 c37"
-                                        spacing="1"
-                                        width="100%"
-                                      >
-                                        <span>
-                                          <button
-                                            aria-disabled="false"
-                                            aria-labelledby="tooltip-1"
-                                            class="c38 c39"
-                                            tabindex="0"
-                                            type="button"
-                                          >
-                                            <svg
-                                              fill="none"
-                                              height="1em"
-                                              viewBox="0 0 24 24"
-                                              width="1em"
-                                              xmlns="http://www.w3.org/2000/svg"
-                                            >
-                                              <path
-                                                d="M24 13.604a.3.3 0 01-.3.3h-9.795V23.7a.3.3 0 01-.3.3h-3.21a.3.3 0 01-.3-.3v-9.795H.3a.3.3 0 01-.3-.3v-3.21a.3.3 0 01.3-.3h9.795V.3a.3.3 0 01.3-.3h3.21a.3.3 0 01.3.3v9.795H23.7a.3.3 0 01.3.3v3.21z"
-                                                fill="#212134"
-                                              />
-                                            </svg>
-                                          </button>
-                                        </span>
-                                      </div>
-                                    </section>
+                                    </div>
                                     <div
-                                      class="c40"
+                                      class="c37 c34 c38"
+                                      spacing="1"
+                                      width="100%"
                                     >
                                       <span>
-                                        <div
-                                          aria-labelledby="tooltip-2"
-                                          class="c33"
+                                        <button
+                                          aria-disabled="false"
+                                          aria-labelledby="tooltip-1"
+                                          class="c39 c40"
                                           tabindex="0"
+                                          type="button"
                                         >
-                                          <span
-                                            class="c41"
+                                          <svg
+                                            fill="none"
+                                            height="1em"
+                                            viewBox="0 0 24 24"
+                                            width="1em"
+                                            xmlns="http://www.w3.org/2000/svg"
                                           >
-                                            cat-logo.png
-                                          </span>
-                                        </div>
+                                            <path
+                                              d="M24 13.604a.3.3 0 01-.3.3h-9.795V23.7a.3.3 0 01-.3.3h-3.21a.3.3 0 01-.3-.3v-9.795H.3a.3.3 0 01-.3-.3v-3.21a.3.3 0 01.3-.3h9.795V.3a.3.3 0 01.3-.3h3.21a.3.3 0 01.3.3v9.795H23.7a.3.3 0 01.3.3v3.21z"
+                                              fill="#212134"
+                                            />
+                                          </svg>
+                                        </button>
                                       </span>
                                     </div>
+                                  </section>
+                                  <div
+                                    class="c41"
+                                  >
+                                    <span>
+                                      <div
+                                        aria-labelledby="tooltip-2"
+                                        class="c34"
+                                        tabindex="0"
+                                      >
+                                        <span
+                                          class="c42"
+                                        >
+                                          cat-logo.png
+                                        </span>
+                                      </div>
+                                    </span>
                                   </div>
                                 </div>
-                                <p
-                                  class="c42"
-                                  id="carouselinput-1-hint"
-                                >
-                                  Change the admin panel logo (Max dimension: 750*750, Max file size: TBC)
-                                </p>
                               </div>
+                              <p
+                                class="c43"
+                                id="carouselinput-1-hint"
+                              >
+                                Change the admin panel logo (Max dimension: 750*750, Max file size: TBC)
+                              </p>
                             </div>
                           </div>
                         </div>
diff --git a/packages/core/admin/admin/src/translations/en.json b/packages/core/admin/admin/src/translations/en.json
index 0a1b1cec99..d4d5644efb 100644
--- a/packages/core/admin/admin/src/translations/en.json
+++ b/packages/core/admin/admin/src/translations/en.json
@@ -102,6 +102,7 @@
   "Settings.application.customization": "Customization",
   "Settings.application.customization.carousel.title": "Logo",
   "Settings.application.customization.carousel.change-action": "Change logo",
+  "Settings.application.customization.carousel-slide.label": "Logo slide",
   "Settings.error": "Error",
   "Settings.global": "Global Settings",
   "Settings.permissions": "Administration panel",