adjust mobile view
Signed-off-by: Uncle Fatso <uncle.fatso@ghostchain.io>
This commit is contained in:
parent
1663e82172
commit
73db807107
@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "ghost-dao-interface",
|
||||
"private": true,
|
||||
"version": "0.7.11",
|
||||
"version": "0.7.12",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
|
||||
@ -121,7 +121,7 @@ function App() {
|
||||
const provider = usePublicClient();
|
||||
const chainId = useChainId();
|
||||
|
||||
const isSmallerScreen = useMediaQuery("(max-width: 1047px)");
|
||||
const isSmallerScreen = useMediaQuery("(max-width: 1130px)");
|
||||
const isSmallScreen = useMediaQuery("(max-width: 600px)");
|
||||
|
||||
const {
|
||||
|
||||
@ -2,7 +2,7 @@ import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
|
||||
|
||||
const PageTitle = ({ name, subtitle, noMargin }) => {
|
||||
const theme = useTheme();
|
||||
const mobile = useMediaQuery(theme.breakpoints.down("700"));
|
||||
const mobile = useMediaQuery(theme.breakpoints.down("900"));
|
||||
|
||||
return (
|
||||
<Box
|
||||
|
||||
@ -6,7 +6,7 @@ import { PrimaryButton } from "../Button"
|
||||
|
||||
const GHOST_CONNECT = 'https://git.ghostchain.io/ghostchain/ghost-extension-wallet/releases';
|
||||
|
||||
function GhostChainSelect() {
|
||||
function GhostChainSelect({ small }) {
|
||||
const { providerDetail, isConnected } = useUnstableProvider();
|
||||
const theme = useTheme();
|
||||
|
||||
@ -14,7 +14,7 @@ function GhostChainSelect() {
|
||||
return (
|
||||
<Box
|
||||
height="39px"
|
||||
width="155px"
|
||||
width={small ? "100px" : "155px"}
|
||||
borderRadius="4px"
|
||||
padding="0 14px"
|
||||
border="1px solid #50759e"
|
||||
@ -29,7 +29,7 @@ function GhostChainSelect() {
|
||||
>
|
||||
<Box display="flex" flexDirection="row">
|
||||
<SvgIcon component={parseKnownToken("CSPR")} inheritViewBox />
|
||||
<Typography sx={{ paddingLeft: "6px"}}>CASPER</Typography>
|
||||
{!small && <Typography sx={{ paddingLeft: "6px"}}>CASPER</Typography>}
|
||||
</Box>
|
||||
<Box
|
||||
width="21px"
|
||||
@ -43,13 +43,13 @@ function GhostChainSelect() {
|
||||
}
|
||||
|
||||
return (
|
||||
<Box height="39px" width="155px">
|
||||
<Box height="39px" width={small ? "100px" : "155px"}>
|
||||
<PrimaryButton
|
||||
sx={{ margin: "0 !important", padding: "0 !important" }}
|
||||
onClick={() => window.open(GHOST_CONNECT, '_blank', 'noopener,noreferrer')}
|
||||
fullWidth
|
||||
>
|
||||
Get GHOST Connect
|
||||
Get GHOST {small ? "" : "Connect"}
|
||||
</PrimaryButton>
|
||||
</Box>
|
||||
)
|
||||
|
||||
@ -71,7 +71,7 @@ function SelectNetwork({ chainId, wrongNetworkToastId, setWrongNetworkToastId, s
|
||||
}
|
||||
|
||||
return(
|
||||
<FormControl sx={{ width: small ? "100px" : "155px" }}>
|
||||
<FormControl sx={{ width: small ? "auto" : "155px" }}>
|
||||
<Select
|
||||
labelId="network-select-helper-label"
|
||||
id="network-select-helper"
|
||||
|
||||
@ -23,8 +23,8 @@ function TopBar({
|
||||
setWrongNetworkToastId
|
||||
}) {
|
||||
const themeColor = useTheme();
|
||||
const desktop = useMediaQuery(themeColor.breakpoints.up(1048));
|
||||
const small = useMediaQuery(themeColor.breakpoints.down(400));
|
||||
const desktop = useMediaQuery(themeColor.breakpoints.up(1130));
|
||||
const small = useMediaQuery(themeColor.breakpoints.down(600));
|
||||
return (
|
||||
<Box
|
||||
display="flex"
|
||||
@ -41,7 +41,7 @@ function TopBar({
|
||||
width={small ? "calc(100vw - 78px)" : "500px"}
|
||||
height="40px"
|
||||
>
|
||||
<GhostChainSelect />
|
||||
<GhostChainSelect small={small} />
|
||||
<SelectNetwork
|
||||
wrongNetworkToastId={wrongNetworkToastId}
|
||||
setWrongNetworkToastId={setWrongNetworkToastId}
|
||||
|
||||
@ -11,7 +11,7 @@ const WalletButton = ({ openWallet, connect }) => {
|
||||
const { isConnected, chain } = useAccount();
|
||||
const theme = useTheme();
|
||||
const onClick = isConnected ? openWallet : connect;
|
||||
const label = isConnected ? "Open Wallet" : `Connect Wallet`;
|
||||
const label = isConnected ? "Wallet" : `Connect`;
|
||||
return (
|
||||
<Button
|
||||
id="fatso-menu-button"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user