From abebf9aff80fe6f29d331cf47e3d4dba63450099 Mon Sep 17 00:00:00 2001
From: David Luzar <luzar.david@gmail.com>
Date: Wed, 26 May 2021 14:44:03 +0200
Subject: [PATCH] fix: small UI issues around image export dialog (#3642)

---
 src/components/CheckboxItem.scss                       | 10 +++++++---
 src/components/ExportDialog.scss                       |  2 +-
 src/components/icons.tsx                               | 10 ++--------
 .../__snapshots__/excalidrawPackage.test.tsx.snap      |  4 ----
 4 files changed, 10 insertions(+), 16 deletions(-)

diff --git a/src/components/CheckboxItem.scss b/src/components/CheckboxItem.scss
index 341c1561..ae051798 100644
--- a/src/components/CheckboxItem.scss
+++ b/src/components/CheckboxItem.scss
@@ -2,16 +2,20 @@
 
 .excalidraw {
   .Checkbox {
-    margin: 3px 0.3em;
+    margin: 4px 0.3em;
     display: flex;
     align-items: center;
 
     cursor: pointer;
     user-select: none;
 
-    &:hover:not(.is-checked) .Checkbox-box {
-      box-shadow: 0 0 0 2px #{$oc-blue-4};
+    -webkit-tap-highlight-color: transparent;
 
+    &:hover:not(.is-checked) .Checkbox-box:not(:focus) {
+      box-shadow: 0 0 0 2px #{$oc-blue-4};
+    }
+
+    &:hover:not(.is-checked) .Checkbox-box:not(:focus) {
       svg {
         display: block;
         opacity: 0.3;
diff --git a/src/components/ExportDialog.scss b/src/components/ExportDialog.scss
index fd847301..1eeaa59c 100644
--- a/src/components/ExportDialog.scss
+++ b/src/components/ExportDialog.scss
@@ -108,7 +108,7 @@
     }
     &:active {
       background-color: var(--button-color-darkest);
-      box-shadow: 0 3px 5px -1px rgb(0 0 0 / 20%), 0 6px 10px 0 rgb(0 0 0 / 14%);
+      box-shadow: none;
     }
 
     svg {
diff --git a/src/components/icons.tsx b/src/components/icons.tsx
index 2d99fd67..dfd81a93 100644
--- a/src/components/icons.tsx
+++ b/src/components/icons.tsx
@@ -90,14 +90,8 @@ export const exportFile = createIcon(
 
 export const exportImage = createIcon(
   <>
-    <path
-      d="M571 308l-95.7-96.4c-10.1-10.1-27.4-3-27.4 11.3V288h-64v64h64v65.2c0 14.3 17.3 21.4 27.4 11.3L571 332c6.6-6.6 6.6-17.4 0-24zm-187 44v-64 64z"
-      fill-rule="nonzero"
-    />
-    <path
-      d="M384 121.941V128H256V0h6.059c6.362 0 12.471 2.53 16.97 7.029l97.941 97.941a24.01 24.01 0 017.03 16.971zM248 160c-13.2 0-24-10.8-24-24V0H24C10.745 0 0 10.745 0 24v464c0 13.255 10.745 24 24 24h336c13.255 0 24-10.745 24-24V160H248zm-135.455 16c26.51 0 48 21.49 48 48s-21.49 48-48 48-48-21.49-48-48 21.491-48 48-48zm208 240h-256l.485-48.485L104.545 328c4.686-4.686 11.799-4.201 16.485.485L160.545 368 264.06 264.485c4.686-4.686 12.284-4.686 16.971 0L320.545 304v112z"
-      fill-rule="nonzero"
-    />
+    <path d="M571 308l-95.7-96.4c-10.1-10.1-27.4-3-27.4 11.3V288h-64v64h64v65.2c0 14.3 17.3 21.4 27.4 11.3L571 332c6.6-6.6 6.6-17.4 0-24zm-187 44v-64 64z" />
+    <path d="M384 121.941V128H256V0h6.059c6.362 0 12.471 2.53 16.97 7.029l97.941 97.941a24.01 24.01 0 017.03 16.971zM248 160c-13.2 0-24-10.8-24-24V0H24C10.745 0 0 10.745 0 24v464c0 13.255 10.745 24 24 24h336c13.255 0 24-10.745 24-24V160H248zm-135.455 16c26.51 0 48 21.49 48 48s-21.49 48-48 48-48-21.49-48-48 21.491-48 48-48zm208 240h-256l.485-48.485L104.545 328c4.686-4.686 11.799-4.201 16.485.485L160.545 368 264.06 264.485c4.686-4.686 12.284-4.686 16.971 0L320.545 304v112z" />
   </>,
   { width: 576, height: 512, mirror: true },
 );
diff --git a/src/tests/__snapshots__/excalidrawPackage.test.tsx.snap b/src/tests/__snapshots__/excalidrawPackage.test.tsx.snap
index 4ec188cb..0dd76513 100644
--- a/src/tests/__snapshots__/excalidrawPackage.test.tsx.snap
+++ b/src/tests/__snapshots__/excalidrawPackage.test.tsx.snap
@@ -121,11 +121,9 @@ exports[`<Excalidraw/> Test UIOptions prop Test canvasActions should not hide an
             >
               <path
                 d="M571 308l-95.7-96.4c-10.1-10.1-27.4-3-27.4 11.3V288h-64v64h64v65.2c0 14.3 17.3 21.4 27.4 11.3L571 332c6.6-6.6 6.6-17.4 0-24zm-187 44v-64 64z"
-                fill-rule="nonzero"
               />
               <path
                 d="M384 121.941V128H256V0h6.059c6.362 0 12.471 2.53 16.97 7.029l97.941 97.941a24.01 24.01 0 017.03 16.971zM248 160c-13.2 0-24-10.8-24-24V0H24C10.745 0 0 10.745 0 24v464c0 13.255 10.745 24 24 24h336c13.255 0 24-10.745 24-24V160H248zm-135.455 16c26.51 0 48 21.49 48 48s-21.49 48-48 48-48-21.49-48-48 21.491-48 48-48zm208 240h-256l.485-48.485L104.545 328c4.686-4.686 11.799-4.201 16.485.485L160.545 368 264.06 264.485c4.686-4.686 12.284-4.686 16.971 0L320.545 304v112z"
-                fill-rule="nonzero"
               />
             </svg>
           </div>
@@ -322,11 +320,9 @@ exports[`<Excalidraw/> Test UIOptions prop should not hide any UI element when t
             >
               <path
                 d="M571 308l-95.7-96.4c-10.1-10.1-27.4-3-27.4 11.3V288h-64v64h64v65.2c0 14.3 17.3 21.4 27.4 11.3L571 332c6.6-6.6 6.6-17.4 0-24zm-187 44v-64 64z"
-                fill-rule="nonzero"
               />
               <path
                 d="M384 121.941V128H256V0h6.059c6.362 0 12.471 2.53 16.97 7.029l97.941 97.941a24.01 24.01 0 017.03 16.971zM248 160c-13.2 0-24-10.8-24-24V0H24C10.745 0 0 10.745 0 24v464c0 13.255 10.745 24 24 24h336c13.255 0 24-10.745 24-24V160H248zm-135.455 16c26.51 0 48 21.49 48 48s-21.49 48-48 48-48-21.49-48-48 21.491-48 48-48zm208 240h-256l.485-48.485L104.545 328c4.686-4.686 11.799-4.201 16.485.485L160.545 368 264.06 264.485c4.686-4.686 12.284-4.686 16.971 0L320.545 304v112z"
-                fill-rule="nonzero"
               />
             </svg>
           </div>