From 09530692d87948d21e4698d2ff24872501ef6590 Mon Sep 17 00:00:00 2001 From: Kyrylo Shmidt Date: Fri, 16 Jun 2023 17:26:42 +0200 Subject: [PATCH] Add light theme for the Assets --- .../Assets/AssetList/AssetEntry/styles.ts | 78 +++++++++++++++++-- src/components/Assets/AssetList/index.tsx | 44 ++++++++++- src/components/Assets/AssetList/styles.ts | 55 +++++++++++-- .../AssetTypeList/AssetTypeListItem/index.tsx | 10 +-- .../AssetTypeList/AssetTypeListItem/styles.ts | 30 ++++--- src/components/Assets/AssetTypeList/styles.ts | 11 ++- src/components/Assets/styles.ts | 11 ++- src/components/common/Menu/index.tsx | 2 +- src/components/common/Menu/styles.ts | 33 +++++++- src/components/common/Menu/types.ts | 2 +- src/containers/Assets/styles.ts | 10 ++- src/containers/InstallationWizard/styles.ts | 10 ++- 12 files changed, 256 insertions(+), 40 deletions(-) diff --git a/src/components/Assets/AssetList/AssetEntry/styles.ts b/src/components/Assets/AssetList/AssetEntry/styles.ts index d69c446c9..c9b955cbf 100644 --- a/src/components/Assets/AssetList/AssetEntry/styles.ts +++ b/src/components/Assets/AssetList/AssetEntry/styles.ts @@ -5,9 +5,27 @@ export const Container = styled.div` flex-direction: column; gap: 8px; padding: 8px; - background: #383838; border-radius: 4px; - color: #9b9b9b; + + color: ${({ theme }) => { + switch (theme.mode) { + case "light": + return "#828797"; + case "dark": + case "dark-jetbrains": + return "#9b9b9b"; + } + }}; + + background: ${({ theme }) => { + switch (theme.mode) { + case "light": + return "#f1f5fa"; + case "dark": + case "dark-jetbrains": + return "#383838"; + } + }}; `; export const Header = styled.div` @@ -44,8 +62,17 @@ export const InsightIconsContainer = styled.div` `; export const InsightIconContainer = styled(AssetTypeIconContainer)` - background: #2e2e2e; border-radius: 4px; + + background: ${({ theme }) => { + switch (theme.mode) { + case "light": + return "#e9eef4"; + case "dark": + case "dark-jetbrains": + return "#2e2e2e"; + } + }}; `; export const StatsContainer = styled.div` @@ -81,26 +108,63 @@ export const ServicesContainer = styled.div` export const ServiceName = styled.div` padding: 4px 6px; - background: #2e2e2e; border-radius: 23px; line-height: 8px; overflow: hidden; text-overflow: ellipsis; + + color: ${({ theme }) => { + switch (theme.mode) { + case "light": + return "#4d668a"; + case "dark": + case "dark-jetbrains": + return "#dadada"; + } + }}; + + background: ${({ theme }) => { + switch (theme.mode) { + case "light": + return "#e9eef4"; + case "dark": + case "dark-jetbrains": + return "#2e2e2e"; + } + }}; `; export const ValueContainer = styled.div` display: flex; align-items: flex-end; - color: #c6c6c6; gap: 2px; font-size: 12px; line-height: 14px; font-weight: 500; + + color: ${({ theme }) => { + switch (theme.mode) { + case "light": + return "#4d668a"; + case "dark": + case "dark-jetbrains": + return "#c6c6c6"; + } + }}; `; export const Suffix = styled.span` - font-weight: 500; + font-weight: 400; font-size: 11px; line-height: 14px; - color: #565757; + + color: ${({ theme }) => { + switch (theme.mode) { + case "light": + return "#828797"; + case "dark": + case "dark-jetbrains": + return "#565757"; + } + }}; `; diff --git a/src/components/Assets/AssetList/index.tsx b/src/components/Assets/AssetList/index.tsx index 9deacf1f6..1e2f21219 100644 --- a/src/components/Assets/AssetList/index.tsx +++ b/src/components/Assets/AssetList/index.tsx @@ -1,4 +1,5 @@ import { useMemo, useState } from "react"; +import { DefaultTheme, useTheme } from "styled-components"; import { Menu } from "../../common/Menu"; import { Popover } from "../../common/Popover"; import { PopoverContent } from "../../common/Popover/PopoverContent"; @@ -106,6 +107,36 @@ const sortEntries = ( } }; +const getBackIconColor = (theme: DefaultTheme) => { + switch (theme.mode) { + case "light": + return "#002d61"; + case "dark": + case "dark-jetbrains": + return "#dadada"; + } +}; + +const getAssetTypeIconColor = (theme: DefaultTheme) => { + switch (theme.mode) { + case "light": + return "#788ca9"; + case "dark": + case "dark-jetbrains": + return "#9c9c9c"; + } +}; + +const getSortingMenuChevronColor = (theme: DefaultTheme) => { + switch (theme.mode) { + case "light": + return "#4d668a"; + case "dark": + case "dark-jetbrains": + return "#dadada"; + } +}; + export const AssetList = (props: AssetListProps) => { const [sorting, setSorting] = useState<{ criterion: SORTING_CRITERION; @@ -116,6 +147,11 @@ export const AssetList = (props: AssetListProps) => { }); const [isSortingMenuOpen, setIsSortingMenuOpen] = useState(false); + const theme = useTheme(); + const backIconColor = getBackIconColor(theme); + const assetTypeIconColor = getAssetTypeIconColor(theme); + const sortingMenuChevronColor = getSortingMenuChevronColor(theme); + const handleBackButtonClick = () => { props.onBackButtonClick(); }; @@ -172,9 +208,11 @@ export const AssetList = (props: AssetListProps) => { - + - {assetTypeInfo?.icon && } + {assetTypeInfo?.icon && ( + + )} {assetTypeInfo?.label || props.assetTypeId} {Object.values(props.entries).flat().length} @@ -192,7 +230,7 @@ export const AssetList = (props: AssetListProps) => { {sorting.criterion} diff --git a/src/components/Assets/AssetList/styles.ts b/src/components/Assets/AssetList/styles.ts index 292db193b..1967d77d9 100644 --- a/src/components/Assets/AssetList/styles.ts +++ b/src/components/Assets/AssetList/styles.ts @@ -15,14 +15,32 @@ export const BackButton = styled.button` export const Header = styled.div` display: flex; - background: #383838; - color: #dadada; align-items: center; gap: 4px; font-weight: 400; font-size: 11px; line-height: 14px; padding: 8px 12px 8px 8px; + + background: ${({ theme }) => { + switch (theme.mode) { + case "light": + return "#f1f5fa"; + case "dark": + case "dark-jetbrains": + return "#383838"; + } + }}; + + color: ${({ theme }) => { + switch (theme.mode) { + case "light": + return "#002d61"; + case "dark": + case "dark-jetbrains": + return "#dadada"; + } + }}; `; export const Toolbar = styled.div` @@ -38,22 +56,49 @@ export const SortingMenuContainer = styled.div` font-weight: 500; font-size: 10px; line-height: 12px; - color: #9b9b9b; align-items: center; height: 20px; + + color: ${({ theme }) => { + switch (theme.mode) { + case "light": + return "#828797"; + case "dark": + case "dark-jetbrains": + return "#9b9b9b"; + } + }}; `; export const SortingLabel = styled.span` font-weight: 500; font-size: 10px; line-height: 12px; - color: #dadada; text-transform: capitalize; + + color: ${({ theme }) => { + switch (theme.mode) { + case "light": + return "#4d668a"; + case "dark": + case "dark-jetbrains": + return "#dadada"; + } + }}; `; export const ItemsCount = styled.span` margin-left: auto; - color: #9f9f9f; + + color: ${({ theme }) => { + switch (theme.mode) { + case "light": + return "#828797"; + case "dark": + case "dark-jetbrains": + return "#9f9f9f"; + } + }}; `; export const List = styled.ul` diff --git a/src/components/Assets/AssetTypeList/AssetTypeListItem/index.tsx b/src/components/Assets/AssetTypeList/AssetTypeListItem/index.tsx index 54c2edb22..2b7c565f6 100644 --- a/src/components/Assets/AssetTypeList/AssetTypeListItem/index.tsx +++ b/src/components/Assets/AssetTypeList/AssetTypeListItem/index.tsx @@ -7,12 +7,10 @@ export const AssetTypeListItem = (props: AssetTypeListItemProps) => { }; return ( - - - {props.icon && } - {props.label || props.id} - {props.entryCount} - + + {props.icon && } + {props.label || props.id} + {props.entryCount} ); }; diff --git a/src/components/Assets/AssetTypeList/AssetTypeListItem/styles.ts b/src/components/Assets/AssetTypeList/AssetTypeListItem/styles.ts index cc41a3c02..39c9e4fa3 100644 --- a/src/components/Assets/AssetTypeList/AssetTypeListItem/styles.ts +++ b/src/components/Assets/AssetTypeList/AssetTypeListItem/styles.ts @@ -2,27 +2,37 @@ import styled from "styled-components"; export const ListItem = styled.li` display: flex; - flex-direction: column; - background: #3d3f41; cursor: pointer; -`; - -export const AssetType = styled.span` - display: flex; align-items: center; gap: 4px; padding: 8px 12px 8px 8px; font-size: 11px; line-height: 14px; - font-weight: 500; letter-spacing: -0.1px; user-select: none; - background: #383838; border-radius: 4px; + + background: ${({ theme }) => { + switch (theme.mode) { + case "light": + return "#f1f5fa"; + case "dark": + case "dark-jetbrains": + return "#383838"; + } + }}; `; export const EntryCount = styled.span` margin-left: auto; - font-weight: 400; - color: #9b9b9b; + + color: ${({ theme }) => { + switch (theme.mode) { + case "light": + return "#828797"; + case "dark": + case "dark-jetbrains": + return "#9b9b9b"; + } + }}; `; diff --git a/src/components/Assets/AssetTypeList/styles.ts b/src/components/Assets/AssetTypeList/styles.ts index ed762274d..274ce6267 100644 --- a/src/components/Assets/AssetTypeList/styles.ts +++ b/src/components/Assets/AssetTypeList/styles.ts @@ -6,5 +6,14 @@ export const List = styled.ul` gap: 8px; padding: 8px 11px 8px; margin: 0; - color: #dadada; + + color: ${({ theme }) => { + switch (theme.mode) { + case "light": + return "#828797"; + case "dark": + case "dark-jetbrains": + return "#dadada"; + } + }}; `; diff --git a/src/components/Assets/styles.ts b/src/components/Assets/styles.ts index 9992160b3..945c72596 100644 --- a/src/components/Assets/styles.ts +++ b/src/components/Assets/styles.ts @@ -1,6 +1,15 @@ import styled from "styled-components"; export const Container = styled.div` - background: #3d3f41; min-height: 100vh; + + background: ${({ theme }) => { + switch (theme.mode) { + case "light": + return "#fbfdff"; + case "dark": + case "dark-jetbrains": + return "#3d3f41"; + } + }}; `; diff --git a/src/components/common/Menu/index.tsx b/src/components/common/Menu/index.tsx index 83fc5360a..8f326d4fd 100644 --- a/src/components/common/Menu/index.tsx +++ b/src/components/common/Menu/index.tsx @@ -8,7 +8,7 @@ export const Menu = (props: MenuProps) => { return ( - {props.title} + {props.title && {props.title}} {props.items.map((item) => ( { + switch (theme.mode) { + case "light": + return "#fbfdff"; + case "dark": + case "dark-jetbrains": + return "#2e2e2e"; + } + }}; `; export const Header = styled.div` padding: 2px 8px; font-size: 10px; line-height: 14px; - color: #7c7c94; + + color: ${({ theme }) => { + switch (theme.mode) { + case "light": + return "#828797"; + case "dark": + case "dark-jetbrains": + return "#7c7c94"; + } + }}; `; export const List = styled.ul` @@ -29,6 +47,15 @@ export const ListItem = styled.li` padding: 6px 8px; font-size: 10px; line-height: 12px; - color: #9b9b9b; cursor: pointer; + + color: ${({ theme }) => { + switch (theme.mode) { + case "light": + return "#828797"; + case "dark": + case "dark-jetbrains": + return "#9b9b9b"; + } + }}; `; diff --git a/src/components/common/Menu/types.ts b/src/components/common/Menu/types.ts index bfa1095d3..b98778589 100644 --- a/src/components/common/Menu/types.ts +++ b/src/components/common/Menu/types.ts @@ -1,5 +1,5 @@ export interface MenuProps { - title: string; + title?: string; items: { label: string; value: string; diff --git a/src/containers/Assets/styles.ts b/src/containers/Assets/styles.ts index e1b4b1587..c8455f5aa 100644 --- a/src/containers/Assets/styles.ts +++ b/src/containers/Assets/styles.ts @@ -2,6 +2,14 @@ import { createGlobalStyle } from "styled-components"; export const GlobalStyle = createGlobalStyle` body { - background: #3d3f41; + background: ${({ theme }) => { + switch (theme.mode) { + case "light": + return "#fbfdff"; + case "dark": + case "dark-jetbrains": + return "#3d3f41"; + } + }}; } `; diff --git a/src/containers/InstallationWizard/styles.ts b/src/containers/InstallationWizard/styles.ts index bc605575c..1f3b40726 100644 --- a/src/containers/InstallationWizard/styles.ts +++ b/src/containers/InstallationWizard/styles.ts @@ -2,6 +2,14 @@ import { createGlobalStyle } from "styled-components"; export const GlobalStyle = createGlobalStyle` body { - background: #5a5a5a; + background: ${({ theme }) => { + switch (theme.mode) { + case "light": + return "#f1f5fa"; + case "dark": + case "dark-jetbrains": + return "#3d3f41"; + } + }}; } `;