Refacto mixins.flex related code, fix UI issue (#322)

onbloc · Dec 30, 2023 · da6257d · da6257d
1 parent 754745c
commit da6257d
Show file tree

Hide file tree

Showing 143 changed files with 309 additions and 416 deletions.
diff --git a/packages/adena-extension/src/components/atoms/blur-screen/index.tsx b/packages/adena-extension/src/components/atoms/blur-screen/index.tsx
@@ -22,7 +22,7 @@ export const BlurScreen = ({ hasText, text }: BlurScreenProps): JSX.Element => {
 };
 
 const Wrapper = styled.div<{ hasText?: boolean }>`
-  ${mixins.flex('column', 'center', 'center')};
+  ${mixins.flex()};
   ${mixins.positionCenter()};
   gap: ${({ hasText }): false | '21px' | undefined => hasText && '21px'};
   background: url(${blurBg}) no-repeat 100% 100% / 100% 100%;

diff --git a/packages/adena-extension/src/components/atoms/button/index.tsx b/packages/adena-extension/src/components/atoms/button/index.tsx
@@ -100,7 +100,7 @@ export const Button = (props: ButtonProps): JSX.Element => {
 };
 
 const ButtonWrapper = styled.button<ButtonProps>`
-  ${mixins.flex('row', 'center', 'center')};
+  ${mixins.flex({ direction: 'row' })};
   width: ${({ width, fullWidth }): string => {
     if (width) return typeof width === 'number' ? `${width}px` : width;
     if (fullWidth) return '100%';

diff --git a/packages/adena-extension/src/components/atoms/common-full-content-layout/index.ts b/packages/adena-extension/src/components/atoms/common-full-content-layout/index.ts
@@ -1,9 +1,9 @@
+import mixins from '@styles/mixins';
 import styled from 'styled-components';
 
 export const CommonFullContentLayout = styled.section`
+  ${mixins.flex({ align: 'normal', justify: 'normal' })};
   position: relative;
-  display: flex;
-  flex-direction: column;
   width: 100%;
   height: calc(100vh - 48px);
 `;
diff --git a/packages/adena-extension/src/components/atoms/copy-button/index.tsx b/packages/adena-extension/src/components/atoms/copy-button/index.tsx
@@ -6,7 +6,7 @@ import { Text, Button } from '@components/atoms';
 import mixins from '@styles/mixins';
 
 const CopyButton = styled(Button)<{ isClicked: boolean }>`
-  ${mixins.flex('row', 'center', 'center')};
+  ${mixins.flex({ direction: 'row' })};
   height: 25px;
   border-radius: 12.5px;
   padding: 0px 12px;

diff --git a/packages/adena-extension/src/components/atoms/copy-icon-button/copy-icon-button.styles.ts b/packages/adena-extension/src/components/atoms/copy-icon-button/copy-icon-button.styles.ts
@@ -1,3 +1,4 @@
+import mixins from '@styles/mixins';
 import { getTheme } from '@styles/theme';
 import styled from 'styled-components';
 
@@ -6,8 +7,7 @@ interface CopyButtonWrapperProps {
 }
 
 export const CopyButtonWrapper = styled.div<CopyButtonWrapperProps>`
-  display: inline-flex;
-  flex-direction: column;
+  ${mixins.flex({ align: 'normal', justify: 'normal' })};
   width: 16px;
   height: 16px;
   cursor: pointer;

diff --git a/packages/adena-extension/src/components/atoms/copy-tooltip/index.tsx b/packages/adena-extension/src/components/atoms/copy-tooltip/index.tsx
@@ -12,7 +12,7 @@ interface CopyTooltipProps {
 }
 
 const ToolTipInner = styled.div`
-  ${mixins.flex('row', 'center', 'center')};
+  ${mixins.flex({ direction: 'row' })};
   ${fonts.body2Reg};
   position: absolute;
   width: max-content;
@@ -35,7 +35,7 @@ const ToolTipInner = styled.div`
 `;
 
 const ToolTipWrap = styled.div`
-  ${mixins.flex('row', 'center', 'center')};
+  ${mixins.flex({ direction: 'row' })};
   position: relative;
   cursor: pointer;
   &:hover .tooltip,

diff --git a/.../adena-extension/src/components/atoms/custom-network-input/custom-network-input.styles.ts b/.../adena-extension/src/components/atoms/custom-network-input/custom-network-input.styles.ts
@@ -1,29 +1,26 @@
 import styled from 'styled-components';
 
 import { fonts, getTheme } from '@styles/theme';
+import mixins from '@styles/mixins';
 
 export const CustomNetworkInputWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
+  ${mixins.flex({ align: 'normal', justify: 'normal' })};
   width: 100%;
   height: 100%;
 
   .input-wrapper {
-    display: flex;
-    flex-direction: column;
+    ${mixins.flex({ align: 'normal', justify: 'normal' })};
     width: 100%;
 
     .input-box {
-      display: flex;
-      flex-direction: row;
+      ${mixins.flex({ direction: 'row', justify: 'normal' })};
       width: 100%;
       min-height: 48px;
       padding: 12px 16px;
       ${fonts.body2Reg};
       background-color: ${getTheme('neutral', '_9')};
       border: 1px solid ${getTheme('neutral', '_7')};
       border-radius: 30px;
-      align-items: center;
       margin-top: 12px;
 
       :first-child {

diff --git a/packages/adena-extension/src/components/atoms/full-button-right-icon/index.tsx b/packages/adena-extension/src/components/atoms/full-button-right-icon/index.tsx
@@ -69,7 +69,7 @@ const ButtonWrapper = styled.button<ButtonStyleProps>`
     margin-top: ${({ gap }): string | undefined => (typeof gap === 'number' ? gap + 'px' : gap)};
   }
   ${defaultIconStyle};
-  ${mixins.flex('row', 'center', 'space-between')};
+  ${mixins.flex({ direction: 'row', justify: 'space-between' })};
   width: 100%;
   height: 54px;
   padding: 0px 24px 0px 20px;

diff --git a/packages/adena-extension/src/components/atoms/highlight-number/highlight-number.styles.ts b/packages/adena-extension/src/components/atoms/highlight-number/highlight-number.styles.ts
@@ -1,3 +1,4 @@
+import mixins from '@styles/mixins';
 import { FontsType, fonts } from '@styles/theme';
 import styled, { FlattenSimpleInterpolation } from 'styled-components';
 
@@ -8,8 +9,7 @@ interface HighlightNumberWrapperProps {
 }
 
 export const HighlightNumberWrapper = styled.div<HighlightNumberWrapperProps>`
-  display: flex;
-  flex-direction: row;
+  ${mixins.flex({ direction: 'row', align: 'normal', justify: 'normal' })};
   width: fit-content;
   height: auto;
   vertical-align: top;

diff --git a/packages/adena-extension/src/components/atoms/list-box/index.tsx b/packages/adena-extension/src/components/atoms/list-box/index.tsx
@@ -71,7 +71,7 @@ export const ListBox = ({
 };
 
 const Wrapper = styled.div<ListBoxStyleProps>`
-  ${mixins.flex('row', 'center', 'center')};
+  ${mixins.flex({ direction: 'row' })};
   ${({ mode }): any => {
     if (mode === ListHierarchy.Default) return modeVariants.default;
     if (mode === ListHierarchy.Normal) return modeVariants.normal;

diff --git a/packages/adena-extension/src/components/atoms/loadings/round.tsx b/packages/adena-extension/src/components/atoms/loadings/round.tsx
@@ -12,7 +12,7 @@ interface RoundProps {
 }
 
 const RoundStyle = styled.div<RoundProps>`
-  ${({ children }): false | CSSProp => !!children && mixins.flex('row', 'center', 'center')};
+  ${({ children }): false | CSSProp => !!children && mixins.flex({ direction: 'row' })};
   width: ${({ width }): string => (width ? width : '100%')};
   height: ${({ height }): string | undefined => height && height};
   background-color: ${({ theme, bgColor }): string => (bgColor ? bgColor : theme.neutral._5)};

diff --git a/packages/adena-extension/src/components/atoms/loadings/spinner.tsx b/packages/adena-extension/src/components/atoms/loadings/spinner.tsx
@@ -14,7 +14,7 @@ const spinAnimation = keyframes`
 `;
 
 const SpinRing = styled.div`
-  ${mixins.flex('row', 'center', 'center')};
+  ${mixins.flex({ direction: 'row' })};
   position: relative;
   width: 70px;
   height: 70px;

diff --git a/packages/adena-extension/src/components/atoms/search-input/search-input.styles.ts b/packages/adena-extension/src/components/atoms/search-input/search-input.styles.ts
@@ -1,15 +1,13 @@
+import mixins from '@styles/mixins';
 import { fonts, getTheme } from '@styles/theme';
 import styled from 'styled-components';
 
 export const SearchInputWrapper = styled.div`
-  display: flex;
-  flex-direction: row;
+  ${mixins.flex({ direction: 'row', justify: 'flex-start' })};
   width: 100%;
   height: 100%;
   max-height: 48px;
   padding: 12px 16px;
-  align-items: center;
-  justify-content: flex-start;
   border-radius: 30px;
   border: 1px solid ${getTheme('neutral', '_7')};
 

diff --git a/packages/adena-extension/src/components/atoms/spinner/spinner.styles.ts b/packages/adena-extension/src/components/atoms/spinner/spinner.styles.ts
@@ -1,8 +1,8 @@
+import mixins from '@styles/mixins';
 import styled from 'styled-components';
 
 export const SpinnerWrapper = styled.div<{ size: string | number }>`
-  display: flex;
-  flex-direction: column;
+  ${mixins.flex({ align: 'normal', justify: 'normal' })};
   width: ${({ size }): string => (typeof size === 'number' ? `${size}px` : size)};
   height: ${({ size }): string => (typeof size === 'number' ? `${size}px` : size)};
 

diff --git a/packages/adena-extension/src/components/atoms/static-multi-tooltip/index.tsx b/packages/adena-extension/src/components/atoms/static-multi-tooltip/index.tsx
@@ -18,7 +18,7 @@ interface StaticTooltipProps extends TooltipProps {
 }
 
 const Tooltip = styled.div<TooltipProps>`
-  ${mixins.flex('row', 'center', 'center')};
+  ${mixins.flex()};
   width: 171px;
   height: auto;
   visibility: hidden;
@@ -29,8 +29,6 @@ const Tooltip = styled.div<TooltipProps>`
   right: 0px;
   top: ${({ posTop }): string => (posTop ? posTop : '20px')};
   transform: scale(0.6);
-  display: flex;
-  flex-direction: column;
 
   & > * {
     width: 100%;

diff --git a/packages/adena-extension/src/components/atoms/status-dot/index.tsx b/packages/adena-extension/src/components/atoms/status-dot/index.tsx
@@ -25,7 +25,7 @@ const Dot = styled.div<{ status: boolean }>`
 `;
 
 const Tooltip = styled.div`
-  ${mixins.flex('row', 'center', 'center')};
+  ${mixins.flex({ direction: 'row' })};
   width: max-content;
   height: 25px;
   visibility: hidden;

diff --git a/packages/adena-extension/src/components/atoms/sub-header/sub-header.styles.ts b/packages/adena-extension/src/components/atoms/sub-header/sub-header.styles.ts
@@ -1,13 +1,11 @@
+import mixins from '@styles/mixins';
 import { fonts } from '@styles/theme';
 import styled from 'styled-components';
 
 export const SubHeaderWrapper = styled.div`
+  ${mixins.flex({ direction: 'row' })};
   position: relative;
-  display: flex;
-  flex-direction: row;
   width: 100%;
-  justify-content: center;
-  align-items: center;
 
   .icon-wrapper {
     position: absolute;

diff --git a/packages/adena-extension/src/components/atoms/tab-container/index.tsx b/packages/adena-extension/src/components/atoms/tab-container/index.tsx
@@ -21,7 +21,7 @@ export const TabContainer = ({ header, children }: Props): JSX.Element => {
 };
 
 const Container = styled.div`
-  ${mixins.flex('column', 'center', 'center')};
+  ${mixins.flex()};
   width: 100vw;
   height: 100vh;
   margin-top: -48px;
@@ -30,7 +30,7 @@ const Container = styled.div`
 
 const Wrapper = styled.div`
   position: relative;
-  ${mixins.flex('column', 'center', 'center')};
+  ${mixins.flex()};
   width: 360px;
   height: 540px;
   background-color: ${getTheme('neutral', '_8')};

diff --git a/packages/adena-extension/src/components/atoms/warning-box/index.tsx b/packages/adena-extension/src/components/atoms/warning-box/index.tsx
@@ -75,7 +75,7 @@ export const WarningBox = ({ type, margin, padding }: WarningBoxProps): JSX.Elem
 };
 
 const Wrapper = styled.div<WarningBoxStyleProps>`
-  ${mixins.flex('column', 'flex-start', 'space-between')};
+  ${mixins.flex({ align: 'flex-start', justify: 'space-between' })};
   width: 100%;
   padding: ${(props): CSSProperties['padding'] => props.padding ?? '14px 16px'};
   gap: 11px;

diff --git a/...on/src/components/molecules/approve-injection-loading/approve-injection-loading.styles.ts b/...on/src/components/molecules/approve-injection-loading/approve-injection-loading.styles.ts
@@ -1,14 +1,12 @@
 import styled from 'styled-components';
 
 import { fonts, getTheme } from '@styles/theme';
+import mixins from '@styles/mixins';
 
 export const ApproveInjectionLoadingWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
+  ${mixins.flex()};
   width: 100%;
   height: auto;
-  justify-content: center;
-  align-items: center;
   margin-top: 80px;
 
   .description {

diff --git a/...xtension/src/components/molecules/approve-ledger-loading/approve-ledger-loading.styles.ts b/...xtension/src/components/molecules/approve-ledger-loading/approve-ledger-loading.styles.ts
@@ -3,7 +3,7 @@ import styled from 'styled-components';
 import mixins from '@styles/mixins';
 
 export const ApproveLedgerLoadingWrapper = styled.div`
-  ${mixins.flex('column', 'center', 'flex-start')};
+  ${mixins.flex({ justify: 'flex-start' })};
   height: calc(100vh - 48px);
   padding: 50px 20px 24px;
   align-self: center;

diff --git a/packages/adena-extension/src/components/molecules/approve-loading/approve-loading.styles.ts b/packages/adena-extension/src/components/molecules/approve-loading/approve-loading.styles.ts
@@ -5,7 +5,7 @@ import mixins from '@styles/mixins';
 import { getTheme } from '@styles/theme';
 
 export const ApproveLoadingWrapper = styled.div`
-  ${mixins.flex('column', 'center', 'flex-start')};
+  ${mixins.flex({ justify: 'flex-start' })};
   padding: 35px 20px 0;
   .l-approve {
     margin-top: 51px;
@@ -14,15 +14,15 @@ export const ApproveLoadingWrapper = styled.div`
 `;
 
 export const ApproveLoadingSkeletonBox = styled(SkeletonBoxStyle)`
-  ${mixins.flex('column', 'flex-end', 'space-between')}
+  ${mixins.flex({ align: 'flex-end', justify: 'space-between' })}
   width: 80px;
   height: 80px;
   margin: 35px 0px 24px;
   border-radius: 8px;
 `;
 
 export const ApproveLoadingRoundedBox = styled.div`
-  ${mixins.flex('row', 'center', 'space-between')};
+  ${mixins.flex({ direction: 'row', justify: 'space-between' })};
   width: 100%;
   height: 41px;
   background-color: ${getTheme('neutral', '_9')};

diff --git a/...dena-extension/src/components/molecules/approve-transaction/approve-transaction.styles.ts b/...dena-extension/src/components/molecules/approve-transaction/approve-transaction.styles.ts
@@ -4,13 +4,13 @@ import mixins from '@styles/mixins';
 import { fonts, getTheme } from '@styles/theme';
 
 export const ApproveTransactionWrapper = styled.div<{ isErrorNetworkFee: boolean }>`
-  ${mixins.flex('column', 'center', 'flex-start')};
+  ${mixins.flex({ justify: 'flex-start' })};
   padding: 0 20px;
   margin-bottom: 96px;
   align-self: center;
 
   .row {
-    ${mixins.flex('row', 'center', 'center')};
+    ${mixins.flex({ direction: 'row' })};
     position: relative;
     padding: 10px 18px;
     justify-content: space-between;
@@ -59,7 +59,7 @@ export const ApproveTransactionWrapper = styled.div<{ isErrorNetworkFee: boolean
   }
 
   .domain-wrapper {
-    ${mixins.flex('row', 'center', 'center')};
+    ${mixins.flex({ direction: 'row' })};
     width: 100%;
     min-height: 41px;
     border-radius: 24px;
@@ -104,7 +104,7 @@ export const ApproveTransactionWrapper = styled.div<{ isErrorNetworkFee: boolean
   .transaction-data-wrapper {
     width: 100%;
     ${fonts.body1Reg};
-    ${mixins.flex('column', 'center', 'center')};
+    ${mixins.flex()};
 
     .visible-button {
       color: ${getTheme('neutral', 'a')};

diff --git a/packages/adena-extension/src/components/molecules/bottom-fixed-button-group/index.tsx b/packages/adena-extension/src/components/molecules/bottom-fixed-button-group/index.tsx
@@ -55,7 +55,7 @@ export const BottomFixedButtonGroup = ({
 };
 
 const ButtonWrap = styled.div<{ filled?: boolean }>`
-  ${mixins.flex('row', 'flex-start', 'center')};
+  ${mixins.flex({ direction: 'row', align: 'flex-start' })};
   position: fixed;
   left: 0px;
   width: 100%;

diff --git a/packages/adena-extension/src/components/molecules/bottom-fixed-button/index.tsx b/packages/adena-extension/src/components/molecules/bottom-fixed-button/index.tsx
@@ -30,7 +30,7 @@ export const BottomFixedButton = ({
 };
 
 const ButtonWrap = styled.div`
-  ${mixins.flex('row', 'center', 'center')};
+  ${mixins.flex({ direction: 'row' })};
   position: fixed;
   bottom: 0px;
   left: 0px;

diff --git a/packages/adena-extension/src/components/molecules/cancel-and-confirm-button/index.tsx b/packages/adena-extension/src/components/molecules/cancel-and-confirm-button/index.tsx
@@ -21,7 +21,7 @@ interface CancelAndConfirmLocation {
 
 const Wrapper = styled.div`
   margin-top: auto;
-  ${mixins.flex('row', 'center', 'space-between')};
+  ${mixins.flex({ direction: 'row', justify: 'space-between' })};
   width: 100%;
   gap: 10px;
 `;

diff --git a/packages/adena-extension/src/components/molecules/close-shadow-button/index.tsx b/packages/adena-extension/src/components/molecules/close-shadow-button/index.tsx
@@ -20,7 +20,7 @@ export const CloseShadowButton = ({ onClick }: Props): JSX.Element => {
 };
 
 const ButtonWrap = styled.div`
-  ${mixins.flex('row', 'center', 'center')};
+  ${mixins.flex({ direction: 'row' })};
   position: fixed;
   bottom: 0px;
   left: 0px;

diff --git a/packages/adena-extension/src/components/molecules/double-button/index.tsx b/packages/adena-extension/src/components/molecules/double-button/index.tsx
@@ -24,7 +24,7 @@ interface DoubleButtonProps extends WrapperStyleProps {
 }
 
 const Wrapper = styled.div<WrapperStyleProps>`
-  ${mixins.flex('row', 'center', 'space-between')};
+  ${mixins.flex({ direction: 'row', justify: 'space-between' })};
   width: 100%;
   gap: 10px;
   ${({ margin }): string | undefined => margin && `margin: ${margin}`};