styling for checkboxes

mwufi · Sep 18, 2024 · 25b2228 · 25b2228
1 parent 7db5a1b
commit 25b2228
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 4 deletions.
diff --git a/app/components/NotesList.tsx b/app/components/NotesList.tsx
@@ -97,7 +97,7 @@ const NotesList = () => {
             </div>
             <motion.div className="overflow-y-auto h-[calc(100%-6rem)]" layout>
                 <div className="py-2 px-4 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase">
-                    {selectedCollectionId ? `${selectedCollection?.name} Notes` : 'Notes'}
+                    {selectedCollectionId ? `${selectedCollection?.name}` : 'Notes'}
                 </div>
                 <AnimatePresence>
                     {notes.map((note) => (

diff --git a/app/components/Sidebar.tsx b/app/components/Sidebar.tsx
@@ -96,7 +96,7 @@ const Sidebar = () => {
                 <SidebarItem icon={LayoutDashboard} label="Dashboard" href="/dashboard" />
             </div>
             <div className="mt-4">
-                {specialCollections.map((collection) => (
+                {specialCollections.map((collection) => (collection.collection.length > 0 &&
                     <SidebarItem
                         key={collection.collection[0].id}
                         icon={collection.icon}

diff --git a/app/tiptap.css b/app/tiptap.css
@@ -26,7 +26,7 @@
     margin-block-start: 1em;
 }
 
-.tiptap > p {
+.tiptap>p {
     @apply leading-relaxed;
     margin-block-start: var(--paragraph-spacing);
     margin-block-end: var(--paragraph-spacing);
@@ -43,7 +43,8 @@
 .tiptap li {
     @apply my-[var(--item-spacing)];
 }
-.tiptap li::marker{
+
+.tiptap li::marker {
     @apply text-lg;
 }
 
@@ -69,4 +70,35 @@
     float: left;
     height: 0;
     pointer-events: none;
+}
+
+
+/* task list */
+ul[data-type="taskList"] {
+    @apply mx-0 py-0 px-1;
+}
+
+ul[data-type="taskList"] li {
+    display: flex;
+    align-items: baseline;
+}
+
+ul[data-type="taskList"] li input[type="checkbox"] {
+    @apply w-5 h-5;
+    transform: translateY(5px);
+    /* Slightly lower the position of the task list items */
+    accent-color: var(--primary);
+    /* Display primary color when checked */
+}
+
+ul[data-type="taskList"] li label {
+    display: flex;
+    align-items: center;
+    /* Center the checkbox and label text vertically */
+}
+
+ul[data-type="taskList"] li div {
+    @apply pl-2;
+    flex-grow: 1;
+    /* Allow the text to take the remaining space */
 }