Merge pull request #1875 from ever-co/feat/add-kanban-darkmode

Feat/add kanban darkmode
ever-co · Nov 24, 2023 · b2fdb7e · b2fdb7e
2 parents b3da70b + 4d9619e
commit b2fdb7e
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 13 deletions.
diff --git a/apps/web/lib/components/kanban-card.tsx b/apps/web/lib/components/kanban-card.tsx
@@ -102,7 +102,7 @@ export default function Item(props: any) {
         {...provided.draggableProps}
         {...provided.dragHandleProps}
         style={getStyle(provided, style)}
-        className="flex flex-col rounded-2xl bg-white p-4 relative"
+        className="flex flex-col rounded-2xl bg-white dark:bg-dark--theme-light p-4 relative"
         data-is-dragging={isDragging}
         data-testid={item.id}
         data-index={index}
@@ -115,8 +115,8 @@ export default function Item(props: any) {
                     <div className="bg-indianRed rounded p-1">
                         <BugIcon/>
                     </div>
-                    <p className="text-grey">#213</p>
-                    <p className="text-black capitalize">{item.content}</p>
+                    <p className="text-grey text-normal">#213</p>
+                    <p className="text-black dark:text-white text-normal capitalize">{item.content}</p>
 
                 </div>
             </div>
@@ -126,8 +126,8 @@ export default function Item(props: any) {
         </div>
         <div className="flex flex-row justify-between items-center pt-4">
             <div className="flex flex-row items-center gap-2">
-                <small className="text-[#7E7991] text-xs text-normal">Worked:</small>
-                <p className="text-black font-medium text-sm">0 h 0 m </p>
+                <small className="text-grey text-xs text-normal">Worked:</small>
+                <p className="text-black dark:text-white font-medium text-sm">0 h 0 m </p>
             </div>
             <div className="relative">
                 <div className="w-10 flex flex-row justify-end items-center relative bg-primary">

diff --git a/apps/web/lib/components/svgs/icons.tsx b/apps/web/lib/components/svgs/icons.tsx
@@ -2221,11 +2221,18 @@ export function QuoteBlockIcon({ className }: IClassName) {
 	);
 }
 
-export function AddIcon({ className }: IClassName) {
-	return (
-		<svg
-			width="14"
-			height="14"
+export function AddIcon({ 
+	className,
+	width=14,
+	height=14
+}: IClassName<{
+	width?: number,
+	height?: number,
+}>) {
+	return (
+		<svg
+			width={width}
+			height={height}
 			viewBox="0 0 14 14"
 			fill="none"
 			xmlns="http://www.w3.org/2000/svg"

diff --git a/apps/web/lib/features/team-members-kanban-view.tsx b/apps/web/lib/features/team-members-kanban-view.tsx
@@ -148,7 +148,7 @@ export const KanbanView = ({ itemsArray }: { itemsArray: any}) => {
               >
               {(provided: DroppableProvided, snapshot: DroppableStateSnapshot) => (
                 <div
-                  className={clsxm("flex flex-row gap-[20px] w-full h-full p-[32px] bg-transparent", snapshot.isDraggingOver ? "lightblue" : "#F7F7F8")}
+                  className={clsxm("flex flex-row gap-[20px] w-full h-full p-[32px] bg-transparent dark:bg-[#181920]", snapshot.isDraggingOver ? "lightblue" : "#F7F7F8")}
                   ref={provided.innerRef}
                   {...provided.droppableProps}
                 >
@@ -165,8 +165,8 @@ export const KanbanView = ({ itemsArray }: { itemsArray: any}) => {
                               title={column}
                               items={items[column]}
                             />
-                            <div className="flex flex-row items-center text-base not-italic font-semibold rounded-2xl gap-4 bg-white p-4">
-                                <AddIcon/>
+                            <div className="flex flex-row items-center text-base not-italic font-semibold rounded-2xl gap-4 bg-white dark:bg-dark--theme-light p-4">
+                                <AddIcon height={20} width={20}/>
                                 <p>Create Issues</p>
                             </div>
                           </div>