From c5c0958905b918f6159a5984e4a2a18f030e167a Mon Sep 17 00:00:00 2001
From: Nikolaj Frey <nikolaj@dotdev.com.au>
Date: Wed, 5 Jul 2023 20:14:49 +1000
Subject: [PATCH] feat: feature/rainbow-component Modified commander mobile
 view

---
 remix/app/components/Commander/Commander.tsx | 100 ++++++++++---------
 remix/app/components/Rainbow/Rainbow.tsx     |   2 +
 2 files changed, 55 insertions(+), 47 deletions(-)

diff --git a/remix/app/components/Commander/Commander.tsx b/remix/app/components/Commander/Commander.tsx
index 1c67f2f..14516df 100644
--- a/remix/app/components/Commander/Commander.tsx
+++ b/remix/app/components/Commander/Commander.tsx
@@ -317,14 +317,14 @@ export const Commander = (props) => {
     <ClickAwayListener onClickAway={closeCommander}>
       <Flex
         position="absolute"
-        // display={['flex', commanderActive ? 'flex' : 'none']}
         top={0}
+        right={0}
         // zIndex={99999}
         // position='fixed'
         // top='100px'
-        right={0}
         left={0}
         justifyContent={["flex-start", "center"]}
+        // display={["flex", commanderActive ? "flex" : "none"]}
         maxWidth="100%"
         height="100%"
         pointerEvents="none"
@@ -386,55 +386,61 @@ export const Commander = (props) => {
             <Thingtime thing={contextValue}></Thingtime>
           </Flex>
         </Flex>
-        <Rainbow
-          filter="blur(15px)"
-          opacity={commanderActive ? 0.25 : 0}
-          repeats={rainbowRepeats}
-          thickness={8}
-          overflow="visible"
+        <Center
+          position="relative"
+          width={["100%", "400px"]}
+          maxWidth={[mobileVW, "100%"]}
+          height="100%"
         >
-          <Center
-            position="relative"
-            overflow="hidden"
-            width={["100%", "400px"]}
-            maxWidth={[mobileVW, "100%"]}
-            height="100%"
-            padding="1px"
-            borderRadius="6px"
-            pointerEvents="all"
-            outline="none"
+          <Rainbow
+            filter="blur(15px)"
+            opacity={commanderActive ? 0.25 : 0}
+            repeats={rainbowRepeats}
+            thickness={8}
+            overflow="visible"
           >
-            <Rainbow
-              opacity={commanderActive ? 0.5 : 0}
-              position="absolute"
-              expand
-              repeats={rainbowRepeats}
-              opacityTransition="all 3000ms ease"
-              thickness={10}
-            ></Rainbow>
-            <Input
-              // display='none'
-              // opacity={0}
-              ref={inputRef}
-              sx={{
-                "&::placeholder": {
-                  color: "greys.dark",
-                },
-              }}
-              width="100%"
+            <Center
+              position="relative"
+              overflow="hidden"
+              width={["100%", "400px"]}
+              maxWidth={[mobileVW, "100%"]}
               height="100%"
-              background="grey"
-              border="none"
-              borderRadius="5px"
+              padding="1px"
+              borderRadius="6px"
+              pointerEvents="all"
               outline="none"
-              onChange={onChange}
-              onFocus={openCommander}
-              onKeyDown={onKeyDown}
-              placeholder={"What's on your mind?"}
-              value={value}
-            ></Input>
-          </Center>
-        </Rainbow>
+            >
+              <Rainbow
+                opacity={commanderActive ? 0.5 : 0}
+                position="absolute"
+                repeats={rainbowRepeats}
+                opacityTransition="all 3000ms ease"
+                thickness={10}
+              ></Rainbow>
+              <Input
+                // display='none'
+                // opacity={0}
+                ref={inputRef}
+                sx={{
+                  "&::placeholder": {
+                    color: "greys.dark",
+                  },
+                }}
+                width="100%"
+                height="100%"
+                background="grey"
+                border="none"
+                borderRadius="5px"
+                outline="none"
+                onChange={onChange}
+                onFocus={openCommander}
+                onKeyDown={onKeyDown}
+                placeholder={"What's on your mind?"}
+                value={value}
+              ></Input>
+            </Center>
+          </Rainbow>
+        </Center>
       </Flex>
     </ClickAwayListener>
   )
diff --git a/remix/app/components/Rainbow/Rainbow.tsx b/remix/app/components/Rainbow/Rainbow.tsx
index c3e1327..f8498e9 100644
--- a/remix/app/components/Rainbow/Rainbow.tsx
+++ b/remix/app/components/Rainbow/Rainbow.tsx
@@ -13,6 +13,8 @@ export const Rainbow = (allProps: any): JSX.Element => {
 
   const uuid = useUuid()
 
+  props.expand = props?.expand || true
+
   const [hidden, setHidden] = React.useState(true)
   const repeats = props?.repeats || 1
   const [filter, setFilter] = React.useState(props?.filter)