feat: feature/rainbow-component Modified commander mobile view

Browse Source
This commit is contained in:
Nikolaj Frey 2023-07-05 20:14:49 +10:00
parent e30dc3f56c
commit c5c0958905
2 changed files with 55 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

100
remix/app/components/Commander/Commander.tsx
View File

@ -317,14 +317,14 @@ export const Commander = (props) => {
<ClickAwayListener onClickAway={closeCommander}> <ClickAwayListener onClickAway={closeCommander}>
<Flex <Flex
position="absolute" position="absolute"
// display={['flex', commanderActive ? 'flex' : 'none']}
top={0} top={0}
right={0}
// zIndex={99999} // zIndex={99999}
// position='fixed' // position='fixed'
// top='100px' // top='100px'
right={0}
left={0} left={0}
justifyContent={["flex-start", "center"]} justifyContent={["flex-start", "center"]}
// display={["flex", commanderActive ? "flex" : "none"]}
maxWidth="100%" maxWidth="100%"
height="100%" height="100%"
pointerEvents="none" pointerEvents="none"
@ -386,55 +386,61 @@ export const Commander = (props) => {
<Thingtime thing={contextValue}></Thingtime> <Thingtime thing={contextValue}></Thingtime>
</Flex> </Flex>
</Flex> </Flex>
<Rainbow <Center
filter="blur(15px)" position="relative"
opacity={commanderActive ? 0.25 : 0} width={["100%", "400px"]}
repeats={rainbowRepeats} maxWidth={[mobileVW, "100%"]}
thickness={8} height="100%"
overflow="visible"
> >
<Center <Rainbow
position="relative" filter="blur(15px)"
overflow="hidden" opacity={commanderActive ? 0.25 : 0}
width={["100%", "400px"]} repeats={rainbowRepeats}
maxWidth={[mobileVW, "100%"]} thickness={8}
height="100%" overflow="visible"
padding="1px"
borderRadius="6px"
pointerEvents="all"
outline="none"
> >
<Rainbow <Center
opacity={commanderActive ? 0.5 : 0} position="relative"
position="absolute" overflow="hidden"
expand width={["100%", "400px"]}
repeats={rainbowRepeats} maxWidth={[mobileVW, "100%"]}
opacityTransition="all 3000ms ease"
thickness={10}
></Rainbow>
<Input
// display='none'
// opacity={0}
ref={inputRef}
sx={{
"&::placeholder": {
color: "greys.dark",
},
}}
width="100%"
height="100%" height="100%"
background="grey" padding="1px"
border="none" borderRadius="6px"
borderRadius="5px" pointerEvents="all"
outline="none" outline="none"
onChange={onChange} >
onFocus={openCommander} <Rainbow
onKeyDown={onKeyDown} opacity={commanderActive ? 0.5 : 0}
placeholder={"What's on your mind?"} position="absolute"
value={value} repeats={rainbowRepeats}
></Input> opacityTransition="all 3000ms ease"
</Center> thickness={10}
</Rainbow> ></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> </Flex>
</ClickAwayListener> </ClickAwayListener>
) )

2
remix/app/components/Rainbow/Rainbow.tsx
View File

@ -13,6 +13,8 @@ export const Rainbow = (allProps: any): JSX.Element => {
const uuid = useUuid() const uuid = useUuid()
props.expand = props?.expand || true
const [hidden, setHidden] = React.useState(true) const [hidden, setHidden] = React.useState(true)
const repeats = props?.repeats || 1 const repeats = props?.repeats || 1
const [filter, setFilter] = React.useState(props?.filter) const [filter, setFilter] = React.useState(props?.filter)