feat: feature/mvp-sprint-1

remix/app/components/Commander/CommanderV1.tsx

@@ -513,6 +513,8 @@ export const CommanderV1 = (props) => {
           maxWidth={[mobileVW, "100%"]}
           height="100%"
         >
+          {/* TODO: Fix duplicate code because of rainbow mode disabling hack */}
+          {props?.rainbow && (
             <Rainbow
               filter="blur(15px)"
               opacity={commanderActive ? 0.25 : 0}
@@ -561,6 +563,41 @@ export const CommanderV1 = (props) => {
                 ></Input>
               </Center>
             </Rainbow>
+          )}
+          {!props?.rainbow && (
+            <Center
+              position="relative"
+              overflow="hidden"
+              width={["100%", "400px"]}
+              maxWidth={[mobileVW, "100%"]}
+              height="100%"
+              padding="1px"
+              borderRadius="6px"
+              pointerEvents="all"
+              outline="none"
+            >
+              <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={onInputChange}
+                onFocus={openCommander}
+                placeholder="Imagine.."
+                value={inputValue}
+              ></Input>
+            </Center>
+          )}
         </Center>
       </Flex>
     </ClickAwayListener>