Merge pull request #524 from fairDataSociety/feat/ui-improvements

Feat/UI improvements

src/components/Disclosure/Disclosure.module.scss

@@ -0,0 +1,8 @@
+.arrow {
+  transition: transform 0.3s ease-in-out;
+  transform: rotate(90deg);
+}
+
+.arrowOpen {
+  transform: rotate(270deg);
+}

src/components/Disclosure/Disclosure.tsx

@@ -0,0 +1,68 @@
+import {
+  Disclosure as DisclosureComponent,
+  Transition,
+} from '@headlessui/react';
+
+import ArrowRightLight from '@media/UI/arrow-right-light.svg';
+import ArrowRightDark from '@media/UI/arrow-right-dark.svg';
+import React, { Fragment, useContext } from 'react';
+import ThemeContext from '@context/ThemeContext';
+
+import classes from './Disclosure.module.scss';
+
+interface DisclosureProps {
+  title: string;
+  children: React.ReactNode;
+  defaultOpen?: boolean;
+  buttonClassName?: string;
+  conentClassName?: string;
+}
+
+export default function Disclosure({
+  title,
+  children,
+  defaultOpen,
+  buttonClassName,
+  conentClassName,
+}: DisclosureProps) {
+  const { theme } = useContext(ThemeContext);
+
+  const getArrowClasses = (open: boolean) =>
+    `absolute right-4 top-5 ${classes.arrow} ${open ? classes.arrowOpen : ''}`;
+
+  return (
+    <DisclosureComponent defaultOpen={defaultOpen}>
+      {({ open }) => (
+        <>
+          <DisclosureComponent.Button
+            className={`flex relative w-full justify-between py-2 text-left text-sm font-medium bg-color-shade-white-night dark:bg-color-shade-dark-1-night text-color-accents-purple-black dark:text-color-accents-grey-lavendar text-base py-3 px-8 dark:text-color-shade-light-2-night bg-none text-color-shade-light-3-night rounded ${buttonClassName}`}
+          >
+            <span>{title}</span>
+            {theme === 'light' ? (
+              <ArrowRightLight className={getArrowClasses(open)} />
+            ) : (
+              <ArrowRightDark className={getArrowClasses(open)} />
+            )}
+          </DisclosureComponent.Button>
+          <div className="overflow-hidden">
+            <Transition
+              as={Fragment}
+              enter="transition ease-in-out duration-300 transform"
+              enterFrom="-translate-y-full"
+              enterTo="translate-y-0"
+              leave="transition ease-in-out duration-300 transform"
+              leaveFrom="translate-y-0"
+              leaveTo="-translate-y-full"
+            >
+              <DisclosureComponent.Panel
+                className={`px-4 pt-4 pb-2 text-sm text-gray-500 ${conentClassName}`}
+              >
+                {children}
+              </DisclosureComponent.Panel>
+            </Transition>
+          </div>
+        </>
+      )}
+    </DisclosureComponent>
+  );
+}

src/components/Invite/Invite.tsx

