From dfd7749674f69a0ed7fe6cb886498725e26b5c6e Mon Sep 17 00:00:00 2001 From: Civolilah Date: Thu, 6 Feb 2025 19:01:20 +0100 Subject: [PATCH 1/3] Redesigned verify email banner to popover --- src/components/banners/VerifyEmail.tsx | 26 ++++++++++++++++++-------- 1 file changed, 18 insertions(+), 8 deletions(-) diff --git a/src/components/banners/VerifyEmail.tsx b/src/components/banners/VerifyEmail.tsx index 26ee38b2d9..be41383979 100644 --- a/src/components/banners/VerifyEmail.tsx +++ b/src/components/banners/VerifyEmail.tsx @@ -9,11 +9,11 @@ */ import { useTranslation } from 'react-i18next'; -import { Banner } from '../Banner'; import { useCurrentUser } from '$app/common/hooks/useCurrentUser'; import { toast } from '$app/common/helpers/toast/toast'; import { request } from '$app/common/helpers/request'; import { endpoint, isHosted } from '$app/common/helpers'; +import { Popover } from '@headlessui/react'; export const buttonStyles = 'font-medium text-xs md:text-sm underline cursor-pointer'; @@ -42,14 +42,24 @@ export function VerifyEmail() { } return ( - -
- {t('confirm_your_email_address')}. + +
+
+
+ {t('confirm_your_email_address')}. - +
{ + event.stopPropagation(); + resend(); + }} + > + {t('resend_email')} +
+
+
- + ); } From eb9c506a9e1401387005162940f28e2374ed7dfa Mon Sep 17 00:00:00 2001 From: Civolilah Date: Mon, 10 Feb 2025 15:07:06 +0100 Subject: [PATCH 2/3] Redesigned all banners --- src/components/banners/ActivateCompany.tsx | 28 +++++---- src/components/banners/EInvoiceCredits.tsx | 71 +++++++++++++--------- src/components/banners/VerifyEmail.tsx | 26 ++++---- src/components/banners/VerifyPhone.tsx | 39 +++++++----- src/components/layouts/Default.tsx | 10 +-- 5 files changed, 99 insertions(+), 75 deletions(-) diff --git a/src/components/banners/ActivateCompany.tsx b/src/components/banners/ActivateCompany.tsx index ff04a4c1b0..5bc0184cf7 100644 --- a/src/components/banners/ActivateCompany.tsx +++ b/src/components/banners/ActivateCompany.tsx @@ -9,12 +9,14 @@ */ import { useTranslation } from 'react-i18next'; -import { Banner } from '../Banner'; import { Link } from 'react-router-dom'; -import { buttonStyles } from './VerifyEmail'; +import { Popover } from '@headlessui/react'; import { useCurrentCompany } from '$app/common/hooks/useCurrentCompany'; import { useCurrentUser } from '$app/common/hooks/useCurrentUser'; +export const buttonStyles = + 'font-medium text-xs md:text-sm underline cursor-pointer'; + export function ActivateCompany() { const [t] = useTranslation(); const company = useCurrentCompany(); @@ -29,17 +31,19 @@ export function ActivateCompany() { } return ( - -
- {t('company_disabled_warning')}. + +
+
+ {t('company_disabled_warning')}. - - {t('activate_company')} - + + {t('activate_company')} + +
- + ); } diff --git a/src/components/banners/EInvoiceCredits.tsx b/src/components/banners/EInvoiceCredits.tsx index 9947fee8b7..7c7b4ff57f 100644 --- a/src/components/banners/EInvoiceCredits.tsx +++ b/src/components/banners/EInvoiceCredits.tsx @@ -10,8 +10,6 @@ import { useCurrentCompany } from '$app/common/hooks/useCurrentCompany'; import { useTranslation } from 'react-i18next'; -import { Banner } from '../Banner'; -import { buttonStyles } from './VerifyEmail'; import { Link, useLocation } from 'react-router-dom'; import { useEInvoiceHealthCheck, @@ -25,17 +23,19 @@ import { useQueryClient } from 'react-query'; import { request } from '$app/common/helpers/request'; import { endpoint } from '$app/common/helpers'; import { atom, useAtom } from 'jotai'; +import { Popover } from '@headlessui/react'; export const EINVOICE_CREDITS_MIN_THRESHOLD = 15; export function EInvoiceCredits() { - const company = useCurrentCompany(); - const quota = useQuota(); + const [t] = useTranslation(); - const [isVisible, setVisible] = useState(false); + const quota = useQuota(); + const company = useCurrentCompany(); const { data: healthcheck } = useEInvoiceHealthCheck(); - const { t } = useTranslation(); + + const [isVisible, setVisible] = useState(false); if ( !company.legal_entity_id || @@ -58,15 +58,20 @@ export function EInvoiceCredits() { text={t('notification_no_credits')} /> - -
- {t('notification_no_credits')} - - setVisible(true)}> - {t('learn_more')} - + +
+
+ {t('notification_no_credits')} + + setVisible(true)} + > + {t('learn_more')} + +
- + ); } @@ -80,15 +85,20 @@ export function EInvoiceCredits() { text={t('notification_credits_low')} /> - -
- {t('notification_credits_low')} - - setVisible(true)}> - {t('learn_more')} - + +
+
+ {t('notification_credits_low')} + + setVisible(true)} + > + {t('learn_more')} + +
- + ); } @@ -105,9 +115,9 @@ interface DialogProps { function Dialog({ isVisible, setVisible, text }: DialogProps) { const { t } = useTranslation(); - const accentColor = useAccentColor(); const quota = useQuota(); const location = useLocation(); + const accentColor = useAccentColor(); useEffect(() => { setVisible(false); @@ -136,11 +146,12 @@ const retriesAtom = atom(0); const statusAtom = atom<'pending' | 'error' | 'success'>('pending'); function RegenerateToken() { - const { t } = useTranslation(); + const [t] = useTranslation(); - const refresh = useRefreshCompanyUsers(); const queryClient = useQueryClient(); + const refresh = useRefreshCompanyUsers(); + const [status, setStatus] = useAtom(statusAtom); const [retries, setRetries] = useAtom(retriesAtom); @@ -185,10 +196,12 @@ function RegenerateToken() { } return ( - -
- {t('einvoice_token_not_found')} + +
+
+ {t('einvoice_token_not_found')} +
- + ); } diff --git a/src/components/banners/VerifyEmail.tsx b/src/components/banners/VerifyEmail.tsx index be41383979..398fc3f943 100644 --- a/src/components/banners/VerifyEmail.tsx +++ b/src/components/banners/VerifyEmail.tsx @@ -43,20 +43,18 @@ export function VerifyEmail() { return ( -
-
-
- {t('confirm_your_email_address')}. - -
{ - event.stopPropagation(); - resend(); - }} - > - {t('resend_email')} -
+
+
+ {t('confirm_your_email_address')}. + +
{ + event.stopPropagation(); + resend(); + }} + > + {t('resend_email')}
diff --git a/src/components/banners/VerifyPhone.tsx b/src/components/banners/VerifyPhone.tsx index 12d6ed0f29..46b9e5ac4d 100644 --- a/src/components/banners/VerifyPhone.tsx +++ b/src/components/banners/VerifyPhone.tsx @@ -9,8 +9,6 @@ */ import { useTranslation } from 'react-i18next'; -import { Banner } from '../Banner'; -import { buttonStyles } from './VerifyEmail'; import { Modal } from '../Modal'; import { useEffect, useState } from 'react'; import { ValidationBag } from '$app/common/interfaces/validation-bag'; @@ -32,6 +30,7 @@ import { useCurrentUser } from '$app/common/hooks/useCurrentUser'; import { useCurrentCompany } from '$app/common/hooks/useCurrentCompany'; import { $refetch } from '$app/common/hooks/useRefetch'; import { useColorScheme } from '$app/common/colors'; +import { Popover } from '@headlessui/react'; interface VerificationProps { visible: boolean; @@ -146,8 +145,13 @@ function Verification({ visible, onClose }: VerificationProps) { visible={visible} onClose={onClose} > -
(false); const user = useCurrentUser(); const account = useCurrentAccount(); @@ -213,18 +218,20 @@ export function VerifyPhone() { return ( <> - -
- {t('verify_phone_number_help')}. - - + +
+
+ {t('verify_phone_number_help')}. + + +
- + - - - - +
+ + + + +
Date: Thu, 13 Feb 2025 13:52:10 +0100 Subject: [PATCH 3/3] Removed transparency --- src/components/banners/ActivateCompany.tsx | 2 +- src/components/banners/EInvoiceCredits.tsx | 6 +++--- src/components/banners/VerifyEmail.tsx | 2 +- src/components/banners/VerifyPhone.tsx | 2 +- 4 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/banners/ActivateCompany.tsx b/src/components/banners/ActivateCompany.tsx index 5bc0184cf7..75e86e2e6e 100644 --- a/src/components/banners/ActivateCompany.tsx +++ b/src/components/banners/ActivateCompany.tsx @@ -32,7 +32,7 @@ export function ActivateCompany() { return ( -
+
{t('company_disabled_warning')}. diff --git a/src/components/banners/EInvoiceCredits.tsx b/src/components/banners/EInvoiceCredits.tsx index 7c7b4ff57f..2994aed722 100644 --- a/src/components/banners/EInvoiceCredits.tsx +++ b/src/components/banners/EInvoiceCredits.tsx @@ -59,7 +59,7 @@ export function EInvoiceCredits() { /> -
+
{t('notification_no_credits')} @@ -86,7 +86,7 @@ export function EInvoiceCredits() { /> -
+
{t('notification_credits_low')} @@ -197,7 +197,7 @@ function RegenerateToken() { return ( -
+
{t('einvoice_token_not_found')}
diff --git a/src/components/banners/VerifyEmail.tsx b/src/components/banners/VerifyEmail.tsx index 398fc3f943..27974c9ad4 100644 --- a/src/components/banners/VerifyEmail.tsx +++ b/src/components/banners/VerifyEmail.tsx @@ -43,7 +43,7 @@ export function VerifyEmail() { return ( -
+
{t('confirm_your_email_address')}. diff --git a/src/components/banners/VerifyPhone.tsx b/src/components/banners/VerifyPhone.tsx index 46b9e5ac4d..e7aedf9476 100644 --- a/src/components/banners/VerifyPhone.tsx +++ b/src/components/banners/VerifyPhone.tsx @@ -219,7 +219,7 @@ export function VerifyPhone() { return ( <> -
+
{t('verify_phone_number_help')}.