chore: style

mdSilo · Mar 2, 2024 · a83f418 · a83f418
1 parent 7180664
commit a83f418
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 14 deletions.
diff --git a/src/components/kanban/Board.tsx b/src/components/kanban/Board.tsx
@@ -358,6 +358,7 @@ export default function KanbanBoard({initData, onKanbanChange}: Props) {
               type="color" 
               className="mt-2 border-none outline-none rounded" 
               style={{width: '7em'}}
+              value={bgColor}
               onChange={e => {setBoardBgColor(e.target.value);}} 
             />
           </div>

diff --git a/src/components/kanban/Card.tsx b/src/components/kanban/Card.tsx
@@ -47,6 +47,7 @@ export default function TaskCard({ card, updateCard, openSetCard }: Props) {
     transition,
     transform: CSS.Transform.toString(transform),
     backgroundColor: card.bgColor || "rgb(64 64 64)",
+    color: card.ftColor || "white",
   };
 
   const toggleEditMode = () => {
@@ -59,7 +60,7 @@ export default function TaskCard({ card, updateCard, openSetCard }: Props) {
       <div
         ref={setNodeRef}
         style={style}
-        className="p-2 h-[100px] flex text-left border-2 border-green-500 cursor-grab relative"
+        className="p-2 h-[80px] flex text-left border-2 border-green-500 cursor-grab relative"
       />
     );
   }
@@ -74,7 +75,7 @@ export default function TaskCard({ card, updateCard, openSetCard }: Props) {
         className="p-2 h-[100px] items-center flex text-left hover:ring-2 hover:ring-inset hover:ring-purple-500 relative"
       >
         <textarea
-          className="h-[90%] w-full resize-none border-none rounded bg-transparent text-white focus:outline-none"
+          className="h-[90%] w-full resize-none border-none rounded bg-transparent"
           value={card.content}
           onBlur={toggleEditMode}
           onKeyDown={(e) => {
@@ -99,24 +100,21 @@ export default function TaskCard({ card, updateCard, openSetCard }: Props) {
       onMouseEnter={() => {setMouseIsOver(true);}}
       onMouseLeave={() => {setMouseIsOver(false);}}
     >
-      <p 
-        className="my-auto h-[90%] w-full overflow-y-auto overflow-x-hidden whitespace-pre-wrap no-scollbar"
-        style={{color: card.ftColor || "white"}}
-      >
+      <p className="my-auto h-[90%] w-full overflow-y-auto overflow-x-hidden whitespace-pre-wrap">
         {card.content}
       </p>
 
       {mouseIsOver && (
-        <div>
+        <div className="flex flex-col">
           <button
             onClick={() => {onCreateNoteClick(card.id);}}
-            className="stroke-gray-500 hover:stroke-white hover:bg-primary-500 rounded px-1 py-2 w-8"
+            className="hover:bg-primary-500 rounded p-1 w-8"
           >
             <IconFeather />
           </button>
           <button
               onClick={() => { openSetCard && openSetCard(card.id);}}
-              className="stroke-gray-500 hover:stroke-white hover:bg-green-500 rounded px-1 py-2 w-8"
+              className="hover:bg-green-500 rounded p-1 w-8"
             >
               <IconPaperclip />
             </button>

diff --git a/src/components/kanban/Column.tsx b/src/components/kanban/Column.tsx
@@ -100,16 +100,16 @@ export default function ColumnContainer({
           )}
         </div>
         {mouseIsOver && (
-          <div>
+          <div className="flex flex-row">
             <button
               onClick={() => { toDelColumn(column.id);}}
-              className="stroke-gray-500 hover:stroke-white hover:bg-red-500 rounded px-1 py-2 w-8"
+              className="hover:bg-red-500 rounded p-1 w-8"
             >
               <IconTrash />
             </button>
             <button
               onClick={() => { openSetCol && openSetCol(column.id);}}
-              className="stroke-gray-500 hover:stroke-white hover:bg-green-500 rounded px-1 py-2 w-8"
+              className="hover:bg-green-500 rounded p-1 w-8"
             >
               <IconTool />
             </button>
@@ -132,10 +132,10 @@ export default function ColumnContainer({
       </div>
       {/* Column footer */}
       <button 
-        className="border border-dashed border-green-400 text-white rounded hover:bg-sky-600 min-w-full my-2 px-2" 
+        className="border border-dashed border-green-400 text-white rounded hover:bg-sky-600 min-w-full my-2 px-2 flex items-center justify-center" 
         onClick={() => {createCard(column.id);}}
       >
-        <IconPlus />
+        <IconPlus /> Add Card
       </button>
     </div>
   );