digma-ai · kshmidt-digma · Jun 16, 2023 · Jun 16, 2023
diff --git 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
@@ -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) => {
     <s.Container>
       <s.Header>
         <s.BackButton onClick={handleBackButtonClick}>
-          <ChevronIcon direction={Direction.LEFT} color={"#dadada"} />
+          <ChevronIcon direction={Direction.LEFT} color={backIconColor} />
         </s.BackButton>
-        {assetTypeInfo?.icon && <assetTypeInfo.icon color={"#9c9c9c"} />}
+        {assetTypeInfo?.icon && (
+          <assetTypeInfo.icon color={assetTypeIconColor} />
+        )}
         <span>{assetTypeInfo?.label || props.assetTypeId}</span>
         <s.ItemsCount>
           {Object.values(props.entries).flat().length}
@@ -192,7 +230,7 @@ export const AssetList = (props: AssetListProps) => {
               <s.SortingLabel>{sorting.criterion}</s.SortingLabel>
               <ChevronIcon
                 direction={isSortingMenuOpen ? Direction.UP : Direction.DOWN}
-                color={"#dadada"}
+                color={sortingMenuChevronColor}
               />
             </s.SortingMenuContainer>
           </PopoverTrigger>

diff --git 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
@@ -7,12 +7,10 @@ export const AssetTypeListItem = (props: AssetTypeListItemProps) => {
   };
 
   return (
-    <s.ListItem>
-      <s.AssetType onClick={handleAssetTypeClick}>
-        {props.icon && <props.icon size={16} color={"#9b9b9b"} />}
-        {props.label || props.id}
-        <s.EntryCount>{props.entryCount}</s.EntryCount>
-      </s.AssetType>
+    <s.ListItem onClick={handleAssetTypeClick}>
+      {props.icon && <props.icon size={16} color={"#9b9b9b"} />}
+      {props.label || props.id}
+      <s.EntryCount>{props.entryCount}</s.EntryCount>
     </s.ListItem>
   );
 };
diff --git 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
@@ -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
@@ -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
@@ -8,7 +8,7 @@ export const Menu = (props: MenuProps) => {
 
   return (
     <s.Container>
-      <s.Header>{props.title}</s.Header>
+      {props.title && <s.Header>{props.title}</s.Header>}
       <s.List>
         {props.items.map((item) => (
           <s.ListItem