more minor fixes (#54)

src/App.scss

@@ -40,7 +40,7 @@ button {
 
   &:hover .tooltip {
     visibility: visible;
-    transition-delay: 0.5s;
+    opacity: 100%;
   }
 
   .tooltip {
@@ -55,7 +55,6 @@ button {
     background-color: #363B4E;
     visibility: hidden;
     z-index: 10000;
-    transition: 0s visibility;
 
     color: white;
     text-align: center;
@@ -66,6 +65,10 @@ button {
     font-weight: 400;
     line-height: 20px;
     letter-spacing: 0.55px;
+
+    transition: opacity .1s;
+    transition-delay: 0.8s;
+    opacity: 0%;
   }
 
   .tooltip::after {

src/components-shared/Dropdowns/ActionDropdown.jsx

@@ -56,7 +56,7 @@ export const ActionDropdown = ({
               onClose();
             }}
           >
-            <span className={`selection-name ${type}`} >{title}</span>
+            <span className={`selection-name ${type ?? ''}`} >{title}</span>
             {icon ? <img className='selection-icon' src={icon} /> : null}
           </button>
         </li>
@@ -66,7 +66,7 @@ export const ActionDropdown = ({
 
   return (
     <div
-      className={`action-dropdown ${variant}`}
+      className={`action-dropdown ${variant ?? ''}`}
       ref={dropdownRef}
     >
       <ul>

src/components-shared/Dropdowns/ActionDropdown.scss

@@ -55,6 +55,7 @@ $vertical-offset: 38px;
     line-height: 25px;
     letter-spacing: 0.05em;
     font-feature-settings: "kern" off;
+    white-space: nowrap;
     background-color: transparent;
   }
   .danger {

src/components/Canvas/hooks.js

@@ -15,9 +15,9 @@ export const CANVAS_STATES = {
   loaded: 'loaded',
 };
 
-export const CANVAS_DIMENSIONS = {
-  width: 150 * GRID.size,
-  height: 100 * GRID.size,
+export const CANVAS_SIZE = {
+  width: 250 * GRID.size,
+  height: 200 * GRID.size,
 };
 
 export const useCanvasHooks = () => {

src/components/Canvas/index.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Rnd } from 'react-rnd';
 
-import { CANVAS_STATES, CANVAS_DIMENSIONS, useCanvasHooks } from './hooks';
+import { CANVAS_STATES, CANVAS_SIZE, useCanvasHooks } from './hooks';
 import Card from '../Card/Card';
 
 import { GRID } from '../../styles/constants';
@@ -77,7 +77,7 @@ const Canvas = ({ toolMenuRef }) => {
             onDragStop={dragStopHandler}
             position={canvasPosition}
             scale={canvasScale}
-            size={CANVAS_DIMENSIONS}
+            size={CANVAS_SIZE}
           >
             <div
               className='view'

src/components/Canvas/index.scss

@@ -2,7 +2,6 @@ $spinner-base-measurement: 10em;
 
 .empty {
   position: fixed;
-  width: 25vw;
   top: 50%; left: 50%;
   transform: translate(-50%, -50%);
   padding: 60px 50px 40px 50px;

src/components/Card/Card.scss

@@ -9,30 +9,25 @@ $title-height: 32px;
   width: 100%;
   border-radius: $card-radius;
   box-sizing: content-box;
-  background-color: #7E849A;
 
   display: flex;
   flex-flow: column nowrap;
 
-  &:hover {
-    box-shadow: 0 0 0 6px #DBE2EB,
-      2px 2px 8px -3px #D7D6D6;
-  }
 }
 .active-card {
+  background-color: #7E849A;
   box-shadow: 0 0 0 1px #7E849A,
     0 0 0 6px #DBE2EB,
     2px 2px 8px -3px #D7D6D6;
-  &:hover {
-    box-shadow: 0 0 0 1px #7E849A,
-      0 0 0 6px #DBE2EB,
-      2px 2px 8px -3px #D7D6D6 !important;
-  }
 }
 .inactive-card {
+  background-color: #D7D6D6;
   box-shadow: 0 0 0 1px #D7D6D6,
-    0 0 0 1px #F0F0F0,
     2px 2px 8px -3px #D7D6D6;
+  &:hover {
+    box-shadow: 0 0 0 6px #DBE2EB,
+      2px 2px 8px -3px #D7D6D6;
+  }
 }
 @keyframes card-blink { 50% { box-shadow: 0 0 0 6px #5BC5FF, 2px 2px 8px -3px #D7D6D6; } }
 

src/components/Card/hooks.js

@@ -7,7 +7,7 @@ import { CARD_COLOR_KEYS, LIGHT_COLORS } from '../../styles/colors';
 import { POPUP_KEYS } from '../Popup/PopupKey';
 import { ACTION_TYPE } from '../../components-shared/Dropdowns/ActionDropdown';
 
-import LibraryIcon from '../../assets/icons/library-book.svg';
+import LibraryIcon from '../../assets/icons/library-open.svg';
 import RedTrashIcon from '../../assets/icons/trash-red.svg';
 import { DEFAULT_CARD_POSITION } from '../../data/redux/project/constants';
 
@@ -257,6 +257,7 @@ export const useOptionsDropdownHooks = ({
 }) => {
   const dispatch = useDispatch();
 
+  const text = useSelector(state => state.project.present.cards[cardId].content.text);
   const [ isOptionDropdownOpen, setIsOptionDropdownOpen ] = useState(false);
   const optionDropdownBtnRef = useRef();
 
@@ -289,10 +290,16 @@ export const useOptionsDropdownHooks = ({
       title: 'Delete',
       type: ACTION_TYPE.danger,
       icon: RedTrashIcon,
-      callback: () => dispatch(actions.session.setPopup({
-        type: POPUP_KEYS.confirmCardDelete,
-        id: cardId,
-      })),
+      callback: () => {
+        if (text.length > 0) {
+          dispatch(actions.session.setPopup({
+            type: POPUP_KEYS.confirmCardDelete,
+            id: cardId,
+          }));
+        } else {
+          dispatch(actions.project.destroyCard({ id: cardId }));
+        }
+      },
     },
   ];
 
@@ -311,6 +318,7 @@ export const useOptionsDropdownLibraryHooks = ({
 }) => {
   const dispatch = useDispatch();
 
+  const text = useSelector(state => state.project.present.cards[cardId].content.text);
   const activeTab = useSelector(state => state.project.present.activeViewId);
   const cardTabs = useSelector(state => state.project.present.cards[cardId].views);
   const [ isOptionDropdownOpen, setIsOptionDropdownOpen ] = useState(false);
@@ -341,10 +349,16 @@ export const useOptionsDropdownLibraryHooks = ({
       title: 'Delete',
       type: ACTION_TYPE.danger,
       icon: RedTrashIcon,
-      callback: () => dispatch(actions.session.setPopup({
-        type: POPUP_KEYS.confirmCardDelete,
-        id: cardId,
-      })),
+      callback: () => {
+        if (text.length > 0) {
+          dispatch(actions.session.setPopup({
+            type: POPUP_KEYS.confirmCardDelete,
+            id: cardId,
+          }));
+        } else {
+          dispatch(actions.project.destroyCard({ id: cardId }));
+        }
+      },
     },
   ];
 

src/components/HeaderMenu/Projects.jsx

@@ -65,7 +65,7 @@ const Projects = () => {
       >
         <div
           className='list-of-projects'
-          style={{ overflowY: (Object.keys(projects).length > 5) ? 'scroll' : 'hidden' }}
+          style={{ overflowY: (Object.keys(projects).length > 5) ? 'scroll' : 'visible' }}
         >
           <ul className='projects-ul'>
             {projectsList}

src/components/HeaderMenu/index.scss

@@ -109,6 +109,7 @@ $scrollbar-width: 12px;
     .new-project {
       height: $project-height;
       padding: 9px;
+      z-index: -1;
       display: grid;
       grid-template-columns: 1fr auto;
       span {