From c004c7c86d17dc7c51fb44aff40d0b06e7715f56 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jes=C3=BAs=20Espino?= <jespinog@gmail.com>
Date: Fri, 18 Jun 2021 18:08:15 +0200
Subject: [PATCH] Migrating some icons to Compass icons

---
 webapp/package.json                           |   2 +-
 webapp/src/components/sidebar/sidebar.scss    |   6 +-
 .../table/__snapshots__/table.test.tsx.snap   |  39 +---
 .../tableGroupHeaderRow.test.tsx.snap         | 195 +++---------------
 .../table/tableGroupHeaderRow.test.tsx        |   2 +-
 .../src/widgets/buttons/buttonWithMenu.scss   |   2 +-
 webapp/src/widgets/icons/Link.tsx             |   5 +-
 webapp/src/widgets/icons/add.scss             |   7 +-
 webapp/src/widgets/icons/add.tsx              |  14 +-
 webapp/src/widgets/icons/close.scss           |   7 +-
 webapp/src/widgets/icons/close.tsx            |  14 +-
 webapp/src/widgets/icons/compassIcon.tsx      |   3 +-
 webapp/src/widgets/icons/dropdown.scss        |   7 +-
 webapp/src/widgets/icons/dropdown.tsx         |  15 +-
 webapp/src/widgets/icons/options.scss         |   5 +-
 webapp/src/widgets/icons/options.tsx          |  27 +--
 16 files changed, 81 insertions(+), 269 deletions(-)

diff --git a/webapp/package.json b/webapp/package.json
index 34ddaf37c..a9e8df69d 100644
--- a/webapp/package.json
+++ b/webapp/package.json
@@ -54,7 +54,7 @@
 		},
 		"globals": {
 			"ts-jest": {
-				"tsConfig": "./src/tsconfig.json"
+				"tsconfig": "./src/tsconfig.json"
 			}
 		},
 		"transform": {
diff --git a/webapp/src/components/sidebar/sidebar.scss b/webapp/src/components/sidebar/sidebar.scss
index 87263fd9f..75669e492 100644
--- a/webapp/src/components/sidebar/sidebar.scss
+++ b/webapp/src/components/sidebar/sidebar.scss
@@ -108,7 +108,9 @@
         }
     }
 
