toolmenu and canvas ui update

src/App.jsx

@@ -1,29 +1,41 @@
-import React, { useRef } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
+import { useSelector } from 'react-redux';
 
 import './App.scss';
-import Loader from './components/Loader/Loader';
 import HeaderMenu from './components/HeaderMenu';
-import ToolMenu from './components/ToolMenu/ToolMenu';
+import ToolMenu from './components/ToolMenu';
 import Library from './components/Library/Library';
 import TabBar from './components/TabBar';
 import Canvas from './components/Canvas';
 import Popup from './components/Popup';
 
 const App = () => {
-  // REFS
+  const activeProject = useSelector(state => state.sessionManager.activeCampaignId || '');
+  const [ isToolMenuOpen, setIsToolMenuOpen ] = useState(!!activeProject);
   const toolMenuRef = useRef();
 
+  useEffect(() => {
+    setIsToolMenuOpen(!!activeProject);
+  }, [activeProject]);
+
   // Disable scrolling
   document.body.scroll = 'no';
   document.body.style.backgroundColor = 'gray';
   document.body.style.overflow = 'hidden';
   document.height = window.innerHeight;
 
+  // TODO create initialize function and move login stuff into it from Canvas.jsx
+
   return (
     <div className='layout'>
-      <Loader />
-      <HeaderMenu />
-      <ToolMenu toolMenuRef={toolMenuRef} />
+      <HeaderMenu
+        isToolMenuOpen={isToolMenuOpen}
+        toggleToolMenu={() => {
+          if (activeProject) {
+            setIsToolMenuOpen(!isToolMenuOpen);
+          }
+         }} />
+      <ToolMenu toolMenuRef={toolMenuRef} isOpen={isToolMenuOpen} />
       <Library />
       <TabBar />
       <Canvas toolMenuRef={toolMenuRef} />

src/App.scss

@@ -17,6 +17,7 @@
   right: 0;
   bottom: 0;
   left: 0;
+  background-color: #E8EEF5;
 }
 
 input:focus,

src/components-shared/Dropdowns/ActionDropdown.jsx

@@ -7,12 +7,17 @@ import useOutsideClick from '../../utils/useOutsideClick';
   Each item in the items array should be similar to the following object:
   {
     title: 'Move to unsorted',
-    type: 'danger',
+    type: ACTION_TYPE.danger,
     callback: () => dispatch(actions.unlinkCardFromView(cardId)),
     icon: LibraryIcon,
   },
 */
 
+export const ACTION_TYPE = {
+  danger: 'danger',
+  disabled: 'disabled',
+};
+
 export const ActionDropdown = ({
   btnRef,
   isOpen,

src/components-shared/Dropdowns/ActionDropdown.scss

@@ -67,6 +67,9 @@ $y: 38px;
 
 .danger {
   font-weight: 600 !important;
-  line-height: 30px !important;
   color: #ed5e31 !important;
 }
+
+.disabled {
+  color: #C4C4C4 !important;
+}

src/components-shared/Dropdowns/ColorDropdown.jsx

@@ -2,7 +2,7 @@ import React, { useRef } from 'react';
 
 import './ColorDropdown.scss';
 import '../../styles/colors.scss'
-import { CardColorKeys } from '../../styles/colors';
+import { CARD_COLOR_KEYS } from '../../styles/colors';
 import useOutsideClick from '../../utils/useOutsideClick';
 
 export const ColorDropdown = ({
@@ -19,7 +19,7 @@ export const ColorDropdown = ({
   if (!isOpen) return null;
 
   let colorList = [];
-  Object.values(CardColorKeys).forEach(color => {
+  Object.values(CARD_COLOR_KEYS).forEach(color => {
     let className = 'item ' + color;
     if (cardColor === color) {
       className += ' selected';