From 26447b3c59ff78902c1da40898bc3ff71c7dea24 Mon Sep 17 00:00:00 2001
From: Sebastian Martinez <me@sebastinez.dev>
Date: Fri, 25 Aug 2023 16:07:38 +0200
Subject: [PATCH] Switch edit title button with icons

Signed-off-by: Sebastian Martinez <me@sebastinez.dev>
---
 src/components/Icon.svelte              | 58 +++++++++++++++++++------
 src/views/projects/Cob/CobHeader.svelte | 27 ++++++------
 tests/e2e/project/issues.spec.ts        |  4 +-
 3 files changed, 60 insertions(+), 29 deletions(-)

diff --git a/src/components/Icon.svelte b/src/components/Icon.svelte
index 1930957fc..21ebf89a6 100644
--- a/src/components/Icon.svelte
+++ b/src/components/Icon.svelte
@@ -14,12 +14,12 @@
     | "chevron-up"
     | "clipboard"
     | "clipboard-small"
-    | "face"
     | "cross"
     | "diff"
     | "ellipsis"
     | "exclamation"
     | "exclamation-circle"
+    | "face"
     | "file"
     | "folder"
     | "folder-open"
@@ -30,6 +30,7 @@
     | "moon"
     | "network"
     | "patch"
+    | "pen"
     | "sun";
 </script>
 
@@ -169,18 +170,6 @@
       15.5 8.5 14.8284 8.5 14V9.5ZM10 5.5C9.72386 5.5 9.5 5.72386 9.5 6V14C9.5
       14.2761 9.72386 14.5 10 14.5H18C18.2761 14.5 18.5 14.2761 18.5 14V6C18.5
       5.72386 18.2761 5.5 18 5.5H10Z" />
-  {:else if name === "face"}
-    .only
-    <path
-      d="M8.3 13.1C8.07908 12.9343 7.76568 12.9791 7.6 13.2C7.43431 13.4209 7.47908 13.7343 7.7 13.9L8.1 14.2C10.4111 15.9333 13.5889 15.9333 15.9 14.2L16.3 13.9C16.5209 13.7343 16.5657 13.4209 16.4 13.2C16.2343 12.9791 15.9209 12.9343 15.7 13.1L15.3 13.4C13.3444 14.8667 10.6556 14.8667 8.7 13.4L8.3 13.1Z" />
-    <path
-      d="M11 10C11 10.5523 10.5523 11 10 11C9.44772 11 9 10.5523 9 10C9 9.44772 9.44772 9 10 9C10.5523 9 11 9.44772 11 10Z" />
-    <path
-      d="M14 11C14.5523 11 15 10.5523 15 10C15 9.44772 14.5523 9 14 9C13.4477 9 13 9.44772 13 10C13 10.5523 13.4477 11 14 11Z" />
-    <path
-      fill-rule="evenodd"
-      clip-rule="evenodd"
-      d="M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12ZM20 12C20 16.4183 16.4183 20 12 20C7.58172 20 4 16.4183 4 12C4 7.58172 7.58172 4 12 4C16.4183 4 20 7.58172 20 12Z" />
   {:else if name === "clipboard-small"}
     <path
       fill-rule="evenodd"
@@ -261,6 +250,27 @@
     <path
       d="M12 18C12.5523 18 13 17.5523 13 17C13 16.4477 12.5523 16 12 16C11.4477
       16 11 16.4477 11 17C11 17.5523 11.4477 18 12 18Z" />
+  {:else if name === "face"}
+    .only
+    <path
+      d="M8.3 13.1C8.07908 12.9343 7.76568 12.9791 7.6 13.2C7.43431 13.4209
+      7.47908 13.7343 7.7 13.9L8.1 14.2C10.4111 15.9333 13.5889 15.9333 15.9
+      14.2L16.3 13.9C16.5209 13.7343 16.5657 13.4209 16.4 13.2C16.2343 12.9791
+      15.9209 12.9343 15.7 13.1L15.3 13.4C13.3444 14.8667 10.6556 14.8667 8.7
+      13.4L8.3 13.1Z" />
+    <path
+      d="M11 10C11 10.5523 10.5523 11 10 11C9.44772 11 9 10.5523 9 10C9
+             9.44772 9.44772 9 10 9C10.5523 9 11 9.44772 11 10Z" />
+    <path
+      d="M14 11C14.5523 11 15 10.5523 15 10C15 9.44772 14.5523 9 14
+             9C13.4477 9 13 9.44772 13 10C13 10.5523 13.4477 11 14 11Z" />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944
+         7.02944 3 12 3C16.9706 3 21 7.02944 21 12ZM20 12C20 16.4183 16.4183 20
+         12 20C7.58172 20 4 16.4183 4 12C4 7.58172 7.58172 4 12 4C16.4183 4 20
+      7.58172 20 12Z" />
   {:else if name === "file"}
     <path
       d="M9 6.5C8.72386 6.5 8.5 6.72386 8.5 7C8.5 7.27614 8.72386 7.5 9
