feat(client): add confirm delete account dialog

Jozwiaczek · Jul 30, 2021 · eff4725 · eff4725
1 parent 8d874a5
commit eff4725
Show file tree

Hide file tree

Showing 14 changed files with 235 additions and 185 deletions.
diff --git a/.prettierignore b/.prettierignore
@@ -7,3 +7,4 @@ node_modules/
 /coverage
 _templates/
 .eslintcache
+coverage
diff --git a/packages/client/src/elements/Dialog/Dialog.styled.ts b/packages/client/src/elements/Dialog/Dialog.styled.ts
@@ -43,6 +43,7 @@ export const Wrapper = styled.div`
   position: fixed;
   top: 0;
   width: 100%;
+  padding: 20px;
   z-index: 9999;
 `;
 

diff --git a/packages/client/src/elements/buttons/Button/Button.styled.ts b/packages/client/src/elements/buttons/Button/Button.styled.ts
@@ -1,12 +1,9 @@
 import styled, { css } from 'styled-components';
 
 import { ThemeType } from '../../../theme/Theme';
+import hexToRgba from '../../../utils/hexToRgba';
 import { ButtonProps, HelperStyledFunction } from './Button.types';
 
-export const IconContainer = styled.div`
-  margin-left: 8px;
-`;
-
 const getFontColor = ({
   colorVariant,
   palette: {
@@ -50,68 +47,76 @@ const getBaseColor = ({
 };
 
 export const StyledButton = styled.button<ButtonProps>(
-  ({ colorVariant, fullWidth, margin, theme: { palette, sizes } }) => css`
-    position: relative;
-    overflow: hidden;
+  ({ colorVariant, fullWidth, margin, theme: { palette, sizes, name } }) => {
+    const disabledBgColor = hexToRgba(
+      getBaseColor({ colorVariant, palette }),
+      name === 'dark' ? 0.15 : 0.5,
+    );
 
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    border-radius: ${sizes.borderRadius};
-    font-size: 16px;
-    background-color: ${getBaseColor({ colorVariant, palette })};
-    color: ${getFontColor({ colorVariant, palette })};
-    padding: 21px 14px;
-    ${margin ? `margin: ${margin}` : ''};
-    border: none;
-    min-width: 100px;
-    cursor: pointer;
-    line-height: 16px;
-    outline: none;
-    box-shadow: ${palette.boxShadow.default};
-    transition: box-shadow 150ms ease-in-out;
+    return css`
+      position: relative;
+      overflow: hidden;
 
-    ${fullWidth ? 'width: 100%' : ''};
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      border-radius: ${sizes.borderRadius};
+      font-size: 16px;
+      background-color: ${getBaseColor({ colorVariant, palette })};
+      color: ${getFontColor({ colorVariant, palette })};
+      padding: 21px 14px;
+      ${margin ? `margin: ${margin}` : ''};
+      border: none;
+      min-width: 100px;
+      cursor: pointer;
+      line-height: 16px;
+      outline: none;
+      box-shadow: ${palette.boxShadow.default};
+      transition: box-shadow 150ms ease-in-out;
 
-    svg {
-      transition: transform 150ms ease-in-out;
-    }
+      ${fullWidth ? 'width: 100%' : ''};
 
-    :hover {
-      transition: box-shadow 150ms ease-in-out;
-      box-shadow: ${palette.boxShadow.big};
       svg {
         transition: transform 150ms ease-in-out;
-        transform: translateX(3px);
+        margin-left: ${fullWidth ? '16px' : '8px'};
       }
-    }
-
-    :focus-visible {
-      transition: box-shadow 150ms ease-in-out;
-      box-shadow: 0 0 0 3px
-        ${colorVariant === ThemeType.light ? palette.primary.dark : palette.primary.light};
-    }
-
-    :disabled {
-      transition: none;
-      background-color: ${palette.background.disabled};
-      color: ${palette.text.disabled};
-      cursor: not-allowed;
-      pointer-events: all !important;
 
-      :hover,
-      :active {
-        box-shadow: ${palette.boxShadow.default};
-        background-color: ${palette.background.disabled};
+      :hover {
+        transition: box-shadow 150ms ease-in-out;
+        box-shadow: ${palette.boxShadow.big};
         svg {
-          transform: none;
+          transition: transform 150ms ease-in-out;
+          transform: translateX(3px);
         }
       }
 
-      :active::after {
-        opacity: 1;
-        transform: none;
+      :focus-visible {
+        transition: box-shadow 150ms ease-in-out;
+        box-shadow: 0 0 0 3px
+          ${colorVariant === ThemeType.light ? palette.primary.dark : palette.primary.light};
       }
-    }
-  `,
+
+      :disabled {
+        transition: none;
+        background: ${disabledBgColor};
+        color: ${palette.text.disabled};
+        cursor: not-allowed;
+        pointer-events: all !important;
+
+        :hover,
+        :active {
+          box-shadow: ${palette.boxShadow.default};
+          background: ${disabledBgColor};
+          svg {
+            transform: none;
+          }
+        }
+
+        :active::after {
+          opacity: 1;
+          transform: none;
+        }
+      }
+    `;
+  },
 );
diff --git a/packages/client/src/elements/buttons/Button/index.tsx b/packages/client/src/elements/buttons/Button/index.tsx
@@ -6,7 +6,7 @@ import { ThemeType } from '../../../theme/Theme';
 import { RippleEffect } from '../../animations';
 import Spinner from '../../animations/Spinner';
 import Link from '../../Link';
-import { IconContainer, StyledButton } from './Button.styled';
+import { StyledButton } from './Button.styled';
 import { ButtonProps } from './Button.types';
 
 const Button = ({
@@ -33,11 +33,7 @@ const Button = ({
     >
       {loading && <Spinner margin="0 8px 0 0" />}
       {t(label as never) || children}
-      {withArrow && (
-        <IconContainer>
-          <ArrowIcon />
-        </IconContainer>
-      )}
+      {withArrow && <ArrowIcon />}
       {!loading && !disabled && <RippleEffect />}
     </StyledButton>
   );

diff --git a/packages/client/src/elements/buttons/IconButton/IconButton.styled.ts b/packages/client/src/elements/buttons/IconButton/IconButton.styled.ts
@@ -26,6 +26,10 @@ export const StyledButton = styled.button<StyledButtonProps>(
     width: ${size !== undefined ? `${size}px` : 'auto'};
     height: ${size !== undefined ? `${size}px` : 'auto'};
 
+    svg {
+      margin-left: 0;
+    }
+
     ${RippleContainer} {
       span {
         background: ${getCssColor({ color, theme })};

diff --git a/...ages/client/src/elements/inputs/TextInput/PasswordIconButton/PasswordIconButton.styled.ts b/...ages/client/src/elements/inputs/TextInput/PasswordIconButton/PasswordIconButton.styled.ts
@@ -1,7 +1,5 @@
 import styled, { css } from 'styled-components';
 
-import { getCssColor } from '../../../../utils';
-import hexToRgba from '../../../../utils/hexToRgba';
 import IconButton from '../../../buttons/IconButton';
 
 const StyledIconButton = styled(IconButton)(