feat: feature/mvp-sprint-1 Fixed mobile nav styling

Browse Source
This commit is contained in:
Nikolaj Frey 2023-08-14 10:51:00 +10:00
parent c1d3ab186b
commit 3ecf272981
4 changed files with 16 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -517,6 +517,7 @@ export const Commander = (props) => {
className={"commander-uuid-" + commanderId} className={"commander-uuid-" + commanderId}
// display={["flex", commanderActive ? "flex" : "none"]} // display={["flex", commanderActive ? "flex" : "none"]}
justifyContent="flex-start" justifyContent="flex-start"
width="100%"
maxWidth="100%" maxWidth="100%"
// height="100%" // height="100%"
// paddingX={1} // paddingX={1}

2
remix/app/components/Commander/CommanderV1.tsx
View File

@ -43,7 +43,7 @@ export const CommanderV1 = (props) => {
const [showContext, setShowContextState] = React.useState(false) const [showContext, setShowContextState] = React.useState(false)
const mobileVW = React.useMemo(() => { const mobileVW = React.useMemo(() => {
return "calc(100vw - 55px)" return "calc(100vw - 108px)"
}, []) }, [])
const rainbowRepeats = 2 const rainbowRepeats = 2

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

@ -148,6 +148,8 @@ export const MagicInput = (props) => {
top={0} top={0}
left={0} left={0}
display={inputValue ? "none" : "block"} display={inputValue ? "none" : "block"}
width="100%"
maxWidth="100%"
color="greys.dark" color="greys.dark"
pointerEvents="none" pointerEvents="none"
> >

14
remix/app/components/Nav/Nav.tsx
View File

@ -74,7 +74,12 @@ export const Nav = (props) => {
// bg='white' // bg='white'
// boxShadow={'0px 0px 10px rgba(0,0,0,0.1)'} // boxShadow={'0px 0px 10px rgba(0,0,0,0.1)'}
> >
<Center className="nav-left-section" height="100%" marginRight="auto"> <Center
className="nav-left-section"
display={["none", "flex"]}
height="100%"
marginRight="auto"
>
<Center transform="scaleX(-100%)" cursor="pointer"> <Center transform="scaleX(-100%)" cursor="pointer">
<Link to="/"> <Link to="/">
<Icon size="12px" name="unicorn"></Icon> <Icon size="12px" name="unicorn"></Icon>
@ -107,9 +112,14 @@ export const Nav = (props) => {
></Icon> */} ></Icon> */}
</Center> </Center>
)} )}
<Center transform="scaleX(-100%)" cursor="pointer"> <Center transform={["", "scaleX(-100%)"]} cursor="pointer">
<Icon size="12px" name="rainbow"></Icon> <Icon size="12px" name="rainbow"></Icon>
</Center> </Center>
<Center display={["flex", "none"]} cursor="pointer">
<Link to="/">
<Icon size="12px" name="unicorn"></Icon>
</Link>
</Center>
</Center> </Center>
{/* <RainbowSkeleton {/* <RainbowSkeleton
marginLeft="auto" marginLeft="auto"