style: updated button component (#231)

DefGuard · Jul 10, 2023 · 2b4eb7d · 2b4eb7d
1 parent 9bdb762
commit 2b4eb7d
Show file tree

Hide file tree

Showing 44 changed files with 393 additions and 717 deletions.
diff --git a/web/src/pages/allow/OpenidAllowPage.tsx b/web/src/pages/allow/OpenidAllowPage.tsx
@@ -6,10 +6,11 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useNavigate, useSearchParams } from 'react-router-dom';
 
 import { useI18nContext } from '../../i18n/i18n-react';
-import Button, {
+import { Button } from '../../shared/components/layout/Button/Button';
+import {
   ButtonSize,
   ButtonStyleVariant,
-} from '../../shared/components/layout/Button/Button';
+} from '../../shared/components/layout/Button/types';
 import SvgDefguardLogoLogin from '../../shared/components/svg/DefguardLogoLogin';
 import SvgIconCheckmarkWhite from '../../shared/components/svg/IconCheckmarkWhite';
 import SvgIconDelete from '../../shared/components/svg/IconDelete';
@@ -21,6 +22,8 @@ import { LoaderPage } from '../loader/LoaderPage';
 export const OpenidAllowPage = () => {
   const navigate = useNavigate();
 
+  const [allowLoading, setAllowLoading] = useState(false);
+  const [cancelLoading, setCancelLoading] = useState(false);
   const [params] = useSearchParams();
   const [scope, setScope] = useState<string | null>('');
   const [responseType, setResponseType] = useState<string | null>('');
@@ -119,21 +122,29 @@ export const OpenidAllowPage = () => {
         <div className="controls">
           <Button
             data-testid="openid-allow"
-            size={ButtonSize.BIG}
+            size={ButtonSize.LARGE}
             styleVariant={ButtonStyleVariant.PRIMARY}
             icon={<SvgIconCheckmarkWhite />}
             text={LL.openidAllow.controls.accept()}
             disabled={!paramsValid}
-            onClick={() => handleSubmit(true)}
+            loading={allowLoading}
+            onClick={() => {
+              setAllowLoading(true);
+              handleSubmit(true);
+            }}
           />
           <Button
             data-testid="openid-cancel"
-            size={ButtonSize.BIG}
+            size={ButtonSize.LARGE}
             styleVariant={ButtonStyleVariant.STANDARD}
             icon={<SvgIconDelete />}
             text={LL.openidAllow.controls.cancel()}
             disabled={!paramsValid}
-            onClick={() => handleSubmit(false)}
+            loading={cancelLoading}
+            onClick={() => {
+              setCancelLoading(true);
+              handleSubmit(false);
+            }}
           />
         </div>
       </div>

diff --git a/web/src/pages/auth/Login/Login.tsx b/web/src/pages/auth/Login/Login.tsx
@@ -9,10 +9,11 @@ import * as yup from 'yup';
 
 import { useI18nContext } from '../../../i18n/i18n-react';
 import { FormInput } from '../../../shared/components/Form/FormInput/FormInput';
-import Button, {
+import { Button } from '../../../shared/components/layout/Button/Button';
+import {
   ButtonSize,
   ButtonStyleVariant,
-} from '../../../shared/components/layout/Button/Button';
+} from '../../../shared/components/layout/Button/types';
 import { useAuthStore } from '../../../shared/hooks/store/useAuthStore';
 import useApi from '../../../shared/hooks/useApi';
 import { MutationKeys } from '../../../shared/mutations';
@@ -107,7 +108,7 @@ export const Login = () => {
         <Button
           type="submit"
           loading={loginMutation.isLoading}
-          size={ButtonSize.BIG}
+          size={ButtonSize.LARGE}
           styleVariant={ButtonStyleVariant.PRIMARY}
           text={LL.form.login()}
           data-testid="login-form-submit"

diff --git a/web/src/pages/auth/MFARoute/MFARecovery/MFARecovery.tsx b/web/src/pages/auth/MFARoute/MFARecovery/MFARecovery.tsx
@@ -8,10 +8,11 @@ import { shallow } from 'zustand/shallow';
 
 import { useI18nContext } from '../../../../i18n/i18n-react';
 import { FormInput } from '../../../../shared/components/Form/FormInput/FormInput';
-import Button, {
+import { Button } from '../../../../shared/components/layout/Button/Button';
+import {
   ButtonSize,
   ButtonStyleVariant,
-} from '../../../../shared/components/layout/Button/Button';
+} from '../../../../shared/components/layout/Button/types';
 import { useAuthStore } from '../../../../shared/hooks/store/useAuthStore';
 import useApi from '../../../../shared/hooks/useApi';
 import { useToaster } from '../../../../shared/hooks/useToaster';
@@ -78,7 +79,7 @@ export const MFARecovery = () => {
         />
         <Button
           type="submit"
-          size={ButtonSize.BIG}
+          size={ButtonSize.LARGE}
           styleVariant={ButtonStyleVariant.PRIMARY}
           text={LL.loginPage.mfa.recoveryCode.form.controls.submit()}
           loading={isLoading}
@@ -89,22 +90,22 @@ export const MFARecovery = () => {
         {totpAvailable && (
           <Button
             text={LL.loginPage.mfa.controls.useAuthenticator()}
-            size={ButtonSize.BIG}
+            size={ButtonSize.LARGE}
             onClick={() => navigate('../totp')}
           />
         )}
         {webauthnAvailable && (
           <Button
             text={LL.loginPage.mfa.controls.useWebauthn()}
-            size={ButtonSize.BIG}
+            size={ButtonSize.LARGE}
             styleVariant={ButtonStyleVariant.LINK}
             onClick={() => navigate('../webauthn')}
           />
         )}
         {web3Available && (
           <Button
             text={LL.loginPage.mfa.controls.useWallet()}
-            size={ButtonSize.BIG}
+            size={ButtonSize.LARGE}
             styleVariant={ButtonStyleVariant.LINK}
             onClick={() => navigate('../web3')}
           />

diff --git a/web/src/pages/auth/MFARoute/MFATOTPAuth/MFATOTPAuth.tsx b/web/src/pages/auth/MFARoute/MFATOTPAuth/MFATOTPAuth.tsx
@@ -8,10 +8,11 @@ import { shallow } from 'zustand/shallow';
 
 import { useI18nContext } from '../../../../i18n/i18n-react';
 import { FormInput } from '../../../../shared/components/Form/FormInput/FormInput';
-import Button, {
+import { Button } from '../../../../shared/components/layout/Button/Button';
+import {
   ButtonSize,
   ButtonStyleVariant,
-} from '../../../../shared/components/layout/Button/Button';
+} from '../../../../shared/components/layout/Button/types';
 import { useAuthStore } from '../../../../shared/hooks/store/useAuthStore';
 import useApi from '../../../../shared/hooks/useApi';
 import { MutationKeys } from '../../../../shared/mutations';
@@ -87,7 +88,7 @@ export const MFATOTPAuth = () => {
         />
         <Button
           text={LL.loginPage.mfa.totp.form.controls.submit()}
-          size={ButtonSize.BIG}
+          size={ButtonSize.LARGE}
           styleVariant={ButtonStyleVariant.PRIMARY}
           loading={isLoading}
           type="submit"
@@ -98,22 +99,22 @@ export const MFATOTPAuth = () => {
         {webauthnAvailable && (
           <Button
             text={LL.loginPage.mfa.controls.useWebauthn()}
-            size={ButtonSize.BIG}
+            size={ButtonSize.LARGE}
             styleVariant={ButtonStyleVariant.LINK}
             onClick={() => navigate('../webauthn')}
           />
         )}
         {web3Available && (
           <Button
             text={LL.loginPage.mfa.controls.useWallet()}
-            size={ButtonSize.BIG}
+            size={ButtonSize.LARGE}
             styleVariant={ButtonStyleVariant.LINK}
             onClick={() => navigate('../web3')}
           />
         )}
         <Button
           text={LL.loginPage.mfa.controls.useRecoveryCode()}
-          size={ButtonSize.BIG}
+          size={ButtonSize.LARGE}
           styleVariant={ButtonStyleVariant.LINK}
           onClick={() => navigate('../recovery')}
         />

diff --git a/web/src/pages/auth/MFARoute/MFAWeb3/MFAWeb3.tsx b/web/src/pages/auth/MFARoute/MFAWeb3/MFAWeb3.tsx
@@ -5,10 +5,11 @@ import { useAccount, useSignTypedData } from 'wagmi';
 import { shallow } from 'zustand/shallow';
 
 import { useI18nContext } from '../../../../i18n/i18n-react';
-import Button, {
+import { Button } from '../../../../shared/components/layout/Button/Button';
+import {
   ButtonSize,
   ButtonStyleVariant,
-} from '../../../../shared/components/layout/Button/Button';
+} from '../../../../shared/components/layout/Button/types';
 import { useAuthStore } from '../../../../shared/hooks/store/useAuthStore';
 import { useModalStore } from '../../../../shared/hooks/store/useModalStore';
 import useApi from '../../../../shared/hooks/useApi';
@@ -98,7 +99,7 @@ export const MFAWeb3 = () => {
       <Button
         text={LL.loginPage.mfa.wallet.controls.submit()}
         styleVariant={ButtonStyleVariant.PRIMARY}
-        size={ButtonSize.BIG}
+        size={ButtonSize.LARGE}
         loading={finishLoading || startLoading || isConnecting || isSigning}
         onClick={() => {
           if (!isConnected) {
@@ -115,20 +116,20 @@ export const MFAWeb3 = () => {
         {totpAvailable && (
           <Button
             text={LL.loginPage.mfa.controls.useAuthenticator()}
-            size={ButtonSize.BIG}
+            size={ButtonSize.LARGE}
             onClick={() => navigate('../totp')}
           />
         )}
         {webauthnAvailable && (
           <Button
             text={LL.loginPage.mfa.controls.useWebauthn()}
-            size={ButtonSize.BIG}
+            size={ButtonSize.LARGE}
             onClick={() => navigate('../webauthn')}
           />
         )}
         <Button
           text={LL.loginPage.mfa.controls.useRecoveryCode()}
-          size={ButtonSize.BIG}
+          size={ButtonSize.LARGE}
           styleVariant={ButtonStyleVariant.LINK}
           onClick={() => navigate('../recovery')}
         />

diff --git a/web/src/pages/auth/MFARoute/MFAWebAuthN/MFAWebAuthN.tsx b/web/src/pages/auth/MFARoute/MFAWebAuthN/MFAWebAuthN.tsx
@@ -5,10 +5,11 @@ import { useNavigate } from 'react-router';
 import { shallow } from 'zustand/shallow';
 
 import { useI18nContext } from '../../../../i18n/i18n-react';
-import Button, {
+import { Button } from '../../../../shared/components/layout/Button/Button';
+import {
   ButtonSize,
   ButtonStyleVariant,
-} from '../../../../shared/components/layout/Button/Button';
+} from '../../../../shared/components/layout/Button/types';
 import { useAuthStore } from '../../../../shared/hooks/store/useAuthStore';
 import useApi from '../../../../shared/hooks/useApi';
 import { useToaster } from '../../../../shared/hooks/useToaster';
@@ -78,28 +79,28 @@ export const MFAWebAuthN = () => {
         text={LL.loginPage.mfa.webauthn.controls.submit()}
         loading={mfaStartLoading || mfaFinishLoading || awaitingKey}
         onClick={() => mfaStart()}
-        size={ButtonSize.BIG}
+        size={ButtonSize.LARGE}
         styleVariant={ButtonStyleVariant.PRIMARY}
       />
       <nav>
         <span>or</span>
         {totpAvailable && (
           <Button
             text={LL.loginPage.mfa.controls.useAuthenticator()}
-            size={ButtonSize.BIG}
+            size={ButtonSize.LARGE}
             onClick={() => navigate('../totp')}
           />
         )}
         {web3Available && (
           <Button
             text={LL.loginPage.mfa.controls.useWallet()}
-            size={ButtonSize.BIG}
+            size={ButtonSize.LARGE}
             onClick={() => navigate('../web3')}
           />
         )}
         <Button
           text={LL.loginPage.mfa.controls.useRecoveryCode()}
-          size={ButtonSize.BIG}
+          size={ButtonSize.LARGE}
           styleVariant={ButtonStyleVariant.LINK}
           onClick={() => navigate('../recovery')}
         />

diff --git a/web/src/pages/network/NetworkControls/NetworkControls.tsx b/web/src/pages/network/NetworkControls/NetworkControls.tsx
@@ -6,10 +6,11 @@ import { useBreakpoint } from 'use-breakpoint';
 import { shallow } from 'zustand/shallow';
 
 import { useI18nContext } from '../../../i18n/i18n-react';
-import Button, {
+import { Button } from '../../../shared/components/layout/Button/Button';
+import {
   ButtonSize,
   ButtonStyleVariant,
-} from '../../../shared/components/layout/Button/Button';
+} from '../../../shared/components/layout/Button/types';
 import { Select, SelectOption } from '../../../shared/components/layout/Select/Select';
 import { IconCheckmarkWhite } from '../../../shared/components/svg';
 import { deviceBreakpoints } from '../../../shared/constants';
@@ -78,7 +79,7 @@ export const NetworkControls = () => {
         className="submit"
         text={LL.networkConfiguration.form.controls.submit()}
         size={ButtonSize.SMALL}
-        styleVariant={ButtonStyleVariant.CONFIRM_SUCCESS}
+        styleVariant={ButtonStyleVariant.SAVE}
         icon={<IconCheckmarkWhite />}
         loading={loading}
         onClick={() => save.next()}

diff --git a/web/src/pages/openid/OpenidClientsListPage/OpenidClientsListPage.tsx b/web/src/pages/openid/OpenidClientsListPage/OpenidClientsListPage.tsx
@@ -7,10 +7,11 @@ import { useEffect, useMemo, useState } from 'react';
 import { useBreakpoint } from 'use-breakpoint';
 
 import { useI18nContext } from '../../../i18n/i18n-react';
-import Button, {
+import { Button } from '../../../shared/components/layout/Button/Button';
+import {
   ButtonSize,
   ButtonStyleVariant,
-} from '../../../shared/components/layout/Button/Button';
+} from '../../../shared/components/layout/Button/types';
 import ConfirmModal, {
   ConfirmModalType,
 } from '../../../shared/components/layout/ConfirmModal/ConfirmModal';
@@ -337,7 +338,11 @@ export const OpenidClientsListPage = () => {
             right: 15,
           }}
           onDefaultRowClick={(client) =>
-            setOpenIdClientModalState({ visible: true, client, viewMode: true })
+            setOpenIdClientModalState({
+              visible: true,
+              client,
+              viewMode: true,
+            })
           }
         />
       )}

diff --git a/web/src/pages/openid/modals/OpenIdClientModal/OpenIdClientModalForm.tsx b/web/src/pages/openid/modals/OpenIdClientModal/OpenIdClientModalForm.tsx
@@ -14,10 +14,11 @@ import {
   ActionButton,
   ActionButtonVariant,
 } from '../../../../shared/components/layout/ActionButton/ActionButton';
-import Button, {
+import { Button } from '../../../../shared/components/layout/Button/Button';
+import {
   ButtonSize,
   ButtonStyleVariant,
-} from '../../../../shared/components/layout/Button/Button';
+} from '../../../../shared/components/layout/Button/types';
 import { ExpandableCard } from '../../../../shared/components/layout/ExpandableCard/ExpandableCard';
 import { useModalStore } from '../../../../shared/hooks/store/useModalStore';
 import useApi from '../../../../shared/hooks/useApi';
@@ -188,7 +189,7 @@ export const OpenIdClientModalForm = () => {
         {!modalState.viewMode && (
           <Button
             styleVariant={ButtonStyleVariant.PRIMARY}
-            size={ButtonSize.BIG}
+            size={ButtonSize.LARGE}
             text={LL.openidOverview.modals.openidClientModal.form.controls.addUrl()}
             onClick={() => append({ url: '' })}
           />
@@ -332,7 +333,7 @@ export const OpenIdClientModalForm = () => {
         <Button
           text={modalState.viewMode ? LL.form.close() : LL.form.cancel()}
           styleVariant={ButtonStyleVariant.STANDARD}
-          size={ButtonSize.BIG}
+          size={ButtonSize.LARGE}
           onClick={() =>
             setModalState({
               visible: false,
@@ -343,7 +344,7 @@ export const OpenIdClientModalForm = () => {
         />
         {!modalState.viewMode && (
           <Button
-            size={ButtonSize.BIG}
+            size={ButtonSize.LARGE}
             styleVariant={ButtonStyleVariant.PRIMARY}
             text={LL.form.submit()}
             type="submit"

diff --git a/web/src/pages/overview/OverviewHeader/OverviewHeader.tsx b/web/src/pages/overview/OverviewHeader/OverviewHeader.tsx
@@ -5,9 +5,8 @@ import { useBreakpoint } from 'use-breakpoint';
 import { shallow } from 'zustand/shallow';
 
 import { useI18nContext } from '../../../i18n/i18n-react';
-import Button, {
-  ButtonStyleVariant,
-} from '../../../shared/components/layout/Button/Button';
+import { Button } from '../../../shared/components/layout/Button/Button';
+import { ButtonStyleVariant } from '../../../shared/components/layout/Button/types';
 import { GatewaysStatus } from '../../../shared/components/network/GatewaysStatus/GatewaysStatus';
 import IconEditNetwork from '../../../shared/components/svg/IconEditNetwork';
 import { deviceBreakpoints } from '../../../shared/constants';

diff --git a/web/src/pages/settings/BrandingCard/BrandingCard.tsx b/web/src/pages/settings/BrandingCard/BrandingCard.tsx
@@ -10,10 +10,11 @@ import * as yup from 'yup';
 
 import { useI18nContext } from '../../../i18n/i18n-react';
 import { FormInput } from '../../../shared/components/Form/FormInput/FormInput';
-import Button, {
+import { Button } from '../../../shared/components/layout/Button/Button';
+import {
   ButtonSize,
   ButtonStyleVariant,
-} from '../../../shared/components/layout/Button/Button';
+} from '../../../shared/components/layout/Button/types';
 import { Card } from '../../../shared/components/layout/Card/Card';
 import { Helper } from '../../../shared/components/layout/Helper/Helper';
 import { IconCheckmarkWhite } from '../../../shared/components/svg';
@@ -177,7 +178,7 @@ export const BrandingCard = () => {
               }
               icon={<IconCheckmarkWhite />}
               size={ButtonSize.SMALL}
-              styleVariant={ButtonStyleVariant.CONFIRM_SUCCESS}
+              styleVariant={ButtonStyleVariant.SAVE}
               loading={isLoading}
               type="submit"
             />