ghostchain/ghost-dao-interface
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

adjust mobile view

Browse Source 
Signed-off-by: Uncle Fatso <uncle.fatso@ghostchain.io>
This commit is contained in:
Uncle Fatso 2026-04-10 13:51:47 +03:00
parent 1663e82172
commit 73db807107
Signed by: f4ts0
GPG Key ID: 565F4F2860226EBB
7 changed files with 13 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -1,7 +1,7 @@
{ {
"name": "ghost-dao-interface", "name": "ghost-dao-interface",
"private": true, "private": true,
"version": "0.7.11", "version": "0.7.12",
"type": "module", "type": "module",
"scripts": { "scripts": {
"dev": "vite", "dev": "vite",

2
src/App.jsx
View File

@ -121,7 +121,7 @@ function App() {
const provider = usePublicClient(); const provider = usePublicClient();
const chainId = useChainId(); const chainId = useChainId();
const isSmallerScreen = useMediaQuery("(max-width: 1047px)"); const isSmallerScreen = useMediaQuery("(max-width: 1130px)");
const isSmallScreen = useMediaQuery("(max-width: 600px)"); const isSmallScreen = useMediaQuery("(max-width: 600px)");
const { const {

2
src/components/PageTitle/PageTitle.jsx
View File

@ -2,7 +2,7 @@ import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
const PageTitle = ({ name, subtitle, noMargin }) => { const PageTitle = ({ name, subtitle, noMargin }) => {
const theme = useTheme(); const theme = useTheme();
const mobile = useMediaQuery(theme.breakpoints.down("700")); const mobile = useMediaQuery(theme.breakpoints.down("900"));
return ( return (
<Box <Box

10
src/components/TopBar/GhostChainSelect.jsx
View File

@ -6,7 +6,7 @@ import { PrimaryButton } from "../Button"
const GHOST_CONNECT = 'https://git.ghostchain.io/ghostchain/ghost-extension-wallet/releases'; const GHOST_CONNECT = 'https://git.ghostchain.io/ghostchain/ghost-extension-wallet/releases';
function GhostChainSelect() { function GhostChainSelect({ small }) {
const { providerDetail, isConnected } = useUnstableProvider(); const { providerDetail, isConnected } = useUnstableProvider();
const theme = useTheme(); const theme = useTheme();
@ -14,7 +14,7 @@ function GhostChainSelect() {
return ( return (
<Box <Box
height="39px" height="39px"
width="155px" width={small ? "100px" : "155px"}
borderRadius="4px" borderRadius="4px"
padding="0 14px" padding="0 14px"
border="1px solid #50759e" border="1px solid #50759e"
@ -29,7 +29,7 @@ function GhostChainSelect() {
> >
<Box display="flex" flexDirection="row"> <Box display="flex" flexDirection="row">
<SvgIcon component={parseKnownToken("CSPR")} inheritViewBox /> <SvgIcon component={parseKnownToken("CSPR")} inheritViewBox />
<Typography sx={{ paddingLeft: "6px"}}>CASPER</Typography> {!small && <Typography sx={{ paddingLeft: "6px"}}>CASPER</Typography>}
</Box> </Box>
<Box <Box
width="21px" width="21px"
@ -43,13 +43,13 @@ function GhostChainSelect() {
} }
return ( return (
<Box height="39px" width="155px"> <Box height="39px" width={small ? "100px" : "155px"}>
<PrimaryButton <PrimaryButton
sx={{ margin: "0 !important", padding: "0 !important" }} sx={{ margin: "0 !important", padding: "0 !important" }}
onClick={() => window.open(GHOST_CONNECT, '_blank', 'noopener,noreferrer')} onClick={() => window.open(GHOST_CONNECT, '_blank', 'noopener,noreferrer')}
fullWidth fullWidth
> >
Get GHOST Connect Get GHOST {small ? "" : "Connect"}
</PrimaryButton> </PrimaryButton>
</Box> </Box>
) )

2
src/components/TopBar/SelectNetwork.jsx
View File

@ -71,7 +71,7 @@ function SelectNetwork({ chainId, wrongNetworkToastId, setWrongNetworkToastId, s
} }
return( return(
<FormControl sx={{ width: small ? "100px" : "155px" }}> <FormControl sx={{ width: small ? "auto" : "155px" }}>
<Select <Select
labelId="network-select-helper-label" labelId="network-select-helper-label"
id="network-select-helper" id="network-select-helper"

6
src/components/TopBar/TopBar.jsx
View File

@ -23,8 +23,8 @@ function TopBar({
setWrongNetworkToastId setWrongNetworkToastId
}) { }) {
const themeColor = useTheme(); const themeColor = useTheme();
const desktop = useMediaQuery(themeColor.breakpoints.up(1048)); const desktop = useMediaQuery(themeColor.breakpoints.up(1130));
const small = useMediaQuery(themeColor.breakpoints.down(400)); const small = useMediaQuery(themeColor.breakpoints.down(600));
return ( return (
<Box <Box
display="flex" display="flex"
@ -41,7 +41,7 @@ function TopBar({
width={small ? "calc(100vw - 78px)" : "500px"} width={small ? "calc(100vw - 78px)" : "500px"}
height="40px" height="40px"
> >
<GhostChainSelect /> <GhostChainSelect small={small} />
<SelectNetwork <SelectNetwork
wrongNetworkToastId={wrongNetworkToastId} wrongNetworkToastId={wrongNetworkToastId}
setWrongNetworkToastId={setWrongNetworkToastId} setWrongNetworkToastId={setWrongNetworkToastId}

2
src/components/TopBar/Wallet/index.tsx
View File

@ -11,7 +11,7 @@ const WalletButton = ({ openWallet, connect }) => {
const { isConnected, chain } = useAccount(); const { isConnected, chain } = useAccount();
const theme = useTheme(); const theme = useTheme();
const onClick = isConnected ? openWallet : connect; const onClick = isConnected ? openWallet : connect;
const label = isConnected ? "Open Wallet" : `Connect Wallet`; const label = isConnected ? "Wallet" : `Connect`;
return ( return (
<Button <Button
id="fatso-menu-button" id="fatso-menu-button"