From 7c7a4f86775ea6839491e8f644ab054bad7081ee Mon Sep 17 00:00:00 2001
From: Nikolaj Frey <nikolaj@dotdev.com.au>
Date: Mon, 14 Aug 2023 20:32:14 +1000
Subject: [PATCH] feat: feature/mvp-sprint-1 Added seedling select state
 styling

---
 remix/app/components/Icon/Icon.tsx           |  1 +
 remix/app/components/Thingtime/Thingtime.tsx | 23 ++++++++++++--------
 2 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/remix/app/components/Icon/Icon.tsx b/remix/app/components/Icon/Icon.tsx
index 073139b..25d6c1c 100644
--- a/remix/app/components/Icon/Icon.tsx
+++ b/remix/app/components/Icon/Icon.tsx
@@ -185,6 +185,7 @@ export const Icon = (props) => {
   return (
     <Center
       transition="all 0.2s ease-out"
+      {...props}
       {...props?.chakras}
       fontSize={props?.size}
     >
diff --git a/remix/app/components/Thingtime/Thingtime.tsx b/remix/app/components/Thingtime/Thingtime.tsx
index 655fa66..a6dc875 100644
--- a/remix/app/components/Thingtime/Thingtime.tsx
+++ b/remix/app/components/Thingtime/Thingtime.tsx
@@ -690,20 +690,25 @@ export const Thingtime = (props) => {
                 width="100%"
                 paddingLeft={multiplyPl(2)}
                 opacity={props?.edit ? 1 : 0}
-                border="none !important"
                 cursor="pointer"
                 transition="all 0.2s ease-out"
-                outline="none !important"
                 onClick={addNewChild}
-                onKeyDown={(e) => {
-                  if (e?.key === "Enter") {
-                    addNewChild()
-                  }
-                }}
                 paddingY={2}
-                tabIndex={0}
               >
-                <Icon size={10} name="seedling"></Icon>
+                <Icon
+                  _focus={{
+                    outline: "none !important",
+                    textShadow: "0px 0px 10px green",
+                  }}
+                  onKeyDown={(e) => {
+                    if (e?.key === "Enter") {
+                      addNewChild()
+                    }
+                  }}
+                  tabIndex={0}
+                  size={10}
+                  name="seedling"
+                ></Icon>
                 {/* <Icon size={7} name="plus"></Icon>
           <Icon size={7} name="plus"></Icon> */}
               </Flex>