theme - statusbar, icons

packages/web/src/appobj/AppObjectList.js

@@ -4,6 +4,7 @@ import { AppObjectCore } from './AppObjects';
 import { useSetOpenedTabs, useAppObjectParams } from '../utility/globalState';
 import styled from 'styled-components';
 import { ExpandIcon } from '../icons';
+import useTheme from '../theme/useTheme';
 
 const SubItemsDiv = styled.div`
   margin-left: 16px;
@@ -23,7 +24,7 @@ const GroupDiv = styled.div`
   user-select: none;
   padding: 5px;
   &:hover {
-    background-color: lightblue;
+    background-color: ${(props) => props.theme.left_background_blue[1]};
   }
   cursor: pointer;
   white-space: nowrap;
@@ -93,12 +94,14 @@ function AppObjectListItem({ makeAppObj, data, filter, appobj, onObjectClick, Su
 function AppObjectGroup({ group, items }) {
   const [isExpanded, setIsExpanded] = React.useState(true);
   const [isHover, setIsHover] = React.useState(false);
+  const theme = useTheme();
   return (
     <>
       <GroupDiv
         onMouseEnter={() => setIsHover(true)}
         onMouseLeave={() => setIsHover(false)}
         onClick={() => setIsExpanded(!isExpanded)}
+        theme={theme}
       >
         <ExpandIconHolder>
           <ExpandIcon isExpanded={isExpanded} />

packages/web/src/appobj/AppObjects.js

@@ -5,12 +5,13 @@ import React from 'react';
 import styled from 'styled-components';
 import { FontIcon } from '../icons';
 import { showMenu } from '../modals/DropDownMenu';
+import useTheme from '../theme/useTheme';
 import { useSetOpenedTabs, useAppObjectParams } from '../utility/globalState';
 
 const AppObjectDiv = styled.div`
   padding: 5px;
   &:hover {
-    background-color: lightblue;
+    background-color: ${(props) => props.theme.left_background_blue[1]};
   }
   cursor: pointer;
   white-space: nowrap;
@@ -46,6 +47,7 @@ export function AppObjectCore({
   ...other
 }) {
   const appObjectParams = useAppObjectParams();
+  const theme = useTheme();
 
   const handleContextMenu = (event) => {
     if (!Menu) return;
@@ -65,6 +67,7 @@ export function AppObjectCore({
       onContextMenu={handleContextMenu}
       onClick={onClick ? () => onClick(data) : undefined}
       isBold={bold}
+      theme={theme}
       {...other}
     >
       {prefix}