From ac2bb924fcb723e94382953a21aad346489a7cf0 Mon Sep 17 00:00:00 2001 From: nina992 <89770889+nina992@users.noreply.github.com> Date: Sat, 5 Aug 2023 16:40:37 +0300 Subject: [PATCH] chore(web): update hexadecimal colors (#618) Co-authored-by: nina992 --- web/src/beta/components/ListItem/index.tsx | 7 +++---- web/src/beta/components/PopoverMenuContent/index.tsx | 2 +- .../features/Editor/tabs/story/PageIndicator/index.tsx | 2 +- .../Editor/tabs/story/SidePanel/Action/index.tsx | 4 ++-- .../tabs/story/SidePanel/PageItemWrapper/index.tsx | 6 ++++-- .../features/Modals/WorkspaceCreationModal/index.tsx | 10 +++++----- 6 files changed, 16 insertions(+), 15 deletions(-) diff --git a/web/src/beta/components/ListItem/index.tsx b/web/src/beta/components/ListItem/index.tsx index 35e8ca50af..dc5a94bb1f 100644 --- a/web/src/beta/components/ListItem/index.tsx +++ b/web/src/beta/components/ListItem/index.tsx @@ -71,7 +71,7 @@ const Inner = styled.button<{ border?: boolean; isSelected?: boolean; clamp?: Cl width: 100%; min-height: 38px; align-items: center; - border: 1px solid ${({ border }) => (border ? "#383838" : "transparent")}; + border: 1px solid ${({ border, theme }) => (border ? theme.outline.weakest : "transparent")}; border-radius: ${({ clamp }) => clamp === "left" ? "0 6px 6px 0" : clamp === "right" ? "6px 0 0 6px" : "6px"}; box-sizing: border-box; @@ -79,9 +79,8 @@ const Inner = styled.button<{ border?: boolean; isSelected?: boolean; clamp?: Cl background: ${({ theme, isSelected }) => (isSelected ? theme.select.main : "inherit")}; transition: all 0.3s; - ${({ isSelected }) => isSelected && `background-color: #3B3CD0;`} :hover { - ${({ isSelected }) => !isSelected && `background-color: #232226;`} + ${({ isSelected, theme }) => !isSelected && `background-color:` + theme.bg[3]} } `; @@ -100,7 +99,7 @@ const Button = styled.button<{ clamp?: Clamp }>` transform: translateY(-50%); padding: 4px; margin-left: -1px; - color: #4a4a4a; + color: ${({ theme }) => theme.content.weak}; border-radius: ${({ clamp }) => clamp === "left" ? "0 6px 6px 0" : clamp === "right" ? "6px 0 0 6px" : "6px"}; diff --git a/web/src/beta/components/PopoverMenuContent/index.tsx b/web/src/beta/components/PopoverMenuContent/index.tsx index 350a45f312..22043eff87 100644 --- a/web/src/beta/components/PopoverMenuContent/index.tsx +++ b/web/src/beta/components/PopoverMenuContent/index.tsx @@ -67,7 +67,7 @@ const SRoot = styled.div>` border-radius: 2px; border: 1px solid ${({ theme }) => theme.bg[3]}; - background: #262626; + background: ${({ theme }) => theme.bg[1]}; box-shadow: 4px 4px 4px 0px rgba(0, 0, 0, 0.25); `; diff --git a/web/src/beta/features/Editor/tabs/story/PageIndicator/index.tsx b/web/src/beta/features/Editor/tabs/story/PageIndicator/index.tsx index 9a3684358d..1f5e5c6d44 100644 --- a/web/src/beta/features/Editor/tabs/story/PageIndicator/index.tsx +++ b/web/src/beta/features/Editor/tabs/story/PageIndicator/index.tsx @@ -42,7 +42,7 @@ const Wrapper = styled.div<{ widthPercentage: number }>` content: ""; position: absolute; inset: 0; - background-color: #3592ff; + background-color: ${({ theme }) => theme.select.main}; transition: width 0.2s ease-out; width: ${({ widthPercentage }) => widthPercentage}%; } diff --git a/web/src/beta/features/Editor/tabs/story/SidePanel/Action/index.tsx b/web/src/beta/features/Editor/tabs/story/SidePanel/Action/index.tsx index 6cc35cc289..46ed239fab 100644 --- a/web/src/beta/features/Editor/tabs/story/SidePanel/Action/index.tsx +++ b/web/src/beta/features/Editor/tabs/story/SidePanel/Action/index.tsx @@ -39,7 +39,7 @@ const Wrapper = styled.button` min-height: 28px; transition: all 0.15s; - border: 1px solid #383838; + border: 1px solid ${({ theme }) => theme.outline.weakest}; :hover { background: ${props => props.theme.bg[3]}; @@ -52,7 +52,7 @@ const IconWrapper = styled.div` display: flex; align-items: center; justify-content: center; - color: #4a4a4a; + color: ${({ theme }) => theme.content.weak}; `; export default StorySidePanelAction; diff --git a/web/src/beta/features/Editor/tabs/story/SidePanel/PageItemWrapper/index.tsx b/web/src/beta/features/Editor/tabs/story/SidePanel/PageItemWrapper/index.tsx index c67e7da9fb..3ffb5c9608 100644 --- a/web/src/beta/features/Editor/tabs/story/SidePanel/PageItemWrapper/index.tsx +++ b/web/src/beta/features/Editor/tabs/story/SidePanel/PageItemWrapper/index.tsx @@ -2,7 +2,7 @@ import { FC, ReactNode } from "react"; import Icon from "@reearth/beta/components/Icon"; import Text from "@reearth/beta/components/Text"; -import { styled } from "@reearth/services/theme"; +import { styled, useTheme } from "@reearth/services/theme"; type Props = { children: ReactNode; @@ -11,6 +11,8 @@ type Props = { }; const StorySidePanelPageWrapper: FC = ({ children, pageCount, isSwipeable }) => { + const theme = useTheme(); + return ( @@ -18,7 +20,7 @@ const StorySidePanelPageWrapper: FC = ({ children, pageCount, isSwipeable {pageCount}
- +
{children} diff --git a/web/src/beta/features/Modals/WorkspaceCreationModal/index.tsx b/web/src/beta/features/Modals/WorkspaceCreationModal/index.tsx index 46449c867b..3e1374c7a9 100644 --- a/web/src/beta/features/Modals/WorkspaceCreationModal/index.tsx +++ b/web/src/beta/features/Modals/WorkspaceCreationModal/index.tsx @@ -14,11 +14,11 @@ export interface FormValues { // description: string; } -export interface Props { +export type Props = { open?: boolean; onClose?: (refetch?: boolean) => void; onSubmit?: (values: FormValues) => Promise | void; -} +}; const initialValues: FormValues = { name: "", @@ -97,10 +97,10 @@ const FormInputWrapper = styled.div` const StyledInput = styled.input` flex: 2; - color: ${props => props.theme.content.main}; - background: ${props => props.theme.bg[0]}; + color: ${({ theme }) => theme.content.main}; + background: ${({ theme }) => theme.bg[0]}; border-radius: 4px; - border: 1px solid #3f3d45; + border: 1px solid ${({ theme }) => theme.bg[4]}; font-size: ${fonts.sizes.body}px; cursor: text; padding: 4px 8px;