@@ -1,4 +1,4 @@
-import { FC, useEffect, useState } from 'react';
+import { FC, useContext, useEffect, useState } from 'react';
 import { Button } from '@components/Buttons';
 import { useForm } from 'react-hook-form';
 import {
@@ -20,6 +20,9 @@ import CustomCheckbox from '@components/Inputs/CustomCheckbox/CustomCheckbox';
 import { useFdpStorage } from '@context/FdpStorageContext';
 import copy from 'copy-to-clipboard';
 import { useLocales } from '@context/LocalesContext';
+import ThemeContext from '@context/ThemeContext';
+import InfoLight from '@media/UI/info-light.svg';
+import InfoDark from '@media/UI/info-dark.svg';
 
 export const STEP_CREATE = 'create';
 export const STEP_FILL = 'fill';
@@ -42,6 +45,7 @@ const Invite: FC<InviteProps> = () => {
   const [termsAccepted, setTermsAccepted] = useState<boolean>(false);
   const { wallet } = useFdpStorage();
   const { intl } = useLocales();
+  const { theme } = useContext(ThemeContext);
 
   /**
    * When user click by Save name button
@@ -120,6 +124,7 @@ const Invite: FC<InviteProps> = () => {
         <div className="md:border-r border-gray-300">
           {step === STEP_CREATE && (
             <>
+              <p className="pr-8">{intl.get('INVITES_DESCRIPTION')}</p>
               <div className="flex flex-col sm:flex-row mt-10">
                 <CustomCheckbox
                   className="mb-3 sm:mb-0"
@@ -252,8 +257,14 @@ const Invite: FC<InviteProps> = () => {
         </div>
 
         <div className="mt-10 md:mt-0">
-          <div className="font-semibold text-l text-color-accents-plum-black dark:text-color-shade-white-night">
+          <div className="font-semibold relative flex items-center text-l text-color-accents-plum-black dark:text-color-shade-white-night">
             {intl.get('INVITES_ADDRESS_BOOK')}
+            <div className="has-tooltip inline-block ml-2 text-color-shade-dark-2-night dark:text-color-shade-light-2-night cursor-pointer">
+              <span>{theme === 'light' ? <InfoLight /> : <InfoDark />}</span>
+              <span className="tooltip rounded w-48 -left-24 sm:w-56 sm:-left-28 top-4 shadow-lg p-3 bg-color-shade-dark-2-day dark:bg-color-shade-dark-2-night">
+                {intl.get('INVITES_TOOLTIP')}
+              </span>
+            </div>
           </div>
           <div className="mt-10">
             <Invites

src/components/Modals/PasswordModal/PasswordModal.tsx

@@ -2,12 +2,16 @@ import { FC, useState } from 'react';
 import { Modal } from '@components/Modals';
 import { Button } from '@components/Buttons';
 import FeedbackMessage from '@components/FeedbackMessage/FeedbackMessage';
-import Spinner from '@components/Spinner/Spinner';
 import AuthenticationInput from '../../Inputs/AuthenticationInput/AuthenticationInput';
 import { useForm } from 'react-hook-form';
 import { FieldError } from 'react-hook-form/dist/types/errors';
 import { MIN_PASSWORD_LENGTH } from '@utils/password';
 import { useLocales } from '@context/LocalesContext';
+import Disclosure from '@components/Disclosure/Disclosure';
+import {
+  getMetamaskPassphraseExplanation,
+  setMetamaskPassphraseExplanation,
+} from '@utils/localStorage';
 
 interface PasswordModalProps {
   showModal: boolean;
@@ -32,6 +36,7 @@ const PasswordModal: FC<PasswordModalProps> = ({
     setLoading(true);
     try {
       await handleSubmitForm(data.password);
+      setMetamaskPassphraseExplanation(false);
       closeModal();
     } catch (e) {
       setErrorMessage(intl.get('GENERIC_ERROR', { message: e.message }));
@@ -77,6 +82,16 @@ const PasswordModal: FC<PasswordModalProps> = ({
             loading={loading}
           />
         </div>
+        <div className="mt-5">
+          <Disclosure
+            title={'How it works'}
+            defaultOpen={!getMetamaskPassphraseExplanation()}
+          >
+            <p className="text-sm mb-3">
+              {intl.get('PASSPHRASE_EXPLANATION_2')}
+            </p>
+          </Disclosure>
+        </div>
       </form>
 
       <div className="mt-4 text-center">

src/components/NavigationBars/MainNavigationBar/MainNavigationBar.tsx

@@ -44,6 +44,10 @@ const MainNavigationBar: FC<Record<string, never>> = () => {
         </div>
 
         <div className="flex justify-between items-center">
+          {/* TODO: Search functionality should be implemented */}
+          {/* <div className="hidden sm:block mr-16">
+            <SearchBar />
+          </div> */}
           <div className="flex flex-nowrap space-x-5">
             <UserDropdownToggle
               address={wallet?.address || 'Blossom'}

src/locales/ch-CH.json

@@ -219,6 +219,9 @@
   "TERMS_OF_USAGE_PARAGRAPH_3": "通过使用Fairdrive Beta版本，您同意报告在平台上发现的任何缺陷、错误或瑕疵，或者用户 - Beta测试人员已获准访问Fairdrive Beta版本的其他材料。用户理解及时准确地报告是Fairdrive Beta版本的目的，并承诺在产品的所有方面（无论是积极的还是消极的）上提供频繁的报告，并承认任何因Beta测试人员对Fairdrive项目的贡献而产生的改进、修改和变更，仍然或变为披露方的专有财产。",
   "FAIRDRIVE_COPYRIGHT": "© 2021 Fairdrive。保留所有权利。",
   "PASSPHRASE_EXPLANATION": "您的密码用于加密和解密您的数据。不要分享。",
+  "PASSPHRASE_EXPLANATION_2": "为了增强安全性，您的访问受到密码短语和MetaMask的数字签名的双重保护。输入正确的密码短语和签名会解锁您特定的数据、Pods、文件夹和文件。注意：输入错误的密码短语不会拒绝访问，而是会显示完全不相关的数据。如果您决定升级到完全的FDP帐户，请注意，只有当前登录帐户的数据才会被迁移。",
   "ROOT_DIRECTORY": "根目录 ",
+  "INVITES_TOOLTIP": "邀请简化了入门过程！分享邀请链接，让朋友们即时访问预先充值的钱包。",
+  "INVITES_DESCRIPTION": "我们的邀请制度旨在使新用户的入门过程变得无缝。当您创建邀请时，您实际上是生成了一个嵌入预先充值钱包的私钥的推荐链接。通过与朋友或同事共享此链接，您可以让他们立即访问并开始使用已配置好的服务。这不仅可以帮助他们避免初次设置的麻烦，还可以更快地推动他们使用我们的平台。",
   "NEW_FOLDER": "新建文件夹"
 }

