Merge pull request #890 from internxt/feat/PB-798-update-shared-link-…

…layout [PB-798]: feat/update shared layout styles
internxt · Oct 18, 2023 · 0d0c539 · 0d0c539
2 parents 369875b + da56993
commit 0d0c539
Show file tree

Hide file tree

Showing 10 changed files with 60 additions and 62 deletions.
diff --git a/src/app/core/layouts/ShareLayout/ShareLayout.tsx b/src/app/core/layouts/ShareLayout/ShareLayout.tsx
@@ -1,20 +1,16 @@
 import { Fragment } from 'react';
 import { Menu, Transition } from '@headlessui/react';
-import { ReactComponent as Logo } from 'assets/icons/brand/x-white.svg';
+import { ReactComponent as Logo } from 'assets/icons/logo.svg';
 import { Link } from 'react-router-dom';
 import { useAppDispatch, useAppSelector } from '../../../store/hooks';
 import { userThunks } from '../../../store/slices/user';
 import desktopService from '../../../core/services/desktop.service';
-import bg from 'assets/images/shared-file/bg.png';
-import Shield from 'assets/images/shared-file/icons/shield.png';
-import EndToEnd from 'assets/images/shared-file/icons/end-to-end.png';
-import Lock from 'assets/images/shared-file/icons/lock.png';
-import EyeSlash from 'assets/images/shared-file/icons/eye-slash.png';
 import '../../../share/views/ShareView/ShareView.scss';
 import { ReactComponent as InternxtLogo } from 'assets/icons/big-logo.svg';
 import notificationsService, { ToastType } from 'app/notifications/services/notifications.service';
 import { useTranslationContext } from 'app/i18n/provider/TranslationProvider';
 import ReportButton from '../../../share/views/ShareView/ReportButon';
