From aa2bb9553ae3e1861832bc5f5772f3a6da76c10c Mon Sep 17 00:00:00 2001 From: Antoine Jaussoin Date: Sat, 25 Mar 2023 19:03:14 +0000 Subject: [PATCH] Improve Home Screen (#510) --- frontend/package.json | 1 + .../components/SplitButton/SplitButton.tsx | 103 +++++++++++++ frontend/src/translations/locales/ar-SA.json | 7 +- frontend/src/translations/locales/de-DE.json | 7 +- frontend/src/translations/locales/en-GB.json | 7 +- frontend/src/translations/locales/es-ES.json | 7 +- frontend/src/translations/locales/fr-FR.json | 7 +- frontend/src/translations/locales/hu-HU.json | 7 +- frontend/src/translations/locales/it-IT.json | 7 +- frontend/src/translations/locales/ja-JP.json | 7 +- frontend/src/translations/locales/nl-NL.json | 7 +- frontend/src/translations/locales/pl-PL.json | 7 +- frontend/src/translations/locales/pt-BR.json | 7 +- frontend/src/translations/locales/pt-PT.json | 7 +- frontend/src/translations/locales/uk-UA.json | 7 +- frontend/src/translations/locales/zh-CN.json | 7 +- frontend/src/translations/locales/zh-TW.json | 7 +- frontend/src/views/Home.tsx | 139 +++++++++++------- frontend/yarn.lock | 5 + 19 files changed, 254 insertions(+), 99 deletions(-) create mode 100644 frontend/src/components/SplitButton/SplitButton.tsx diff --git a/frontend/package.json b/frontend/package.json index da5579f3..b7bb9cd8 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -41,6 +41,7 @@ "crypto-js": "4.1.1", "date-fns": "2.29.3", "emoji-mart": "3.0.1", + "emotion": "^11.0.0", "eslint": "^8.35.0", "eslint-config-prettier": "^8.6.0", "eslint-config-react-app": "^7.0.1", diff --git a/frontend/src/components/SplitButton/SplitButton.tsx b/frontend/src/components/SplitButton/SplitButton.tsx new file mode 100644 index 00000000..7e5dbfaf --- /dev/null +++ b/frontend/src/components/SplitButton/SplitButton.tsx @@ -0,0 +1,103 @@ +import * as React from 'react'; +import Button from '@mui/material/Button'; +import ButtonGroup from '@mui/material/ButtonGroup'; +import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown'; +import ClickAwayListener from '@mui/material/ClickAwayListener'; +import Grow from '@mui/material/Grow'; +import Paper from '@mui/material/Paper'; +import Popper from '@mui/material/Popper'; +import MenuList from '@mui/material/MenuList'; + +type SplitButtonProps = { + label?: string; + children?: React.ReactNode; + icon?: React.ReactNode; + disabled?: boolean; + secondary?: boolean; + large?: boolean; + onClick: () => void; +}; + +export default function SplitButton({ + label, + icon, + large, + disabled, + secondary, + children, + onClick, +}: SplitButtonProps) { + const [open, setOpen] = React.useState(false); + const anchorRef = React.useRef(null); + + const handleToggle = () => { + setOpen((prevOpen) => !prevOpen); + }; + + const handleClose = (event: Event) => { + if ( + anchorRef.current && + anchorRef.current.contains(event.target as HTMLElement) + ) { + return; + } + + setOpen(false); + }; + + return ( + <> + + + + + + {({ TransitionProps, placement }) => ( + + + + + {children} + + + + + )} + + + ); +} diff --git a/frontend/src/translations/locales/ar-SA.json b/frontend/src/translations/locales/ar-SA.json index 7fa7bfb4..496fe896 100644 --- a/frontend/src/translations/locales/ar-SA.json +++ b/frontend/src/translations/locales/ar-SA.json @@ -26,7 +26,8 @@ "welcome": "مرحبا، {{name}}", "anonWarning": "أنت تستخدم حساب مجهول. قد ترغب في تسجيل الدخول للتأكد من أن البيانات الخاصة بك يمكن استرجاعها عند استخدام جهاز آخر.", "howDoesThatWork": "كيف يعمل ذلك؟", - "login": "تسجيل الدخول" + "login": "تسجيل الدخول", + "searchNoMatch": "لم نتمكن من العثور على رجعي يطابق بحثك ({{search}})." }, "PreviousGame": { "createdBy": "تم إنشاؤها بواسطة", @@ -182,7 +183,7 @@ "standardTab": { "header": "موضوع جديد", "text": ": انقر أدناه و إبدء إعادة النظر", - "button": "إنشاء جلسة عمل جديدة", + "button": "بدء ريترو", "customizeButton": "تخصيص" }, "optionsTab": { @@ -433,7 +434,7 @@ "wantToPayYearly": "أريد أن أدفع سنويا (كل 12 شهرا)، واحصل على شهر واحد مجانا في السنة!" }, "Encryption": { - "createEncryptedSession": "جلسة مشفرة", + "createEncryptedSession": "بدء ريترو مشفر", "sessionNotEncrypted": "هذه الجلسة غير مشفرة.", "sessionEncryptedHaveKeyTooltip": "هذه الجلسة مشفرة، والمفتاح مخزون في المتصفح الخاص بك. يمكنك فتح هذه الجلسة دون الحاجة إلى توفير كلمة المرور مرة أخرى.", "sessionEncryptedNoKeyTooltip": "هذه الجلسة مشفرة، والمفتاح غير مخزن في المتصفح الخاص بك. سوف يطلب منك مفتاح فك التشفير عند افتتاح هذه الجلسة.", diff --git a/frontend/src/translations/locales/de-DE.json b/frontend/src/translations/locales/de-DE.json index 16e3e594..588c3679 100644 --- a/frontend/src/translations/locales/de-DE.json +++ b/frontend/src/translations/locales/de-DE.json @@ -26,7 +26,8 @@ "welcome": "Willkommen, {{name}}", "anonWarning": "Du verwendest ein anonymes Konto. Du solltest dich einloggen, um sicherzustellen, dass deine Daten abgerufen werden können, wenn du ein anderes Gerät verwendest.", "howDoesThatWork": "Wie funktioniert das?", - "login": "Anmelden" + "login": "Anmelden", + "searchNoMatch": "Wir konnten keine Retrospektive finden, die Ihrer Suche entspricht ({{search}})." }, "PreviousGame": { "createdBy": "Erstellt von", @@ -182,7 +183,7 @@ "standardTab": { "header": "Erstellen", "text": "Klicke unten und starte deine Retrospektive:", - "button": "Erstelle eine neue Session", + "button": "Retro starten", "customizeButton": "Personalisieren" }, "optionsTab": { @@ -433,7 +434,7 @@ "wantToPayYearly": "Ich möchte jährlich bezahlen (alle 12 Monate) und einen Monat gratis pro Jahr!" }, "Encryption": { - "createEncryptedSession": "Verschlüsselte Sitzung", + "createEncryptedSession": "Starten Sie ein verschlüsseltes Retro", "sessionNotEncrypted": "Diese Sitzung ist nicht verschlüsselt.", "sessionEncryptedHaveKeyTooltip": "Diese Sitzung ist verschlüsselt und der Schlüssel wird in Ihrem Browser gespeichert. Sie können diese Sitzung öffnen, ohne das Passwort erneut eingeben zu müssen.", "sessionEncryptedNoKeyTooltip": "Diese Sitzung ist verschlüsselt und der Schlüssel wird nicht in Ihrem Browser gespeichert. Sie werden beim Öffnen dieser Sitzung nach dem Entschlüsselungsschlüssel gefragt.", diff --git a/frontend/src/translations/locales/en-GB.json b/frontend/src/translations/locales/en-GB.json index 6bfcd94a..9da5acea 100644 --- a/frontend/src/translations/locales/en-GB.json +++ b/frontend/src/translations/locales/en-GB.json @@ -26,7 +26,8 @@ "welcome": "Welcome, {{name}}", "anonWarning": "You are using an Anonymous account. You might want to login to make sure your data can be retrieved when using another device.", "howDoesThatWork": "How does that work?", - "login": "Login" + "login": "Login", + "searchNoMatch": "We could not find a retrospective matching your search ({{search}})." }, "PreviousGame": { "createdBy": "Created by", @@ -182,7 +183,7 @@ "standardTab": { "header": "Create", "text": "Click below and start retrospecting:", - "button": "Create a new session", + "button": "Start a Retro", "customizeButton": "Customise" }, "optionsTab": { @@ -433,7 +434,7 @@ "wantToPayYearly": "I want to pay annually (every 12 months), and get one month free per year!" }, "Encryption": { - "createEncryptedSession": "Encrypted Session", + "createEncryptedSession": "Start an Encrypted Retro", "sessionNotEncrypted": "This session is not encrypted.", "sessionEncryptedHaveKeyTooltip": "This session is encrypted, and the key is stored in your browser. You can open this session without having to provide the password again.", "sessionEncryptedNoKeyTooltip": "This session is encrypted, and the key is not stored in your browser. You will be asked for the decryption key when opening this session.", diff --git a/frontend/src/translations/locales/es-ES.json b/frontend/src/translations/locales/es-ES.json index 057bea2d..9300e70a 100644 --- a/frontend/src/translations/locales/es-ES.json +++ b/frontend/src/translations/locales/es-ES.json @@ -26,7 +26,8 @@ "welcome": "Bienvenido, {{name}}", "anonWarning": "Estás usando una cuenta anónima. Tal vez quieras iniciar sesión para asegurarte de que tus datos pueden ser recuperados cuando usas otro dispositivo.", "howDoesThatWork": "¿Cómo funciona esto?", - "login": "Ingresar" + "login": "Ingresar", + "searchNoMatch": "No hemos podido encontrar un retrospectivo que coincida con tu búsqueda ({{search}})." }, "PreviousGame": { "createdBy": "Creado por", @@ -182,7 +183,7 @@ "standardTab": { "header": "Crear una sesión", "text": "Pulse abajo y empieze la retrospectiva:", - "button": "Crear una sesión nueva", + "button": "Iniciar una Retro", "customizeButton": "Personalizar" }, "optionsTab": { @@ -433,7 +434,7 @@ "wantToPayYearly": "Quiero pagar anualmente (cada 12 meses), y obtener un mes gratis por año!" }, "Encryption": { - "createEncryptedSession": "Sesión cifrada", + "createEncryptedSession": "Iniciar una Retro Cifrada", "sessionNotEncrypted": "Esta sesión no está cifrada.", "sessionEncryptedHaveKeyTooltip": "Esta sesión está cifrada, y la clave se almacena en su navegador. Puede abrir esta sesión sin tener que proporcionar la contraseña de nuevo.", "sessionEncryptedNoKeyTooltip": "Esta sesión está cifrada, y la clave no se almacena en su navegador. Se le pedirá la clave de descifrado al abrir esta sesión.", diff --git a/frontend/src/translations/locales/fr-FR.json b/frontend/src/translations/locales/fr-FR.json index 29e143a4..3f495d9b 100644 --- a/frontend/src/translations/locales/fr-FR.json +++ b/frontend/src/translations/locales/fr-FR.json @@ -26,7 +26,8 @@ "welcome": "Bienvenue, {{name}}", "anonWarning": "Vous utilisez un compte anonyme. Connectez-vous afin que vos données puissent être récupérées lorsque vous utilisez un autre appareil.", "howDoesThatWork": "Comment cela fonctionne-t-il ?", - "login": "Connexion" + "login": "Connexion", + "searchNoMatch": "Nous n'avons pu trouver une retrospective correspondant à votre recherche ({{search}})." }, "PreviousGame": { "createdBy": "Créé par", @@ -182,7 +183,7 @@ "standardTab": { "header": "Créer", "text": "Cliquez ci-dessous et commencez à retrospecter:", - "button": "Nouvelle session", + "button": "Commencer une Rétro", "customizeButton": "Personnaliser" }, "optionsTab": { @@ -433,7 +434,7 @@ "wantToPayYearly": "Je souhaite payer annuellement et obtenir un mois gratuit par an !" }, "Encryption": { - "createEncryptedSession": "Session cryptée", + "createEncryptedSession": "Commencer une Rétro cryptée", "sessionNotEncrypted": "Cette session n'est pas cryptée.", "sessionEncryptedHaveKeyTooltip": "Cette session est chiffrée et la clef est stockée dans votre navigateur. Vous pouvez ouvrir cette session sans avoir à en donner le mot de passe.", "sessionEncryptedNoKeyTooltip": "Cette session est chiffrée et la clef n'a pas été trouvée dans votre navigateur. Il vous sera demandé de donner le mot de passe lors de l'ouverture de cette session.", diff --git a/frontend/src/translations/locales/hu-HU.json b/frontend/src/translations/locales/hu-HU.json index 0d9a31f3..948ec873 100644 --- a/frontend/src/translations/locales/hu-HU.json +++ b/frontend/src/translations/locales/hu-HU.json @@ -26,7 +26,8 @@ "welcome": "Isten hozott, {{name}}", "anonWarning": "", "howDoesThatWork": "Hogyan működik?", - "login": "" + "login": "", + "searchNoMatch": "" }, "PreviousGame": { "createdBy": "Készítette", @@ -182,7 +183,7 @@ "standardTab": { "header": "Ülés létrehozása", "text": "Kattints ide a kezdéshez:", - "button": "Új ülés indítása", + "button": "", "customizeButton": "Testreszab" }, "optionsTab": { @@ -433,7 +434,7 @@ "wantToPayYearly": "Évente szeretnék fizetni (12 havonta), és évente egy hónapot ingyen kapok!" }, "Encryption": { - "createEncryptedSession": "Titkosított munkamenet", + "createEncryptedSession": "", "sessionNotEncrypted": "Ez a munkamenet nincs titkosítva.", "sessionEncryptedHaveKeyTooltip": "Ez a munkamenet titkosított, és a kulcsot a böngésző tárolja. Ezt a munkamenetet a jelszó újbóli megadása nélkül is megnyithatja.", "sessionEncryptedNoKeyTooltip": "Ez a munkamenet titkosított, és a kulcsot nem tárolja a böngésző. A munkamenet megnyitásakor a rendszer kérni fogja a visszafejtési kulcsot.", diff --git a/frontend/src/translations/locales/it-IT.json b/frontend/src/translations/locales/it-IT.json index 6c898e76..fcc2daa5 100644 --- a/frontend/src/translations/locales/it-IT.json +++ b/frontend/src/translations/locales/it-IT.json @@ -26,7 +26,8 @@ "welcome": "Benvenuto, {{name}}", "anonWarning": "Stai utilizzando un account anonimo. Potresti voler effettuare il login per assicurarsi che i tuoi dati possano essere recuperati quando usi un altro dispositivo.", "howDoesThatWork": "Come funziona quello?", - "login": "Accedi" + "login": "Accedi", + "searchNoMatch": "Non siamo riusciti a trovare una retrospettiva corrispondente alla tua ricerca ({{search}})." }, "PreviousGame": { "createdBy": "Creato da", @@ -182,7 +183,7 @@ "standardTab": { "header": "Crea", "text": "Clicca qui sotto per iniziare la retrospective", - "button": "Crea una nuova sessione", + "button": "Avvia un retro", "customizeButton": "Personalizza" }, "optionsTab": { @@ -433,7 +434,7 @@ "wantToPayYearly": "Voglio pagare annualmente (ogni 12 mesi), e ottenere un mese gratis all'anno!" }, "Encryption": { - "createEncryptedSession": "Sessione Criptata", + "createEncryptedSession": "Avvia un retro crittografato", "sessionNotEncrypted": "Questa sessione non è cifrata.", "sessionEncryptedHaveKeyTooltip": "Questa sessione è crittografata e la chiave è memorizzata nel tuo browser. Puoi aprire questa sessione senza dover fornire nuovamente la password.", "sessionEncryptedNoKeyTooltip": "Questa sessione è crittografata e la chiave non è memorizzata nel tuo browser. Ti verrà chiesta la chiave di decrittazione quando apri questa sessione.", diff --git a/frontend/src/translations/locales/ja-JP.json b/frontend/src/translations/locales/ja-JP.json index 89ae5d74..ba647d08 100644 --- a/frontend/src/translations/locales/ja-JP.json +++ b/frontend/src/translations/locales/ja-JP.json @@ -26,7 +26,8 @@ "welcome": "ようこそ、 {{name}}", "anonWarning": "匿名アカウントを使用しています。別のデバイスを使用しているときにデータを取得できることを確認するためにログインする場合があります。", "howDoesThatWork": "それはどのように機能しますか?", - "login": "ログイン" + "login": "ログイン", + "searchNoMatch": "検索に一致する回顧展が見つかりませんでした ({{search}})。" }, "PreviousGame": { "createdBy": "作成者:", @@ -182,7 +183,7 @@ "standardTab": { "header": "作成", "text": "セッションを作成してレトロスペクティブをはじめる", - "button": "新しいセッションを作成する", + "button": "Retroを始める", "customizeButton": "カスタマイズ" }, "optionsTab": { @@ -433,7 +434,7 @@ "wantToPayYearly": "私は毎年(12ヶ月ごと)を支払い、毎年1ヶ月無料にしたいと思います!" }, "Encryption": { - "createEncryptedSession": "暗号化セッション", + "createEncryptedSession": "暗号化されたレトロを開始", "sessionNotEncrypted": "このセッションは暗号化されていません。", "sessionEncryptedHaveKeyTooltip": "このセッションは暗号化されており、キーはブラウザに保存されます。再度パスワードを入力することなく、このセッションを開くことができます。", "sessionEncryptedNoKeyTooltip": "このセッションは暗号化されており、キーはブラウザに保存されていません。このセッションを開くときに復号キーを求められます。", diff --git a/frontend/src/translations/locales/nl-NL.json b/frontend/src/translations/locales/nl-NL.json index c6982f29..39914d45 100644 --- a/frontend/src/translations/locales/nl-NL.json +++ b/frontend/src/translations/locales/nl-NL.json @@ -26,7 +26,8 @@ "welcome": "Welkom, {{name}}", "anonWarning": "Je gebruikt een anonieme account. Je kunt misschien inloggen om ervoor te zorgen dat je gegevens kunnen worden opgehaald wanneer je een ander apparaat gebruikt.", "howDoesThatWork": "Hoe werkt dat?", - "login": "Aanmelden" + "login": "Aanmelden", + "searchNoMatch": "We konden geen terugwerkende kracht vinden die overeenkomt met uw zoekopdracht ({{search}})." }, "PreviousGame": { "createdBy": "Aangemaakt door", @@ -182,7 +183,7 @@ "standardTab": { "header": "Starten", "text": "Klik hieronder en begin je retrospective:", - "button": "Start een nieuwe sessie", + "button": "Start een Retro", "customizeButton": "Aanpassen" }, "optionsTab": { @@ -433,7 +434,7 @@ "wantToPayYearly": "Ik wil jaarlijks betalen (elke 12 maanden) en een maand gratis per jaar!" }, "Encryption": { - "createEncryptedSession": "Versleutelde sessie", + "createEncryptedSession": "Start een versleutelde Retro", "sessionNotEncrypted": "Deze sessie is niet versleuteld.", "sessionEncryptedHaveKeyTooltip": "Deze sessie is versleuteld, en de sleutel wordt opgeslagen in uw browser. U kunt deze sessie openen zonder het wachtwoord opnieuw op te geven.", "sessionEncryptedNoKeyTooltip": "Deze sessie is versleuteld en de sleutel is niet opgeslagen in uw browser. U wordt gevraagd om de decoderingssleutel bij het openen van deze sessie.", diff --git a/frontend/src/translations/locales/pl-PL.json b/frontend/src/translations/locales/pl-PL.json index d5cf2e40..28b712b2 100644 --- a/frontend/src/translations/locales/pl-PL.json +++ b/frontend/src/translations/locales/pl-PL.json @@ -26,7 +26,8 @@ "welcome": "Witaj, {{name}}", "anonWarning": "Używasz konta anonimowego. Możesz się zalogować, aby mieć pewność, że dane mogą być pobrane podczas korzystania z innego urządzenia.", "howDoesThatWork": "Jak to działa?", - "login": "Logowanie" + "login": "Logowanie", + "searchNoMatch": "Nie mogliśmy znaleźć retrospektywnego pasującego do Twojego wyszukiwania ({{search}})." }, "PreviousGame": { "createdBy": "Utworzony przez", @@ -182,7 +183,7 @@ "standardTab": { "header": "Stwórz", "text": "Kliknij poniżej i zacznij retrospektywę:", - "button": "Stwórz nową sesję", + "button": "Rozpocznij Retro", "customizeButton": "Dostosuj" }, "optionsTab": { @@ -433,7 +434,7 @@ "wantToPayYearly": "Chcę płacić corocznie (co 12 miesięcy) i otrzymywać miesiąc za darmo!" }, "Encryption": { - "createEncryptedSession": "Zaszyfrowana sesja", + "createEncryptedSession": "Uruchom zaszyfrowany Retro", "sessionNotEncrypted": "Ta sesja nie jest zaszyfrowana.", "sessionEncryptedHaveKeyTooltip": "Ta sesja jest zaszyfrowana, a klucz jest przechowywany w przeglądarce. Możesz otworzyć tę sesję bez konieczności ponownego podania hasła.", "sessionEncryptedNoKeyTooltip": "Ta sesja jest zaszyfrowana, a klucz nie jest przechowywany w przeglądarce. Zostaniesz poproszony o klucz deszyfrowania podczas otwierania tej sesji.", diff --git a/frontend/src/translations/locales/pt-BR.json b/frontend/src/translations/locales/pt-BR.json index 265b362f..1be78240 100644 --- a/frontend/src/translations/locales/pt-BR.json +++ b/frontend/src/translations/locales/pt-BR.json @@ -26,7 +26,8 @@ "welcome": "Bem-vindo, {{name}}", "anonWarning": "Você está usando uma conta anônima. Talvez você queira fazer login para garantir que seus dados possam ser recuperados usando outro dispositivo.", "howDoesThatWork": "Como funciona isso?", - "login": "Conectar-se" + "login": "Conectar-se", + "searchNoMatch": "Não foi possível encontrar um retrospectivo correspondente à sua pesquisa ({{search}})." }, "PreviousGame": { "createdBy": "Criado Por", @@ -182,7 +183,7 @@ "standardTab": { "header": "Crie uma seção", "text": "Clique abaixo e inicie a restropectiva:", - "button": "Crie uma nova seção", + "button": "Iniciar uma Retro", "customizeButton": "Personalizar" }, "optionsTab": { @@ -433,7 +434,7 @@ "wantToPayYearly": "Quero pagar anualmente (a cada 12 meses) e ganhar um mês grátis por ano!" }, "Encryption": { - "createEncryptedSession": "Sessão criptografada", + "createEncryptedSession": "Iniciar uma Retro Encriptada", "sessionNotEncrypted": "Esta sessão não está criptografada.", "sessionEncryptedHaveKeyTooltip": "Esta sessão é criptografada, e a chave é armazenada no seu navegador. Você pode abrir esta sessão sem precisar fornecer a senha novamente.", "sessionEncryptedNoKeyTooltip": "Esta sessão é criptografada, e a chave não é armazenada no seu navegador. Você será solicitado pela chave de descriptografia ao abrir esta sessão.", diff --git a/frontend/src/translations/locales/pt-PT.json b/frontend/src/translations/locales/pt-PT.json index e0328352..dcb7816e 100644 --- a/frontend/src/translations/locales/pt-PT.json +++ b/frontend/src/translations/locales/pt-PT.json @@ -26,7 +26,8 @@ "welcome": "Bem-vindo, {{name}}", "anonWarning": "Você está usando uma conta anônima. Talvez você queira fazer login para garantir que seus dados possam ser recuperados usando outro dispositivo.", "howDoesThatWork": "Como funciona isso?", - "login": "Conectar-se" + "login": "Conectar-se", + "searchNoMatch": "Não foi possível encontrar um retrospectivo correspondente à sua pesquisa ({{search}})." }, "PreviousGame": { "createdBy": "Criado Por", @@ -182,7 +183,7 @@ "standardTab": { "header": "Crio", "text": "Clique abaixo e comece retrospectivo:", - "button": "Criar uma nova sessão", + "button": "Iniciar uma Retro", "customizeButton": "Personalizar" }, "optionsTab": { @@ -433,7 +434,7 @@ "wantToPayYearly": "Quero pagar anualmente (a cada 12 meses) e ganhar um mês grátis por ano!" }, "Encryption": { - "createEncryptedSession": "Sessão criptografada", + "createEncryptedSession": "Iniciar uma Retro Encriptada", "sessionNotEncrypted": "Esta sessão não está criptografada.", "sessionEncryptedHaveKeyTooltip": "Esta sessão é criptografada, e a chave é armazenada no seu navegador. Você pode abrir esta sessão sem precisar fornecer a senha novamente.", "sessionEncryptedNoKeyTooltip": "Esta sessão é criptografada, e a chave não é armazenada no seu navegador. Você será solicitado pela chave de descriptografia ao abrir esta sessão.", diff --git a/frontend/src/translations/locales/uk-UA.json b/frontend/src/translations/locales/uk-UA.json index cd3e83e5..a3c2515a 100644 --- a/frontend/src/translations/locales/uk-UA.json +++ b/frontend/src/translations/locales/uk-UA.json @@ -26,7 +26,8 @@ "welcome": "Ласкаво просимо, {{name}}", "anonWarning": "Ви використовуєте анонімний обліковий запис. Ви можете увійти в систему, щоб переконатися, що ваші дані можуть бути отримані при використанні іншого пристрою.", "howDoesThatWork": "Як це працює?", - "login": "Логін" + "login": "Логін", + "searchNoMatch": "Ми не змогли знайти ретроспектив, що відповідає вашому запиту ({{search}})." }, "PreviousGame": { "createdBy": "Створено", @@ -182,7 +183,7 @@ "standardTab": { "header": "Створити", "text": "Натисніть нижче та почніть ретроспекцію:", - "button": "Створити нову сесію", + "button": "Почати ретро", "customizeButton": "Користувацький" }, "optionsTab": { @@ -433,7 +434,7 @@ "wantToPayYearly": "Я хочу платити щорічно (кожні 12 місяців), та отримати 1 місяць безкоштовно на рік!" }, "Encryption": { - "createEncryptedSession": "Зашифрована сесія", + "createEncryptedSession": "Запускати зашифроване ретро", "sessionNotEncrypted": "Ця сесія не зашифрована.", "sessionEncryptedHaveKeyTooltip": "Ця сесія зашифрована, і ключ зберігається в браузері. Ви можете відкрити цю сесію без необхідності вказати пароль знову.", "sessionEncryptedNoKeyTooltip": "Ця сесія зашифрована, і ключ не зберігається в браузері. Вам буде запропоновано ключ дешифрування при відкритті цього сесії.", diff --git a/frontend/src/translations/locales/zh-CN.json b/frontend/src/translations/locales/zh-CN.json index 551f5563..2afa3470 100644 --- a/frontend/src/translations/locales/zh-CN.json +++ b/frontend/src/translations/locales/zh-CN.json @@ -26,7 +26,8 @@ "welcome": "欢迎， {{name}}", "anonWarning": "您正在使用匿名帐户。您可能想要登录以确保您的数据可以在使用其他设备时检索。", "howDoesThatWork": "这是如何运作的？", - "login": "登录" + "login": "登录", + "searchNoMatch": "我们找不到匹配您搜索的 ({{search}} )的追溯。" }, "PreviousGame": { "createdBy": "创建者", @@ -182,7 +183,7 @@ "standardTab": { "header": "创建", "text": "点击以下开始进行回顾:", - "button": "创建新的议程", + "button": "开始复数", "customizeButton": "自定义" }, "optionsTab": { @@ -433,7 +434,7 @@ "wantToPayYearly": "我想每年支付一次（每12个月），每年免费支付一个月！" }, "Encryption": { - "createEncryptedSession": "加密会话", + "createEncryptedSession": "开始加密的复数", "sessionNotEncrypted": "此会话未加密。", "sessionEncryptedHaveKeyTooltip": "此会话已加密，密钥已保存在您的浏览器中。您可以打开此会话而不必再次提供密码。", "sessionEncryptedNoKeyTooltip": "此会话已加密，密钥未保存在您的浏览器中。在打开此会话时，您将被要求输入解密密钥。", diff --git a/frontend/src/translations/locales/zh-TW.json b/frontend/src/translations/locales/zh-TW.json index d4b48751..65f1835a 100644 --- a/frontend/src/translations/locales/zh-TW.json +++ b/frontend/src/translations/locales/zh-TW.json @@ -26,7 +26,8 @@ "welcome": "歡迎， {{name}}", "anonWarning": "", "howDoesThatWork": "這是如何運作的？", - "login": "" + "login": "", + "searchNoMatch": "" }, "PreviousGame": { "createdBy": "由...製作", @@ -182,7 +183,7 @@ "standardTab": { "header": "新增", "text": "點擊以下開始進行回顧:", - "button": "建立新的議程", + "button": "", "customizeButton": "定制" }, "optionsTab": { @@ -433,7 +434,7 @@ "wantToPayYearly": "我想按年付款（每 12 個月），每年免費獲得一個月！" }, "Encryption": { - "createEncryptedSession": "加密會話", + "createEncryptedSession": "", "sessionNotEncrypted": "此會話未加密。", "sessionEncryptedHaveKeyTooltip": "此會話已加密，密鑰存儲在您的瀏覽器中。您無需再次提供密碼即可打開此會話。", "sessionEncryptedNoKeyTooltip": "此會話已加密，密鑰未存儲在您的瀏覽器中。打開此會話時，您將被要求提供解密密鑰。", diff --git a/frontend/src/views/Home.tsx b/frontend/src/views/Home.tsx index 1f135347..fe5cc67f 100644 --- a/frontend/src/views/Home.tsx +++ b/frontend/src/views/Home.tsx @@ -1,10 +1,14 @@ -import { useCallback } from 'react'; +import { useCallback, useMemo, useState } from 'react'; import styled from '@emotion/styled'; import { Link, useNavigate } from 'react-router-dom'; -import Fab from '@mui/material/Fab'; -import { makeStyles } from '@mui/styles'; -import { colors } from '@mui/material'; -import { Lock, ThumbUpAlt } from '@mui/icons-material'; +import { + Alert, + ListItemIcon, + ListItemText, + MenuItem, + Typography, +} from '@mui/material'; +import { Dashboard, Key } from '@mui/icons-material'; import PreviousGames from './home/PreviousGames'; import { SessionMetadata } from 'common'; import { trackAdWordsConversion, trackEvent } from './../track'; @@ -17,23 +21,10 @@ import { storeEncryptionKeyLocally } from '../crypto/crypto'; import ProButton from '../components/ProButton'; import { useSnackbar } from 'notistack'; import TrialPrompt from './home/TrialPrompt'; -import HowDoesItWorkButton from '../components/HowDoesItWorkButton'; import { useTranslation } from 'react-i18next'; import ClosableAlert from 'components/ClosableAlert'; - -const useStyles = makeStyles({ - media: { - objectFit: 'cover', - backgroundColor: colors.grey[200], - }, - actions: { - justifyContent: 'center', - margin: 20, - }, - buttonIcon: { - marginRight: 10, - }, -}); +import SplitButton from 'components/SplitButton/SplitButton'; +import SearchBar from './game/SearchBar'; function Home() { const navigate = useNavigate(); @@ -41,9 +32,20 @@ function Home() { const isLoggedIn = !!user; const { t } = useTranslation(); const { enqueueSnackbar } = useSnackbar(); + const [search, setSearch] = useState(''); const [previousSessions, refreshPreviousSessions] = usePreviousSessions(); const hasPreviousSessions = previousSessions.length > 0; - const classes = useStyles(); + + const filteredSessions = useMemo(() => { + if (!search) { + return previousSessions; + } + return previousSessions.filter((session) => + (session.name || t('SessionName.defaultSessionName')!) + .toLowerCase() + .includes(search.toLowerCase()) + ); + }, [search, previousSessions, t]); const createDefaultSession = useCallback(async () => { const session = await createGame(); @@ -85,53 +87,72 @@ function Home() { return ( <> - - {t('Home.anonWarning')}    - - {t('Home.login')} - - + {user && user.accountType === 'anonymous' ? ( + + {t('Home.anonWarning')}    + + {t('Home.login')} + + + ) : null} {t('Home.welcome', { name: user?.name || '' })} - } + onClick={createDefaultSession} + label={t('Join.standardTab.button')!} + secondary + large > - - {t('Join.standardTab.button')} - + + + + + {t('Join.standardTab.button')} + + + + + + + + {t('Encryption.createEncryptedSession')} + + + Pro + + + + -
- - - - - {t('Encryption.createEncryptedSession')} - - - {hasPreviousSessions ? ( <> - {t('Join.previousTab.header')} + + {t('Join.previousTab.header')} + + + + + {!!search && filteredSessions.length === 0 ? ( + + {t('Home.searchNoMatch', { search })} + + ) : null} ) : null} @@ -148,6 +169,9 @@ const MainHeader = styled.h1` `; const SubHeader = styled.h2` + display: flex; + align-items: center; + gap: 30px; font-weight: 100; font-size: 3em; @media screen and (max-width: 500px) { @@ -155,9 +179,16 @@ const SubHeader = styled.h2` } `; +const PreviousContainer = styled.div` + display: flex; + align-items: center; + justify-content: space-between; + gap: 30px; +`; + const LaunchButtons = styled.div` display: flex; - margin: 30px 30px 60px; + margin: 30px 0px 60px; > button { margin: 0 10px; } diff --git a/frontend/yarn.lock b/frontend/yarn.lock index 1c5241a3..f7e25e22 100644 --- a/frontend/yarn.lock +++ b/frontend/yarn.lock @@ -3027,6 +3027,11 @@ emoji-regex@^9.2.2: resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-9.2.2.tgz#840c8803b0d8047f4ff0cf963176b32d4ef3ed72" integrity sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg== +emotion@^11.0.0: + version "11.0.0" + resolved "https://registry.yarnpkg.com/emotion/-/emotion-11.0.0.tgz#e33353668e72f0adea1f6fba790dc6c5b05b45d9" + integrity sha512-QW3CRqic3aRw1OBOcnvxaHEpCmxtlGwZ5tM9dV5rY3Rn+F41E8EgTPOqJ5VfsqQ5ZXHDs2zSDyUwGI0ZfC2+5A== + engine.io-client@~6.2.3: version "6.2.3" resolved "https://registry.yarnpkg.com/engine.io-client/-/engine.io-client-6.2.3.tgz#a8cbdab003162529db85e9de31575097f6d29458"