From 3031d54272d51da020d3a3cd7154b969c60e8669 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?B=C3=A1lint=20Ujv=C3=A1ri?= <58116288+bosi95@users.noreply.github.com> Date: Mon, 16 Mar 2026 13:25:36 +0100 Subject: [PATCH] fix: buy stamp values display (#226) fix: withdraw and deposit buttons style fix: upload history text align fix: buy stamp values display --- src/components/ExpandableListItemLink.tsx | 33 ++++++----- src/components/History.tsx | 4 +- src/components/WithdrawDepositModal.tsx | 35 +++++++++++- src/modules/filemanager/utils/common.ts | 2 +- .../stamps/PostageStampStandardCreation.tsx | 56 ++++++++----------- 5 files changed, 80 insertions(+), 50 deletions(-) diff --git a/src/components/ExpandableListItemLink.tsx b/src/components/ExpandableListItemLink.tsx index 0ec78d6..72a352b 100644 --- a/src/components/ExpandableListItemLink.tsx +++ b/src/components/ExpandableListItemLink.tsx @@ -1,5 +1,5 @@ import { ArrowForward, OpenInNewSharp } from '@mui/icons-material' -import { Grid, IconButton, ListItemButton, Tooltip, Typography } from '@mui/material' +import { Box, IconButton, ListItemButton, Tooltip, Typography } from '@mui/material' import { ReactElement } from 'react' import { useNavigate } from 'react-router' import { makeStyles } from 'tss-react/mui' @@ -43,11 +43,16 @@ const useStyles = makeStyles()(theme => ({ }, })) +export enum NavigationType { + NEW_WINDOW = 'NEW_WINDOW', + HISTORY_PUSH = 'HISTORY_PUSH', +} + interface Props { label: string value: string link?: string - navigationType?: 'NEW_WINDOW' | 'HISTORY_PUSH' + navigationType?: NavigationType allowClipboard?: boolean } @@ -55,7 +60,7 @@ export default function ExpandableListItemLink({ label, value, link, - navigationType = 'NEW_WINDOW', + navigationType = NavigationType.NEW_WINDOW, allowClipboard = true, }: Props): ReactElement | null { const { classes } = useStyles() @@ -65,7 +70,7 @@ export default function ExpandableListItemLink({ const displayValue = value.length > 22 ? value.slice(0, 19) + '...' : value function onNavigation() { - if (navigationType === 'NEW_WINDOW') { + if (navigationType === NavigationType.NEW_WINDOW) { window.open(link || value) } else { navigate(link || value) @@ -73,10 +78,10 @@ export default function ExpandableListItemLink({ } return ( - - - - {label && {label}} + + + {label && {label}} + {allowClipboard && ( @@ -86,13 +91,13 @@ export default function ExpandableListItemLink({ )} {!allowClipboard && {displayValue}} - - {navigationType === 'NEW_WINDOW' && } - {navigationType === 'HISTORY_PUSH' && } - - - + + {navigationType === NavigationType.NEW_WINDOW && } + {navigationType === NavigationType.HISTORY_PUSH && } + + + ) } diff --git a/src/components/History.tsx b/src/components/History.tsx index e1d037b..543b17d 100644 --- a/src/components/History.tsx +++ b/src/components/History.tsx @@ -4,7 +4,7 @@ import { getPrettyDateString } from '../utils/date' import { getHistorySafe, HISTORY_KEYS, HistoryItem } from '../utils/localStorage' import ExpandableList from './ExpandableList' -import ExpandableListItemLink from './ExpandableListItemLink' +import ExpandableListItemLink, { NavigationType } from './ExpandableListItemLink' interface Props { title: string @@ -30,7 +30,7 @@ export function History({ title, localStorageKey }: Props): ReactElement | null value={x.name} link={'/files/hash/' + x.hash} key={i} - navigationType="HISTORY_PUSH" + navigationType={NavigationType.HISTORY_PUSH} allowClipboard={false} /> ))} diff --git a/src/components/WithdrawDepositModal.tsx b/src/components/WithdrawDepositModal.tsx index 22cba08..33d6c45 100644 --- a/src/components/WithdrawDepositModal.tsx +++ b/src/components/WithdrawDepositModal.tsx @@ -9,6 +9,37 @@ import FormHelperText from '@mui/material/FormHelperText' import Input from '@mui/material/Input' import { useSnackbar } from 'notistack' import React, { ReactElement, ReactNode, useState } from 'react' +import { makeStyles } from 'tss-react/mui' + +const useStyles = makeStyles()(theme => ({ + link: { + color: '#dd7700', + textDecoration: 'underline', + '&:hover': { + textDecoration: 'none', + + '@media (hover: none)': { + textDecoration: 'none', + }, + }, + }, + buttonSelected: { + color: 'white', + backgroundColor: theme.palette.primary.main, + '&:hover': { + color: theme.palette.secondary.main, + backgroundColor: 'white', + '@media (hover: none)': { + color: 'white', + backgroundColor: theme.palette.primary.main, + }, + }, + }, + buttonUnselected: { + color: theme.palette.secondary.main, + backgroundColor: 'white', + }, +})) interface Props { successMessage: string @@ -31,6 +62,8 @@ export default function WithdrawDepositModal({ action, icon, }: Props): ReactElement { + const { classes } = useStyles() + const [open, setOpen] = useState(false) const [amount, setAmount] = useState('') const [amountToken, setAmountToken] = useState(null) @@ -78,7 +111,7 @@ export default function WithdrawDepositModal({ return (
- diff --git a/src/modules/filemanager/utils/common.ts b/src/modules/filemanager/utils/common.ts index 168141c..4c071a1 100644 --- a/src/modules/filemanager/utils/common.ts +++ b/src/modules/filemanager/utils/common.ts @@ -13,7 +13,7 @@ export function getDaysLeft(expiryDate: Date): number { return Math.max(0, Math.floor(diffMs / (1000 * 60 * 60 * 24))) } -export const fromBytesConversion = (size: number, metric: string) => { +export const fromBytesConversion = (size: number, metric: string): number => { switch (metric) { case 'GB': return size / 1000 / 1000 / 1000 diff --git a/src/pages/stamps/PostageStampStandardCreation.tsx b/src/pages/stamps/PostageStampStandardCreation.tsx index 09523ff..08f12ac 100644 --- a/src/pages/stamps/PostageStampStandardCreation.tsx +++ b/src/pages/stamps/PostageStampStandardCreation.tsx @@ -33,6 +33,10 @@ const useStyles = makeStyles()(theme => ({ color: 'white', backgroundColor: theme.palette.primary.main, }, + buttonUnselected: { + color: theme.palette.secondary.main, + backgroundColor: 'white', + }, })) const marks = [ @@ -51,6 +55,21 @@ export function PostageStampStandardCreation({ onFinished }: Props): ReactElemen const [submitting, setSubmitting] = useState(false) const [buttonValue, setButtonValue] = useState(4) + const getBatchValue = (value: number) => { + return ( + + + + ) + } + function sliderValueChange(_: unknown, newValue: number | number[]) { if (typeof newValue !== 'number') { return @@ -138,38 +157,11 @@ export function PostageStampStandardCreation({ onFinished }: Props): ReactElemen Batch size - - - - - - - - - - - + + {getBatchValue(4)} + {getBatchValue(32)} + {getBatchValue(256)} + Data persistence