chore(web): update hexadecimal colors (#618)

Co-authored-by: nina992 <[email protected]>
reearth · Aug 5, 2023 · ac2bb92 · ac2bb92
1 parent 96faacc
commit ac2bb92
Show file tree

Hide file tree

Showing 6 changed files with 16 additions and 15 deletions.
diff --git a/web/src/beta/components/ListItem/index.tsx b/web/src/beta/components/ListItem/index.tsx
@@ -71,17 +71,16 @@ 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;
   padding: 8px 20px 8px 4px;
   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
@@ -67,7 +67,7 @@ const SRoot = styled.div<Pick<Props, "width">>`
 
   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
@@ -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
@@ -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
@@ -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,14 +11,16 @@ type Props = {
 };
 
 const StorySidePanelPageWrapper: FC<Props> = ({ children, pageCount, isSwipeable }) => {
+  const theme = useTheme();
+
   return (
     <Wrapper>
       <Left>
         <div>
           <Text size="footnote">{pageCount}</Text>
         </div>
         <div>
-          <Icon icon={isSwipeable ? "swiper" : "square"} color="#4A4A4A" size={12} />
+          <Icon icon={isSwipeable ? "swiper" : "square"} color={theme.content.weak} size={12} />
         </div>
       </Left>
       <Right>{children}</Right>

diff --git 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> | 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;