refactor(console): optimize the image uploader (#3441)

packages/console/src/components/Uploader/FileUploader/index.module.scss

@@ -3,7 +3,7 @@
 .uploader {
   border: 1px dashed var(--color-border);
   border-radius: 8px;
-  padding: _.unit(5.5);
+  padding: _.unit(3.25);
 
   > input {
     display: none;

packages/console/src/components/Uploader/ImageUploader/index.module.scss

@@ -3,13 +3,14 @@
 .imageUploader {
   border: 1px dashed var(--color-border);
   border-radius: 8px;
-  padding: _.unit(6) _.unit(2);
+  padding: _.unit(3.75) _.unit(2);
   display: flex;
   flex-direction: column;
   align-items: center;
   position: relative;
 
   .delete {
+    display: none;
     position: absolute;
     right: _.unit(2);
     bottom: _.unit(2);
@@ -19,5 +20,12 @@
     height: 40px;
     max-width: 100%;
     object-fit: contain;
+    cursor: not-allowed;
+  }
+
+  &:hover {
+    .delete {
+      display: block;
+    }
   }
 }

packages/console/src/components/Uploader/ImageUploader/index.tsx

@@ -10,11 +10,10 @@ import * as styles from './index.module.scss';
 export const maxImageSizeLimit = 500 * 1024; // 500 KB
 
 export const allowedImageMimeTypes: AllowedUploadMimeType[] = [
-  'image/jpeg',
-  'image/png',
-  'image/gif',
-  'image/webp',
   'image/svg+xml',
+  'image/png',
+  'image/jpeg',
+  'image/vnd.microsoft.icon',
 ];
 
 export type Props = Omit<FileUploaderProps, 'maxSize' | 'allowedMimeTypes'> & {

packages/console/src/pages/SignInExperience/tabs/Branding/BrandingForm.tsx

@@ -140,7 +140,12 @@ const BrandingForm = () => {
                 name="branding.darkLogoUrl"
                 control={control}
                 render={({ field: { onChange, value, name } }) => (
-                  <ImageUploaderField name={name} value={value ?? ''} onChange={onChange} />
+                  <ImageUploaderField
+                    name={name}
+                    value={value ?? ''}
+                    actionDescription={t('sign_in_exp.branding.dark_logo_image')}
+                    onChange={onChange}
+                  />
                 )}
               />
             </FormField>

packages/console/src/pages/SignInExperience/tabs/Branding/components/LogoAndFaviconUploader/index.tsx

@@ -30,7 +30,7 @@ const LogoAndFaviconUploader = () => {
               <ImageUploader
                 name={name}
                 value={value ?? ''}
-                actionDescription={t('sign_in_exp.branding.upload_logo_image_description')}
+                actionDescription={t('sign_in_exp.branding.logo_image')}
                 onCompleted={onChange}
                 onUploadErrorChange={setUploadLogoError}
                 onDelete={() => {
@@ -48,7 +48,7 @@ const LogoAndFaviconUploader = () => {
               <ImageUploader
                 name={name}
                 value={value ?? ''}
-                actionDescription={t('sign_in_exp.branding.upload_favicon_description')}
+                actionDescription={t('sign_in_exp.branding.favicon')}
                 onCompleted={onChange}
                 onUploadErrorChange={setUploadFaviconError}
                 onDelete={() => {

packages/phrases/src/locales/de/translation/admin-console/sign-in-exp.ts

@@ -84,19 +84,15 @@ const sign_in_exp = {
   branding: {
     title: 'BRANDING',
     ui_style: 'Stil',
-    favicon: 'Browser favicon', // UNTRANSLATED
+    favicon: 'Favicon', // UNTRANSLATED
     logo_image_url: 'App logo URL',
     logo_image_url_placeholder: 'https://dein.cdn.domain/logo.png',
     dark_logo_image_url: 'App logo URL (Dunkler Modus)',
     dark_logo_image_url_placeholder: 'https://dein.cdn.domain/logo-dark.png',
     logo_image: 'App logo',
     dark_logo_image: 'App logo (Dunkler Modus)',
-    logo_action_description: 'App Logo to display in UI interface', // UNTRANSLATED
-    favicon_action_description: 'Browser Favicon', // UNTRANSLATED
     logo_image_error: 'App logo: {{error}}', // UNTRANSLATED
     favicon_error: 'Favicon: {{error}}', // UNTRANSLATED
-    upload_logo_image_description: 'App Logo to display in UI interface', // UNTRANSLATED
-    upload_favicon_description: 'Browser Favicon', // UNTRANSLATED
   },
   custom_css: {
     title: 'CUSTOM CSS', // UNTRANSLATED

packages/phrases/src/locales/en/translation/admin-console/sign-in-exp.ts

@@ -27,19 +27,15 @@ const sign_in_exp = {
   branding: {
     title: 'BRANDING AREA',
     ui_style: 'Style',
-    favicon: 'Browser favicon',
+    favicon: 'Favicon',
     logo_image_url: 'App logo image URL',
     logo_image_url_placeholder: 'https://your.cdn.domain/logo.png',
     dark_logo_image_url: 'App logo image URL (Dark)',
     dark_logo_image_url_placeholder: 'https://your.cdn.domain/logo-dark.png',
     logo_image: 'App logo',
     dark_logo_image: 'App logo (Dark)',
-    logo_action_description: 'App Logo to display in UI interface',
-    favicon_action_description: 'Browser Favicon',
     logo_image_error: 'App logo: {{error}}',
     favicon_error: 'Favicon: {{error}}',
-    upload_logo_image_description: 'App Logo to display in UI interface',
-    upload_favicon_description: 'Browser Favicon',
   },
   custom_css: {
     title: 'CUSTOM CSS',

packages/phrases/src/locales/fr/translation/admin-console/sign-in-exp.ts

@@ -29,19 +29,15 @@ const sign_in_exp = {
   branding: {
     title: 'ZONE DE MARQUE',
     ui_style: 'Style',
-    favicon: 'Browser favicon', // UNTRANSLATED
+    favicon: 'Favicon', // UNTRANSLATED
     logo_image_url: "URL de l'image du logo de l'application",
     logo_image_url_placeholder: 'https://votre.domaine.cdn/logo.png',
     dark_logo_image_url: "URL de l'image du logo de l'application (Sombre)",
     dark_logo_image_url_placeholder: 'https://votre.domaine.cdn/logo-dark.png',
     logo_image: 'App logo', // UNTRANSLATED
     dark_logo_image: 'App logo (Dark)', // UNTRANSLATED
-    logo_action_description: 'App Logo to display in UI interface', // UNTRANSLATED
-    favicon_action_description: 'Browser Favicon', // UNTRANSLATED
     logo_image_error: 'App logo: {{error}}', // UNTRANSLATED
     favicon_error: 'Favicon: {{error}}', // UNTRANSLATED
-    upload_logo_image_description: 'App Logo to display in UI interface', // UNTRANSLATED
-    upload_favicon_description: 'Browser Favicon', // UNTRANSLATED
   },
   custom_css: {
     title: 'CUSTOM CSS', // UNTRANSLATED

packages/phrases/src/locales/ko/translation/admin-console/sign-in-exp.ts

@@ -25,19 +25,15 @@ const sign_in_exp = {
   branding: {
     title: '브랜딩 영역',
     ui_style: '스타일',
-    favicon: 'Browser favicon', // UNTRANSLATED
+    favicon: 'Favicon', // UNTRANSLATED
     logo_image_url: '앱 로고 이미지 URL',
     logo_image_url_placeholder: 'https://your.cdn.domain/logo.png',
     dark_logo_image_url: '앱 로고 이미지 URL (다크 모드)',
     dark_logo_image_url_placeholder: 'https://your.cdn.domain/logo-dark.png',
     logo_image: 'App logo', // UNTRANSLATED
     dark_logo_image: 'App logo (Dark)', // UNTRANSLATED
-    logo_action_description: 'App Logo to display in UI interface', // UNTRANSLATED
-    favicon_action_description: 'Browser Favicon', // UNTRANSLATED
     logo_image_error: 'App logo: {{error}}', // UNTRANSLATED
     favicon_error: 'Favicon: {{error}}', // UNTRANSLATED
-    upload_logo_image_description: 'App Logo to display in UI interface', // UNTRANSLATED
-    upload_favicon_description: 'Browser Favicon', // UNTRANSLATED
   },
   custom_css: {
     title: 'CUSTOM CSS', // UNTRANSLATED

packages/phrases/src/locales/pt-br/translation/admin-console/sign-in-exp.ts

@@ -28,19 +28,15 @@ const sign_in_exp = {
   branding: {
     title: 'ÁREA DE MARCA',
     ui_style: 'Estilo',
-    favicon: 'Browser favicon', // UNTRANSLATED
+    favicon: 'Favicon', // UNTRANSLATED
     logo_image_url: 'URL da imagem do logotipo do aplicativo',
     logo_image_url_placeholder: 'https://your.cdn.domain/logo.png',
     dark_logo_image_url: 'URL da imagem do logotipo do aplicativo (Escuro)',
     dark_logo_image_url_placeholder: 'https://your.cdn.domain/logo-dark.png',
     logo_image: 'App logo', // UNTRANSLATED
     dark_logo_image: 'App logo (Dark)', // UNTRANSLATED
-    logo_action_description: 'App Logo to display in UI interface', // UNTRANSLATED
-    favicon_action_description: 'Browser Favicon', // UNTRANSLATED
     logo_image_error: 'App logo: {{error}}', // UNTRANSLATED
     favicon_error: 'Favicon: {{error}}', // UNTRANSLATED
-    upload_logo_image_description: 'App Logo to display in UI interface', // UNTRANSLATED
-    upload_favicon_description: 'Browser Favicon', // UNTRANSLATED
   },
   custom_css: {
     title: 'CUSTOM CSS', // UNTRANSLATED

packages/phrases/src/locales/pt-pt/translation/admin-console/sign-in-exp.ts

@@ -27,19 +27,15 @@ const sign_in_exp = {
   branding: {
     title: 'ÁREA DE MARCA',
     ui_style: 'Estilo',
-    favicon: 'Browser favicon', // UNTRANSLATED
+    favicon: 'Favicon', // UNTRANSLATED
     logo_image_url: 'URL do logotipo da app',
     logo_image_url_placeholder: 'https://your.cdn.domain/logo.png',
     dark_logo_image_url: 'URL do logotipo da app (tema escuro)',
     dark_logo_image_url_placeholder: 'https://your.cdn.domain/logo-dark.png',
     logo_image: 'App logo', // UNTRANSLATED
     dark_logo_image: 'App logo (Dark)', // UNTRANSLATED
-    logo_action_description: 'App Logo to display in UI interface', // UNTRANSLATED
-    favicon_action_description: 'Browser Favicon', // UNTRANSLATED
     logo_image_error: 'App logo: {{error}}', // UNTRANSLATED
     favicon_error: 'Favicon: {{error}}', // UNTRANSLATED
-    upload_logo_image_description: 'App Logo to display in UI interface', // UNTRANSLATED
-    upload_favicon_description: 'Browser Favicon', // UNTRANSLATED
   },
   custom_css: {
     title: 'CUSTOM CSS', // UNTRANSLATED

packages/phrases/src/locales/tr-tr/translation/admin-console/sign-in-exp.ts

@@ -28,19 +28,15 @@ const sign_in_exp = {
   branding: {
     title: 'MARKA ALANI',
     ui_style: 'Stil',
-    favicon: 'Browser favicon', // UNTRANSLATED
+    favicon: 'Favicon', // UNTRANSLATED
     logo_image_url: 'Uygulama logosu resim URLi',
     logo_image_url_placeholder: 'https://your.cdn.domain/logo.png',
     dark_logo_image_url: 'Uygulama logosu resim URLi (Koyu)',
     dark_logo_image_url_placeholder: 'https://your.cdn.domain/logo-dark.png',
     logo_image: 'App logo', // UNTRANSLATED
     dark_logo_image: 'App logo (Dark)', // UNTRANSLATED
-    logo_action_description: 'App Logo to display in UI interface', // UNTRANSLATED
-    favicon_action_description: 'Browser Favicon', // UNTRANSLATED
     logo_image_error: 'App logo: {{error}}', // UNTRANSLATED
     favicon_error: 'Favicon: {{error}}', // UNTRANSLATED
-    upload_logo_image_description: 'App Logo to display in UI interface', // UNTRANSLATED
-    upload_favicon_description: 'Browser Favicon', // UNTRANSLATED
   },
   custom_css: {
     title: 'CUSTOM CSS', // UNTRANSLATED

packages/phrases/src/locales/zh-cn/translation/admin-console/sign-in-exp.ts

@@ -33,12 +33,8 @@ const sign_in_exp = {
     dark_logo_image_url_placeholder: 'https://your.cdn.domain/logo-dark.png',
     logo_image: 'Logo 图片',
     dark_logo_image: 'Logo 图片(深色)',
-    logo_action_description: 'App Logo to display in UI interface', // UNTRANSLATED
-    favicon_action_description: 'Browser Favicon', // UNTRANSLATED
     logo_image_error: 'App logo: {{error}}', // UNTRANSLATED
     favicon_error: 'Favicon: {{error}}', // UNTRANSLATED
-    upload_logo_image_description: 'App Logo to display in UI interface', // UNTRANSLATED
-    upload_favicon_description: 'Browser Favicon', // UNTRANSLATED
   },
   custom_css: {
     title: '自定义 CSS',