From f1406577b7c162fd4928442a75ac70bafa74c6b5 Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Sat, 21 Jan 2023 16:37:35 -0800
Subject: [PATCH] Color transition on icon picker

---
 app/components/IconPicker.tsx | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/app/components/IconPicker.tsx b/app/components/IconPicker.tsx
index 18096c126..e43453700 100644
--- a/app/components/IconPicker.tsx
+++ b/app/components/IconPicker.tsx
@@ -51,6 +51,7 @@ const style = {
   width: 30,
   height: 30,
 };
+
 const TwitterPicker = React.lazy(
   () =>
     import(
@@ -241,7 +242,7 @@ function IconPicker({ onOpen, onClose, icon, color, onChange }: Props) {
         aria-label={t("Choose icon")}
       >
         <Icons>
-          {Object.keys(icons).map((name) => {
+          {Object.keys(icons).map((name, index) => {
             return (
               <MenuItem
                 key={name}
@@ -249,7 +250,15 @@ function IconPicker({ onOpen, onClose, icon, color, onChange }: Props) {
                 {...menu}
               >
                 {(props) => (
-                  <IconButton style={style} {...props}>
+                  <IconButton
+                    style={
+                      {
+                        ...style,
+                        "--delay": `${index * 8}ms`,
+                      } as React.CSSProperties
+                    }
+                    {...props}
+                  >
                     <Icon as={icons[name].component} color={color} size={30} />
                   </IconButton>
                 )}
@@ -291,6 +300,7 @@ function IconPicker({ onOpen, onClose, icon, color, onChange }: Props) {
 
 const Icon = styled.svg`
   transition: fill 150ms ease-in-out;
+  transition-delay: var(--delay);
 `;
 
 const Colors = styled(Flex)`