From 74ebb4cf4fed74fa6feea1dd759525a4eae1614d Mon Sep 17 00:00:00 2001
From: Abdulbaki Dursun <eggsydev@gmail.com>
Date: Sun, 19 Dec 2021 21:56:52 +0300
Subject: [PATCH 1/2] feat: add notion styling to todo

---
 src/blocks/todo.vue | 84 ++++++++++++++++++++++++++++++++++++++-------
 1 file changed, 72 insertions(+), 12 deletions(-)

diff --git a/src/blocks/todo.vue b/src/blocks/todo.vue
index 0d997a0..a67db28 100644
--- a/src/blocks/todo.vue
+++ b/src/blocks/todo.vue
@@ -1,21 +1,28 @@
 <template>
   <div>
-    <input
-      type="checkbox"
-      :value="title"
-      :checked="properties.checked"
-      disabled="disabled"
-    />
-    <label>
-      <NotionTextRenderer :text="title" v-bind="pass" />
-    </label>
+    <div class="inline-flex notion-todo">
+      <template>
+        <svg v-if="isChecked" class="checked" viewBox="0 0 14 14">
+          <polygon
+            points="5.5 11.9993304 14 3.49933039 12.5 2 5.5 8.99933039 1.5 4.9968652 0 6.49933039"
+          ></polygon>
+        </svg>
+
+        <svg v-else viewBox="0 0 16 16">
+          <path
+            d="M1.5,1.5 L1.5,14.5 L14.5,14.5 L14.5,1.5 L1.5,1.5 Z M0,0 L16,0 L16,16 L0,16 L0,0 Z"
+          ></path>
+        </svg>
+      </template>
+
+      <label :class="isChecked && 'strikethrough'">
+        <NotionTextRenderer :text="title" v-bind="pass" />
+      </label>
+    </div>
   </div>
 </template>
 
 <script>
-// TODO: add notion styling
-// TODO: add strikethrough
-
 import Blockable from "@/lib/blockable";
 import NotionTextRenderer from "@/blocks/helpers/text-renderer";
 
@@ -25,5 +32,58 @@ export default {
   components: {
     NotionTextRenderer,
   },
+  computed: {
+    isChecked() {
+      return this.properties?.checked?.toString() === "Yes";
+    },
+  },
 };
 </script>
+
+<style scoped>
+/* Flexbox */
+.inline-flex {
+  display: inline-flex;
+  align-items: center;
+}
+
+.inline-flex svg {
+  margin-right: 0.5rem;
+}
+
+/* Input */
+input {
+  display: none;
+}
+
+/* SVG */
+.notion-todo svg {
+  width: 1em;
+  height: 1em;
+}
+
+.notion-todo svg.checked {
+  background-color: rgb(46, 170, 220);
+  padding: 0.1em;
+  fill: white;
+}
+
+/* Utilities */
+.strikethrough {
+  text-decoration: line-through;
+  opacity: 0.5;
+}
+
+/* Dark mode compatibility for both system and Tailwind-like CSS utilities */
+@media (prefers-color-scheme: dark) {
+  .notion-todo svg:not(.checked) {
+    fill: #ffffff;
+    opacity: 0.9;
+  }
+}
+
+.dark .notion-todo svg:not(.checked) {
+  fill: #ffffff;
+  opacity: 0.9;
+}
+</style>

From 64e695ffb360759ab35d4574bc389d0fd096f762 Mon Sep 17 00:00:00 2001
From: Abdulbaki Dursun <eggsydev@gmail.com>
Date: Mon, 10 Jan 2022 11:17:48 +0100
Subject: [PATCH 2/2] fix: style issues

---
 src/blocks/todo.vue | 43 +++++++++++++++++++++----------------------
 1 file changed, 21 insertions(+), 22 deletions(-)

diff --git a/src/blocks/todo.vue b/src/blocks/todo.vue
index a67db28..1e9f035 100644
--- a/src/blocks/todo.vue
+++ b/src/blocks/todo.vue
@@ -1,24 +1,22 @@
 <template>
-  <div>
-    <div class="inline-flex notion-todo">
-      <template>
-        <svg v-if="isChecked" class="checked" viewBox="0 0 14 14">
-          <polygon
-            points="5.5 11.9993304 14 3.49933039 12.5 2 5.5 8.99933039 1.5 4.9968652 0 6.49933039"
-          ></polygon>
-        </svg>
+  <div class="flex notion-todo">
+    <template>
+      <svg v-if="isChecked" class="checked" viewBox="0 0 14 14">
+        <polygon
+          points="5.5 11.9993304 14 3.49933039 12.5 2 5.5 8.99933039 1.5 4.9968652 0 6.49933039"
+        ></polygon>
+      </svg>
 
-        <svg v-else viewBox="0 0 16 16">
-          <path
-            d="M1.5,1.5 L1.5,14.5 L14.5,14.5 L14.5,1.5 L1.5,1.5 Z M0,0 L16,0 L16,16 L0,16 L0,0 Z"
-          ></path>
-        </svg>
-      </template>
+      <svg v-else viewBox="0 0 16 16">
+        <path
+          d="M1.5,1.5 L1.5,14.5 L14.5,14.5 L14.5,1.5 L1.5,1.5 Z M0,0 L16,0 L16,16 L0,16 L0,0 Z"
+        ></path>
+      </svg>
+    </template>
 
-      <label :class="isChecked && 'strikethrough'">
-        <NotionTextRenderer :text="title" v-bind="pass" />
-      </label>
-    </div>
+    <label :class="isChecked && 'strikethrough'">
+      <NotionTextRenderer :text="title" v-bind="pass" />
+    </label>
   </div>
 </template>
 
@@ -42,12 +40,13 @@ export default {
 
 <style scoped>
 /* Flexbox */
-.inline-flex {
-  display: inline-flex;
-  align-items: center;
+.flex {
+  display: flex;
+  align-items: baseline;
 }
 
-.inline-flex svg {
+.flex svg {
+  flex-shrink: 0;
   margin-right: 0.5rem;
 }