src/locales/de-DE.json

@@ -219,6 +219,9 @@
   "TERMS_OF_USAGE_PARAGRAPH_3": "Durch die Verwendung der Fairdrive Beta-Version erklären Sie sich damit einverstanden, alle Mängel, Fehler oder Unvollkommenheiten, die auf der Plattform oder anderen Materialien entdeckt wurden, anzuzeigen, bei denen dem Benutzer - dem Beta-Tester - Zugang zur Fairdrive Beta-Version gewährt wurde. Der Benutzer versteht, dass eine prompte und genaue Berichterstattung den Zweck der Fairdrive Beta-Version darstellt, und verpflichtet sich, seine besten Anstrengungen zu unternehmen, um häufige Berichte über alle Aspekte des Produkts sowohl positiv als auch negativ zu liefern, und erkennt an, dass Verbesserungen, Modifikationen und Änderungen, die aus oder in Verbindung mit dem Beitrag des Beta-Testers zum Fairdrive-Projekt entstehen, im ausschließlichen Eigentum der offenlegenden Partei verbleiben oder werden.",
   "FAIRDRIVE_COPYRIGHT": "© 2021 Fairdrive. Alle Rechte vorbehalten",
   "PASSPHRASE_EXPLANATION": "Ihr Kennwort wird zur Verschlüsselung und Entschlüsselung Ihrer Daten verwendet. Teilen Sie es nicht.",
+  "PASSPHRASE_EXPLANATION_2": "Um die Sicherheit zu erhöhen, wird Ihr Zugang durch eine Kombination aus einer Passphrase und einer digitalen Signatur von MetaMask geschützt. Die korrekte Eingabe von Passphrase und Signatur gibt Zugang zu Ihren spezifischen Daten, Pods, Ordnern und Dateien. Hinweis: Eine falsch eingegebene Passphrase wird keinen Zugang verweigern, sondern komplett unterschiedliche Daten anzeigen. Wenn Sie sich entscheiden, auf ein vollständiges FDP-Konto zu aktualisieren, wird nur das aktuell eingeloggte Konto migriert.",
   "ROOT_DIRECTORY": "Stammverzeichnis",
