touchup

src/App.scss

@@ -1,6 +1,8 @@
 * {
   box-sizing: border-box;
 
+  font-family: Roboto;
+
   -webkit-touch-callout: none; /* iOS Safari */
   -webkit-user-select: none; /* Safari */
   -khtml-user-select: none; /* Konqueror HTML */

src/components/Card/Card.jsx

@@ -39,12 +39,12 @@ export const Card = ({
 
   return (
     <Rnd style={rndStyle}
-      bounds="parent"
+      bounds='parent'
       // position
       position={position}
       // drag
       disableDragging={isEditing}
-      dragHandleClassName="input-div"
+      dragHandleClassName='input-div'
       // dragGrid={[GRID.size, GRID.size]}
       onDragStart={onDragStart}
       onDragStop={onDragStop}
@@ -64,10 +64,10 @@ export const Card = ({
       onResizeStop={onResizeStop}
     >
       <div
-        className={"card" + (isActive ? " active-card" : " inactive-card")}
+        className={`card ${isActive ? 'active-card' : 'inactive-card'}`}
         onClick={onClick}
         onAnimationEnd={onAnimationEnd}
-        ref={cardRef} 
+        ref={cardRef}
         style={animationStyle}
       >
         <Title

src/components/Card/Card.scss

@@ -1,24 +1,42 @@
-// config
 $round-radius: 12px;
 $title-height: 32px;
 
 .card {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
+  padding: 0;
+  margin: 0;
+  border: 0;
+  height: 100%;
+  width: 100%;
   border-radius: $round-radius;
-
-  display: grid;
-  grid-template-rows: $title-height auto;
+  box-sizing: content-box;
+
+  display: flex;
+  flex-flow: column nowrap;
+
+  &:hover {
+    box-shadow: 0 0 0 6px #DBE2EB,
+      2px 2px 8px -3px #D7D6D6;
+  }
+}
+.active-card {
+  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 {
+  box-shadow: 0 0 0 1px #D7D6D6,
+    0 0 0 1px #F0F0F0,
+    2px 2px 8px -3px #D7D6D6;
 }
-.active-card { box-shadow: 0 0 0 6px #DBE2EB, 2px 2px 8px -3px #D7D6D6; }
-.inactive-card { box-shadow: 0 0 0 1px #F0F0F0, 2px 2px 8px -3px #D7D6D6; }
-.card: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; } }
 
 .title {
+  width: 100%;
   padding: 0 9px;
   border-radius: $round-radius $round-radius 0 0;
 
@@ -81,6 +99,7 @@ $title-height: 32px;
 }
 
 .content {
+  flex-grow: 1;
   border-radius: 0 0 $round-radius $round-radius;
 
   .text {
@@ -124,3 +143,52 @@ $title-height: 32px;
     }
   }
 }
+
+.library-card-content-container {
+  border-radius: 0 0 $round-radius $round-radius;
+  position: relative;
+  -webkit-transition: 0.4s;
+  transition: 0.4s;
+
+  display: flex;
+  flex-flow: column nowrap;
+
+  .library-card-textarea {
+    display: block; /* Fallback for non-webkit */
+    display: -webkit-box;
+    max-width: 100%;
+    margin: 0 auto;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    margin: 0;
+    padding: 15px 8px 15px 15px;
+    border: 0;
+    border-radius: $round-radius;
+    resize: none;
+    background-color: white;
+    font-family: "Roboto";
+
+    cursor: auto;
+
+    &::-webkit-scrollbar {
+      width: 19px;
+    }
+    &::-webkit-scrollbar-track {
+      border-radius: 0 0 $round-radius 0;
+      -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
+    }
+    &::-webkit-scrollbar-thumb {
+      background-color: darkgrey;
+      border: 5px solid white;
+      border-radius: $round-radius;
+    }
+  }
+
+  .library-card-textarea.selected {
+    flex: 1 1 auto;
+    overflow-y: auto;
+    -webkit-line-clamp: inherit;
+  }
+}
+

src/components/Card/LibraryCard.jsx

@@ -5,7 +5,7 @@ import { useLibraryCardHooks } from './hooks';
 import LibraryTitle from './LibraryTitle';
 import LibraryContent from './LibraryContent';
 
-import './LibraryCard.scss';
+import './Card.scss';
 
 const LibraryCard = ({
   cardId,
@@ -28,7 +28,7 @@ const LibraryCard = ({
 
   return (
     <div
-      className={'library-card' + (isActive ? ' active-card' : ' inactive-card')}
+      className={`card ${isActive ? 'active-card' : 'inactive-card'}`}
       draggable={!isEditing}
       onAnimationEnd={onAnimationEnd}
       onClick={onClick}

src/components/Card/LibraryContent.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { useContentHooks } from './hooks';
 
-import './LibraryCard.scss';
+import './Card.scss';
 
 const LibraryContent = ({
   cardId,

src/components/Card/hooks.js

@@ -13,7 +13,7 @@ import { DEFAULT_CARD_POSITION } from '../../data/redux/project/constants';
 
 export const ANIMATION = {
   cardBlink: 'card-blink .25s step-end 4 alternate',
-  libraryCardBlink: 'library-card-blink .25s step-end 4 alternate',
+  libraryCardBlink: 'card-blink .25s step-end 4 alternate',
 };
 
 export const useCardHooks = ({

src/components/HeaderMenu/ProjectItem.jsx

@@ -1,13 +1,15 @@
 import React from 'react';
 
-import { useProjectItemHooks } from './hooks';
+import { useProjectItemHooks, useTitleHooks } from './hooks';
 
 import './index.scss';
 import CopyIcon from '../../assets/icons/copy-project.svg';
-import DeleteIcon from '../../assets/icons/delete.svg';
-import DeleteRedIcon from '../../assets/icons/delete-red.svg';
 
-const ProjectItem = ({ closeProjectDropdown, id, name }) => {
+const ProjectItem = ({
+  closeProjectDropdown,
+  id,
+  name,
+}) => {
   const {
     deleteBtnRef,
     isActiveProject,
@@ -16,33 +18,47 @@ const ProjectItem = ({ closeProjectDropdown, id, name }) => {
     confirmDeleteProject,
   } = useProjectItemHooks({ closeProjectDropdown, id, name });
 
-  const [deleteDisplayIcon, setDeleteDisplayIcon] = React.useState(DeleteIcon);
+  const {
+    onChange,
+    isEditable,
+    startEdit,
+    endEdit,
+    handleKeyPress,
+  } = useTitleHooks();
 
   return (
-    <li key={id} className='project-li'>
-      <div
-        className={'project-container' + (isActiveProject ? ' active-proj' : '')}
-        onClick={!isActiveProject ? switchProject : null}
+    <div
+      className={`project-item ${isActiveProject ? 'active-project' : ''}`}
+      onClick={!isActiveProject ? switchProject : null}
+    >
+      <input
+        className='project-name'
+        maxLength='300'
+        onBlur={endEdit}
+        onChange={event => onChange(event.target.value)}
+        onDoubleClick={startEdit}
+        onDragOver={event => event.preventDefault()}
+        onKeyDown={handleKeyPress}
+        readOnly={!isActiveProject || !isEditable}
+        spellCheck={false}
+        style={{ backgroundColor: isEditable ? '#C1E9FF' : 'transparent'}}
+        title={name}
+        type='text'
+        value={name}
+      />
+      <button className='copy' onClick={copyProject}>
+        <img alt='Copy' src={CopyIcon} />
+        <span className='tooltip'>Duplicate project</span>
+      </button>
+      <button
+        className='delete'
+        ref={deleteBtnRef}
+        onClick={confirmDeleteProject}
       >
-        <span className='project-name'>
-          {name}
-        </span>
-        <button className='copy' onClick={copyProject}>
-          <img alt='Copy' src={CopyIcon} />
-          <span className='tooltip'>Duplicate project</span>
-        </button>
-        <button
-          className='delete'
-          ref={deleteBtnRef}
-          onClick={confirmDeleteProject}
-          onMouseOver={e => setDeleteDisplayIcon(DeleteRedIcon)}
-          onMouseOut={e => setDeleteDisplayIcon(DeleteIcon)}
-        >
-          <img alt='Delete' src={deleteDisplayIcon} />
-        </button>
-        <div className={'back' + (isActiveProject ? ' active' : '')} />
-      </div>
-    </li>
+        <img alt='Delete' />
+      </button>
+      <div className={`back ${isActiveProject ? ' active' : ''}`} />
+    </div>
   );
 };