From bcca4b91eea215dd04ea3057e0c048fadc761982 Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Fri, 24 Sep 2021 19:39:31 -0700
Subject: [PATCH] feat: Add 5 new collection icons

---
 app/components/IconPicker.js | 49 +++++++++++++++++++++++++++++-------
 package.json                 |  2 +-
 yarn.lock                    |  8 +++---
 3 files changed, 45 insertions(+), 14 deletions(-)

diff --git a/app/components/IconPicker.js b/app/components/IconPicker.js
index 12d460876..6537e1a8b 100644
--- a/app/components/IconPicker.js
+++ b/app/components/IconPicker.js
@@ -6,11 +6,13 @@ import {
   AcademicCapIcon,
   BeakerIcon,
   BuildingBlocksIcon,
+  CameraIcon,
   CloudIcon,
   CodeIcon,
   EditIcon,
   EmailIcon,
   EyeIcon,
+  InfoIcon,
   ImageIcon,
   LeafIcon,
   LightBulbIcon,
@@ -19,10 +21,13 @@ import {
   NotepadIcon,
   PadlockIcon,
   PaletteIcon,
+  PromoteIcon,
   QuestionMarkIcon,
+  SportIcon,
   SunIcon,
+  TargetIcon,
+  ToolsIcon,
   VehicleIcon,
-  WarningIcon,
 } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
@@ -56,6 +61,10 @@ export const icons = {
     component: CoinsIcon,
     keywords: "coins money finance sales income revenue cash",
   },
+  camera: {
+    component: CameraIcon,
+    keywords: "photo picture",
+  },
   academicCap: {
     component: AcademicCapIcon,
     keywords: "learn teach lesson guide tutorial onboarding training",
@@ -84,6 +93,10 @@ export const icons = {
     component: EyeIcon,
     keywords: "eye view",
   },
+  info: {
+    component: InfoIcon,
+    keywords: "info information",
+  },
   image: {
     component: ImageIcon,
     keywords: "image photo picture",
@@ -120,6 +133,10 @@ export const icons = {
     component: EditIcon,
     keywords: "copy writing post blog",
   },
+  promote: {
+    component: PromoteIcon,
+    keywords: "marketing promotion",
+  },
   question: {
     component: QuestionMarkIcon,
     keywords: "question help support faq",
@@ -128,14 +145,22 @@ export const icons = {
     component: SunIcon,
     keywords: "day sun weather",
   },
+  sport: {
+    component: SportIcon,
+    keywords: "sport outdoor racket game",
+  },
+  target: {
+    component: TargetIcon,
+    keywords: "target goal sales",
+  },
+  tools: {
+    component: ToolsIcon,
+    keywords: "tool settings",
+  },
   vehicle: {
     component: VehicleIcon,
     keywords: "truck car travel transport",
   },
-  warning: {
-    component: WarningIcon,
-    keywords: "danger",
-  },
 };
 
 const colors = [
@@ -164,7 +189,6 @@ function IconPicker({ onOpen, icon, color, onChange }: Props) {
     modal: true,
     placement: "bottom-end",
   });
-  const Component = icons[icon || "collection"].component;
 
   return (
     <Wrapper>
@@ -174,14 +198,17 @@ function IconPicker({ onOpen, icon, color, onChange }: Props) {
       <MenuButton {...menu}>
         {(props) => (
           <Button aria-label={t("Show menu")} {...props}>
-            <Component color={color} size={30} />
+            <Icon
+              as={icons[icon || "collection"].component}
+              color={color}
+              size={30}
+            />
           </Button>
         )}
       </MenuButton>
       <ContextMenu {...menu} onOpen={onOpen} aria-label={t("Choose icon")}>
         <Icons>
           {Object.keys(icons).map((name) => {
-            const Component = icons[name].component;
             return (
               <MenuItem
                 key={name}
@@ -190,7 +217,7 @@ function IconPicker({ onOpen, icon, color, onChange }: Props) {
               >
                 {(props) => (
                   <IconButton style={style} {...props}>
-                    <Component color={color} size={30} />
+                    <Icon as={icons[name].component} color={color} size={30} />
                   </IconButton>
                 )}
               </MenuItem>
@@ -212,6 +239,10 @@ function IconPicker({ onOpen, icon, color, onChange }: Props) {
   );
 }
 
+const Icon = styled.svg`
+  transition: fill 150ms ease-in-out;
+`;
+
 const Label = styled.label`
   display: block;
 `;
diff --git a/package.json b/package.json
index d3b151128..5aac34ea1 100644
--- a/package.json
+++ b/package.json
@@ -116,7 +116,7 @@
     "mobx-react": "^6.3.1",
     "natural-sort": "^1.0.0",
     "nodemailer": "^6.4.16",
-    "outline-icons": "^1.31.0",
+    "outline-icons": "^1.33.0",
     "oy-vey": "^0.10.0",
     "passport": "^0.4.1",
     "passport-google-oauth2": "^0.2.0",
diff --git a/yarn.lock b/yarn.lock
index 584ea4b26..94ed34685 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -10654,10 +10654,10 @@ os-name@^3.1.0:
     macos-release "^2.2.0"
     windows-release "^3.1.0"
 
-outline-icons@^1.26.1, outline-icons@^1.31.0:
-  version "1.31.0"
-  resolved "https://registry.yarnpkg.com/outline-icons/-/outline-icons-1.31.0.tgz#c373667442300afdb1a9fd6059180833c6123fcb"
-  integrity sha512-pe2vSI1mR4bJaWpmTitniyNpu4oq8dVObOweh/H6EON+12w2QDRtJZ6A6Bkc2vjlb2ZRYcZasisJI9VBUuTnHQ==
+outline-icons@^1.26.1, outline-icons@^1.33.0:
+  version "1.33.0"
+  resolved "https://registry.yarnpkg.com/outline-icons/-/outline-icons-1.33.0.tgz#eb022b170977eb977ab531941f2976f95860a6df"
+  integrity sha512-Ib2kEZ+2rlidyLJa9istA5k0GSV6731PXlKMJ2o4qzzO9h+AoxPeSmE7Rx3ZzrZDCYDMuruWcOLyNWjwu1/bLw==
 
 oy-vey@^0.10.0:
   version "0.10.0"