style: refine color vo.1 (#59)

* fix light theme color bugs * update coding way * remove brand color from theme * update projectlist discription text color * update quickstart brand color for dashboard * fix typo and check colors
reearth · Aug 6, 2021 · ab7bce0 · ab7bce0
1 parent e3d5b0f
commit ab7bce0
Show file tree

Hide file tree

Showing 44 changed files with 272 additions and 261 deletions.
diff --git a/src/components/atoms/Card/index.tsx b/src/components/atoms/Card/index.tsx
@@ -35,7 +35,7 @@ const Card: React.FC<Props> = ({
       margin={margin}
       onClick={onClick && (() => onClick(id))}>
       <Content>
-        <StyledIcon icon={icon} size={iconSize} />
+        <StyledIcon icon={icon} size={iconSize} color={theme.main.text} />
         <Text size="xs">{text}</Text>
         <Text size="2xs" color={theme.main.text}>
           {subtext}
@@ -54,6 +54,7 @@ const StyledContainer = styled.div<{
   height: 192px;
   width: 193px;
   margin: ${props => props.margin}px;
+  background-color: ${({ theme }) => theme.main.lighterBg};
   border: 1px ${props => props.border || "solid"}
     ${props => (props.borderColor ? props.borderColor : props.theme.assetCard.highlight)};
   display: flex;

diff --git a/src/components/atoms/DashboardBlock/index.tsx b/src/components/atoms/DashboardBlock/index.tsx
@@ -15,13 +15,13 @@ const DashboardBlock: React.FC<Props> = ({ className, children, grow }) => {
 };
 
 const StyledWrapper = styled.div<{ grow?: number }>`
-  flex-grow: ${props => (props.grow ? props.grow : 1)};
+  flex-grow: ${({ grow }) => (grow ? grow : 1)};
 `;
 
 const Block = styled.div`
   border-radius: 12px;
   margin: 14px;
-  background-color: ${props => props.theme.dashboard.itemBg};
+  background-color: ${({ theme }) => theme.dashboard.itemBg};
 `;
 
 export default DashboardBlock;
diff --git a/src/components/atoms/Icon/Icons/pcIcon.svg b/src/components/atoms/Icon/Icons/pcIcon.svg
diff --git a/src/components/atoms/Logo/reearthLogoColorful.svg b/src/components/atoms/Logo/reearthLogoColorful.svg
diff --git a/src/components/atoms/NotificationBar/index.tsx b/src/components/atoms/NotificationBar/index.tsx
@@ -7,7 +7,7 @@ import Text from "@reearth/components/atoms/Text";
 // Theme
 import { styled, useTheme } from "@reearth/theme";
 
-export type Type = "error" | "warning" | "info";
+export type Type = "error" | "warning" | "info" | "success";
 
 interface NotificationBarProps {
   text?: string;
@@ -33,7 +33,7 @@ const NotificationBar: React.FC<NotificationBarProps> = ({
     <StyledNotificationBar type={type}>
       <Text
         size="m"
-        color={theme.main.strongText}
+        color={theme.notification.text}
         weight="bold"
         otherProperties={{ padding: "10px" }}>
         {text || children}
@@ -58,13 +58,15 @@ const StyledNotificationBar = styled.div<{
   display: flex;
   justify-content: space-between;
   align-items: center;
-  background-color: ${props =>
-    props.type === "error"
-      ? props.theme.main.alert
-      : props.type === "warning"
-      ? props.theme.main.warning
-      : props.theme.main.highlighted};
-  color: ${props => props.theme.main.strongText};
+  background-color: ${({ type, theme }) =>
+    type === "error"
+      ? theme.notification.errorBg
+      : type === "warning"
+      ? theme.notification.warningBg
+      : type === "success"
+      ? theme.notification.successBg
+      : theme.notification.infoBg};
+  color: ${({ theme }) => theme.notification.text};
   position: absolute;
   top: 0;
   z-index: ${props => props.theme.zIndexes.notificationBar};

diff --git a/src/components/atoms/TabArea/index.tsx b/src/components/atoms/TabArea/index.tsx
@@ -78,8 +78,8 @@ const TabArea = <T extends string>({
 
 const Wrapper = styled.div<{ menuAlignment?: MenuAlignment }>`
   display: flex;
-  flex-flow: ${props => (props.menuAlignment === "top" ? "column" : "row")} nowrap;
-  background: ${props => props.theme.leftMenu.bg};
+  flex-flow: ${({ menuAlignment }) => (menuAlignment === "top" ? "column" : "row")} nowrap;
+  background: ${({ theme }) => theme.leftMenu.bg};
   justify-content: stretch;
   width: 100%;
   height: 100%;
@@ -88,8 +88,8 @@ const Wrapper = styled.div<{ menuAlignment?: MenuAlignment }>`
 
 const Menu = styled.div<{ menuAlignment?: MenuAlignment }>`
   display: flex;
-  flex-flow: ${props => (props.menuAlignment === "top" ? "row" : "column")} nowrap;
-  background-color: ${props => props.theme.tabArea.bg};
+  flex-flow: ${({ menuAlignment }) => (menuAlignment === "top" ? "row" : "column")} nowrap;
+  background-color: ${({ theme }) => theme.tabArea.bg};
 `;
 
 const IconWrapper = styled.div<{ selected?: boolean; expanded?: boolean }>`
@@ -99,12 +99,12 @@ const IconWrapper = styled.div<{ selected?: boolean; expanded?: boolean }>`
   user-select: none;
   display: flex;
   align-items: center;
-  background: ${props => (props.selected ? props.theme.tabArea.selectedBg : "none")};
-  opacity: ${props => (props.selected ? "1" : "0.7")};
+  background: ${({ selected, theme }) => (selected ? theme.tabArea.selectedBg : "none")};
+  opacity: ${({ selected }) => (selected ? "1" : "0.7")};
 `;
 
 const StyledIcon = styled(Icon)`
-  color: ${props => props.theme.main.strongText};
+  color: ${({ theme }) => theme.main.strongText};
 `;
 
 const IconTitle = styled(Text)`
@@ -117,7 +117,7 @@ const Content = styled.div<{ scrollable?: boolean }>`
   flex-flow: column nowrap;
   justify-content: stretch;
   overflow-x: hidden;
-  overflow-y: ${props => (props.scrollable ? "auto" : "hidden")};
+  overflow-y: ${({ scrollable }) => (scrollable ? "auto" : "hidden")};
   -webkit-overflow-scrolling: touch;
 `;
 

diff --git a/src/components/molecules/Common/AssetModal/AssetCard/index.tsx b/src/components/molecules/Common/AssetModal/AssetCard/index.tsx
@@ -59,9 +59,9 @@ const AssetCard: React.FC<Props> = ({
 };
 
 const Wrapper = styled(Flex)<{ selected?: boolean; cardSize?: CardSize }>`
-  background: ${props => props.theme.assetCard.bg};
+  background: ${({ selected, theme }) => (selected ? theme.assetCard.bgHover : theme.assetCard.bg)};
   box-shadow: 0 6px 6px -6px ${props => props.theme.other.black};
-  border: 1px solid
+  border: 2px solid
     ${props => (props.selected ? `${props.theme.assetCard.highlight}` : "transparent")};
   padding: ${({ cardSize }) =>
     cardSize === "small" ? "8px" : cardSize === "medium" ? "12px" : "20px"};

diff --git a/src/components/molecules/Common/AssetModal/AssetContainer/index.tsx b/src/components/molecules/Common/AssetModal/AssetContainer/index.tsx
@@ -240,13 +240,13 @@ const StyledIcon = styled(Icon)<{ selected?: boolean }>`
   margin-left: ${metricsSizes["m"]}px;
   border-radius: 5px;
   padding: ${metricsSizes["2xs"]}px;
-  color: ${({ theme }) => theme.main.text};
+  color: ${({ selected, theme }) => (selected ? theme.main.text : theme.main.weak)};
   cursor: pointer;
-  ${({ selected, theme }) => selected && `background: ${theme.main.bg};`}
+  ${({ selected, theme }) => selected && `background: ${theme.main.paleBg};`}
 
   &:hover {
-    background: ${({ theme }) => theme.main.bg};
-    color: ${({ theme }) => theme.main.strongText};
+    background: ${({ theme }) => theme.main.paleBg};
+    color: ${({ theme }) => theme.main.text};
   }
 `;
 

diff --git a/src/components/molecules/Common/AssetModal/AssetListItem/index.tsx b/src/components/molecules/Common/AssetModal/AssetListItem/index.tsx
@@ -55,7 +55,7 @@ const AssetListItem: React.FC<Props> = ({ asset, selected, checked, onCheck }) =
 export default AssetListItem;
 
 const ListItem = styled(Flex)<{ selected?: boolean }>`
-  background: ${({ theme }) => theme.assetCard.bg};
+  background: ${({ selected, theme }) => (selected ? theme.assetCard.bgHover : theme.assetCard.bg)};
   box-shadow: 0 6px 6px -8px ${props => props.theme.other.black};
   border: 1px solid
     ${({ selected, theme }) => (selected ? `${theme.assetCard.highlight}` : "transparent")};