Skip to content

Commit

Permalink
fix: layout
Browse files Browse the repository at this point in the history
  • Loading branch information
@jimcase
jimcase committed Aug 2, 2024
1 parent 70f6fd6 commit 2217e0c
Show file tree
Hide file tree
Showing 5 changed files with 112 additions and 94 deletions.
1 change: 1 addition & 0 deletions ui/summit-2024/src/common/hooks/useSignatures.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,7 @@ export const useSignatures = () => {
}
} catch (e) {
setError(`Error signing message: ${e.message}`);
setIsLoading(false);
return { success: false, error: e.message };
} finally {
setIsLoading(false);
Expand Down
141 changes: 72 additions & 69 deletions ui/summit-2024/src/components/Layout/Layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import {
useMediaQuery,
} from "@mui/material";
import theme from "../../common/styles/theme";
import {ROUTES} from "../../routes";
import { ROUTES } from "../../routes";

type MenuItem = {
label: string;
Expand Down Expand Up @@ -73,70 +73,73 @@ const Layout: React.FC<LayoutProps> = ({
if (onSelectMenuOption) onSelectMenuOption(label);
};

const isLeaderboardPage =
window.location.pathname === ROUTES.LEADERBOARD && !isMobile;

return (
<Box component="div" sx={{ width: "100%", marginTop: isLeaderboardPage ? "0px" : "60px",
paddingX: isLeaderboardPage ? "0px" : "16px", }}>
<Box
component="div"
sx={{
width: "100%",
}}
>
<Grid container>
<Grid item xs={12} md={2.4} lg={2} sx={{}}>
{isMobile ? (
<>
<Box
component="div"
sx={{
width: "100%",
maxWidth: "100vw",
overflowX: 'auto',
overflowY: 'hidden',
WebkitOverflowScrolling: 'touch',
"&::-webkit-scrollbar": {
display: "none",
},
marginTop: "14px",
position: "fixed",
top: 72,
zIndex: 1200,
background: theme.palette.background.default,
}}
component="div"
sx={{
width: "100%",
maxWidth: "100vw",
overflowX: "auto",
overflowY: "hidden",
WebkitOverflowScrolling: "touch",
"&::-webkit-scrollbar": {
display: "none",
},
marginTop: "14px",
position: "fixed",
top: 72,
zIndex: 1200,
background: theme.palette.background.default,
}}
>
<List
sx={{
display: "flex",
flexDirection: "row",
padding: 0,
margin: 0,
whiteSpace: 'nowrap',
}}
sx={{
display: "flex",
flexDirection: "row",
padding: 0,
margin: 0,
whiteSpace: "nowrap",
}}
>
{menuOptions.map((option, index) => (
<ListItem
onClick={() => handleClickMenuItem(option.label)}
key={index}
sx={{
marginRight: "8px",
cursor: "pointer",
}}
<ListItem
onClick={() => handleClickMenuItem(option.label)}
key={index}
sx={{
marginRight: "8px",
cursor: "pointer",
}}
>
<Typography
sx={{
color:
option.label === selectedOption
? theme.palette.background.default
: theme.palette.text.neutralLightest,
background:
option.label === selectedOption
? theme.palette.secondary.main
: "none",
padding: "8px 12px",
borderRadius: "12px",
fontSize: "16px",
fontWeight: 500,
lineHeight: "24px",
}}
>
<Typography
sx={{
color: option.label === selectedOption
? theme.palette.background.default
: theme.palette.text.neutralLightest,
background: option.label === selectedOption
? theme.palette.secondary.main
: "none",
padding: "8px 12px",
borderRadius: "12px",
fontSize: "16px",
fontWeight: 500,
lineHeight: "24px",
}}
>
{option.label}
</Typography>
</ListItem>
{option.label}
</Typography>
</ListItem>
))}
</List>
</Box>
Expand All @@ -153,26 +156,26 @@ const Layout: React.FC<LayoutProps> = ({
borderRight: "1px solid #737380",
}}
>
{
title ? <ListItem
sx={{
paddingLeft: "0px",
marginBottom: "16px",
}}
{title ? (
<ListItem
sx={{
paddingLeft: "0px",
marginBottom: "16px",
}}
>
<Typography
sx={{
fontFamily: "Dosis",
fontSize: "32px",
fontStyle: "normal",
fontWeight: 700,
lineHeight: "36px",
}}
sx={{
fontFamily: "Dosis",
fontSize: "32px",
fontStyle: "normal",
fontWeight: 700,
lineHeight: "36px",
}}
>
{title} ({menuOptions.length})
</Typography>
</ListItem> : null
}
</ListItem>
) : null}

{menuOptions.map((option, index) => (
<ListItem
Expand Down
6 changes: 2 additions & 4 deletions ui/summit-2024/src/components/VerifyWalletModal/VerifyWalletModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@ const VerifyWalletModal = () => {
useState<boolean>(false);
const [inputSecret, setInputSecret] = useState("");

const { signWithWallet } = useSignatures();
const { signWithWallet, isLoading } = useSignatures();
const userVerificationStarted = useAppSelector(getVerificationStarted);

const inputRefs = useRef<(HTMLInputElement | null)[]>([]);
Expand Down Expand Up @@ -826,9 +826,7 @@ const VerifyWalletModal = () => {
colorVariant="primary"
onClick={() => handleVerifyDiscord()}
disabled={
discordIsConfirming ||
inputSecret === "" ||
!validateSecret(inputSecret)
isLoading || inputSecret === "" || !validateSecret(inputSecret)
}
sx={{
width: "100%",
Expand Down
52 changes: 36 additions & 16 deletions ui/summit-2024/src/pages/Categories/Categories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,10 @@ import {
getVoteReceipt,
} from "../../common/api/voteService";
import { eventBus, EventName } from "../../utils/EventBus";
import {getWalletIdentifier, getWalletIsVerified} from "../../store/reducers/userCache";
import {
getWalletIdentifier,
getWalletIsVerified,
} from "../../store/reducers/userCache";
import { getUserInSession, tokenIsExpired } from "../../utils/session";
import { parseError } from "../../common/constants/errors";
import {
Expand All @@ -34,7 +37,11 @@ import { ToastType } from "../../components/common/Toast/Toast.types";
import { useSignatures } from "../../common/hooks/useSignatures";
import { resolveWalletType } from "../../common/api/utils";

const Categories: React.FC = () => {
interface CategoriesProps {
embedded?: boolean;
}

const Categories: React.FC<CategoriesProps> = ({embedded}) => {
const isTablet = useMediaQuery(theme.breakpoints.down("md"));
const eventCache = useAppSelector(getEventCache);
const walletIdentifier = useAppSelector(getWalletIdentifier);
Expand Down Expand Up @@ -116,20 +123,27 @@ const Categories: React.FC = () => {
if (showWinners) {
handleOpenViewReceipt();
} else {
if (!walletIdentifier.length){
eventBus.publish(EventName.ShowToast, "Connect your wallet in order to vote", "error");
if (!walletIdentifier.length) {
eventBus.publish(
EventName.ShowToast,
"Connect your wallet in order to vote",
"error",
);
return;
}
if (!walletIdentifierIsVerified){
eventBus.publish(EventName.ShowToast, "Verify your wallet in order to vote", "error");
if (!walletIdentifierIsVerified) {
eventBus.publish(
EventName.ShowToast,
"Verify your wallet in order to vote",
"error",
);
return;
}
setOpenVotingModal(true);
}
};

const submitVote = async () => {

if (eventCache?.finished) {
eventBus.publish(EventName.ShowToast, "The event already ended", "error");
return;
Expand Down Expand Up @@ -160,10 +174,11 @@ const Categories: React.FC = () => {
resolveWalletType(walletIdentifier),
);

console.log();
if (!requestVoteResult.success) {
eventBus.publish(
EventName.ShowToast,
"Error while signing",
requestVoteResult.error || "Error while signing",
ToastType.Error,
);
return;
Expand Down Expand Up @@ -341,14 +356,19 @@ const Categories: React.FC = () => {
return (
<>
<PageBase title="Categories">
<Layout
title="Categories"
menuOptions={optionsForMenu}
bottom={bottom}
mode="change"
defaultOption={0}
onSelectMenuOption={(option) => handleClickMenuItem(option)}
/>
<Box component="div" sx={{
marginTop: embedded ? "0px" : "60px",
paddingX: embedded ? "0px" : "16px",
}}>
<Layout
title="Categories"
menuOptions={optionsForMenu}
bottom={bottom}
mode="change"
defaultOption={0}
onSelectMenuOption={(option) => handleClickMenuItem(option)}
/>
</Box>
<img
src={Ellipses}
style={{
Expand Down
6 changes: 1 addition & 5 deletions ui/summit-2024/src/pages/UserGuide/UserGuide.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -161,11 +161,7 @@ const UserGuide = () => {
return (
<>
<PageBase title="User Guide">
<Layout
menuOptions={optionsForScroll}
bottom={bottom}
mode="scroll"
/>
<Layout menuOptions={optionsForScroll} bottom={bottom} mode="scroll" />
</PageBase>
</>
);
Expand Down

0 comments on commit 2217e0c

Please sign in to comment.