-    .OptionsIcon,
+    .OptionsIcon {
+        color: rgba(var(--sidebar-fg), 0.5);
+    }
     .DisclosureTriangleIcon,
     .DotIcon {
         fill: rgba(var(--sidebar-fg), 0.5);
@@ -116,7 +118,7 @@
     }
 
     .Menu .OptionsIcon {
-        fill: unset;
+        color: unset;
     }
 
     .HideSidebarIcon {
diff --git a/webapp/src/components/table/__snapshots__/table.test.tsx.snap b/webapp/src/components/table/__snapshots__/table.test.tsx.snap
index d50371f86..a603768fa 100644
--- a/webapp/src/components/table/__snapshots__/table.test.tsx.snap
+++ b/webapp/src/components/table/__snapshots__/table.test.tsx.snap
@@ -485,44 +485,17 @@ exports[`components/table/Table should match snapshot with GroupBy 1`] = `
             <div
               class="Button IconButton"
             >
-              <svg
-                class="OptionsIcon Icon"
-                viewBox="0 0 100 100"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <circle
-                  cx="30"
-                  cy="50"
-                  r="5"
-                />
-                <circle
-                  cx="50"
-                  cy="50"
-                  r="5"
-                />
-                <circle
-                  cx="70"
-                  cy="50"
-                  r="5"
-                />
-              </svg>
+              <i
+                class="CompassIcon icon-dots-horizontal OptionsIcon"
+              />
             </div>
           </div>
           <div
             class="Button IconButton"
           >
-            <svg
-              class="AddIcon Icon"
-              viewBox="0 0 100 100"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <polyline
-                points="30,50 70,50"
-              />
-              <polyline
-                points="50,30 50,70"
-              />
-            </svg>
+            <i
+              class="CompassIcon icon-plus AddIcon"
+            />
           </div>
         </div>
       </div>
diff --git a/webapp/src/components/table/__snapshots__/tableGroupHeaderRow.test.tsx.snap b/webapp/src/components/table/__snapshots__/tableGroupHeaderRow.test.tsx.snap
index bb0a94af4..50015d9d2 100644
--- a/webapp/src/components/table/__snapshots__/tableGroupHeaderRow.test.tsx.snap
+++ b/webapp/src/components/table/__snapshots__/tableGroupHeaderRow.test.tsx.snap
@@ -95,44 +95,17 @@ exports[`should match snapshot with Group 1`] = `
       <div
         class="Button IconButton"
       >
-        <svg
-          class="OptionsIcon Icon"
-          viewBox="0 0 100 100"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <circle
-            cx="30"
-            cy="50"
-            r="5"
-          />
-          <circle
-            cx="50"
-            cy="50"
-            r="5"
-          />
-          <circle
-            cx="70"
-            cy="50"
-            r="5"
-          />
-        </svg>
+        <i
+          class="CompassIcon icon-dots-horizontal OptionsIcon"
+        />
       </div>
     </div>
     <div
       class="Button IconButton"
     >
-      <svg
-        class="AddIcon Icon"
-        viewBox="0 0 100 100"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <polyline
-          points="30,50 70,50"
-        />
-        <polyline
-          points="50,30 50,70"
-        />
-      </svg>
+      <i
+        class="CompassIcon icon-plus AddIcon"
+      />
     </div>
   </div>
 </div>
@@ -186,44 +159,17 @@ exports[`should match snapshot, add new 1`] = `
       <div
         class="Button IconButton"
       >
-        <svg
-          class="OptionsIcon Icon"
-          viewBox="0 0 100 100"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <circle
-            cx="30"
-            cy="50"
-            r="5"
-          />
-          <circle
-            cx="50"
-            cy="50"
-            r="5"
-          />
-          <circle
-            cx="70"
-            cy="50"
-            r="5"
-          />
-        </svg>
+        <i
+          class="CompassIcon icon-dots-horizontal OptionsIcon"
+        />
       </div>
     </div>
     <div
       class="Button IconButton"
     >
-      <svg
-        class="AddIcon Icon"
-        viewBox="0 0 100 100"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <polyline
-          points="30,50 70,50"
-        />
-        <polyline
-          points="50,30 50,70"
-        />
-      </svg>
+      <i
+        class="CompassIcon icon-plus AddIcon"
+      />
     </div>
   </div>
 </div>
@@ -277,44 +223,17 @@ exports[`should match snapshot, edit title 1`] = `
       <div
         class="Button IconButton"
       >
-        <svg
-          class="OptionsIcon Icon"
-          viewBox="0 0 100 100"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <circle
-            cx="30"
-            cy="50"
-            r="5"
-          />
-          <circle
-            cx="50"
-            cy="50"
-            r="5"
-          />
-          <circle
-            cx="70"
-            cy="50"
-            r="5"
-          />
-        </svg>
+        <i
+          class="CompassIcon icon-dots-horizontal OptionsIcon"
+        />
       </div>
     </div>
     <div
       class="Button IconButton"
     >
-      <svg
-        class="AddIcon Icon"
-        viewBox="0 0 100 100"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <polyline
-          points="30,50 70,50"
-        />
-        <polyline
-          points="50,30 50,70"
-        />
-      </svg>
+      <i
+        class="CompassIcon icon-plus AddIcon"
+      />
     </div>
   </div>
 </div>
@@ -368,44 +287,17 @@ exports[`should match snapshot, hide group 1`] = `
       <div
         class="Button IconButton"
       >
-        <svg
-          class="OptionsIcon Icon"
-          viewBox="0 0 100 100"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <circle
-            cx="30"
-            cy="50"
-            r="5"
-          />
-          <circle
-            cx="50"
-            cy="50"
-            r="5"
-          />
-          <circle
-            cx="70"
-            cy="50"
-            r="5"
-          />
-        </svg>
+        <i
+          class="CompassIcon icon-dots-horizontal OptionsIcon"
+        />
       </div>
     </div>
     <div
       class="Button IconButton"
     >
-      <svg
-        class="AddIcon Icon"
-        viewBox="0 0 100 100"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <polyline
-          points="30,50 70,50"
-        />
-        <polyline
-          points="50,30 50,70"
-        />
-      </svg>
+      <i
+        class="CompassIcon icon-plus AddIcon"
+      />
     </div>
   </div>
 </div>
@@ -455,44 +347,17 @@ exports[`should match snapshot, no groups 1`] = `
       <div
         class="Button IconButton"
       >
-        <svg
-          class="OptionsIcon Icon"
-          viewBox="0 0 100 100"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <circle
-            cx="30"
-            cy="50"
-            r="5"
-          />
-          <circle
-            cx="50"
-            cy="50"
-            r="5"
-          />
-          <circle
-            cx="70"
-            cy="50"
-            r="5"
-          />
-        </svg>
+        <i
+          class="CompassIcon icon-dots-horizontal OptionsIcon"
+        />
       </div>
     </div>
     <div
       class="Button IconButton"
     >
-      <svg
-        class="AddIcon Icon"
-        viewBox="0 0 100 100"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <polyline
-          points="30,50 70,50"
-        />
-        <polyline
-          points="50,30 50,70"
-        />
-      </svg>
+      <i
+        class="CompassIcon icon-plus AddIcon"
+      />
     </div>
   </div>
 </div>
diff --git a/webapp/src/components/table/tableGroupHeaderRow.test.tsx b/webapp/src/components/table/tableGroupHeaderRow.test.tsx
index f844623f0..4319512a7 100644
--- a/webapp/src/components/table/tableGroupHeaderRow.test.tsx
+++ b/webapp/src/components/table/tableGroupHeaderRow.test.tsx
@@ -189,7 +189,7 @@ test('should match snapshot, add new', async () => {
 
     const {container} = render(component)
 
-    const triangle = container.querySelector('svg.AddIcon')
+    const triangle = container.querySelector('i.AddIcon')
     expect(triangle).not.toBeNull()
 
     act(() => {
diff --git a/webapp/src/widgets/buttons/buttonWithMenu.scss b/webapp/src/widgets/buttons/buttonWithMenu.scss
index 74943b520..f8bc4a51c 100644
--- a/webapp/src/widgets/buttons/buttonWithMenu.scss
+++ b/webapp/src/widgets/buttons/buttonWithMenu.scss
@@ -34,7 +34,7 @@
             background-color: rgba(var(--button-bg), 0.8);
         }
         .DropdownIcon {
-            stroke: rgb(var(--button-fg));
+            color: rgb(var(--button-fg));
         }
     }
 }
diff --git a/webapp/src/widgets/icons/Link.tsx b/webapp/src/widgets/icons/Link.tsx
index 5b9c1ca3b..c8d98525c 100644
--- a/webapp/src/widgets/icons/Link.tsx
+++ b/webapp/src/widgets/icons/Link.tsx
@@ -7,6 +7,9 @@ import CompassIcon from './compassIcon'
 
 export default function LinkIcon(): JSX.Element {
     return (
-        <CompassIcon icon={'link-variant'}/>
+        <CompassIcon
+            icon='link-variant'
+            className='LinkIcon'
+        />
     )
 }
diff --git a/webapp/src/widgets/icons/add.scss b/webapp/src/widgets/icons/add.scss
index 3ab35faf5..d88f0b0f7 100644
--- a/webapp/src/widgets/icons/add.scss
+++ b/webapp/src/widgets/icons/add.scss
@@ -1,7 +1,4 @@
 .AddIcon {
-    stroke: rgb(var(--body-color), 0.5);
-    stroke-width: 4px;
-    fill: none;
-    width: 24px;
-    height: 24px;
+    color: rgb(var(--body-color), 0.5);
+    font-size: 16px;
 }
diff --git a/webapp/src/widgets/icons/add.tsx b/webapp/src/widgets/icons/add.tsx
index 0fd2b1314..0543c7872 100644
--- a/webapp/src/widgets/icons/add.tsx
+++ b/webapp/src/widgets/icons/add.tsx
@@ -3,17 +3,15 @@
 
 import React from 'react'
 
+import CompassIcon from './compassIcon'
+
 import './add.scss'
 
 export default function AddIcon(): JSX.Element {
     return (
-        <svg
-            xmlns='http://www.w3.org/2000/svg'
-            className='AddIcon Icon'
-            viewBox='0 0 100 100'
-        >
-            <polyline points='30,50 70,50'/>
-            <polyline points='50,30 50,70'/>
-        </svg>
+        <CompassIcon
+            icon='plus'
+            className='AddIcon'
+        />
     )
 }
diff --git a/webapp/src/widgets/icons/close.scss b/webapp/src/widgets/icons/close.scss
index 4fefa332d..e7c515847 100644
--- a/webapp/src/widgets/icons/close.scss
+++ b/webapp/src/widgets/icons/close.scss
@@ -1,7 +1,4 @@
 .CloseIcon {
-    stroke: rgb(var(--body-color), 0.5);
-    stroke-width: 4px;
-    fill: none;
-    width: 24px;
-    height: 24px;
+    color: rgb(var(--body-color), 0.5);
+    font-size: 24px;
 }
diff --git a/webapp/src/widgets/icons/close.tsx b/webapp/src/widgets/icons/close.tsx
index a91a3e8a5..8ed825d65 100644
--- a/webapp/src/widgets/icons/close.tsx
+++ b/webapp/src/widgets/icons/close.tsx
@@ -3,17 +3,15 @@
 
 import React from 'react'
 
+import CompassIcon from './compassIcon'
+
 import './close.scss'
 
 export default function CloseIcon(): JSX.Element {
     return (
-        <svg
-            xmlns='http://www.w3.org/2000/svg'
-            className='CloseIcon Icon'
-            viewBox='0 0 100 100'
-        >
-            <polyline points='30,30 70,70'/>
-            <polyline points='70,30 30,70'/>
-        </svg>
+        <CompassIcon
+            icon='close'
+            className='CloseIcon'
+        />
     )
 }
diff --git a/webapp/src/widgets/icons/compassIcon.tsx b/webapp/src/widgets/icons/compassIcon.tsx
index af4f2a3c4..ce6c3f764 100644
--- a/webapp/src/widgets/icons/compassIcon.tsx
+++ b/webapp/src/widgets/icons/compassIcon.tsx
@@ -5,12 +5,13 @@ import React from 'react'
 
 type Props = {
     icon: string,
+    className: string,
 }
 
 export default function CompassIcon(props: Props): JSX.Element {
     // All compass icon classes start with icon,
     // so not expecting that prefix in props.
     return (
-        <i className={`CompassIcon icon-${props.icon}`}/>
+        <i className={`CompassIcon icon-${props.icon} ${props.className}`}/>
     )
 }
diff --git a/webapp/src/widgets/icons/dropdown.scss b/webapp/src/widgets/icons/dropdown.scss
index 3be0ce77e..af75daf78 100644
--- a/webapp/src/widgets/icons/dropdown.scss
+++ b/webapp/src/widgets/icons/dropdown.scss
@@ -1,7 +1,4 @@
 .DropdownIcon {
-    fill: none;
-    stroke: rgb(var(--body-color));
-    stroke-width: 4px;
-    width: 24px;
-    height: 24px;
+    color: rgb(var(--body-color));
+    font-size: 16px;
 }
diff --git a/webapp/src/widgets/icons/dropdown.tsx b/webapp/src/widgets/icons/dropdown.tsx
index 9d2d5c859..14f2b14e8 100644
--- a/webapp/src/widgets/icons/dropdown.tsx
+++ b/webapp/src/widgets/icons/dropdown.tsx
@@ -3,18 +3,15 @@
 
 import React from 'react'
 
+import CompassIcon from './compassIcon'
+
 import './dropdown.scss'
 
 export default function DropdownIcon(): JSX.Element {
     return (
-        <svg
-            xmlns='http://www.w3.org/2000/svg'
-            className='DropdownIcon Icon'
-            viewBox='0 0 100 100'
-        >
-            <polyline
-                points='30,35 50,55 70,35'
-            />
-        </svg>
+        <CompassIcon
+            icon='chevron-down'
+            className='DropdownIcon'
+        />
     )
 }
diff --git a/webapp/src/widgets/icons/options.scss b/webapp/src/widgets/icons/options.scss
index 512a6efe2..074f7429f 100644
--- a/webapp/src/widgets/icons/options.scss
+++ b/webapp/src/widgets/icons/options.scss
@@ -1,5 +1,4 @@
 .OptionsIcon {
-    fill: rgba(var(--body-color), 0.5);
-    width: 24px;
-    height: 24px;
+    color: rgba(var(--body-color), 0.5);
+    font-size: 16px;
 }
diff --git a/webapp/src/widgets/icons/options.tsx b/webapp/src/widgets/icons/options.tsx
index 2c6f95af8..958740146 100644
--- a/webapp/src/widgets/icons/options.tsx
+++ b/webapp/src/widgets/icons/options.tsx
@@ -3,30 +3,15 @@
 
 import React from 'react'
 
+import CompassIcon from './compassIcon'
+
 import './options.scss'
 
 export default function OptionsIcon(): JSX.Element {
     return (
-        <svg
-            xmlns='http://www.w3.org/2000/svg'
-            className='OptionsIcon Icon'
-            viewBox='0 0 100 100'
-        >
-            <circle
-                cx='30'
-                cy='50'
-                r='5'
-            />
-            <circle
-                cx='50'
-                cy='50'
-                r='5'
-            />
-            <circle
-                cx='70'
-                cy='50'
-                r='5'
-            />
-        </svg>
+        <CompassIcon
+            icon='dots-horizontal'
+            className='OptionsIcon'
+        />
     )
 }