From 65ebd2fd944dea6493135a1ec35e9d2e50841381 Mon Sep 17 00:00:00 2001
From: Thibaut Sardan <github@thib.top>
Date: Fri, 17 Dec 2021 13:04:56 +0000
Subject: [PATCH 1/8] hop

---
 .../Notifications/NotificationList.tsx        | 25 +++++++++++++++++--
 .../Notifications/NotificationsDropdown.tsx   |  1 +
 2 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/packages/files-ui/src/Components/Elements/Notifications/NotificationList.tsx b/packages/files-ui/src/Components/Elements/Notifications/NotificationList.tsx
index 634a7a4377..a2b8d2d80b 100644
--- a/packages/files-ui/src/Components/Elements/Notifications/NotificationList.tsx
+++ b/packages/files-ui/src/Components/Elements/Notifications/NotificationList.tsx
@@ -4,6 +4,9 @@ import { createStyles, ITheme, makeStyles } from "@chainsafe/common-theme"
 import dayjs from "dayjs"
 import relativeTime from "dayjs/plugin/relativeTime"
 import { Notification } from "./NotificationsDropdown"
+import { Trans } from "@lingui/macro"
+import { BellIcon } from "@chainsafe/common-components"
+import clsx from "clsx"
 dayjs.extend(relativeTime)
 
 const useStyles = makeStyles(({ palette, constants }: ITheme) =>
@@ -14,17 +17,27 @@ const useStyles = makeStyles(({ palette, constants }: ITheme) =>
       alignItems: "center",
       cursor: "pointer",
       backgroundColor: "initial",
+      "&.empty": {
+        display: "flex",
+        flexDirection: "column",
+        padding: `${constants.generalUnit * 3 }px ${constants.generalUnit * 1.5}px`,
+        color: palette.additional["gray"][7]
+      },
       "&:hover": {
         backgroundColor: palette.additional["gray"][3]
       },
-      "svg": {
+      "& svg": {
         fill: palette.additional["gray"][9]
       },
       borderBottom: `1px solid ${palette.additional["gray"][5]}`,
-      ":last-child": {
+      "&:last-child": {
         border: "none"
       }
     },
+    icon: {
+      transition: "none",
+      marginBottom: constants.generalUnit
+    },
     notificationTitle: {
       color: palette.additional["gray"][9],
       paddingRight: constants.generalUnit * 1.5,
@@ -53,6 +66,14 @@ const NotificationList = ({ notifications }: INotificationListProps) => {
       className={classes.scrollContent}
     >
       <div>
+        {notifications.length === 0 && (
+          <div className={clsx(classes.notificationBody, "empty")}>
+            <BellIcon className={classes.icon} />
+            <Typography variant="h4" >
+              <Trans>There are no notifications!</Trans>
+            </Typography>
+          </div>
+        )}
         {notifications.map((n, i) => (
           <div
             key={i}
diff --git a/packages/files-ui/src/Components/Elements/Notifications/NotificationsDropdown.tsx b/packages/files-ui/src/Components/Elements/Notifications/NotificationsDropdown.tsx
index 14051419c8..9ba2ca60da 100644
--- a/packages/files-ui/src/Components/Elements/Notifications/NotificationsDropdown.tsx
+++ b/packages/files-ui/src/Components/Elements/Notifications/NotificationsDropdown.tsx
@@ -49,6 +49,7 @@ const NotificationsDropdown = ({ notifications }: INotificationsDropdownProps) =
       dropdown={<NotificationList notifications={notifications}/>}
       hideIndicator={true}
       anchor="bottom-right"
+      autoclose
     >
       <Button variant="tertiary">
         <div className={classes.notificationsButton}>

From 2ff48ead91d533850bcb03133b7c53b74341cd91 Mon Sep 17 00:00:00 2001
From: GitHub Actions <actions@github.com>
Date: Fri, 17 Dec 2021 13:11:05 +0000
Subject: [PATCH 2/8] lingui extract

---
 packages/files-ui/src/locales/de/messages.po |   3 +
 packages/files-ui/src/locales/en/messages.po |   3 +
 packages/files-ui/src/locales/es/messages.po |   3 +
 packages/files-ui/src/locales/fr/messages.po | 244 +++++--------------
 packages/files-ui/src/locales/no/messages.po |   3 +
 5 files changed, 67 insertions(+), 189 deletions(-)

diff --git a/packages/files-ui/src/locales/de/messages.po b/packages/files-ui/src/locales/de/messages.po
index bef77212e9..6750b2d1f6 100644
--- a/packages/files-ui/src/locales/de/messages.po
+++ b/packages/files-ui/src/locales/de/messages.po
@@ -889,6 +889,9 @@ msgstr ""
 msgid "Theme"
 msgstr "Farbschema"
 
+msgid "There are no notifications!"
+msgstr ""
+
 msgid "There was an error authenticating"
 msgstr "Es gab einen Fehler bei der Authentifizierung"
 
diff --git a/packages/files-ui/src/locales/en/messages.po b/packages/files-ui/src/locales/en/messages.po
index dfd6d9ac38..ddaddba1f4 100644
--- a/packages/files-ui/src/locales/en/messages.po
+++ b/packages/files-ui/src/locales/en/messages.po
@@ -892,6 +892,9 @@ msgstr "The username is too long"
 msgid "Theme"
 msgstr "Theme"
 
+msgid "There are no notifications!"
+msgstr "There are no notifications!"
+
 msgid "There was an error authenticating"
 msgstr "There was an error authenticating"
 
diff --git a/packages/files-ui/src/locales/es/messages.po b/packages/files-ui/src/locales/es/messages.po
index 8dd23f4337..b8de774f81 100644
--- a/packages/files-ui/src/locales/es/messages.po
+++ b/packages/files-ui/src/locales/es/messages.po
@@ -893,6 +893,9 @@ msgstr ""
 msgid "Theme"
 msgstr "Tema"
 
+msgid "There are no notifications!"
+msgstr ""
+
 msgid "There was an error authenticating"
 msgstr "Hubo un error de autenticación."
 
diff --git a/packages/files-ui/src/locales/fr/messages.po b/packages/files-ui/src/locales/fr/messages.po
index 7a5bd861b2..11f49f91a1 100644
--- a/packages/files-ui/src/locales/fr/messages.po
+++ b/packages/files-ui/src/locales/fr/messages.po
@@ -5,8 +5,7 @@ msgstr ""
 "POT-Creation-Date: 2021-04-23 11:05+0200\n"
 "PO-Revision-Date: 2021-11-27 00:52+0000\n"
 "Last-Translator: J. Lavoie <j.lavoie@net-c.ca>\n"
-"Language-Team: French <https://hosted.weblate.org/projects/chainsafe-files/"
-"chainsafe-files-user-interface/fr/>\n"
+"Language-Team: French <https://hosted.weblate.org/projects/chainsafe-files/chainsafe-files-user-interface/fr/>\n"
 "Language: fr\n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=utf-8\n"
@@ -30,14 +29,8 @@ msgstr ""
 msgid "<0>{planStorageCapacity}</0> of storage"
 msgstr ""
 
-msgid ""
-"A backup secret phrase will be generated and used for your account.<0/>We do "
-"not store it and <1>it can only be displayed once</1>. Save it somewhere "
-"safe!"
-msgstr ""
-"Une phrase secrète de sauvegarde sera générée et utilisé pour ce compte.<0/"
-">Nous ne la sauvergardons pas <1>elle ne peut être affichée qu’une seule "
-"fois</1>. Gardez-la dans un endroit sûr !"
+msgid "A backup secret phrase will be generated and used for your account.<0/>We do not store it and <1>it can only be displayed once</1>. Save it somewhere safe!"
+msgstr "Une phrase secrète de sauvegarde sera générée et utilisé pour ce compte.<0/>Nous ne la sauvergardons pas <1>elle ne peut être affichée qu’une seule fois</1>. Gardez-la dans un endroit sûr !"
 
 msgid "A better sharing experience is coming soon."
 msgstr "Une meilleure expérience de partage sera bientôt disponible."
@@ -66,17 +59,11 @@ msgstr ""
 msgid "Add a username"
 msgstr "Ajouter un nom d’utilisateur"
 
-msgid ""
-"Add at least one more authentication method to protect your account. You’d "
-"only need any two to sign in to Files from any device."
-msgstr ""
-"Ajoutez au moins une méthode d’authentification pour protéger ce compte. "
-"Vous avez besoin de deux méthode pour accéder à Files depuis n’importe quel "
-"appareil."
+msgid "Add at least one more authentication method to protect your account. You’d only need any two to sign in to Files from any device."
+msgstr "Ajoutez au moins une méthode d’authentification pour protéger ce compte. Vous avez besoin de deux méthode pour accéder à Files depuis n’importe quel appareil."
 
 msgid "Add by sharing address, username or wallet address"
-msgstr ""
-"Ajouter par adresse de partage, nom d'utilisateur ou adresse de portefeuille"
+msgstr "Ajouter par adresse de partage, nom d'utilisateur ou adresse de portefeuille"
 
 msgid "Add card"
 msgstr ""
@@ -88,9 +75,7 @@ msgid "Add more files"
 msgstr "Ajouter d’autres fichiers"
 
 msgid "Add viewers and editors by username, sharing id or Ethereum address."
-msgstr ""
-"Ajoutez des personnes pouvant visualiser ou afficher par nom d'utilisateur, "
-"identifiant de partage ou adresse Ethereum."
+msgstr "Ajoutez des personnes pouvant visualiser ou afficher par nom d'utilisateur, identifiant de partage ou adresse Ethereum."
 
 msgid "Adding you to the shared folder..."
 msgstr "Je vous ajoute au dossier partagé…"
@@ -99,9 +84,7 @@ msgid "All invoices"
 msgstr ""
 
 msgid "Allow lookup by sharing key, wallet address or username"
-msgstr ""
-"Permettre la recherche par clé de partage, adresse du portefeuille ou nom "
-"d'utilisateur"
+msgstr "Permettre la recherche par clé de partage, adresse du portefeuille ou nom d'utilisateur"
 
 msgid "An error occurred:"
 msgstr "Une erreur s'est produite :"
@@ -118,12 +101,8 @@ msgstr ""
 msgid "Backup secret phrase"
 msgstr "Phrase secrète de sauvegarde"
 
-msgid ""
-"Backup secret phrase does not match user account, please double-check and "
-"try again."
-msgstr ""
-"La phrase secrète de sauvegarde est incorrecte, merci de vérifier et "
-"réessayer."
+msgid "Backup secret phrase does not match user account, please double-check and try again."
+msgstr "La phrase secrète de sauvegarde est incorrecte, merci de vérifier et réessayer."
 
 msgid "Billing history"
 msgstr ""
@@ -143,19 +122,11 @@ msgstr "Explorateur :"
 msgid "Bucket id"
 msgstr "Identifiant du seau"
 
-msgid ""
-"By connecting your wallet, you agree to our <0>Terms of Service</0> and "
-"<1>Privacy Policy</1>"
-msgstr ""
-"En connectant votre portefeuille, vous acceptez nos <0>conditions de "
-"service</0> et notre <1>politique de confidentialité</1>"
+msgid "By connecting your wallet, you agree to our <0>Terms of Service</0> and <1>Privacy Policy</1>"
+msgstr "En connectant votre portefeuille, vous acceptez nos <0>conditions de service</0> et notre <1>politique de confidentialité</1>"
 
-msgid ""
-"By forgetting this browser, you will not be able to use its associated "
-"recovery key to sign-in."
-msgstr ""
-"En oubliant ce navigateur, vous ne pourrez pas utiliser la clé de "
-"récupération qui lui est associée pour vous connecter."
+msgid "By forgetting this browser, you will not be able to use its associated recovery key to sign-in."
+msgstr "En oubliant ce navigateur, vous ne pourrez pas utiliser la clé de récupération qui lui est associée pour vous connecter."
 
 msgid "CID (Content Identifier)"
 msgstr "CID (Identifiant de contenu)"
@@ -185,8 +156,7 @@ msgid "Change plan"
 msgstr ""
 
 msgid "Check your inbox! We've sent another email."
-msgstr ""
-"Vérifiez votre boîte de réception ! Nous avons envoyé un autre courriel."
+msgstr "Vérifiez votre boîte de réception ! Nous avons envoyé un autre courriel."
 
 msgid "Click or drag to upload files"
 msgstr "Cliquer ou faire glisser un ficher pour le téléverser"
@@ -419,12 +389,8 @@ msgstr "Le nom du dossier est déjà utilisé"
 msgid "Folders"
 msgstr "Dossiers"
 
-msgid ""
-"For security reasons, each time you sign in we’ll ask you for one of the "
-"following to confirm your identity."
-msgstr ""
-"Pour des raisons de sécurité, chaque fois que vous vous connectez, nous vous "
-"demanderons l’une des informations suivantes pour confirmer votre identité."
+msgid "For security reasons, each time you sign in we’ll ask you for one of the following to confirm your identity."
+msgstr "Pour des raisons de sécurité, chaque fois que vous vous connectez, nous vous demanderons l’une des informations suivantes pour confirmer votre identité."
 
 msgid "Forget this browser"
 msgstr "Oublier ce navigateur"
@@ -477,13 +443,8 @@ msgstr ""
 msgid "Hello again!"
 msgstr "Ravis de vous revoir !"
 
-msgid ""
-"Hey! You only have two sign-in methods. If you lose that and have only one "
-"left, you will be locked out of your account forever."
-msgstr ""
-"Hé ! Vous n’avez que deux méthodes de connexion. Si vous en perdez une et "
-"qu’il ne vous en reste qu’une, vous ne pourrez plus jamais vous connecter à "
-"votre compte."
+msgid "Hey! You only have two sign-in methods. If you lose that and have only one left, you will be locked out of your account forever."
+msgstr "Hé ! Vous n’avez que deux méthodes de connexion. Si vous en perdez une et qu’il ne vous en reste qu’une, vous ne pourrez plus jamais vous connecter à votre compte."
 
 msgid "Hold on, we are logging you in…"
 msgstr "Un instant, nous te connectons…"
@@ -491,17 +452,8 @@ msgstr "Un instant, nous te connectons…"
 msgid "Home"
 msgstr "Accueil"
 
-msgid ""
-"If you think this file does not comply with our <0>Terms of Service</0>, "
-"please send the following information to report@files.chainsafe.io. Beware "
-"that by sending the file's decryption key, an admin can then decrypt any "
-"file in this shared folder."
-msgstr ""
-"Si vous pensez que ce fichier n'est pas conforme à nos <0>Conditions de "
-"service</0>, veuillez envoyer les informations suivantes à report@files."
-"chainsafe.io. Attention, en envoyant la clé de déchiffrement du fichier, un "
-"administrateur peut ensuite déchiffrer n'importe quel fichier de ce dossier "
-"partagé."
+msgid "If you think this file does not comply with our <0>Terms of Service</0>, please send the following information to report@files.chainsafe.io. Beware that by sending the file's decryption key, an admin can then decrypt any file in this shared folder."
+msgstr "Si vous pensez que ce fichier n'est pas conforme à nos <0>Conditions de service</0>, veuillez envoyer les informations suivantes à report@files.chainsafe.io. Attention, en envoyant la clé de déchiffrement du fichier, un administrateur peut ensuite déchiffrer n'importe quel fichier de ce dossier partagé."
 
 msgid "Info"
 msgstr "Infos"
@@ -542,12 +494,8 @@ msgstr "Chargement de l’aperçu"
 msgid "Loading your shared folders…"
 msgstr "Chargement de vos dossiers partagés…"
 
-msgid ""
-"Looks like you’re signing in from a new browser. Please choose one of the "
-"following to continue:"
-msgstr ""
-"Il semble que vous vous connectiez à partir d’un nouveau navigateur. "
-"Veuillez choisir une des options suivantes pour continuer :"
+msgid "Looks like you’re signing in from a new browser. Please choose one of the following to continue:"
+msgstr "Il semble que vous vous connectiez à partir d’un nouveau navigateur. Veuillez choisir une des options suivantes pour continuer :"
 
 msgid "Manage Access"
 msgstr "Gérer l’accès"
@@ -645,11 +593,8 @@ msgstr "Ou créer un nouveau dossier partagé"
 msgid "Or Use an existing shared folder"
 msgstr "Ou utiliser un dossier partagé existant"
 
-msgid ""
-"Or confirm by signing into your Files on any browser you’ve used before."
-msgstr ""
-"Ou accepte la requête de connexion depuis n’importe quel appareil ou "
-"navigateur utilisé auparavant."
+msgid "Or confirm by signing into your Files on any browser you’ve used before."
+msgstr "Ou accepte la requête de connexion depuis n’importe quel appareil ou navigateur utilisé auparavant."
 
 msgid "Or using one of the following:"
 msgstr "Ou en utilisant l’un des moyens suivants :"
@@ -663,10 +608,8 @@ msgstr "Mot de passe"
 msgid "Password confirmation is required"
 msgstr "La confirmation du mot de passe est requise"
 
-msgid ""
-"Password does not match user account, please double-check and try again."
-msgstr ""
-"Le mot de passe ne correspond pas au compte, merci de vérifier et réessayer."
+msgid "Password does not match user account, please double-check and try again."
+msgstr "Le mot de passe ne correspond pas au compte, merci de vérifier et réessayer."
 
 msgid "Password needs to be more complex"
 msgstr "Le mot de passe doit être plus complexe"
@@ -891,9 +834,7 @@ msgid "Social Sign-in Wallet"
 msgstr "Connecté avec un réseau social ou wallet"
 
 msgid "Something went wrong with email login! Please try again."
-msgstr ""
-"Un problème est survenu lors de la connexion avec courriel ! Veuillez "
-"réessayer."
+msgstr "Un problème est survenu lors de la connexion avec courriel ! Veuillez réessayer."
 
 msgid "Something went wrong!"
 msgstr "Quelque chose a mal tourné !"
@@ -925,12 +866,8 @@ msgstr ""
 msgid "Switch to Free plan"
 msgstr ""
 
-msgid ""
-"System maintenance is scheduled to start at {0}. The system will be "
-"unavailable."
-msgstr ""
-"Une maintenance du système est prévue pour démarrer à {0}. Le système sera "
-"indisponible."
+msgid "System maintenance is scheduled to start at {0}. The system will be unavailable."
+msgstr "Une maintenance du système est prévue pour démarrer à {0}. Le système sera indisponible."
 
 msgid "Teams"
 msgstr "Équipes"
@@ -956,6 +893,9 @@ msgstr "Le nom d'utilisateur est trop long"
 msgid "Theme"
 msgstr "Thème"
 
+msgid "There are no notifications!"
+msgstr ""
+
 msgid "There was an error authenticating"
 msgstr "Une erreur s’est produite lors de l’authentification"
 
@@ -969,8 +909,7 @@ msgid "There was an error deleting your data"
 msgstr "Une erreur s'est produite lors de la suppression de vos données"
 
 msgid "There was an error getting search results"
-msgstr ""
-"Une erreur s’est produite lors de l’obtention des résultats de recherche"
+msgstr "Une erreur s’est produite lors de l’obtention des résultats de recherche"
 
 msgid "There was an error getting the preview."
 msgstr "Une erreur s’est produite lors de la génération de l’aperçu."
@@ -990,11 +929,8 @@ msgstr ""
 msgid "This is the free product."
 msgstr ""
 
-msgid ""
-"This link is marlformed. Please verify that you copy/pasted it correctly."
-msgstr ""
-"Ce lien est marlformé. Veuillez vérifier que vous l'avez copié/collé "
-"correctement."
+msgid "This link is marlformed. Please verify that you copy/pasted it correctly."
+msgstr "Ce lien est marlformé. Veuillez vérifier que vous l'avez copié/collé correctement."
 
 msgid "This link is not valid any more."
 msgstr "Ce lien n'est plus valide."
@@ -1005,17 +941,8 @@ msgstr "Ce nom d’utilisateur est déjà pris"
 msgid "This website uses cookies"
 msgstr "Ce site web utilise des cookies"
 
-msgid ""
-"This website uses cookies that help the website function and track "
-"interactions for analytics purposes. You have the right to decline our use "
-"of cookies. For us to provide a customizable user experience to you, please "
-"click on the Accept button below.<0>Learn more</0>"
-msgstr ""
-"Ce site web utilise des cookies qui l'aident à fonctionner et à suivre les "
-"interactions à des fins d'analyse. Vous avez le droit de refuser notre "
-"utilisation des cookies. Pour que nous puissions vous offrir une expérience "
-"utilisateur personnalisable, veuillez cliquer sur le bouton Accepter ci-"
-"dessous.<0>En savoir plus</0>"
+msgid "This website uses cookies that help the website function and track interactions for analytics purposes. You have the right to decline our use of cookies. For us to provide a customizable user experience to you, please click on the Accept button below.<0>Learn more</0>"
+msgstr "Ce site web utilise des cookies qui l'aident à fonctionner et à suivre les interactions à des fins d'analyse. Vous avez le droit de refuser notre utilisation des cookies. Pour que nous puissions vous offrir une expérience utilisateur personnalisable, veuillez cliquer sur le bouton Accepter ci-dessous.<0>En savoir plus</0>"
 
 msgid "Total"
 msgstr ""
@@ -1072,9 +999,7 @@ msgid "Username set successfully"
 msgstr "Nom d’utilisateur défini avec succès"
 
 msgid "Usernames are public and can't be changed after creation."
-msgstr ""
-"Les noms d’utilisateur sont publics et ne peuvent pas être modifiés après "
-"leur création."
+msgstr "Les noms d’utilisateur sont publics et ne peuvent pas être modifiés après leur création."
 
 msgid "Using an email:"
 msgstr "En utilisant un courriel :"
@@ -1100,35 +1025,20 @@ msgstr "Addresse du wallet"
 msgid "Want to help shape this product?"
 msgstr "Vous voulez participer à l'élaboration de ce produit ?"
 
-msgid ""
-"We are performing routine maintenance of the system. Service status updates "
-"will be posted on the <0>Files Support Channel</0> on Discord"
-msgstr ""
-"Nous effectuons une maintenance de routine du système. Les mises à jour de "
-"l'état du service seront postées sur le canal <0>Files Support<0> sur Discord"
+msgid "We are performing routine maintenance of the system. Service status updates will be posted on the <0>Files Support Channel</0> on Discord"
+msgstr "Nous effectuons une maintenance de routine du système. Les mises à jour de l'état du service seront postées sur le canal <0>Files Support<0> sur Discord"
 
 msgid "We can't encrypt files larger than 2GB. Some items will not be uploaded"
-msgstr ""
-"Nous ne pouvons pas chiffrer les fichiers de plus de 2 Go. Certains éléments "
-"ne pourront pas être téléversés"
+msgstr "Nous ne pouvons pas chiffrer les fichiers de plus de 2 Go. Certains éléments ne pourront pas être téléversés"
 
 msgid "Web3: {0}"
 msgstr "Web3 : {0}"
 
-msgid ""
-"We’ve got a new authentication system in place. All you need to do is enter "
-"your password again to migrate your credentials over to the new system."
-msgstr ""
-"Nous avons mis en place un nouveau système d’authentification. Tout ce que "
-"vous avez à faire est de saisir à nouveau votre mot de passe pour migrer vos "
-"informations d’identification vers le nouveau système."
+msgid "We’ve got a new authentication system in place. All you need to do is enter your password again to migrate your credentials over to the new system."
+msgstr "Nous avons mis en place un nouveau système d’authentification. Tout ce que vous avez à faire est de saisir à nouveau votre mot de passe pour migrer vos informations d’identification vers le nouveau système."
 
-msgid ""
-"We’ve sent an email to {email}. It contains a verification code that’ll sign "
-"you in super quickly!"
-msgstr ""
-"Nous avons envoyé un courriel à {email}. Il contient un code de vérification "
-"pour vous connecter !"
+msgid "We’ve sent an email to {email}. It contains a verification code that’ll sign you in super quickly!"
+msgstr "Nous avons envoyé un courriel à {email}. Il contient un code de vérification pour vous connecter !"
 
 msgid "What a fine day it is."
 msgstr "Quelle belle journée."
@@ -1146,8 +1056,7 @@ msgid "You can change this later."
 msgstr "Vous pouvez en changer plus tard."
 
 msgid "You can now create shared folders to share a file."
-msgstr ""
-"Vous pouvez maintenant créer des dossiers partagés pour partager un fichier."
+msgstr "Vous pouvez maintenant créer des dossiers partagés pour partager un fichier."
 
 msgid "You can't move folders to this path"
 msgstr "Vous ne pouvez pas déplacer les dossiers vers ce chemin"
@@ -1168,29 +1077,21 @@ msgid "You were added to the shared folder ({0}): {1}"
 msgstr "Vous avez été ajouté(e) au dossier partagé ({0}) : {1}"
 
 msgid "You will need to sign a message in your wallet to complete sign in."
-msgstr ""
-"Vous devrez signer un message avec votre wallet pour terminer la procédure "
-"connexion."
+msgstr "Vous devrez signer un message avec votre wallet pour terminer la procédure connexion."
 
 msgid "You would lose the following features:"
 msgstr ""
 
-msgid ""
-"You've got a payment due. Until you've settled up, we've placed your account "
-"in restricted mode"
+msgid "You've got a payment due. Until you've settled up, we've placed your account in restricted mode"
 msgstr ""
 
-msgid ""
-"Your content exceeds the {planStorageCapacity} storage capacity for this "
-"plan."
+msgid "Your content exceeds the {planStorageCapacity} storage capacity for this plan."
 msgstr ""
 
 msgid "Your plan"
 msgstr ""
 
-msgid ""
-"Your recovery key can be used to restore your account in place of your "
-"backup secret phrase."
+msgid "Your recovery key can be used to restore your account in place of your backup secret phrase."
 msgstr ""
 
 msgid "can-edit"
@@ -1212,20 +1113,12 @@ msgid "view-only"
 msgstr "affichage seul"
 
 msgid "{0, plural, one {Downloading {1} file} other {Downloading {2} files}}"
-msgstr ""
-"{0, plural, one {Téléchargement de {1} fichier} other {Téléchargement de {2} "
-"fichiers}}"
+msgstr "{0, plural, one {Téléchargement de {1} fichier} other {Téléchargement de {2} fichiers}}"
 
-msgid ""
-"{0, plural, one {Encrypting and uploading {1} file} other {Encrypting and "
-"uploading {2} files}}"
-msgstr ""
-"{0, plural, one {Chiffrement et téléversement de {1} fichier} other "
-"{Chiffrement et téléversements {2} fichiers}}"
+msgid "{0, plural, one {Encrypting and uploading {1} file} other {Encrypting and uploading {2} files}}"
+msgstr "{0, plural, one {Chiffrement et téléversement de {1} fichier} other {Chiffrement et téléversements {2} fichiers}}"
 
-msgid ""
-"{0, plural, one {You are about to delete {1} item.} other {You are about to "
-"delete {2} items.}}"
+msgid "{0, plural, one {You are about to delete {1} item.} other {You are about to delete {2} items.}}"
 msgstr ""
 
 msgid "{0} cancelled"
@@ -1260,30 +1153,3 @@ msgstr ""
 
 msgid "{successCount} files transferred successfully, {0} failed"
 msgstr "{successCount} fichiers transférés avec succès, {0} échec(s)"
-
-msgid "Amount"
-msgstr ""
-
-msgid "Date"
-msgstr ""
-
-msgid "Method"
-msgstr ""
-
-msgid "Receipt"
-msgstr ""
-
-msgid "View invoices"
-msgstr ""
-
-msgid "Confirm plan"
-msgstr ""
-
-msgid "Not sure what to pick? Learn more about our plans"
-msgstr ""
-
-msgid "Plan details"
-msgstr ""
-
-msgid "Update details"
-msgstr ""
diff --git a/packages/files-ui/src/locales/no/messages.po b/packages/files-ui/src/locales/no/messages.po
index e65001c03f..816875fa34 100644
--- a/packages/files-ui/src/locales/no/messages.po
+++ b/packages/files-ui/src/locales/no/messages.po
@@ -889,6 +889,9 @@ msgstr ""
 msgid "Theme"
 msgstr "Drakt"
 
+msgid "There are no notifications!"
+msgstr ""
+
 msgid "There was an error authenticating"
 msgstr ""
 

From db9b2503c6a2f63824780ca7d078bea7241625c7 Mon Sep 17 00:00:00 2001
From: Thibaut Sardan <github@thib.top>
Date: Mon, 3 Jan 2022 12:13:50 +0100
Subject: [PATCH 3/8] high res and bg color

---
 .../src/Icons/icons/MoonStar.icon.tsx                  |  7 +++++++
 packages/common-components/src/Icons/index.ts          |  1 +
 .../common-components/src/Icons/svgs/moon-star.svg     |  7 +++++++
 .../Elements/Notifications/NotificationList.tsx        | 10 +++++-----
 4 files changed, 20 insertions(+), 5 deletions(-)
 create mode 100644 packages/common-components/src/Icons/icons/MoonStar.icon.tsx
 create mode 100644 packages/common-components/src/Icons/svgs/moon-star.svg

diff --git a/packages/common-components/src/Icons/icons/MoonStar.icon.tsx b/packages/common-components/src/Icons/icons/MoonStar.icon.tsx
new file mode 100644
index 0000000000..57aa7ea493
--- /dev/null
+++ b/packages/common-components/src/Icons/icons/MoonStar.icon.tsx
@@ -0,0 +1,7 @@
+import * as React from "react"
+import createSvgIcon from "../createSvgIcon"
+import { ReactComponent as MoonStarSvg } from "../svgs/moon-star.svg"
+
+export { MoonStarSvg }
+
+export default createSvgIcon(<MoonStarSvg />)
diff --git a/packages/common-components/src/Icons/index.ts b/packages/common-components/src/Icons/index.ts
index ee5a1f9dc8..8945407990 100644
--- a/packages/common-components/src/Icons/index.ts
+++ b/packages/common-components/src/Icons/index.ts
@@ -51,6 +51,7 @@ export { default as JcbCardIcon, JcbCardSvg } from "./icons/JcbCard.icon"
 export { default as MailIcon, MailSvg } from "./icons/Mail.icon"
 export { default as MastercardCardIcon, MastercardCardSvg } from "./icons/MastercardCard.icon"
 export { default as MoonIcon, MoonSvg } from "./icons/Moon.icon"
+export { default as MoonStarIcon, MoonStarSvg } from "./icons/MoonStar.icon"
 export { default as MoreIcon, MoreSvg } from "./icons/More.icon"
 export { default as LockIcon, LockSvg } from "./icons/Lock.icon"
 export { default as KeyIcon, KeySvg } from "./icons/Key.icon"
diff --git a/packages/common-components/src/Icons/svgs/moon-star.svg b/packages/common-components/src/Icons/svgs/moon-star.svg
new file mode 100644
index 0000000000..efb95a1f03
--- /dev/null
+++ b/packages/common-components/src/Icons/svgs/moon-star.svg
@@ -0,0 +1,7 @@
+<svg width="37" height="34" viewBox="0 0 37 34" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M31.2354 15.3675V7.53076" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M35.1541 11.4487H27.3174" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M23.3984 1V6.22449" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M26.0106 3.6123H20.7861" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M31.3436 22.0042C28.7796 22.7167 26.0725 22.7355 23.4989 22.0586C20.9254 21.3818 18.5777 20.0336 16.696 18.1519C14.8144 16.2702 13.4662 13.9226 12.7893 11.349C12.1124 8.77548 12.1312 6.06833 12.8436 3.50439L12.8441 3.50452C10.3152 4.20803 8.0148 5.56186 6.17203 7.43117C4.32926 9.30047 3.00845 11.62 2.34117 14.1587C1.67389 16.6973 1.68344 19.3665 2.36886 21.9003C3.05428 24.4342 4.39165 26.7442 6.24774 28.6003C8.10383 30.4563 10.4139 31.7937 12.9477 32.4791C15.4815 33.1645 18.1507 33.174 20.6894 32.5067C23.228 31.8394 25.5476 30.5186 27.4168 28.6758C29.2861 26.833 30.6399 24.5326 31.3434 22.0037L31.3436 22.0042Z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file
diff --git a/packages/files-ui/src/Components/Elements/Notifications/NotificationList.tsx b/packages/files-ui/src/Components/Elements/Notifications/NotificationList.tsx
index a2b8d2d80b..373edb5834 100644
--- a/packages/files-ui/src/Components/Elements/Notifications/NotificationList.tsx
+++ b/packages/files-ui/src/Components/Elements/Notifications/NotificationList.tsx
@@ -5,7 +5,7 @@ import dayjs from "dayjs"
 import relativeTime from "dayjs/plugin/relativeTime"
 import { Notification } from "./NotificationsDropdown"
 import { Trans } from "@lingui/macro"
-import { BellIcon } from "@chainsafe/common-components"
+import { MoonStarIcon } from "@chainsafe/common-components"
 import clsx from "clsx"
 dayjs.extend(relativeTime)
 
@@ -16,7 +16,7 @@ const useStyles = makeStyles(({ palette, constants }: ITheme) =>
       display: "flex",
       alignItems: "center",
       cursor: "pointer",
-      backgroundColor: "initial",
+      backgroundColor: palette.additional["gray"][2],
       "&.empty": {
         display: "flex",
         flexDirection: "column",
@@ -26,8 +26,8 @@ const useStyles = makeStyles(({ palette, constants }: ITheme) =>
       "&:hover": {
         backgroundColor: palette.additional["gray"][3]
       },
-      "& svg": {
-        fill: palette.additional["gray"][9]
+      "& svg>path": {
+        stroke: palette.additional["gray"][7]
       },
       borderBottom: `1px solid ${palette.additional["gray"][5]}`,
       "&:last-child": {
@@ -68,7 +68,7 @@ const NotificationList = ({ notifications }: INotificationListProps) => {
       <div>
         {notifications.length === 0 && (
           <div className={clsx(classes.notificationBody, "empty")}>
-            <BellIcon className={classes.icon} />
+            <MoonStarIcon className={classes.icon} />
             <Typography variant="h4" >
               <Trans>There are no notifications!</Trans>
             </Typography>

From 8c0a3d8b3ac15b68d139dcefc230461d38112247 Mon Sep 17 00:00:00 2001
From: Tanmoy Basak Anjan <tanmoy3399@gmail.com>
Date: Mon, 3 Jan 2022 22:38:51 +0600
Subject: [PATCH 4/8] notification context ready

---
 packages/files-ui/src/App.tsx                 | 29 +++++-----
 .../Notifications/NotificationsDropdown.tsx   |  1 +
 .../src/Components/Layouts/AppHeader.tsx      |  4 +-
 .../src/Contexts/NotificationsContext.tsx     | 53 +++++++++++++++++++
 4 files changed, 73 insertions(+), 14 deletions(-)
 create mode 100644 packages/files-ui/src/Contexts/NotificationsContext.tsx

diff --git a/packages/files-ui/src/App.tsx b/packages/files-ui/src/App.tsx
index 3e31086125..6b18cba351 100644
--- a/packages/files-ui/src/App.tsx
+++ b/packages/files-ui/src/App.tsx
@@ -16,6 +16,7 @@ import { FilesApiProvider }  from "./Contexts/FilesApiContext"
 import { UserProvider } from "./Contexts/UserContext"
 import { BillingProvider } from "./Contexts/BillingContext"
 import { PosthogProvider } from "./Contexts/PosthogContext"
+import { NotificationsProvider } from "./Contexts/NotificationsContext"
 
 if (
   process.env.NODE_ENV === "production" &&
@@ -121,19 +122,21 @@ const App = () => {
                   enableLogging={directAuthNetwork !== "mainnet"}
                   network={directAuthNetwork}
                 >
-                  <UserProvider>
-                    <FilesProvider>
-                      <BillingProvider>
-                        <Router>
-                          <PosthogProvider>
-                            <AppWrapper>
-                              <FilesRoutes />
-                            </AppWrapper>
-                          </PosthogProvider>
-                        </Router>
-                      </BillingProvider>
-                    </FilesProvider>
-                  </UserProvider>
+                  <NotificationsProvider>
+                    <UserProvider>
+                      <FilesProvider>
+                        <BillingProvider>
+                          <Router>
+                            <PosthogProvider>
+                              <AppWrapper>
+                                <FilesRoutes />
+                              </AppWrapper>
+                            </PosthogProvider>
+                          </Router>
+                        </BillingProvider>
+                      </FilesProvider>
+                    </UserProvider>
+                  </NotificationsProvider>
                 </ThresholdKeyProvider>
               </FilesApiProvider>
             </Web3Provider>
diff --git a/packages/files-ui/src/Components/Elements/Notifications/NotificationsDropdown.tsx b/packages/files-ui/src/Components/Elements/Notifications/NotificationsDropdown.tsx
index 9ba2ca60da..9a581b2d00 100644
--- a/packages/files-ui/src/Components/Elements/Notifications/NotificationsDropdown.tsx
+++ b/packages/files-ui/src/Components/Elements/Notifications/NotificationsDropdown.tsx
@@ -31,6 +31,7 @@ const useStyles = makeStyles(({ palette, constants }: ITheme) =>
 )
 
 export interface Notification {
+  id: string
   title: string
   createdAt: number
   onClick?: () => void
diff --git a/packages/files-ui/src/Components/Layouts/AppHeader.tsx b/packages/files-ui/src/Components/Layouts/AppHeader.tsx
index bfdc9f5b73..c398497fec 100644
--- a/packages/files-ui/src/Components/Layouts/AppHeader.tsx
+++ b/packages/files-ui/src/Components/Layouts/AppHeader.tsx
@@ -17,6 +17,7 @@ import { CSFTheme } from "../../Themes/types"
 import { useFilesApi } from "../../Contexts/FilesApiContext"
 import TeamModal from "../Elements/TeamModal"
 import NotificationsDropdown from "../Elements/Notifications/NotificationsDropdown"
+import { useNotifications } from "../../Contexts/NotificationsContext"
 
 const useStyles = makeStyles(
   ({ palette, animation, breakpoints, constants, zIndex }: CSFTheme) => {
@@ -145,6 +146,7 @@ const AppHeader = ({ navOpen, setNavOpen }: IAppHeader) => {
   const classes = useStyles()
   const { isLoggedIn, secured } = useFilesApi()
   const { publicKey, isNewDevice, shouldInitializeAccount } = useThresholdKey()
+  const { notifications } = useNotifications()
   const [searchActive, setSearchActive] = useState(false)
   const [isTeamModalOpen, setIsTeamModalOpen] = useState(false)
 
@@ -204,7 +206,7 @@ const AppHeader = ({ navOpen, setNavOpen }: IAppHeader) => {
               </section>
               <section>
                 <NotificationsDropdown
-                  notifications={[]}
+                  notifications={notifications}
                 />
               </section>
             </section>
diff --git a/packages/files-ui/src/Contexts/NotificationsContext.tsx b/packages/files-ui/src/Contexts/NotificationsContext.tsx
new file mode 100644
index 0000000000..21aea5e9be
--- /dev/null
+++ b/packages/files-ui/src/Contexts/NotificationsContext.tsx
@@ -0,0 +1,53 @@
+import  React, { ReactNode, useState } from "react"
+import { Notification } from "../Components/Elements/Notifications/NotificationsDropdown"
+
+type NotificationsContextProps = {
+  children: ReactNode | ReactNode[]
+}
+
+interface INotificationsContext {
+  notifications: Notification[]
+  addNotification: (notification: Omit<Notification, "id">) => void
+  removeNotification: (id: string) => void
+}
+
+const NotificationsContext = React.createContext<INotificationsContext | undefined>(
+  undefined
+)
+
+const NotificationsProvider = ({ children }: NotificationsContextProps) => {
+  const [notifications, setNotifications] = useState<Notification[]>([])
+
+  const addNotification = (notification: Omit<Notification, "id">) => {
+    setNotifications([...notifications, {
+      id: (notifications.length + 1).toString(),
+      ...notification
+    }])
+  }
+
+  const removeNotification = (id: string) => {
+    setNotifications(notifications.filter((notification) => notification.id !== id))
+  }
+
+  return (
+    <NotificationsContext.Provider
+      value={{
+        notifications,
+        addNotification,
+        removeNotification
+      }}
+    >
+      {children}
+    </NotificationsContext.Provider>
+  )
+}
+
+const useNotifications = () => {
+  const context = React.useContext(NotificationsContext)
+  if (context === undefined) {
+    throw new Error("useNotifications must be used within a BillingProvider")
+  }
+  return context
+}
+
+export { NotificationsProvider, useNotifications }

From 2888c4ba077d4ee9fcc5e9b205d0ad0e0889ab5d Mon Sep 17 00:00:00 2001
From: Tanmoy Basak Anjan <tanmoy3399@gmail.com>
Date: Tue, 4 Jan 2022 21:18:14 +0600
Subject: [PATCH 5/8] Update
 packages/files-ui/src/Contexts/NotificationsContext.tsx

Co-authored-by: Thibaut Sardan <33178835+Tbaut@users.noreply.github.com>
---
 packages/files-ui/src/Contexts/NotificationsContext.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/files-ui/src/Contexts/NotificationsContext.tsx b/packages/files-ui/src/Contexts/NotificationsContext.tsx
index 21aea5e9be..5d2e8649e1 100644
--- a/packages/files-ui/src/Contexts/NotificationsContext.tsx
+++ b/packages/files-ui/src/Contexts/NotificationsContext.tsx
@@ -45,7 +45,7 @@ const NotificationsProvider = ({ children }: NotificationsContextProps) => {
 const useNotifications = () => {
   const context = React.useContext(NotificationsContext)
   if (context === undefined) {
-    throw new Error("useNotifications must be used within a BillingProvider")
+    throw new Error("useNotifications must be used within a NotificationsProvider")
   }
   return context
 }

From 3b72af94fd75e3d93b0ca18363cbe33981b2bdff Mon Sep 17 00:00:00 2001
From: Tanmoy Basak Anjan <tanmoy3399@gmail.com>
Date: Tue, 4 Jan 2022 21:29:33 +0600
Subject: [PATCH 6/8] added callback

---
 .../files-ui/src/Contexts/NotificationsContext.tsx     | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/files-ui/src/Contexts/NotificationsContext.tsx b/packages/files-ui/src/Contexts/NotificationsContext.tsx
index 21aea5e9be..a054638dad 100644
--- a/packages/files-ui/src/Contexts/NotificationsContext.tsx
+++ b/packages/files-ui/src/Contexts/NotificationsContext.tsx
@@ -1,4 +1,4 @@
-import  React, { ReactNode, useState } from "react"
+import  React, { ReactNode, useCallback, useState } from "react"
 import { Notification } from "../Components/Elements/Notifications/NotificationsDropdown"
 
 type NotificationsContextProps = {
@@ -18,16 +18,16 @@ const NotificationsContext = React.createContext<INotificationsContext | undefin
 const NotificationsProvider = ({ children }: NotificationsContextProps) => {
   const [notifications, setNotifications] = useState<Notification[]>([])
 
-  const addNotification = (notification: Omit<Notification, "id">) => {
+  const addNotification = useCallback((notification: Omit<Notification, "id">) => {
     setNotifications([...notifications, {
       id: (notifications.length + 1).toString(),
       ...notification
     }])
-  }
+  }, [notifications])
 
-  const removeNotification = (id: string) => {
+  const removeNotification = useCallback((id: string) => {
     setNotifications(notifications.filter((notification) => notification.id !== id))
-  }
+  }, [notifications])
 
   return (
     <NotificationsContext.Provider

From 3dbace320c3c8899086ea5571cd5d08b9109a3c6 Mon Sep 17 00:00:00 2001
From: Tanmoy Basak Anjan <tanmoy3399@gmail.com>
Date: Wed, 5 Jan 2022 21:22:27 +0600
Subject: [PATCH 7/8] add notification update

---
 packages/files-ui/src/Contexts/NotificationsContext.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/files-ui/src/Contexts/NotificationsContext.tsx b/packages/files-ui/src/Contexts/NotificationsContext.tsx
index 199ad673d8..a5daa2354b 100644
--- a/packages/files-ui/src/Contexts/NotificationsContext.tsx
+++ b/packages/files-ui/src/Contexts/NotificationsContext.tsx
@@ -1,5 +1,6 @@
 import  React, { ReactNode, useCallback, useState } from "react"
 import { Notification } from "../Components/Elements/Notifications/NotificationsDropdown"
+import { v4 as uuidv4 } from "uuid"
 
 type NotificationsContextProps = {
   children: ReactNode | ReactNode[]
@@ -7,7 +8,7 @@ type NotificationsContextProps = {
 
 interface INotificationsContext {
   notifications: Notification[]
-  addNotification: (notification: Omit<Notification, "id">) => void
+  addNotification: (notification: Omit<Notification, "id">) => string
   removeNotification: (id: string) => void
 }
 
@@ -19,10 +20,12 @@ const NotificationsProvider = ({ children }: NotificationsContextProps) => {
   const [notifications, setNotifications] = useState<Notification[]>([])
 
   const addNotification = useCallback((notification: Omit<Notification, "id">) => {
+    const id = uuidv4()
     setNotifications([...notifications, {
-      id: (notifications.length + 1).toString(),
+      id,
       ...notification
     }])
+    return id
   }, [notifications])
 
   const removeNotification = useCallback((id: string) => {

From 2079d7f57d67f787a188027a23c4b06bc4ed693c Mon Sep 17 00:00:00 2001
From: Tanmoy Basak Anjan <tanmoy3399@gmail.com>
Date: Thu, 6 Jan 2022 21:04:49 +0600
Subject: [PATCH 8/8] notifications move to elements

---
 .../Elements/Notifications/NotificationsDropdown.tsx      | 8 +++-----
 packages/files-ui/src/Components/Layouts/AppHeader.tsx    | 6 +-----
 2 files changed, 4 insertions(+), 10 deletions(-)

diff --git a/packages/files-ui/src/Components/Elements/Notifications/NotificationsDropdown.tsx b/packages/files-ui/src/Components/Elements/Notifications/NotificationsDropdown.tsx
index 9a581b2d00..42da9741eb 100644
--- a/packages/files-ui/src/Components/Elements/Notifications/NotificationsDropdown.tsx
+++ b/packages/files-ui/src/Components/Elements/Notifications/NotificationsDropdown.tsx
@@ -2,6 +2,7 @@ import React from "react"
 import { Button, BellIcon, MenuDropdown } from "@chainsafe/common-components"
 import { createStyles, ITheme, makeStyles } from "@chainsafe/common-theme"
 import NotificationList from "./NotificationList"
+import { useNotifications } from "../../../Contexts/NotificationsContext"
 
 const useStyles = makeStyles(({ palette, constants }: ITheme) =>
   createStyles({
@@ -37,12 +38,9 @@ export interface Notification {
   onClick?: () => void
 }
 
-interface INotificationsDropdownProps {
-  notifications: Notification[]
-}
-
-const NotificationsDropdown = ({ notifications }: INotificationsDropdownProps) => {
+const NotificationsDropdown = () => {
   const classes = useStyles()
+  const { notifications } = useNotifications()
 
   return (
     <MenuDropdown
diff --git a/packages/files-ui/src/Components/Layouts/AppHeader.tsx b/packages/files-ui/src/Components/Layouts/AppHeader.tsx
index c398497fec..a5d374bcea 100644
--- a/packages/files-ui/src/Components/Layouts/AppHeader.tsx
+++ b/packages/files-ui/src/Components/Layouts/AppHeader.tsx
@@ -17,7 +17,6 @@ import { CSFTheme } from "../../Themes/types"
 import { useFilesApi } from "../../Contexts/FilesApiContext"
 import TeamModal from "../Elements/TeamModal"
 import NotificationsDropdown from "../Elements/Notifications/NotificationsDropdown"
-import { useNotifications } from "../../Contexts/NotificationsContext"
 
 const useStyles = makeStyles(
   ({ palette, animation, breakpoints, constants, zIndex }: CSFTheme) => {
@@ -146,7 +145,6 @@ const AppHeader = ({ navOpen, setNavOpen }: IAppHeader) => {
   const classes = useStyles()
   const { isLoggedIn, secured } = useFilesApi()
   const { publicKey, isNewDevice, shouldInitializeAccount } = useThresholdKey()
-  const { notifications } = useNotifications()
   const [searchActive, setSearchActive] = useState(false)
   const [isTeamModalOpen, setIsTeamModalOpen] = useState(false)
 
@@ -205,9 +203,7 @@ const AppHeader = ({ navOpen, setNavOpen }: IAppHeader) => {
                 </Button>
               </section>
               <section>
-                <NotificationsDropdown
-                  notifications={notifications}
-                />
+                <NotificationsDropdown />
               </section>
             </section>
           ) : (