From 3698d88df0943b6451a820c124917ed349d637de Mon Sep 17 00:00:00 2001
From: Nicolas Mattia <nicolas.mattia@dfinity.org>
Date: Mon, 28 Aug 2023 11:16:25 +0200
Subject: [PATCH] Clean up close icon (#1825)

We use a "close" (X) icon in toasts and in the dapps explorer.

The previous cross was pretty much an upper case X, which looked a bit
odd. The scaling & the animating was inconsistent.

This replaces the base icon with a proper cross and makes the
proportions & animations a bit nicer.
---
 src/frontend/src/components/icons.ts | 41 ++++++++++++++++++----------
 src/frontend/src/styles/main.css     | 24 ++++++++++------
 2 files changed, 42 insertions(+), 23 deletions(-)

diff --git a/src/frontend/src/components/icons.ts b/src/frontend/src/components/icons.ts
index 89535ba281..ac19578e0c 100644
--- a/src/frontend/src/components/icons.ts
+++ b/src/frontend/src/components/icons.ts
@@ -97,21 +97,32 @@ export const icLogo = html`
 
 `;
 
-export const closeIcon = html`
-  <svg
-    class="closeIcon"
-    width="16"
-    height="16"
-    viewBox="0 0 16 16"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M8.8095 8L12.9111 3.11094C12.9798 3.02969 12.922 2.90625 12.8158 2.90625H11.5689C11.4954 2.90625 11.4251 2.93906 11.3767 2.99531L7.99388 7.02813L4.61106 2.99531C4.56419 2.93906 4.49388 2.90625 4.41888 2.90625H3.172C3.06575 2.90625 3.00794 3.02969 3.07669 3.11094L7.17825 8L3.07669 12.8891C3.06129 12.9072 3.05141 12.9293 3.04822 12.9529C3.04503 12.9764 3.04867 13.0004 3.05871 13.022C3.06874 13.0435 3.08475 13.0617 3.10483 13.0745C3.12492 13.0872 3.14823 13.0939 3.172 13.0938H4.41888C4.49231 13.0938 4.56263 13.0609 4.61106 13.0047L7.99388 8.97188L11.3767 13.0047C11.4236 13.0609 11.4939 13.0938 11.5689 13.0938H12.8158C12.922 13.0938 12.9798 12.9703 12.9111 12.8891L8.8095 8Z"
-      fill="#262626"
-    />
-  </svg>
-`;
+export const closeIcon = (() => {
+  // Draw a cross the size of the inscribed circle (for dimensions 16x16)
+  // (we avoid drawing from 0 to 16 because we need some padding for the stroke width)
+
+  // 8*(1 - Math.cos(Math.PI/4));
+  const small = "2.3431457505076194";
+  // 8*(1 + Math.cos(Math.PI/4));
+  const big = "13.65685424949238";
+
+  return html`
+    <svg
+      class="closeIcon"
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      stroke="currentColor"
+      stroke-width="2"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M${small} ${small} L${big} ${big} M${small} ${big} L${big} ${small}"
+      />
+    </svg>
+  `;
+})();
 
 export const warningIcon = html`
   <svg
diff --git a/src/frontend/src/styles/main.css b/src/frontend/src/styles/main.css
index 31bd261588..9c2608c993 100644
--- a/src/frontend/src/styles/main.css
+++ b/src/frontend/src/styles/main.css
@@ -933,6 +933,7 @@ by all browsers (FF is missing) */
 }
 
 .c-card__close {
+  --scale: 1;
   position: absolute;
   right: var(--rs-card-bezel);
   top: var(--rs-card-bezel);
@@ -941,20 +942,25 @@ by all browsers (FF is missing) */
   background: var(--rc-button);
   border-radius: 50%;
   cursor: pointer;
+  transform: scale(var(--scale));
+  transition: 200ms transform cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.c-card__close:hover {
+  --scale: 1.3;
 }
 
 .c-card__close svg {
   position: absolute;
   display: block;
-  width: 60%;
-  height: 60%;
   top: 50%;
   left: 50%;
-  transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%) scale(0.8);
 }
 
-.c-card__close svg [fill] {
+.c-card__close svg {
   fill: var(--rc-onButton);
+  stroke: var(--rc-background);
 }
 
 .c-card__title {
@@ -1066,12 +1072,15 @@ by all browsers (FF is missing) */
 }
 
 .c-irregularity__close {
+  --scale: 1;
   position: relative;
   background: #fff;
   border-radius: 50%;
   flex: 0 0 1.5rem;
   height: 1.5rem;
   cursor: pointer;
+  transition: 200ms transform cubic-bezier(0.4, 0, 0.2, 1);
+  transform: scale(var(--scale));
 }
 
 .c-irregularity__close svg {
@@ -1079,12 +1088,11 @@ by all browsers (FF is missing) */
   top: 50%;
   left: 50%;
   width: 100%;
-  transform: translate(-50%, -50%) scale(0.8);
-  transition: 200ms transform cubic-bezier(0.4, 0, 0.2, 1);
+  transform: translate(-50%, -50%) scale(0.6);
 }
 
-.c-irregularity__close:hover svg {
-  transform: translate(-50%, -50%) scale(0.95);
+.c-irregularity__close:hover {
+  --scale: 1.3;
 }
 
 /**