+  "INVITES_TOOLTIP": "Einladungen erleichtern den Einstieg! Teile einen Einladungslink, um Freunden sofortigen Zugang zu einem vorgefundenen Wallet zu geben.",
+  "INVITES_DESCRIPTION": "Unser Einladungssystem ist darauf ausgelegt, den Einstieg für neue Benutzer nahtlos zu gestalten. Wenn Sie eine Einladung erstellen, generieren Sie im Wesentlichen einen Empfehlungslink, der mit einem privaten Schlüssel zu einer vorgefundenen Brieftasche versehen ist. Durch das Teilen dieses Links mit Freunden oder Kollegen ermöglichen Sie ihnen den sofortigen Zugang und die sofortige Nutzung unseres Dienstes mit bereits vorhandenen Mitteln. Dies erleichtert nicht nur die Erstkonfiguration, sondern fördert auch die schnellere Nutzung unserer Plattform.",
   "NEW_FOLDER": "Neuer Ordner"
 }

src/locales/en-US.json

@@ -219,6 +219,9 @@
   "TERMS_OF_USAGE_PARAGRAPH_3": "By using Fairdrive Beta Release you agree to report any flaws, errors or imperfections discovered on the platform or other materials where the user - Beta Tester has been granted access to the Fairdrive Beta Release. The user understands that prompt and accurate reporting is the purpose of the Fairdrive Beta Release and undertakes to use best efforts to provide frequent reports on all aspects of the product both positive and negative and acknowledges that any improvements, modifications and changes arising from or in connection with the Beta Testers contribution to the Fairdrive Project, remain or become the exclusive property of the Disclosing Party.",
   "FAIRDRIVE_COPYRIGHT": "© 2021 Fairdrive. All rights reserved",
   "PASSPHRASE_EXPLANATION": "Your passphrase is used for the encryption and decryption of your data. Do not share it.",
+  "PASSPHRASE_EXPLANATION_2": "To enhance security, your access is protected by a combination of a passphrase and a digital signature from MetaMask. Entering the correct passphrase and signature unlocks your specific data, pods, folders, and files. Note: A mistyped passphrase will not deny access but will show you completely unrelated data. If you decide to upgrade to a full FDP account, be aware that only the data from the currently logged-in account will be migrated.",
   "ROOT_DIRECTORY": "Root directory",
+  "INVITES_TOOLTIP": "Invites simplify onboarding! Share an invite link to give friends instant access to a pre-funded wallet.",
+  "INVITES_DESCRIPTION": "Our invitation system is designed to make the onboarding process seamless for new users. When you create an invite, you're essentially generating a referral link embedded with a private key to a pre-funded wallet. By sharing this link with friends or colleagues, you give them immediate access to start using the service with funds already in place. This not only helps them bypass the initial setup hassles but also encourages quicker adoption and usage of our platform.",
   "NEW_FOLDER": "New Folder"
 }

src/locales/es-ES.json

@@ -219,6 +219,9 @@
   "TERMS_OF_USAGE_PARAGRAPH_3": "Al utilizar Fairdrive Beta Release, aceptas informar cualquier defecto, error o imperfección descubierta en la plataforma u otros materiales donde al usuario - Beta Tester se le haya concedido acceso a Fairdrive Beta Release. El usuario entiende que informar de manera rápida y precisa es el propósito de Fairdrive Beta Release y se compromete a utilizar sus mejores esfuerzos para proporcionar informes frecuentes sobre todos los aspectos del producto, tanto positivos como negativos, y reconoce que cualquier mejora, modificación y cambio que surja o en relación con la contribución de los Beta Testers al Proyecto Fairdrive, permanecen o se convierten en propiedad exclusiva de la Parte Divulgante.",
   "FAIRDRIVE_COPYRIGHT": "© 2021 Fairdrive. Todos los derechos reservados.",
   "PASSPHRASE_EXPLANATION": "Su frase de contraseña se utiliza para la encriptación y desencriptación de sus datos. No lo comparta.",
