tweak style changes

CHANGELOG.md

@@ -7,6 +7,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Unreleased
 
+> Note: the style changes in this release mean that you may need to tweak any custom CSS or themes. The changes are based on the default theme.
+
 ### ✨ Features
 
 - Added the option to wrap page links in parenthesis when creating tasks with the command. You may find this useful if you primarily use Todoist on mobile where links are less obvious. Thanks to [@ThDag](https://github.com/ThDag) for the contribution!

src/ui/TodoistQuery.svelte

@@ -105,28 +105,6 @@
 </script>
 
 <h4 class="todoist-query-title">{title}</h4>
-<div
-  class="edit-block-button todoist-add-button"
-  on:click={() => {
-    callTaskModal();
-  }}
-  aria-label="Add item"
->
-  <svg
-    class="svg-icon lucide-code-2"
-    width="20"
-    height="20"
-    viewBox="0 0 20 20"
-    fill="currentColor"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      fill-rule="evenodd"
-      d="M9 1v8H1v2h8v8h2v-8h8v-2h-8V1h-2z"
-      clip-rule="evenodd"
-    />
-  </svg>
-</div>
 <div
   class={fetching
     ? "edit-block-button todoist-refresh-button todoist-refresh-disabled"
@@ -140,19 +118,42 @@
     class={fetching
       ? "svg-icon lucide-code-2 todoist-refresh-spin"
       : "svg-icon lucide-code-2"}
-    width="20"
-    height="20"
-    viewBox="0 0 20 20"
-    fill="currentColor"
     xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      fill-rule="evenodd"
-      d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z"
-      clip-rule="evenodd"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    ><path d="M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" /><path
+      d="M3 3v5h5"
+    /><path d="M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16" /><path
+      d="M16 16h5v5"
     />
   </svg>
 </div>
+<div
+  class="edit-block-button todoist-add-button"
+  on:click={() => {
+    callTaskModal();
+  }}
+  aria-label="Add item"
+>
+  <svg
+    class="svg-icon lucide-code-2"
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"><path d="M5 12h14" /><path d="M12 5v14" /></svg
+  >
+</div>
 <br />
 {#if fetchedOnce}
   {#if filteredTasks.length === 0}

styles.css

@@ -3,15 +3,20 @@
   font-size: 1.25em;
 }
 
-.todoist-add-button {
-  margin-left: 8px;
-  margin-right: 66px;
+.is-live-preview .todoist-refresh-button {
+  /* The refresh button sits next to the built-in 'Edit' button. So we need to place this excatly to the right of that one. But with --size-2-2 as buffer to it. */
+  margin-right: calc(var(--icon-size) + 3 * var(--size-2-2));
+}
+
+.is-live-preview .todoist-add-button {
+  /* The add button is two buttons in, so we need to double the padding size */
+  margin-right: calc(2 * var(--icon-size) + 6 * var(--size-2-2));
 }
 
-.todoist-refresh-button {
-  height: unset;
+.markdown-reading-view .todoist-add-button,
+.markdown-reading-view .todoist-refresh-button {
+  float: right;
   margin-left: 8px;
-  margin-right: 34px;
 }
 
 .todoist-refresh-disabled {
@@ -29,7 +34,13 @@
   }
 }
 
-.task-metadata {
+.markdown-reading-view .task-metadata,
+.markdown-reading-view .todoist-task-description {
+  margin-left: 6px;
+}
+
+.is-live-preview .task-metadata,
+.is-live-preview .todoist-task-description {
   margin-left: 28px;
 }
 
@@ -70,11 +81,6 @@
   margin-top: 20px;
 }
 
-.todoist-task-container {
-    text-indent: -38px;
-    padding-inline-start: 30px;
-}
-
 .todoist-task-content {
   display: inline;
   text-indent: 0px;
@@ -89,11 +95,6 @@ ul.todoist-task-list {
   display: none;
 }
 
-.is-live-preview .block-language-todoist {
-  padding-left: 15px;
-  padding-right: 10px;
-}
-
 .theme-dark {
     --todoist-p1-border: #ff7066;
     --todoist-p1-border-hover: #ff706680;
@@ -144,6 +145,5 @@ ul.todoist-task-list {
 .todoist-task-description {
   font-size: 80%;
   color: var(--text-muted);
-  margin-left: 28px;
 }