@@ -508,6 +518,28 @@
       16.5ZM18 16.5C17.1716 16.5 16.5 17.1716 16.5 18C16.5 18.8284 17.1716 19.5
       18 19.5C18.8284 19.5 19.5 18.8284 19.5 18C19.5 17.1716 18.8284 16.5 18
       16.5Z" />
+  {:else if name === "pen"}
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M17.2984 7.40873C17.6064 7.81195 17.8352 8.27913 17.962 8.7866C18.326
+      10.2426 17.8003 11.7887 16.6128 12.7123L9.30695 18.3947C9.29734 18.4022
+      9.28746 18.4093 9.27733 18.416L7.40337 19.6653C6.67511 20.1508 5.74073
+      20.1399 5.03187 19.6752L4.35355 20.3536C4.15829 20.5488 3.84171 20.5488
+      3.64645 20.3536C3.45118 20.1583 3.45118 19.8417 3.64645 19.6464L4.34403
+      18.9489C3.90746 18.2004 3.94386 17.2415 4.48505 16.5199L11.2967
+      7.43774C10.467 6.66144 9.08443 6.77464 8.41596 7.77735L6.41596
+      10.7774C6.26278 11.0071 5.95235 11.0692 5.72258 10.916C5.49282 10.7628
+      5.43073 10.4524 5.58391 10.2227L7.58391 7.22265C8.60869 5.68548 10.7337
+      5.51886 11.997 6.72279C12.8957 6.02228 14.0823 5.75519 15.2225
+      6.04024C15.7278 6.16656 16.1916 6.39458 16.5918 6.70111L17.6464
+      5.64645C17.8417 5.45118 18.1583 5.45118 18.3536 5.64645C18.5488 5.84171
+      18.5488 6.15829 18.3536 6.35355L17.2984 7.40873ZM6.84866 18.8333C6.39224
+      19.1376 5.78448 19.0774 5.39659 18.6895C4.97404 18.2669 4.9265 17.598
+      5.28505 17.1199L6.19694 15.9041L8.21516 17.9223L6.84866 18.8333ZM9.04143
+      17.3343L6.80303 15.0959L12.1004 8.03272C12.7672 7.14369 13.9018 6.74085
+      14.9799 7.01038C15.968 7.25739 16.7441 8.03798 16.9919 9.02913C17.2607
+      10.1045 16.871 11.2447 15.9989 11.923L9.04143 17.3343Z" />
   {:else if name === "sun"}
     <path
       fill-rule="evenodd"
diff --git a/src/views/projects/Cob/CobHeader.svelte b/src/views/projects/Cob/CobHeader.svelte
index 5fd0fe4ba..3d9caa56f 100644
--- a/src/views/projects/Cob/CobHeader.svelte
+++ b/src/views/projects/Cob/CobHeader.svelte
@@ -2,8 +2,8 @@
   import { createEventDispatcher } from "svelte";
 
   import * as utils from "@app/lib/utils";
-  import Button from "@app/components/Button.svelte";
   import Clipboard from "@app/components/Clipboard.svelte";
+  import Icon from "@app/components/Icon.svelte";
   import InlineMarkdown from "@app/components/InlineMarkdown.svelte";
   import TextInput from "@app/components/TextInput.svelte";
 
@@ -57,6 +57,10 @@
     font-size: var(--font-size-small);
     margin-top: 1rem;
   }
+  .toggle:hover {
+    cursor: pointer;
+    color: var(--color-foreground-5);
+  }
 </style>
 
 <header>
@@ -72,19 +76,14 @@
       <span class="txt-missing">No title</span>
     {/if}
     {#if action === "edit"}
-      <Button
-        variant="foreground"
-        size="small"
-        on:click={() => {
-          editable = !editable;
-          dispatch("editTitle", title);
-        }}>
-        {#if editable}
-          save
-        {:else}
-          edit
-        {/if}
-      </Button>
+      <div class="toggle" aria-label="editTitle">
+        <Icon
+          name={editable ? "checkmark" : "pen"}
+          on:click={() => {
+            editable = !editable;
+            dispatch("editTitle", title);
+          }} />
+      </div>
     {/if}
   </div>
   <div class="subtitle">
diff --git a/tests/e2e/project/issues.spec.ts b/tests/e2e/project/issues.spec.ts
index ceeac5fcc..c0d6677ba 100644
--- a/tests/e2e/project/issues.spec.ts
+++ b/tests/e2e/project/issues.spec.ts
@@ -181,9 +181,9 @@ test("go through the entire ui issue flow", async ({
     page.getByLabel("chip").filter({ hasText: "bug" }),
   ).toBeVisible();
 
-  await page.getByRole("button", { name: "edit" }).first().click();
+  await page.getByLabel("editTitle").click();
   await page.getByPlaceholder("Title").fill("This is a new title");
-  await page.getByRole("button", { name: "save" }).click();
+  await page.getByLabel("editTitle").click();
   await expect(page.getByText("This is a new title")).toBeVisible();
 
   await page.getByPlaceholder("Leave your comment").fill("This is a comment");