+  "PASSPHRASE_EXPLANATION_2": "Para mejorar la seguridad, tu acceso está protegido por una combinación de una frase de contraseña y una firma digital de MetaMask. Ingresar la frase de contraseña y la firma correctas desbloqueará tus datos, pods, carpetas y archivos específicos. Nota: Si escribes mal la frase de contraseña, no se te denegará el acceso, sino que verás datos completamente diferentes. Si decides actualizar a una cuenta FDP completa, ten en cuenta que solo se migrarán los datos de la cuenta en la que estés registrado actualmente.",
   "ROOT_DIRECTORY": "Directorio raíz",
+  "INVITES_TOOLTIP": "¡Las invitaciones simplifican el proceso de incorporación! Comparte un enlace de invitación para dar a tus amigos acceso instantáneo a una billetera prefinanciada.",
+  "INVITES_DESCRIPTION": "Nuestro sistema de invitación está diseñado para hacer que el proceso de incorporación sea fluido para los nuevos usuarios. Al crear una invitación, esencialmente estás generando un enlace de referencia incrustado con una clave privada para una billetera prefinanciada. Al compartir este enlace con amigos o colegas, les das acceso inmediato para empezar a usar el servicio con fondos ya establecidos. Esto no solo les ayuda a evitar las complicaciones de la configuración inicial, sino que también fomenta una adopción y uso más rápidos de nuestra plataforma.",
   "NEW_FOLDER": "Nueva Carpeta"
 }

src/locales/fr-FR.json

@@ -219,6 +219,9 @@
   "TERMS_OF_USAGE_PARAGRAPH_3": "En utilisant la version bêta de Fairdrive, vous acceptez de signaler tout défaut, erreur ou imperfection découvert sur la plateforme ou d'autres supports où l'utilisateur - testeur bêta a eu accès à la version bêta de Fairdrive. L'utilisateur comprend que la communication rapide et précise est le but de la version bêta de Fairdrive et s'engage à faire de son mieux pour fournir des rapports fréquents sur tous les aspects du produit, positifs et négatifs, et reconnaît que toutes les améliorations, modifications et changements découlant de la contribution du testeur bêta au projet Fairdrive restent ou deviennent la propriété exclusive de la partie révélante.",
   "FAIRDRIVE_COPYRIGHT": "© 2021 Fairdrive. Tous droits réservés",
   "PASSPHRASE_EXPLANATION": "Votre mot de passe est utilisé pour le chiffrement et le déchiffrement de vos données. Ne le partagez pas.",
+  "PASSPHRASE_EXPLANATION_2": "Pour améliorer la sécurité, votre accès est protégé par une combinaison de phrase secrète et d'une signature numérique via MetaMask. Saisir la phrase secrète et la signature correctes vous donnera accès à vos données, pods, dossiers et fichiers spécifiques. Remarque : une phrase secrète mal saisie ne refusera pas l'accès mais affichera des données complètement différentes. Si vous choisissez de migrer vers un compte FDP complet, seules les données du compte actuellement connecté seront migrées.",
   "ROOT_DIRECTORY": "Répertoire racine",
+  "INVITES_TOOLTIP": "Les invitations simplifient l'intégration ! Partagez un lien d'invitation pour offrir à vos amis un accès instantané à un portefeuille préfinancé.",
+  "INVITES_DESCRIPTION": "Notre système d'invitation est conçu pour faciliter l'intégration des nouveaux utilisateurs. Lorsque vous créez une invitation, vous générez essentiellement un lien de parrainage intégré avec une clé privée pour un portefeuille préfinancé. En partageant ce lien avec des amis ou des collègues, vous leur donnez un accès immédiat pour commencer à utiliser le service avec des fonds déjà en place. Cela les aide non seulement à éviter les tracas de la configuration initiale, mais encourage également une adoption et une utilisation plus rapides de notre plateforme.",
   "NEW_FOLDER": "Nouveau Dossier"
 }