+import { ShieldCheck, Password, Key, Eye } from '@phosphor-icons/react';
 
 interface ShareLayoutProps {
   children: JSX.Element;
@@ -59,13 +55,13 @@ export default function ShareLayout(props: ShareLayoutProps): JSX.Element {
       {/* Content */}
       <div className="flex h-screen flex-row items-stretch justify-center bg-white text-cool-gray-90">
         {/* Banner */}
-        <div className="relative hidden h-full w-96 flex-shrink-0 flex-col bg-blue-80 text-white lg:flex">
-          <img src={bg} className="absolute top-0 left-0 h-full w-full object-cover object-center" />
-
+        <div
+          className="relative hidden h-full w-96 flex-shrink-0 flex-col text-white lg:flex"
+          style={{ background: 'radial-gradient(50% 50% at 50% 50%, #0058DB 0%, #161616 100%)' }}
+        >
           <div className="z-10 flex h-full flex-col space-y-12 p-12">
             <div className="relative flex flex-row items-center space-x-2 font-semibold">
-              <Logo className="h-4 w-4" />
-              <span>INTERNXT</span>
+              <Logo className="w-36" />
             </div>
 
             <div className="flex h-full flex-col justify-center space-y-20">
@@ -76,32 +72,27 @@ export default function ShareLayout(props: ShareLayoutProps): JSX.Element {
 
               <div className="flex flex-col space-y-3 text-xl">
                 {[
-                  { icon: Shield, label: translate('shareLayout.labels.privacy') },
-                  { icon: EndToEnd, label: translate('shareLayout.labels.end-to-end') },
-                  { icon: Lock, label: translate('shareLayout.labels.military-grade') },
-                  { icon: EyeSlash, label: translate('shareLayout.labels.zero-knowledge') },
+                  { id: 1, icon: Password, label: translate('shareLayout.labels.military-grade') },
+                  { id: 2, icon: Key, label: translate('shareLayout.labels.zero-knowledge') },
+                  { id: 3, icon: ShieldCheck, label: translate('shareLayout.labels.privacy') },
+                  { id: 4, icon: Eye, label: translate('shareLayout.labels.open-source') },
                 ].map((item) => (
-                  <div className="flex flex-row items-center space-x-3" key={item.icon}>
-                    <img src={item.icon} className="h-6 w-6" />
+                  <div className="flex flex-row items-center space-x-3" key={item.id}>
+                    <item.icon className="h-6 w-6" />
                     <span>{item.label}</span>
                   </div>
                 ))}
               </div>
             </div>
 
             {!isAuthenticated && (
-              <a href="https://internxt.com" className="no-underline" target="_blank" rel="noopener noreferrer">
-                <div
-                  className="flex cursor-pointer flex-row items-center justify-center rounded-xl p-1 no-underline
-                                ring-3 ring-blue-30"
-                >
-                  <div
-                    className="flex h-12 w-full flex-row items-center justify-center rounded-lg bg-white
-                                  px-6 text-xl font-semibold text-blue-70 no-underline"
-                  >
-                    <span>{translate('shareLayout.tryInternxt')}</span>
-                  </div>
-                </div>
+              <a
+                href="https://internxt.com"
+                className="cursor-pointer no-underline"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <button className="button-primary">{translate('shareLayout.tryInternxt')}</button>
               </a>
             )}
           </div>
@@ -129,7 +120,7 @@ export default function ShareLayout(props: ShareLayoutProps): JSX.Element {
                           <span className="text-sm font-semibold">{getAvatarLetters()}</span>
                         </div>
                         <div className="flex flex-row items-center font-semibold">
-                          <span>{`${user && user['name']} ${user && user['lastname']}`}</span>
+                          <span>{`${user ? user['name'] : ''} ${user ? user['lastname'] : ''}`}</span>
                         </div>
                       </div>
                     </Menu.Button>

diff --git a/src/app/i18n/locales/cn.json b/src/app/i18n/locales/cn.json
@@ -170,10 +170,10 @@
   },
   "shareLayout": {
     "title": "INTERNXT",
-    "subtitle": "安全云存储",
+    "subtitle": "具有无与伦比的隐私保护的安全云存储",
     "labels": {
       "privacy": "为隐私而设计",
-      "end-to-end": "端到端加密",
+      "open-source": "开源透明",
       "military-grade": "军事级别的加密",
       "zero-knowledge": "零知识"
     },
@@ -1106,7 +1106,7 @@
     "download": "下载",
     "downloading": "正在下载",
     "downloaded": "已下载",
-    "view": "视图",
+    "view": "预览",
     "accessFile": "访问文件",
     "upgradeNow": "购买储存空间",
     "purchasePlan": "购买储存空间",

diff --git a/src/app/i18n/locales/de.json b/src/app/i18n/locales/de.json
@@ -152,10 +152,10 @@
   },
   "shareLayout": {
     "title": "WIR SIND INTERNXT",
-    "subtitle": "Privater und sicherer Cloud-Speicher",
+    "subtitle": "Sicherer Cloud-Speicher mit unübertroffener Privatsphäre",
     "labels": {
       "privacy": "Datenschutz durch Design",
-      "end-to-end": "End-to-end Verschlüsselung",
+      "open-source": "Open Source und transparent",
       "military-grade": "Verschlüsselung auf Militärniveau",
       "zero-knowledge": "Zero-Knowledge Technologie"
     },
@@ -1017,7 +1017,7 @@
     "downloaded": "Runtergeladen",
     "delete": "Löschen",
     "share": "Teilen",
-    "view": "Ansicht",
+    "view": "Vorschau",
     "accessFile": "Zugriff auf Datei",
     "upgradeNow": "Upgrade jetzt",
     "purchasePlan": "Upgrade jetzt",
@@ -1046,7 +1046,8 @@
     "restoreHere": "Hier wiederherstellen",
     "rename": "Umbenennen",
     "restore": "Wiederherstellen",
-    "copyLink": "Kopiere Link"
+    "copyLink": "Kopiere Link",
+    "report": "Missbrauch melden"
   },
   "drive": {
     "usage": "Verwendung",

diff --git a/src/app/i18n/locales/en.json b/src/app/i18n/locales/en.json
@@ -194,10 +194,10 @@
   },
   "shareLayout": {
     "title": "WE ARE INTERNXT",
-    "subtitle": "Private and secure cloud storage",
+    "subtitle": "Secure cloud storage with unmatched privacy",
     "labels": {
       "privacy": "Privacy by design",
-      "end-to-end": "End-to-end encryption",
+      "open-source": "Open source and transparent",
       "military-grade": "Military-grade encryption",
       "zero-knowledge": "Zero-knowledge technology"
     },
@@ -1140,7 +1140,7 @@
     "download": "Download",
     "downloading": "Downloading",
     "downloaded": "Downloaded",
-    "view": "View",
+    "view": "Preview",
     "accessFile": "Access File",
     "upgradeNow": "Upgrade now",
     "purchasePlan": "Upgrade now",

diff --git a/src/app/i18n/locales/es.json b/src/app/i18n/locales/es.json
@@ -177,10 +177,10 @@
   },
   "shareLayout": {
     "title": "",
-    "subtitle": "Almacenamiento seguro en la nube",
+    "subtitle": "Almacenamiento seguro en la nube con privacidad inigualable",
     "labels": {
       "privacy": "Privado por diseño",
-      "end-to-end": "Cifrado de extremo a extremo",
+      "open-source": "Código abierto y transparente",
       "military-grade": "Cifrado de grado militar",
       "zero-knowledge": "Conocimiento cero"
     },
@@ -1123,7 +1123,7 @@
     "download": "Descargar",
     "downloading": "Descargando",
     "downloaded": "Descargado",
-    "view": "Ver",
+    "view": "Previsualizar",
     "accessFile": "Acceder al archivo",
     "upgradeNow": "Comprar espacio",
     "purchasePlan": "Comprar plan",

diff --git a/src/app/i18n/locales/fr.json b/src/app/i18n/locales/fr.json
@@ -159,10 +159,10 @@
   },
   "shareLayout": {
     "title": "",
-    "subtitle": "Stockage sécurisé dans le nuage",
+    "subtitle": "Stockage cloud sécurisé avec une confidentialité inégalée",
     "labels": {
       "privacy": "Privé par conception",
-      "end-to-end": "Chiffrement de bout en bout",
+      "open-source": "Open source et transparent",
       "military-grade": "Cryptage de qualité militaire",
       "zero-knowledge": "Zéro connaissance"
     },
@@ -1054,7 +1054,7 @@
     "downloaded": "Téléchargé",
     "delete": "Supprimer",
     "share": "Partager",
-    "view": "Afficher",
+    "view": "Aperçu",
     "accessFile": "Fichier d'accès",
     "upgradeNow": "Acheter de l'espace",
     "purchasePlan": "Acheter de l'espace",

diff --git a/src/app/i18n/locales/it.json b/src/app/i18n/locales/it.json
@@ -175,10 +175,10 @@
   },
   "shareLayout": {
     "title": "INTERNXT",
-    "subtitle": "Archiviazione cloud sicura",
+    "subtitle": "Archiviazione cloud sicura con privacy senza pari",
     "labels": {
       "privacy": "Privato by design",
-      "end-to-end": "Crittografia end-to-end",
+      "open-source": "Open source e trasparente",
       "military-grade": "Crittografia di livello militare",
       "zero-knowledge": "Zero Knowledge"
     },
@@ -1111,7 +1111,7 @@
     "downloaded": "Scaricato",
     "delete": "Elimina",
     "share": "Condividi",
-    "view": "Visualizza",
+    "view": "Anteprima",
     "accessFile": "Accesso al file",
     "upgradeNow": "Aggiornare ora",
     "purchasePlan": "Aggiornare ora",

diff --git a/src/app/i18n/locales/ru.json b/src/app/i18n/locales/ru.json
@@ -158,10 +158,10 @@
   },
   "shareLayout": {
     "title": "INTERNXT",
-    "subtitle": "Надежное и безопасное облачное хранилище данных",
+    "subtitle": "Безопасное облачное хранилище с непревзойденной конфиденциальностью",
     "labels": {
       "privacy": "Конфиденциальность по умолчанию",
-      "end-to-end": "Сквозное шифрование",
+      "open-source": "Открытый исходный код и прозрачность",
       "military-grade": "Шифрование военного класса",
       "zero-knowledge": "Технология нулевого разглашения"
     },
@@ -1040,7 +1040,7 @@
     "downloaded": "Загружено",
     "delete": "Удалить",
     "share": "Поделиться",
-    "view": "Вид",
+    "view": "Предварительный просмотр",
     "accessFile": "Доступ к файлам",
     "upgradeNow": "Обновить сейчас",
     "purchasePlan": "Купить платный план",

diff --git a/src/app/share/views/ShareView/ShareFileView.tsx b/src/app/share/views/ShareView/ShareFileView.tsx
@@ -28,6 +28,7 @@ import { useTranslationContext } from 'app/i18n/provider/TranslationProvider';
 import { ShareTypes } from '@internxt/sdk/dist/drive';
 import errorService from 'app/core/services/error.service';
 import { SharingMeta } from '@internxt/sdk/dist/drive/share/types';
+import Button from '../../../shared/components/Button/Button';
 
 export interface ShareViewProps extends ShareViewState {
   match: match<{
@@ -76,10 +77,6 @@ export default function ShareFileView(props: ShareViewProps): JSX.Element {
       if (err.message !== 'Forbidden') {
         setIsLoaded(true);
         setIsError(true);
-        /**
-         * TODO: Check that the server returns proper error message instead
-         * of assuming that everything means that the link has expired
-         */
         throw new Error(translate('error.linkExpired') as string);
       }
     });
@@ -278,7 +275,8 @@ export default function ShareFileView(props: ShareViewProps): JSX.Element {
         {/* Actions */}
         <div className="flex flex-row items-center justify-center space-x-3">
           {isTypeAllowed() && (
-            <button
+            <Button
+              variant="secondary"
               onClick={() => {
                 setOpenPreview(true);
                 getBlob(new AbortController())
@@ -291,12 +289,10 @@ export default function ShareFileView(props: ShareViewProps): JSX.Element {
                     errorService.reportError(err);
                   });
               }}
-              className="flex h-10 cursor-pointer flex-row items-center space-x-2 rounded-lg bg-blue-10 px-6
-                        font-medium text-blue-60 active:bg-blue-20 active:bg-opacity-65"
             >
-              <UilEye height="20" width="20" />
-              <span>{translate('actions.view')}</span>
-            </button>
+              <UilEye height={24} width={24} color="text-gray-80" />
+              <span className="ml-2">{translate('actions.view')}</span>
+            </Button>
           )}
 
           <button

diff --git a/src/assets/icons/logo.svg b/src/assets/icons/logo.svg