Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Refactor css, components #321

Merged
merged 7 commits into from
Dec 27, 2023
Merged

Refactor css, components #321

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
9309800
refactor. Separate secure-textarea and improve attributes in SeedBox …
skqksh Dec 21, 2023
63acdb4
refactor. export private key screen
skqksh Dec 21, 2023
119d2b0
refactor. remove unused code
skqksh Dec 21, 2023
d03c09c
refactor. simplify css
skqksh Dec 21, 2023
2ef6bc0
refactor. change enum to type for button hierarchy attribute
skqksh Dec 21, 2023
1890f53
refactor. use theme from provider. seperate font and mixins from theme
skqksh Dec 24, 2023
0fde8af
fix. tx history list item font size
skqksh Dec 26, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 5 additions & 3 deletions packages/adena-extension/src/components/atoms/blur-screen/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
import React from 'react';
import styled, { CSSProp } from 'styled-components';
import styled from 'styled-components';

import { Text, Icon } from '@components/atoms';
import blurBg from '@assets/blur-bg.svg';
import mixins from '@styles/mixins';

interface BlurScreenProps {
hasText?: boolean;
Expand All @@ -20,8 +22,8 @@ export const BlurScreen = ({ hasText, text }: BlurScreenProps): JSX.Element => {
};

const Wrapper = styled.div<{ hasText?: boolean }>`
${({ theme }): CSSProp => theme.mixins.flexbox('column', 'center', 'center')};
${({ theme }): CSSProp => theme.mixins.positionCenter()};
${mixins.flex('column', 'center', 'center')};
${mixins.positionCenter()};
gap: ${({ hasText }): false | '21px' | undefined => hasText && '21px'};
background: url(${blurBg}) no-repeat 100% 100% / 100% 100%;
width: calc(100% - 12px);
Expand Down
74 changes: 34 additions & 40 deletions packages/adena-extension/src/components/atoms/button/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,78 +1,72 @@
import styled, { css } from 'styled-components';
import React, { CSSProperties } from 'react';
import mixins from '@styles/mixins';
import theme from '@styles/theme';

type Without<T, U> = { [P in Exclude<keyof T, keyof U>]?: never };
type XOR<T, U> = T | U extends Record<string, unknown>
? (Without<T, U> & U) | (Without<U, T> & T)
: T | U;

export enum ButtonHierarchy {
Normal = 'normal',
Primary = 'Primary',
Ghost = 'Ghost',
Dark = 'Dark',
Danger = 'Danger',
Custom = 'Custom',
}
type ButtonHierarchy = 'normal' | 'primary' | 'ghost' | 'dark' | 'danger' | 'custom';

export const modeVariants = {
normal: css`
background: ${({ theme }): string => theme.color.neutral[6]};
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Isn't this theme static data?
Even if you have one current theme, it seems like a good idea to use the theme injected by the theme provider.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

sure

background: ${theme.color.neutral[6]};
&:hover {
background: ${({ theme }): string => theme.color.neutral[11]};
background: ${theme.color.neutral[11]};
}
/* &:disabled {
background: ${({ theme }): string => theme.color.primary[6]};
color: ${({ theme }): string => theme.color.neutral[4]};
background: ${theme.color.primary[6]};
color: ${theme.color.neutral[4]};
} */
`,
primary: css`
background: ${({ theme }): string => theme.color.primary[3]};
background: ${theme.color.primary[3]};
&:hover {
background: ${({ theme }): string => theme.color.primary[4]};
background: ${theme.color.primary[4]};
}
&:disabled {
background: ${({ theme }): string => theme.color.primary[6]};
color: ${({ theme }): string => theme.color.neutral[4]};
background: ${theme.color.primary[6]};
color: ${theme.color.neutral[4]};
}
`,
ghost: css`
background: ${({ theme }): string => theme.color.neutral[8]};
border: 1px solid ${({ theme }): string => theme.color.neutral[2]};
background: ${theme.color.neutral[8]};
border: 1px solid ${theme.color.neutral[2]};
&:hover {
background: ${({ theme }): string => theme.color.neutral[5]};
border: 1px solid ${({ theme }): string => theme.color.neutral[2]};
background: ${theme.color.neutral[5]};
border: 1px solid ${theme.color.neutral[2]};
}
&:disabled {
background: ${({ theme }): string => theme.color.neutral[6]};
border: 1px solid ${({ theme }): string => theme.color.neutral[3]};
color: ${({ theme }): string => theme.color.neutral[4]};
background: ${theme.color.neutral[6]};
border: 1px solid ${theme.color.neutral[3]};
color: ${theme.color.neutral[4]};
}
`,
dark: css`
background: ${({ theme }): string => theme.color.neutral[4]};
background: ${theme.color.neutral[4]};
&:hover {
background: ${({ theme }): string => theme.color.neutral[5]};
background: ${theme.color.neutral[5]};
}
&:disabled {
background: ${({ theme }): string => theme.color.neutral[5]};
color: ${({ theme }): string => theme.color.neutral[4]};
background: ${theme.color.neutral[5]};
color: ${theme.color.neutral[4]};
}
`,
danger: css`
background: ${({ theme }): string => theme.color.red[2]};
background: ${theme.color.red[2]};
&:hover {
background: ${({ theme }): string => theme.color.red[8]};
background: ${theme.color.red[8]};
}
/* &:disabled {
background: ${({ theme }): string => theme.color.neutral[5]};
color: ${({ theme }): string => theme.color.neutral[4]};
background: ${theme.color.neutral[5]};
color: ${theme.color.neutral[4]};
} */
`,
};

type ButtonProps = XOR<
export type ButtonProps = XOR<
{
fullWidth?: boolean;
height?: CSSProperties['height'];
Expand Down Expand Up @@ -106,7 +100,7 @@ export const Button = (props: ButtonProps): JSX.Element => {
};

const ButtonWrapper = styled.button<ButtonProps>`
${mixins.flexbox('row', 'center', 'center')};
${mixins.flex('row', 'center', 'center')};
width: ${({ width, fullWidth }): string => {
if (width) return typeof width === 'number' ? `${width}px` : width;
if (fullWidth) return '100%';
Expand All @@ -118,19 +112,19 @@ const ButtonWrapper = styled.button<ButtonProps>`
}};
margin: ${(props): any => props.margin};
${({ hierarchy, bgColor }): any => {
if (hierarchy === ButtonHierarchy.Primary) return modeVariants.primary;
if (hierarchy === ButtonHierarchy.Normal) return modeVariants.normal;
if (hierarchy === ButtonHierarchy.Ghost) return modeVariants.ghost;
if (hierarchy === ButtonHierarchy.Dark) return modeVariants.dark;
if (hierarchy === ButtonHierarchy.Danger) return modeVariants.danger;
if (hierarchy === ButtonHierarchy.Custom)
if (hierarchy === 'primary') return modeVariants.primary;
if (hierarchy === 'normal') return modeVariants.normal;
if (hierarchy === 'ghost') return modeVariants.ghost;
if (hierarchy === 'dark') return modeVariants.dark;
if (hierarchy === 'danger') return modeVariants.danger;
if (hierarchy === 'custom')
return css`
background-color: ${bgColor};
`;
}};
border-radius: ${({ radius }): string => (radius ? radius : '30px')};
transition: all 0.4s ease;
color: ${({ theme }): string => theme.color.neutral[0]};
color: ${theme.color.neutral[0]};
background-color: ${({ bgColor }): string | undefined => bgColor};
`;

Expand Down
7 changes: 4 additions & 3 deletions packages/adena-extension/src/components/atoms/copy-button/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,18 @@
import React, { useCallback, useEffect, useState } from 'react';
import styled, { CSSProp } from 'styled-components';
import styled from 'styled-components';

import theme from '@styles/theme';
import { Text, Button } from '@components/atoms';
import mixins from '@styles/mixins';

const CopyButton = styled(Button)<{ isClicked: boolean }>`
${({ theme }): CSSProp => theme.mixins.flexbox('row', 'center', 'center')};
${mixins.flex('row', 'center', 'center')};
height: 25px;
border-radius: 12.5px;
padding: 0px 12px;
transition: background-color 0.4s ease;
&:hover {
background-color: ${({ theme }): string => theme.color.neutral[11]};
background-color: ${theme.color.neutral[11]};
}
`;

Expand Down
3 changes: 2 additions & 1 deletion packages/adena-extension/src/components/atoms/copy-icon-button/copy-icon-button.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import theme from '@styles/theme';
import styled from 'styled-components';

interface CopyButtonWrapperProps {
Expand All @@ -21,7 +22,7 @@ export const CopyButtonWrapper = styled.div<CopyButtonWrapperProps>`

:hover svg {
path {
stroke: ${({ theme }): string => theme.color.neutral[0]};
stroke: ${theme.color.neutral[0]};
}
}
`;
12 changes: 7 additions & 5 deletions packages/adena-extension/src/components/atoms/copy-tooltip/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
import React, { useCallback, useEffect, useState } from 'react';
import styled, { CSSProp, FlattenSimpleInterpolation } from 'styled-components';
import styled from 'styled-components';
import { Text } from '@components/atoms';
import mixins from '@styles/mixins';
import theme, { fonts } from '@styles/theme';

interface CopyTooltipProps {
children: React.ReactNode;
Expand All @@ -10,15 +12,15 @@ interface CopyTooltipProps {
}

const ToolTipInner = styled.div`
${({ theme }): CSSProp => theme.mixins.flexbox('row', 'center', 'center')};
${({ theme }): FlattenSimpleInterpolation => theme.fonts.body2Reg};
${mixins.flex('row', 'center', 'center')};
${fonts.body2Reg};
position: absolute;
width: max-content;
height: 25px;
visibility: hidden;
z-index: 1;
padding: 0px 17px;
background-color: ${({ theme }): string => theme.color.neutral[8]};
background-color: ${theme.color.neutral[8]};
border-radius: 13px;
transform: scale(0.6);
cursor: default;
Expand All @@ -33,7 +35,7 @@ const ToolTipInner = styled.div`
`;

const ToolTipWrap = styled.div`
${({ theme }): CSSProp => theme.mixins.flexbox('row', 'center', 'center')};
${mixins.flex('row', 'center', 'center')};
position: relative;
cursor: pointer;
&:hover .tooltip,
Expand Down
16 changes: 9 additions & 7 deletions .../adena-extension/src/components/atoms/custom-network-input/custom-network-input.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
import styled, { FlattenSimpleInterpolation } from 'styled-components';
import styled from 'styled-components';

import theme, { fonts } from '@styles/theme';

export const CustomNetworkInputWrapper = styled.div`
display: flex;
Expand All @@ -17,9 +19,9 @@ export const CustomNetworkInputWrapper = styled.div`
width: 100%;
min-height: 48px;
padding: 12px 16px;
${({ theme }): FlattenSimpleInterpolation => theme.fonts.body2Reg};
background-color: ${({ theme }): string => theme.color.neutral[8]};
border: 1px solid ${({ theme }): string => theme.color.neutral[6]};
${fonts.body2Reg};
background-color: ${theme.color.neutral[8]};
border: 1px solid ${theme.color.neutral[6]};
border-radius: 30px;
align-items: center;
margin-top: 12px;
Expand All @@ -37,7 +39,7 @@ export const CustomNetworkInputWrapper = styled.div`
line-height: 25px;

::placeholder {
color: ${({ theme }): string => theme.color.neutral[9]};
color: ${theme.color.neutral[9]};
}
}
}
Expand All @@ -46,8 +48,8 @@ export const CustomNetworkInputWrapper = styled.div`
.error-message {
position: relative;
padding: 0 16px;
${({ theme }): FlattenSimpleInterpolation => theme.fonts.captionReg};
${fonts.captionReg};
height: 14px;
color: ${({ theme }): string => theme.color.red[2]};
color: ${theme.color.red[2]};
}
`;
12 changes: 7 additions & 5 deletions packages/adena-extension/src/components/atoms/default-input/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,22 @@
import styled, { FlattenSimpleInterpolation, css } from 'styled-components';
import styled, { css } from 'styled-components';

import theme, { fonts } from '@styles/theme';

interface InputProps {
error?: boolean;
margin?: string;
}

export const inputStyle = css`
${({ theme }): FlattenSimpleInterpolation => theme.fonts.body2Reg};
${fonts.body2Reg};
width: 100%;
height: 48px;
background-color: ${({ theme }): string => theme.color.neutral[8]};
color: ${({ theme }): string => theme.color.neutral[0]};
background-color: ${theme.color.neutral[8]};
color: ${theme.color.neutral[0]};
border-radius: 30px;
padding: 14px 16px;
::placeholder {
color: ${({ theme }): string => theme.color.neutral[9]};
color: ${theme.color.neutral[9]};
}
`;

Expand Down
11 changes: 6 additions & 5 deletions packages/adena-extension/src/components/atoms/full-button-right-icon/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
import React from 'react';
import styled, { CSSProp, css } from 'styled-components';
import styled, { css } from 'styled-components';

import { Text, Icon } from '@components/atoms';
import { FontsType } from '@styles/theme';
import theme, { FontsType } from '@styles/theme';
import mixins from '@styles/mixins';

export type ButtonMode = 'DEFAULT' | 'DANGER' | 'HOVER';
export type IconMode = 'ARROW' | 'WEBLINK';
Expand Down Expand Up @@ -72,17 +73,17 @@ const ButtonWrapper = styled.button<ButtonStyleProps>`
margin-top: ${({ gap }): string | undefined => (typeof gap === 'number' ? gap + 'px' : gap)};
}
${defaultIconStyle};
${({ theme }): CSSProp => theme.mixins.flexbox('row', 'center', 'space-between')};
${mixins.flex('row', 'center', 'space-between')};
width: 100%;
height: 54px;
padding: 0px 24px 0px 20px;
border-radius: 18px;
transition: all 0.3s ease;
background-color: ${({ theme }): string => theme.color.neutral[6]};
background-color: ${theme.color.neutral[6]};
color: ${({ theme, mode }): string =>
mode === 'DANGER' ? theme.color.red[2] : theme.color.neutral[0]};
&:hover {
background-color: ${({ theme }): string => theme.color.neutral[11]};
background-color: ${theme.color.neutral[11]};
${hoverIconStyle};
}
`;
1 change: 1 addition & 0 deletions packages/adena-extension/src/components/atoms/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,3 +24,4 @@ export * from './copy-button';
export * from './full-button-right-icon';
export * from './hamburger-menu-button';
export * from './skeleton-box';
export * from './secure-textarea';
17 changes: 10 additions & 7 deletions packages/adena-extension/src/components/atoms/list-box/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,8 @@
import React, { ReactElement } from 'react';
import styled, { css, CSSProp, CSSProperties } from 'styled-components';
import styled, { css, CSSProperties } from 'styled-components';

import mixins from '@styles/mixins';
import theme from '@styles/theme';

export enum ListHierarchy {
Default = 'default',
Expand All @@ -24,19 +27,19 @@ interface ListBoxProps extends ListBoxStyleProps {

const modeVariants = {
default: css`
background: ${({ theme }): string => theme.color.neutral[6]};
background: ${theme.color.neutral[6]};
&:hover {
background: ${({ theme }): string => theme.color.neutral[11]};
background: ${theme.color.neutral[11]};
}
`,
normal: css`
background: ${({ theme }): string => theme.color.neutral[8]};
background: ${theme.color.neutral[8]};
&:hover {
background: ${({ theme }): string => theme.color.neutral[6]};
background: ${theme.color.neutral[6]};
}
`,
static: css`
background: ${({ theme }): string => theme.color.neutral[6]};
background: ${theme.color.neutral[6]};
`,
};

Expand Down Expand Up @@ -68,7 +71,7 @@ export const ListBox = ({
};

const Wrapper = styled.div<ListBoxStyleProps>`
${({ theme }): CSSProp => theme.mixins.flexbox('row', 'center', 'center')};
${mixins.flex('row', 'center', 'center')};
${({ mode }): any => {
if (mode === ListHierarchy.Default) return modeVariants.default;
if (mode === ListHierarchy.Normal) return modeVariants.normal;
Expand Down
2 changes: 1 addition & 1 deletion packages/adena-extension/src/components/atoms/loadings/round.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ interface RoundProps {

const RoundStyle = styled.div<RoundProps>`
${({ children, theme }): false | CSSProp =>
!!children && theme.mixins.flexbox('row', 'center', 'center')};
!!children && theme.mixins.flex('row', 'center', 'center')};
width: ${({ width }): string => (width ? width : '100%')};
height: ${({ height }): string | undefined => height && height};
background-color: ${({ theme, bgColor }): string => (bgColor ? bgColor : theme.color.neutral[4])};
Expand Down
Loading