Migrating some icons to Compass icons

webapp/package.json

@@ -54,7 +54,7 @@
 		},
 		"globals": {
 			"ts-jest": {
-				"tsConfig": "./src/tsconfig.json"
+				"tsconfig": "./src/tsconfig.json"
 			}
 		},
 		"transform": {

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 {

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
+              <i
-                class="OptionsIcon Icon"
+                class="CompassIcon icon-dots-horizontal OptionsIcon"
-                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>
             </div>
           </div>
           <div
             class="Button IconButton"
           >
-            <svg
+            <i
-              class="AddIcon Icon"
+              class="CompassIcon icon-plus AddIcon"
-              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>
           </div>
         </div>
       </div>

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
+        <i
-          class="OptionsIcon Icon"
+          class="CompassIcon icon-dots-horizontal OptionsIcon"
-          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>
       </div>
     </div>
     <div
       class="Button IconButton"
     >
-      <svg
+      <i
-        class="AddIcon Icon"
+        class="CompassIcon icon-plus AddIcon"
-        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>
     </div>
   </div>
 </div>
@@ -186,44 +159,17 @@ exports[`should match snapshot, add new 1`] = `
       <div
         class="Button IconButton"
       >
-        <svg
+        <i
-          class="OptionsIcon Icon"
+          class="CompassIcon icon-dots-horizontal OptionsIcon"
-          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>
       </div>
     </div>
     <div
       class="Button IconButton"
     >
-      <svg
+      <i
-        class="AddIcon Icon"
+        class="CompassIcon icon-plus AddIcon"
-        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>
     </div>
   </div>
 </div>
@@ -277,44 +223,17 @@ exports[`should match snapshot, edit title 1`] = `
       <div
         class="Button IconButton"
       >
-        <svg
+        <i
-          class="OptionsIcon Icon"
+          class="CompassIcon icon-dots-horizontal OptionsIcon"
-          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>
       </div>
     </div>
     <div
       class="Button IconButton"
     >
-      <svg
+      <i
-        class="AddIcon Icon"
+        class="CompassIcon icon-plus AddIcon"
-        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>
     </div>
   </div>
 </div>
@@ -368,44 +287,17 @@ exports[`should match snapshot, hide group 1`] = `
       <div
         class="Button IconButton"
       >
-        <svg
+        <i
-          class="OptionsIcon Icon"
+          class="CompassIcon icon-dots-horizontal OptionsIcon"
-          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>
       </div>
     </div>
     <div
       class="Button IconButton"
     >
-      <svg
+      <i
-        class="AddIcon Icon"
+        class="CompassIcon icon-plus AddIcon"
-        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>
     </div>
   </div>
 </div>
@@ -455,44 +347,17 @@ exports[`should match snapshot, no groups 1`] = `
       <div
         class="Button IconButton"
       >
-        <svg
+        <i
-          class="OptionsIcon Icon"
+          class="CompassIcon icon-dots-horizontal OptionsIcon"
-          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>
       </div>
     </div>
     <div
       class="Button IconButton"
     >
-      <svg
+      <i
-        class="AddIcon Icon"
+        class="CompassIcon icon-plus AddIcon"
-        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>
     </div>
   </div>
 </div>

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(() => {

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));
         }
     }
 }

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'
+        />
     )
 }

webapp/src/widgets/icons/add.scss

@@ -1,7 +1,4 @@
 .AddIcon {
-    stroke: rgb(var(--body-color), 0.5);
+    color: rgb(var(--body-color), 0.5);
-    stroke-width: 4px;
+    font-size: 16px;
-    fill: none;
-    width: 24px;
-    height: 24px;
 }

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
+        <CompassIcon
-            xmlns='http://www.w3.org/2000/svg'
+            icon='plus'
-            className='AddIcon Icon'
+            className='AddIcon'
-            viewBox='0 0 100 100'
+        />
-        >
-            <polyline points='30,50 70,50'/>
-            <polyline points='50,30 50,70'/>
-        </svg>
     )
 }

webapp/src/widgets/icons/close.scss

@@ -1,7 +1,4 @@
 .CloseIcon {
-    stroke: rgb(var(--body-color), 0.5);
+    color: rgb(var(--body-color), 0.5);
-    stroke-width: 4px;
+    font-size: 24px;
-    fill: none;
-    width: 24px;
-    height: 24px;
 }

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
+        <CompassIcon
-            xmlns='http://www.w3.org/2000/svg'
+            icon='close'
-            className='CloseIcon Icon'
+            className='CloseIcon'
-            viewBox='0 0 100 100'
+        />
-        >
-            <polyline points='30,30 70,70'/>
-            <polyline points='70,30 30,70'/>
-        </svg>
     )
 }

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}`}/>
     )
 }

webapp/src/widgets/icons/dropdown.scss

@@ -1,7 +1,4 @@
 .DropdownIcon {
-    fill: none;
+    color: rgb(var(--body-color));
-    stroke: rgb(var(--body-color));
+    font-size: 16px;
-    stroke-width: 4px;
-    width: 24px;
-    height: 24px;
 }

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
+        <CompassIcon
-            xmlns='http://www.w3.org/2000/svg'
+            icon='chevron-down'
-            className='DropdownIcon Icon'
+            className='DropdownIcon'
-            viewBox='0 0 100 100'
+        />
-        >
-            <polyline
-                points='30,35 50,55 70,35'
-            />
-        </svg>
     )
 }

webapp/src/widgets/icons/options.scss

@@ -1,5 +1,4 @@
 .OptionsIcon {
-    fill: rgba(var(--body-color), 0.5);
+    color: rgba(var(--body-color), 0.5);
-    width: 24px;
+    font-size: 16px;
-    height: 24px;
 }

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
+        <CompassIcon
-            xmlns='http://www.w3.org/2000/svg'
+            icon='dots-horizontal'
-            className='OptionsIcon Icon'
+            className='OptionsIcon'
-            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>
     )
 }