From 0a92caa2ff21dc142b3544ed6f2643f3f24b6854 Mon Sep 17 00:00:00 2001
From: Mark Trepanier <marktrepanier.cajigas@gmail.com>
Date: Sun, 25 Feb 2024 12:00:46 -0500
Subject: [PATCH 1/4] replaces js truncated textArea with webkit line clamp

---
 .../LibrarySearch/LibraryCard/LibraryCard.jsx |  4 +-
 .../LibraryCard/LibraryCard.scss              | 25 ++++++--
 src/components/UI/Inputs/ContentTextarea.jsx  | 60 +------------------
 3 files changed, 22 insertions(+), 67 deletions(-)

diff --git a/src/components/Library/LibrarySearch/LibraryCard/LibraryCard.jsx b/src/components/Library/LibrarySearch/LibraryCard/LibraryCard.jsx
index b0e3f84..bf5456f 100644
--- a/src/components/Library/LibrarySearch/LibraryCard/LibraryCard.jsx
+++ b/src/components/Library/LibrarySearch/LibraryCard/LibraryCard.jsx
@@ -132,9 +132,7 @@ const LibraryCard = (props) => {
           style={contentContainerStyle}
         >
           <ContentTextarea
-            className="library-card-textarea"
-            isSelected={isSelected}
-            lib={true}
+            className={`library-card-textarea ${isSelected}? "selected" : ""`}
             value={cardText}
             saveValue={(v) => dispatch(actions.updCardText(cardId, v))}
             setEditingParent={setEditingCard}
diff --git a/src/components/Library/LibrarySearch/LibraryCard/LibraryCard.scss b/src/components/Library/LibrarySearch/LibraryCard/LibraryCard.scss
index 0f949c3..4fba4c0 100644
--- a/src/components/Library/LibrarySearch/LibraryCard/LibraryCard.scss
+++ b/src/components/Library/LibrarySearch/LibraryCard/LibraryCard.scss
@@ -53,23 +53,29 @@ $round-radius: 12px;
   display: flex;
   flex-flow: column nowrap;
 
+  textarea {
+    cursor: auto;
+  }
   .library-card-textarea {
-    flex: 1 1 auto;
-    box-sizing: border-box;
-    width: 100%;
+    display: block; /* Fallback for non-webkit */
+    display: -webkit-box;
+
+    max-width: 100%;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
 
     margin: 0;
-    padding: 15px 0px 15px 15px;
+    padding: 15px 8px 15px 15px;
     border: 0;
     border-radius: $round-radius;
-    overflow-y: auto;
     resize: none;
 
     background-color: white;
 
     font-family: "Roboto";
 
-    &::-webkit-scrollbar {
+    sc &::-webkit-scrollbar {
       width: 19px;
     }
     &::-webkit-scrollbar-track {
@@ -82,6 +88,13 @@ $round-radius: 12px;
       border-radius: $round-radius;
     }
   }
+
+  .library-card-textarea.selected {
+    flex: 1 1 auto;
+    overflow-y: auto;
+    -webkit-line-clamp: inherit;
+    background-color: pink;
+  }
 }
 
 @keyframes library-card-blink {
diff --git a/src/components/UI/Inputs/ContentTextarea.jsx b/src/components/UI/Inputs/ContentTextarea.jsx
index c3f4ebb..822c729 100644
--- a/src/components/UI/Inputs/ContentTextarea.jsx
+++ b/src/components/UI/Inputs/ContentTextarea.jsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef } from "react";
+import React, { useState, useEffect } from "react";
 
 import { CARD_FONT_SIZE } from "../../../shared/constants/fontSize";
 
@@ -9,16 +9,12 @@ import { CARD_FONT_SIZE } from "../../../shared/constants/fontSize";
 const ContentTextarea = ({
   className,
   styles,
-  isSelected,
-  lib = false,
   value,
   saveValue,
   setEditingParent,
 }) => {
   const [textareaValue, setTextareaValue] = useState("");
   const [editing, setEditing] = useState(false);
-  const [textSlice, setSlice] = useState(textareaValue);
-  const textareaRef = useRef(null);
 
   useEffect(() => {
     setTextareaValue(value);
@@ -60,60 +56,8 @@ const ContentTextarea = ({
     }
   };
 
-  //slice content
-  //if text content is greater than 300 char
-  //slice + ...
-  let maxLines = lib && !isSelected ? 4 : 1000;
-
-  useEffect(() => {
-    if (textareaRef.current) {
-      // const lineHeight = parseFloat(
-      //   window.getComputedStyle(textareaRef.current).lineHeight
-      // );
-      const lineHeight = 20;
-      const maxHeight = lineHeight * maxLines;
-
-      // Split the text into words
-      const words = textareaValue.split(" ");
-
-      // Estimate line breaks based on word wrapping
-      let currentLine = [];
-      const lines = [currentLine];
-      let currentLineHeight = 20;
-
-      for (const word of words) {
-        const wordWidth = word.length * lineHeight; // Estimate word width based on characters
-        if (currentLineHeight + wordWidth <= maxHeight) {
-          currentLine.push(word);
-          currentLineHeight += wordWidth;
-        } else {
-          currentLine = [word];
-          lines.push(currentLine);
-          currentLineHeight = wordWidth;
-        }
-      }
-
-      // Truncate text if it exceeds the maximum height
-      if (lines.length > maxLines) {
-        lines.splice(maxLines);
-      }
-
-      const truncatedText =
-        lines.map((line) => line.join(" ")).join(" ") +
-        (lib && !isSelected ? "..." : "");
-
-      setSlice(truncatedText);
-    }
-  }, [textareaValue, maxLines]);
-
-  const slice =
-    textareaValue.length > 300 && lib
-      ? textareaValue.slice(0, 300) + "..."
-      : textareaValue;
-
   return (
     <textarea
-      ref={textareaRef}
       className={className}
       onBlur={endEdit}
       onChange={(e) => setTextareaValue(e.target.value)}
@@ -125,7 +69,7 @@ const ContentTextarea = ({
       readOnly={!editing}
       style={styles}
       type="text"
-      value={textareaValue ? (isSelected ? textareaValue : textSlice) : ""}
+      value={textareaValue}
     />
   );
 };

From bfcbfe7290831d6d4acb03b0392cdde2fa22aec1 Mon Sep 17 00:00:00 2001
From: Mark Trepanier <marktrepanier.cajigas@gmail.com>
Date: Sun, 25 Feb 2024 12:14:42 -0500
Subject: [PATCH 2/4] fixes isSelected bug

---
 .../Library/LibrarySearch/LibraryCard/LibraryCard.jsx         | 2 +-
 .../Library/LibrarySearch/LibraryCard/LibraryCard.scss        | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/Library/LibrarySearch/LibraryCard/LibraryCard.jsx b/src/components/Library/LibrarySearch/LibraryCard/LibraryCard.jsx
index bf5456f..d1381cb 100644
--- a/src/components/Library/LibrarySearch/LibraryCard/LibraryCard.jsx
+++ b/src/components/Library/LibrarySearch/LibraryCard/LibraryCard.jsx
@@ -132,7 +132,7 @@ const LibraryCard = (props) => {
           style={contentContainerStyle}
         >
           <ContentTextarea
-            className={`library-card-textarea ${isSelected}? "selected" : ""`}
+            className={`library-card-textarea ${isSelected ? "selected" : ""}`}
             value={cardText}
             saveValue={(v) => dispatch(actions.updCardText(cardId, v))}
             setEditingParent={setEditingCard}
diff --git a/src/components/Library/LibrarySearch/LibraryCard/LibraryCard.scss b/src/components/Library/LibrarySearch/LibraryCard/LibraryCard.scss
index 4fba4c0..f07303b 100644
--- a/src/components/Library/LibrarySearch/LibraryCard/LibraryCard.scss
+++ b/src/components/Library/LibrarySearch/LibraryCard/LibraryCard.scss
@@ -61,6 +61,7 @@ $round-radius: 12px;
     display: -webkit-box;
 
     max-width: 100%;
+    margin: 0 auto;
     -webkit-line-clamp: 3;
     -webkit-box-orient: vertical;
     overflow: hidden;
@@ -75,7 +76,7 @@ $round-radius: 12px;
 
     font-family: "Roboto";
 
-    sc &::-webkit-scrollbar {
+    &::-webkit-scrollbar {
       width: 19px;
     }
     &::-webkit-scrollbar-track {
@@ -93,7 +94,6 @@ $round-radius: 12px;
     flex: 1 1 auto;
     overflow-y: auto;
     -webkit-line-clamp: inherit;
-    background-color: pink;
   }
 }
 

From e00ba340e487e1c6937488b016aab89d2ac0ab77 Mon Sep 17 00:00:00 2001
From: rayzhou-bit <rayzhou12.12@gmail.com>
Date: Tue, 19 Mar 2024 03:11:17 -0700
Subject: [PATCH 3/4] refactor

---
 src/components/Canvas/hooks.js                |   5 +-
 src/components/Canvas/index.jsx               |   4 +-
 src/components/Card/{index.jsx => Card.jsx}   |  14 +-
 src/components/Card/{index.scss => Card.scss} |   0
 src/components/Card/Content.jsx               |   4 +-
 src/components/Card/LibraryCard.jsx           |  52 +++++++
 .../LibraryCard => Card}/LibraryCard.scss     |  59 +------
 src/components/Card/LibraryContent.jsx        |  57 +++++++
 src/components/Card/Title.jsx                 |   2 +-
 src/components/Card/hooks.js                  |  72 ++++++++-
 src/components/Library/Library.jsx            |   2 +-
 .../{LibrarySearch => }/LibrarySearch.jsx     |   4 +-
 .../{LibrarySearch => }/LibrarySearch.scss    |   3 +-
 .../LibrarySearch/LibraryCard/LibraryCard.jsx | 146 ------------------
 src/components/UI/Backdrop/Backdrop.jsx       |  13 --
 src/components/UI/Backdrop/Backdrop.scss      |   7 -
 src/components/UI/Inputs/ContentTextarea.jsx  |  77 ---------
 src/components/UI/Inputs/TitleInput.jsx       |  80 ----------
 src/data/campaign/reducers.js                 |   2 +-
 .../{constants/grid.js => constants.js}       |   2 +-
 src/shared/constants/colors.js                |  47 ------
 src/shared/constants/fontSize.js              |  10 --
 src/store/firestoreAPI/storeTransactions.js   |   2 +-
 src/store/reducer/campaignData.js             |   2 +-
 24 files changed, 205 insertions(+), 461 deletions(-)
 rename src/components/Card/{index.jsx => Card.jsx} (86%)
 rename src/components/Card/{index.scss => Card.scss} (100%)
 create mode 100644 src/components/Card/LibraryCard.jsx
 rename src/components/{Library/LibrarySearch/LibraryCard => Card}/LibraryCard.scss (59%)
 create mode 100644 src/components/Card/LibraryContent.jsx
 rename src/components/Library/{LibrarySearch => }/LibrarySearch.jsx (96%)
 rename src/components/Library/{LibrarySearch => }/LibrarySearch.scss (96%)
 delete mode 100644 src/components/Library/LibrarySearch/LibraryCard/LibraryCard.jsx
 delete mode 100644 src/components/UI/Backdrop/Backdrop.jsx
 delete mode 100644 src/components/UI/Backdrop/Backdrop.scss
 delete mode 100644 src/components/UI/Inputs/ContentTextarea.jsx
 delete mode 100644 src/components/UI/Inputs/TitleInput.jsx
 rename src/shared/{constants/grid.js => constants.js} (97%)
 delete mode 100644 src/shared/constants/colors.js
 delete mode 100644 src/shared/constants/fontSize.js

diff --git a/src/components/Canvas/hooks.js b/src/components/Canvas/hooks.js
index 8fb6056..bc3a8f1 100644
--- a/src/components/Canvas/hooks.js
+++ b/src/components/Canvas/hooks.js
@@ -6,7 +6,8 @@ import * as actions from '../../store/actionIndex';
 import * as fireactions from '../../store/firestoreIndex';
 import { manageUser } from "../../store/firestoreAPI/authTransactions";
 
-import { GRID } from '../../shared/constants/grid';
+import { GRID } from '../../shared/constants';
+import { ANIMATION } from '../Card/hooks';
 
 // TODO separate out the network code into functions data/request or something
 //    link the authlistener and app status management to App.js
@@ -173,7 +174,7 @@ export const useCanvasHooks = () => {
         } else {
           setCardAnimation({
             ...cardAnimation,
-            [droppedCard]: 'card-blink .25s step-end 3 alternate',
+            [droppedCard]: ANIMATION.cardBlink,
           });
         }
       }
diff --git a/src/components/Canvas/index.jsx b/src/components/Canvas/index.jsx
index ec30538..629ae82 100644
--- a/src/components/Canvas/index.jsx
+++ b/src/components/Canvas/index.jsx
@@ -2,9 +2,9 @@ import React from 'react';
 import { Rnd } from 'react-rnd';
 
 import { CANVAS_STATES, CANVAS_DIMENSIONS, useCanvasHooks } from './hooks';
-import Card from '../Card';
+import Card from '../Card/Card';
 
-import { GRID } from '../../shared/constants/grid';
+import { GRID } from '../../shared/constants';
 import './index.scss';
 import LibraryIcon from '../../assets/icons/library.svg';
 import PlusIcon from '../../assets/icons/plus.svg'
diff --git a/src/components/Card/index.jsx b/src/components/Card/Card.jsx
similarity index 86%
rename from src/components/Card/index.jsx
rename to src/components/Card/Card.jsx
index 89d171d..c546b40 100644
--- a/src/components/Card/index.jsx
+++ b/src/components/Card/Card.jsx
@@ -6,8 +6,8 @@ import { useCardHooks } from './hooks';
 import Title from './Title';
 import Content from './Content';
 
-import './index.scss';
-import { GRID } from '../../shared/constants/grid';
+import './Card.scss';
+import { GRID } from '../../shared/constants';
 
 export const Card = ({
   cardId,
@@ -23,8 +23,8 @@ export const Card = ({
     position,
     rndStyle,
     animationStyle,
-    editingCard,
-    setEditingCard,
+    isEditing,
+    setIsEditing,
     onDragStart,
     onDragStop,
     onResizeStop,
@@ -43,7 +43,7 @@ export const Card = ({
       // position
       position={position}
       // drag
-      disableDragging={editingCard}
+      disableDragging={isEditing}
       dragHandleClassName="input-div"
       // dragGrid={[GRID.size, GRID.size]}
       onDragStart={onDragStart}
@@ -72,11 +72,11 @@ export const Card = ({
       >
         <Title
           cardId={cardId}
-          setEditingCard={setEditingCard}
+          setEditingCard={setIsEditing}
         />
         <Content
           cardId={cardId}
-          setEditingCard={setEditingCard}
+          setEditingCard={setIsEditing}
         />
       </div>
     </Rnd>
diff --git a/src/components/Card/index.scss b/src/components/Card/Card.scss
similarity index 100%
rename from src/components/Card/index.scss
rename to src/components/Card/Card.scss
diff --git a/src/components/Card/Content.jsx b/src/components/Card/Content.jsx
index 5baedda..59ea3a4 100644
--- a/src/components/Card/Content.jsx
+++ b/src/components/Card/Content.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 import { useContentHooks } from './hooks';
 
-import './index.scss';
+import './Card.scss';
 
 const Content = ({
   cardId,
@@ -38,4 +38,4 @@ const Content = ({
   );
 };
 
-export default Content;
\ No newline at end of file
+export default Content;
diff --git a/src/components/Card/LibraryCard.jsx b/src/components/Card/LibraryCard.jsx
new file mode 100644
index 0000000..e7845cb
--- /dev/null
+++ b/src/components/Card/LibraryCard.jsx
@@ -0,0 +1,52 @@
+import React from 'react';
+
+import { useLibraryCardHooks } from './hooks';
+
+import Title from './Title';
+import LibraryContent from './LibraryContent';
+
+import './LibraryCard.scss';
+
+const LibraryCard = ({ cardId }) => {
+  const {
+    libraryCardRef,
+    isActive,
+    isSelected,
+    isEditing,
+    cardAnimation,
+    setIsEditing,
+    onDragStart,
+    onDragEnd,
+    onAnimationEnd,
+    onClick,
+  } = useLibraryCardHooks({
+    cardId
+  });
+
+  return (
+    <div
+      className={'library-card' + (isActive ? ' active-card' : ' inactive-card')}
+      draggable={!isEditing}
+      onAnimationEnd={onAnimationEnd}
+      onClick={onClick}
+      onDragStart={onDragStart}
+      onDragEnd={onDragEnd}
+      ref={libraryCardRef}
+      style={cardAnimation}
+    >
+      {/* <div className="library-border"> */}
+        <Title
+          cardId={cardId}
+          setEditingCard={setIsEditing}
+        />
+        <LibraryContent
+          cardId={cardId}
+          setEditingCard={setIsEditing}
+          isSelected={isSelected}
+        />
+      {/* </div> */}
+    </div>
+  );
+};
+
+export default LibraryCard;
diff --git a/src/components/Library/LibrarySearch/LibraryCard/LibraryCard.scss b/src/components/Card/LibraryCard.scss
similarity index 59%
rename from src/components/Library/LibrarySearch/LibraryCard/LibraryCard.scss
rename to src/components/Card/LibraryCard.scss
index f07303b..4a54d95 100644
--- a/src/components/Library/LibrarySearch/LibraryCard/LibraryCard.scss
+++ b/src/components/Card/LibraryCard.scss
@@ -1,5 +1,4 @@
-// card config
-$title-bar-height: 2rem;
+// config
 $round-radius: 12px;
 
 .library-card {
@@ -9,73 +8,39 @@ $round-radius: 12px;
   height: auto;
   border-radius: $round-radius;
   box-shadow: 2px 8px 3px #d7d6d6;
-
-  .library-border {
-    border-radius: $round-radius;
-    box-shadow: 0 0 0 2px #f4f4f4;
-  }
-
-  &:hover .library-border {
-    box-shadow: 0 0 0 3px #c1e9ff;
-  }
-
-  .color-select {
-    position: absolute;
-    right: -1px;
-    top: 32px;
-    border-top: 1px solid black;
-    border-right: 1px solid black;
-    z-index: 100;
-
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    grid-template-rows: repeat(3, 1fr);
-
-    button {
-      grid-column: span 1;
-      grid-row: span 1;
-      width: 31px;
-      height: 31px;
-      border: 0;
-      border-left: 1px solid black;
-      border-bottom: 1px solid black;
-      outline: none;
-    }
-  }
 }
+.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; }
+.library-card:hover { box-shadow: 0 0 0 6px #DBE2EB, 2px 2px 8px -3px #D7D6D6; }
+@keyframes library-card-blink { 50% { box-shadow: 0 0 0 6px #5BC5FF, 2px 2px 8px -3px #D7D6D6; } }
 
 .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;
 
-  textarea {
-    cursor: auto;
-  }
   .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;
     }
@@ -96,11 +61,3 @@ $round-radius: 12px;
     -webkit-line-clamp: inherit;
   }
 }
-
-@keyframes library-card-blink {
-  50% {
-    border: 3px solid red;
-    margin: 0px;
-    margin-bottom: 8px;
-  }
-}
diff --git a/src/components/Card/LibraryContent.jsx b/src/components/Card/LibraryContent.jsx
new file mode 100644
index 0000000..272bd59
--- /dev/null
+++ b/src/components/Card/LibraryContent.jsx
@@ -0,0 +1,57 @@
+import React from 'react';
+
+import { useContentHooks } from './hooks';
+
+import './LibraryCard.scss';
+
+const LibraryContent = ({
+  cardId,
+  isSelected,
+  setEditingCard,
+}) => {
+  const {
+    readOnly,
+    contentRef,
+    contentValue,
+    changeContentValue,
+    beginContentEdit,
+    endContentEdit,
+  } = useContentHooks({
+    cardId,
+    setEditingCard,
+  });
+
+  const condensedStyle = {
+    minHeight: '60px',
+    maxHeight: '80px',
+    height: '80px',
+  };
+
+  const expandedStyle = {
+    minHeight: '80px',
+    maxHeight: '50vh',
+    height: '35vh',
+  };
+
+  return (
+    <div
+      className='library-card-content-container'
+      style={isSelected ? expandedStyle : condensedStyle}
+    >
+      <textarea
+        className={`library-card-textarea ${isSelected ? "selected" : ""}`}
+        onBlur={endContentEdit}
+        onChange={(e) => changeContentValue(e.target.value)}
+        onClick={beginContentEdit}
+        onDragOver={(e) => e.preventDefault()}
+        onWheel={(e) => e.stopPropagation()}
+        placeholder='Fill me in!'
+        readOnly={readOnly}
+        ref={contentRef}
+        value={contentValue}
+      />
+    </div>
+  );
+};
+
+export default LibraryContent;
diff --git a/src/components/Card/Title.jsx b/src/components/Card/Title.jsx
index d425612..422ba36 100644
--- a/src/components/Card/Title.jsx
+++ b/src/components/Card/Title.jsx
@@ -5,7 +5,7 @@ import { useTitleHooks, useColorDropdownHooks, useOptionsDropdownHooks } from '.
 import ColorDropdown from '../../components-shared/Dropdowns/ColorDropdown';
 import ActionDropdown from '../../components-shared/Dropdowns/ActionDropdown';
 
-import './index.scss';
+import './Card.scss';
 import '../../styles/colors.scss';
 import OpenColorBlackIcon from '../../assets/icons/rounded-square.svg';
 import OpenColorWhiteIcon from '../../assets/icons/rounded-square-white.svg';
diff --git a/src/components/Card/hooks.js b/src/components/Card/hooks.js
index fb4da5d..604133d 100644
--- a/src/components/Card/hooks.js
+++ b/src/components/Card/hooks.js
@@ -10,6 +10,11 @@ import { ACTION_TYPE } from '../../components-shared/Dropdowns/ActionDropdown';
 import LibraryIcon from '../../assets/icons/library-icon.png';
 import RedTrashIcon from '../../assets/icons/red-trash.png';
 
+export const ANIMATION = {
+  cardBlink: 'card-blink .25s step-end 3 alternate',
+  libraryCardBlink: 'library-card-blink .25s step-end 3 alternate',
+};
+
 export const useCardHooks = ({
   cardId,
   toolMenuRef,
@@ -26,7 +31,7 @@ export const useCardHooks = ({
   
   const [isDragging, setIsDragging] = useState(false);
   const [isSelected, setIsSelected] = useState(false);
-  const [editingCard, setEditingCard] = useState(false);
+  const [isEditing, setIsEditing] = useState(false);
 
   const cardRef = useRef();
 
@@ -54,8 +59,8 @@ export const useCardHooks = ({
     position: cardPosition,
     rndStyle: { zIndex },
     animationStyle: { animation: cardAnimation ? cardAnimation[cardId] : null },
-    editingCard,
-    setEditingCard,
+    isEditing,
+    setIsEditing,
     onDragStart: () => setIsDragging(true),
     onDragStop: (event, data) => {
       setIsDragging(false);
@@ -81,11 +86,62 @@ export const useCardHooks = ({
         setIsSelected(true);
       }
     },
-    onAnimationEnd: () => {
-      setCardAnimation({
-        ...cardAnimation,
-        [cardId]: null,
-      })
+    onAnimationEnd: () => setCardAnimation({
+      ...cardAnimation,
+      [cardId]: null,
+    }),
+  };
+};
+
+export const useLibraryCardHooks = ({
+  cardId,
+}) => {
+  const dispatch = useDispatch();
+
+  const activeCard = useSelector(state => state.sessionManager.activeCardId);
+  const activeTab = useSelector(state => state.campaignData.present.activeViewId);
+  const cardTabs = useSelector(state => state.campaignData.present.cards[cardId].views);
+
+  const [isSelected, setIsSelected] = useState(false);
+  const [isEditing, setIsEditing] = useState(false);
+  const [cardAnimation, setCardAnimation] = useState({});
+
+  const libraryCardRef = useRef();
+
+  const isActive = cardId === activeCard;
+
+  useOutsideClick([libraryCardRef], isSelected, 
+    () => {
+      if (isActive) dispatch(actions.updActiveCardId(null));
+      setIsSelected(false);
+    }
+  );
+
+  return {
+    libraryCardRef,
+    isActive,
+    isSelected,
+    isEditing,
+    cardAnimation: { animation: cardAnimation[cardId] },
+    setIsEditing,
+    onDragStart: (event) => event.dataTransfer.setData('text', cardId),
+    onDragEnd: () => {
+      if (cardTabs[activeTab]) {
+        setCardAnimation({
+          ...cardAnimation,
+          [cardId]: ANIMATION.libraryCardBlink,
+        });
+      }
+    },
+    onAnimationEnd: () => setCardAnimation({
+      ...cardAnimation,
+      [cardId]: null,
+    }),
+    onClick: () => {
+      if (!isSelected) {
+        if (cardId !== activeCard) dispatch(actions.updActiveCardId(cardId));
+        setIsSelected(true);
+      }
     },
   };
 };
diff --git a/src/components/Library/Library.jsx b/src/components/Library/Library.jsx
index e80b608..343f841 100644
--- a/src/components/Library/Library.jsx
+++ b/src/components/Library/Library.jsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 
 import './Library.scss';
-import LibrarySearch from './LibrarySearch/LibrarySearch';
+import LibrarySearch from './LibrarySearch';
 
 import LibBtnImg from '../../assets/icons/library.png';
 import ExpandImg from '../../assets/icons/left-arrow-32.png';
diff --git a/src/components/Library/LibrarySearch/LibrarySearch.jsx b/src/components/Library/LibrarySearch.jsx
similarity index 96%
rename from src/components/Library/LibrarySearch/LibrarySearch.jsx
rename to src/components/Library/LibrarySearch.jsx
index 645bfd6..b36acf8 100644
--- a/src/components/Library/LibrarySearch/LibrarySearch.jsx
+++ b/src/components/Library/LibrarySearch.jsx
@@ -2,9 +2,9 @@ import React, { useState } from 'react';
 import { useSelector } from 'react-redux';
 
 import './LibrarySearch.scss';
-import LibraryCard from './LibraryCard/LibraryCard';
+import LibraryCard from '../Card/LibraryCard';
 
-import SearchImg from '../../../assets/icons/search2.png';
+import SearchImg from '../../assets/icons/search2.png';
 
 const LibrarySearch = props => {
   // STATES
diff --git a/src/components/Library/LibrarySearch/LibrarySearch.scss b/src/components/Library/LibrarySearch.scss
similarity index 96%
rename from src/components/Library/LibrarySearch/LibrarySearch.scss
rename to src/components/Library/LibrarySearch.scss
index e529ace..56a4f0e 100644
--- a/src/components/Library/LibrarySearch/LibrarySearch.scss
+++ b/src/components/Library/LibrarySearch.scss
@@ -54,7 +54,7 @@ $horizontal-divide: 0.4rem;
 
 .library-search-results-container {
   flex: 1 1 auto;
-  padding: 0.2rem 0.6rem 0.2rem 0.2rem;
+  padding: 10px 5px;
 
   align-items: center;
   text-align: center;
@@ -64,4 +64,5 @@ $horizontal-divide: 0.4rem;
 
   display: flex;
   flex-flow: column nowrap;
+  gap: 20px;
 }
\ No newline at end of file
diff --git a/src/components/Library/LibrarySearch/LibraryCard/LibraryCard.jsx b/src/components/Library/LibrarySearch/LibraryCard/LibraryCard.jsx
deleted file mode 100644
index d1381cb..0000000
--- a/src/components/Library/LibrarySearch/LibraryCard/LibraryCard.jsx
+++ /dev/null
@@ -1,146 +0,0 @@
-import React, { useState, useRef } from "react";
-import { useDispatch, useSelector } from "react-redux";
-import { useOutsideClick } from "../../../../utils/useOutsideClick";
-
-import "./LibraryCard.scss";
-import * as actions from "../../../../store/actionIndex";
-import { CARD_FONT_SIZE } from "../../../../shared/constants/fontSize";
-import { CARD_TITLEBAR_COLORS } from "../../../../shared/constants/colors";
-import TitleInput from "../../../UI/Inputs/TitleInput";
-import Title from "../../../Card/Title";
-import ContentTextarea from "../../../UI/Inputs/ContentTextarea";
-
-import DeleteImg from "../../../../assets/icons/delete-24.png";
-
-const LibraryCard = (props) => {
-  const { cardId } = props;
-  const dispatch = useDispatch();
-
-  // STATES
-  const [isSelected, setIsSelected] = useState(false);
-  const [openColorSelect, setOpenColorSelect] = useState(false);
-  const [confirmDelete, setConfirmDelete] = useState(false);
-  const [editingCard, setEditingCard] = useState(false);
-  const [cardAnimation, setCardAnimation] = useState({});
-
-  // STORE SELECTORS
-  const activeCardId = useSelector(
-    (state) => state.sessionManager.activeCardId
-  );
-  const activeViewId = useSelector(
-    (state) => state.campaignData.present.activeViewId
-  );
-  const cardViews = useSelector(
-    (state) => state.campaignData.present.cards[cardId].views
-  );
-  const cardColor = useSelector(
-    (state) => state.campaignData.present.cards[cardId].color
-  );
-  const cardTitle = useSelector(
-    (state) => state.campaignData.present.cards[cardId].title
-  );
-  const cardText = useSelector(
-    (state) => state.campaignData.present.cards[cardId].content.text
-  );
-
-  // REFS
-  const libraryCardRef = useRef();
-  const colorSelectRef = useRef();
-  const colorBtnRef = useRef();
-  const deleteBtnRef = useRef();
-
-  // FUNCTIONS: CARD
-  const cardDragStartHandler = (event) =>
-    event.dataTransfer.setData("text", cardId);
-  const cardDragEndHandler = () => {
-    if (cardViews[activeViewId]) {
-      setCardAnimation({
-        ...cardAnimation,
-        [cardId]: "library-card-blink .25s step-end 3 alternate",
-      });
-    }
-  };
-
-  const onAnimationEnd = () => {
-    setCardAnimation({
-      ...cardAnimation,
-      [cardId]: null,
-    });
-  };
-
-  const cardClickHandler = () => {
-    if (!isSelected) {
-      if (cardId !== activeCardId) dispatch(actions.updActiveCardId(cardId));
-      setIsSelected(true);
-    }
-  };
-
-  useOutsideClick([libraryCardRef], isSelected, () => {
-    if (cardId === activeCardId) dispatch(actions.updActiveCardId(null));
-    setIsSelected(false);
-  });
-
-  // FUNCTIONS: TITLEBAR
-  useOutsideClick([colorSelectRef, colorBtnRef], openColorSelect, () =>
-    setOpenColorSelect(false)
-  );
-
-  useOutsideClick([deleteBtnRef], confirmDelete, () => setConfirmDelete(false));
-
-  const deleteCard = () => {
-    if (!confirmDelete) setConfirmDelete(true);
-    else dispatch(actions.destroyCard(cardId));
-  };
-
-  // STYLES: CARD
-  const cardStyle = {
-    margin: cardId === activeCardId ? "0px 0px 8px 0px" : "2px 2px 10px 2px",
-    zIndex: cardId === activeCardId ? "100" : "0",
-    animation: cardAnimation ? cardAnimation[cardId] : null,
-  };
-
-  // STYLES: CONTENT
-  const contentContainerStyle = {
-    minHeight: isSelected
-      ? 6 * CARD_FONT_SIZE.text + "px"
-      : 3 * CARD_FONT_SIZE.text + "px",
-    maxHeight: isSelected ? "50vh" : 5 * CARD_FONT_SIZE.text + "px",
-    height: isSelected ? "35vh" : 5 * CARD_FONT_SIZE.text + "px",
-  };
-
-  return (
-    <div
-      ref={libraryCardRef}
-      className="library-card"
-      style={cardStyle}
-      draggable={!editingCard}
-      onDragStart={cardDragStartHandler}
-      onDragEnd={cardDragEndHandler}
-      onClick={cardClickHandler}
-      onAnimationEnd={onAnimationEnd}
-    >
-      <div className="library-border">
-        <Title
-          cardId={cardId}
-          color={cardColor}
-          setEditingCard={editingCard}
-          title={cardTitle}
-        />
-        {/* content */}
-        <div
-          className="library-card-content-container"
-          style={contentContainerStyle}
-        >
-          <ContentTextarea
-            className={`library-card-textarea ${isSelected ? "selected" : ""}`}
-            value={cardText}
-            saveValue={(v) => dispatch(actions.updCardText(cardId, v))}
-            setEditingParent={setEditingCard}
-          />
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default LibraryCard;
diff --git a/src/components/UI/Backdrop/Backdrop.jsx b/src/components/UI/Backdrop/Backdrop.jsx
deleted file mode 100644
index 3aa415d..0000000
--- a/src/components/UI/Backdrop/Backdrop.jsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import React from 'react';
-
-import './Backdrop.scss';
-
-// TODO delete
-
-const backdrop = (props) => (
-  props.show 
-    ? <div className="backdrop" onClick={props.clicked} /> 
-    : null
-);
-
-export default backdrop;
\ No newline at end of file
diff --git a/src/components/UI/Backdrop/Backdrop.scss b/src/components/UI/Backdrop/Backdrop.scss
deleted file mode 100644
index b534936..0000000
--- a/src/components/UI/Backdrop/Backdrop.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-.backdrop {
-  position: fixed;
-  left: 0; top: 0;
-  width: 100vw; height: 100vh;
-  z-index: 500;
-  background-color: rgba(0,0,0,0.5);
-}
\ No newline at end of file
diff --git a/src/components/UI/Inputs/ContentTextarea.jsx b/src/components/UI/Inputs/ContentTextarea.jsx
deleted file mode 100644
index 822c729..0000000
--- a/src/components/UI/Inputs/ContentTextarea.jsx
+++ /dev/null
@@ -1,77 +0,0 @@
-import React, { useState, useEffect } from "react";
-
-import { CARD_FONT_SIZE } from "../../../shared/constants/fontSize";
-
-// TODO delete/change
-// Creates a title text with an edit button
-// css is fully controlled by props
-
-const ContentTextarea = ({
-  className,
-  styles,
-  value,
-  saveValue,
-  setEditingParent,
-}) => {
-  const [textareaValue, setTextareaValue] = useState("");
-  const [editing, setEditing] = useState(false);
-
-  useEffect(() => {
-    setTextareaValue(value);
-  }, [setTextareaValue, value]);
-
-  const beginEdit = (event) => {
-    if (!editing) {
-      setEditing(true);
-      if (setEditingParent) {
-        setEditingParent(true);
-      }
-    }
-  };
-
-  const endEdit = (event) => {
-    if (editing) {
-      document.getSelection().removeAllRanges();
-      if (textareaValue !== value) {
-        saveValue(textareaValue);
-      }
-      setEditing(false);
-      if (setEditingParent) {
-        setEditingParent(false);
-      }
-    }
-  };
-
-  const keyPressHandler = (event) => {
-    if (editing) {
-      if (event.key === "Tab") {
-        event.preventDefault();
-        // TODO make tab indent. need to set cursor position after value state update
-        // const { selectionStart, selectionEnd } = event.target;
-        // const val = event.target.value;
-        // const newValue = val.substring(0, selectionStart) + '\t' + val.substring(selectionEnd);
-        // event.target.setSelectionRange(0,0);
-        // setTextareaValue(newValue);
-      }
-    }
-  };
-
-  return (
-    <textarea
-      className={className}
-      onBlur={endEdit}
-      onChange={(e) => setTextareaValue(e.target.value)}
-      onClick={beginEdit}
-      onDragOver={(e) => e.preventDefault()}
-      onKeyDown={keyPressHandler}
-      onWheel={(e) => e.stopPropagation()}
-      placeholder="Fill me in!"
-      readOnly={!editing}
-      style={styles}
-      type="text"
-      value={textareaValue}
-    />
-  );
-};
-
-export default ContentTextarea;
diff --git a/src/components/UI/Inputs/TitleInput.jsx b/src/components/UI/Inputs/TitleInput.jsx
deleted file mode 100644
index 68a2f45..0000000
--- a/src/components/UI/Inputs/TitleInput.jsx
+++ /dev/null
@@ -1,80 +0,0 @@
-import React, { useState, useRef, useEffect } from 'react';
-
-import { CARD_FONT_SIZE } from '../../../shared/constants/fontSize';
-import { TEXT_COLOR_WHEN_BACKGROUND_IS, CARD_TITLEBAR_EDIT_COLORS } from '../../../shared/constants/colors';
-
-// TODO delete/change
-// Creates a title text with an edit button
-// css is fully controlled by props
-
-const TitleInput = ({
-  className,
-  saveValue,
-  setEditingParent,
-  styles,
-  type, // type can be card or view
-  value,
-}) => {
-  const [inputValue, setInputValue] = useState("");
-  const [isEditing, setIsEditing] = useState(false);
-
-  const inputRef = useRef();
-
-  // FUNCTIONS
-  useEffect(() => {
-    setInputValue(value);
-  }, [setInputValue, value]);
-
-  const beginEdit = (event) => {
-    if (!isEditing) {
-      setIsEditing(true);
-      if (setEditingParent) setEditingParent(true);
-      inputRef.current.focus();
-      inputRef.current.setSelectionRange(inputRef.current.value.length, inputRef.current.value.length);
-    }
-  };
-
-  const endEdit = (event) => {
-    if (isEditing) {
-      document.getSelection().removeAllRanges();
-      if (inputValue !== value) saveValue(inputValue);
-      setIsEditing(false);
-      if (setEditingParent) setEditingParent(false);
-    }
-  };
-
-  const keyPressHandler = (event) => {
-    if (isEditing) {
-      if (event.key === 'Enter' || event.key === 'Tab') endEdit();
-    };
-  };
-
-  // STYLES
-  let inputStyle = styles ? { ...styles.input} : {};
-  // apply input type
-  if (type === "view") {
-    inputStyle = {
-      backgroundColor: isEditing ? "lightskyblue" : "transparent",
-    }
-  }
-
-  return (
-    <div className={className}>
-      <input
-        className={isEditing ? "editing" : null}
-        onBlur={endEdit}
-        onChange={e => setInputValue(e.target.value)}
-        onDoubleClick={beginEdit}
-        onDragOver={e => e.preventDefault()}
-        onKeyDown={keyPressHandler}
-        ref={inputRef}
-        size=''
-        style={inputStyle}
-        type="text" required maxLength="50"
-        value={inputValue ? inputValue : ""} title={inputValue} readOnly={!isEditing}
-      />
-    </div>
-  );
-};
-
-export default TitleInput;
\ No newline at end of file
diff --git a/src/data/campaign/reducers.js b/src/data/campaign/reducers.js
index 6b00b7d..4e8131a 100644
--- a/src/data/campaign/reducers.js
+++ b/src/data/campaign/reducers.js
@@ -1,5 +1,5 @@
 import { createSlice } from '@reduxjs/toolkit';
-import { GRID } from '../../shared/constants/grid';
+import { GRID } from '../../shared/constants';
 
 // The campaignData reducer mirrors the campaign data structure on firebase
 
diff --git a/src/shared/constants/grid.js b/src/shared/constants.js
similarity index 97%
rename from src/shared/constants/grid.js
rename to src/shared/constants.js
index 2d80eec..5393327 100644
--- a/src/shared/constants/grid.js
+++ b/src/shared/constants.js
@@ -3,4 +3,4 @@ export const GRID = {
   size: 12, //TODO: change this to rem
   scaleMin: 0.5,
   scaleMax: 4,
-};
\ No newline at end of file
+};
diff --git a/src/shared/constants/colors.js b/src/shared/constants/colors.js
deleted file mode 100644
index 9d3cdbd..0000000
--- a/src/shared/constants/colors.js
+++ /dev/null
@@ -1,47 +0,0 @@
-export const CARD_TITLEBAR_COLORS = {
-  red: 'red',
-  orange: 'orange',
-  yellow: 'yellow',
-  green: 'green',
-  blue: 'blue',
-  purple: 'purple',
-  gray: 'gray',
-  black: 'black',
-  white: 'white',
-};
-
-export const CARD_TITLEBAR_EDIT_COLORS = {
-  red: 'salmon',
-  orange: 'navajowhite',
-  yellow: 'lightyellow',
-  green: 'lightgreen',
-  blue: 'lightblue',
-  purple: 'violet',
-  gray: 'lightgray',
-  black: 'darkgray',
-  white: 'lightgray',
-};
-
-export const VIEW_TITLEBAR_COLORS = {
-  red: 'red',
-  orange: 'orange',
-  yellow: 'yellow',
-  green: 'green',
-  blue: 'blue',
-  purple: 'purple',
-  gray: 'gray',
-  black: 'black',
-  white: 'white',
-};
-
-export const TEXT_COLOR_WHEN_BACKGROUND_IS = {
-  red: 'white',
-  orange: 'black',
-  yellow: 'black',
-  green: 'white',
-  blue: 'white',
-  purple: 'white',
-  gray: 'black',
-  black: 'white',
-  white: 'black',
-}
\ No newline at end of file
diff --git a/src/shared/constants/fontSize.js b/src/shared/constants/fontSize.js
deleted file mode 100644
index 25ade61..0000000
--- a/src/shared/constants/fontSize.js
+++ /dev/null
@@ -1,10 +0,0 @@
-export const CARD_FONT_SIZE = {
-  // in px
-  title: 20,
-  text: 18,
-};
-
-export const VIEW_FONT_SIZE = {
-  // in px
-  title: 20,
-};
\ No newline at end of file
diff --git a/src/store/firestoreAPI/storeTransactions.js b/src/store/firestoreAPI/storeTransactions.js
index ee2a6b5..a7e34be 100644
--- a/src/store/firestoreAPI/storeTransactions.js
+++ b/src/store/firestoreAPI/storeTransactions.js
@@ -15,7 +15,7 @@ import {
 import { auth, db } from './firebase';
 import * as actions from '../actionIndex';
 import { updateObject } from '../../shared/utilityFunctions';
-import { GRID } from '../../shared/constants/grid';
+import { GRID } from '../../shared/constants';
 
 // User contains uid, email, emailVerified (check firebase for more)
 const getUser = () => auth.currentUser ? auth.currentUser : null;
diff --git a/src/store/reducer/campaignData.js b/src/store/reducer/campaignData.js
index 29f50a4..c33424e 100644
--- a/src/store/reducer/campaignData.js
+++ b/src/store/reducer/campaignData.js
@@ -1,5 +1,5 @@
 import * as actionTypes from '../actionTypes';
-import { GRID } from '../../shared/constants/grid';
+import { GRID } from '../../shared/constants';
 import { updateObject } from '../../shared/utilityFunctions';
 
 // The campaignData reducer mirrors the campaign data structure on firebase

From e3389ab42d046aee2a62b5d9d19009828807b9e2 Mon Sep 17 00:00:00 2001
From: rayzhou-bit <rayzhou12.12@gmail.com>
Date: Thu, 21 Mar 2024 16:40:54 -0700
Subject: [PATCH 4/4] minor changes

---
 src/components/Canvas/index.scss     | 8 ++++----
 src/components/Card/LibraryCard.scss | 2 +-
 src/components/Card/hooks.js         | 4 ++--
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/Canvas/index.scss b/src/components/Canvas/index.scss
index f22e1f1..9e165a4 100644
--- a/src/components/Canvas/index.scss
+++ b/src/components/Canvas/index.scss
@@ -67,21 +67,21 @@ $spinner-base-measurement: 10em;
   top: 50%; left: 50%;
   transform: translate(-50%, -50%);
   padding: 50px;
-  border-radius: 20px;
+  border-radius: 10px;
   background-color: #FAFCFF;
   text-align: center;
 
   .bar-container {
     width: 250px;
-    height: 12px;
-    border-radius: 12px;
+    height: 10px;
+    border-radius: 20px;
     overflow: hidden;
     background-color: #DBE2EB;
 
     .bar {
       width: 100%;
       height: 100%;
-      border-radius: 12px;
+      border-radius: 20px;
       background-color: #363B4E;
       animation: load 1.5s infinite linear;
     }
diff --git a/src/components/Card/LibraryCard.scss b/src/components/Card/LibraryCard.scss
index 4a54d95..5480558 100644
--- a/src/components/Card/LibraryCard.scss
+++ b/src/components/Card/LibraryCard.scss
@@ -4,7 +4,7 @@ $round-radius: 12px;
 .library-card {
   box-sizing: content-box;
   position: relative;
-  width: 98%;
+  width: 100%;
   height: auto;
   border-radius: $round-radius;
   box-shadow: 2px 8px 3px #d7d6d6;
diff --git a/src/components/Card/hooks.js b/src/components/Card/hooks.js
index 604133d..b46191f 100644
--- a/src/components/Card/hooks.js
+++ b/src/components/Card/hooks.js
@@ -11,8 +11,8 @@ import LibraryIcon from '../../assets/icons/library-icon.png';
 import RedTrashIcon from '../../assets/icons/red-trash.png';
 
 export const ANIMATION = {
-  cardBlink: 'card-blink .25s step-end 3 alternate',
-  libraryCardBlink: 'library-card-blink .25s step-end 3 alternate',
+  cardBlink: 'card-blink .25s step-end 4 alternate',
+  libraryCardBlink: 'library-card-blink .25s step-end 4 alternate',
 };
 
 export const useCardHooks = ({