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

@@ -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 (
-    <ListItemButton className={classes.header}>
+    <ListItemButton className={classes.header} sx={{ width: '100%' }}>
-      <Grid container direction="column" justifyContent="space-between" alignItems="stretch">
+      <Box display="flex" flexDirection="row" justifyContent="space-between" alignItems="center" width="100%">
-        <Grid container direction="row" justifyContent="space-between" alignItems="center">
         {label && <Typography variant="body1">{label}</Typography>}
+        <Box display="flex" alignItems="center">
           <Typography variant="body2">
             {allowClipboard && (
               <span className={classes.copyValue}>
@@ -86,13 +91,13 @@ export default function ExpandableListItemLink({
               </span>
             )}
             {!allowClipboard && <span onClick={onNavigation}>{displayValue}</span>}
-            <IconButton size="small" className={classes.openLinkIcon} onClick={onNavigation}>
-              {navigationType === 'NEW_WINDOW' && <OpenInNewSharp strokeWidth={1} />}
-              {navigationType === 'HISTORY_PUSH' && <ArrowForward strokeWidth={1} />}
-            </IconButton>
           </Typography>
-        </Grid>
+          <IconButton size="small" className={classes.openLinkIcon} onClick={onNavigation}>
-      </Grid>
+            {navigationType === NavigationType.NEW_WINDOW && <OpenInNewSharp strokeWidth={1} />}
+            {navigationType === NavigationType.HISTORY_PUSH && <ArrowForward strokeWidth={1} />}
+          </IconButton>
+        </Box>
+      </Box>
     </ListItemButton>
   )
 }

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}
         />
       ))}

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<BZZ | null>(null)
@@ -78,7 +111,7 @@ export default function WithdrawDepositModal({
 
   return (
     <div>
-      <Button variant="text" onClick={handleClickOpen} startIcon={icon}>
+      <Button variant="contained" onClick={handleClickOpen} startIcon={icon} className={classes.buttonSelected}>
         {label}
       </Button>
       <Dialog open={open} onClose={handleClose} aria-labelledby="form-dialog-title">

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

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 (
+      <Box sx={{ flex: 1 }}>
+        <Button
+          variant="contained"
+          fullWidth
+          onClick={() => handleBatchSize(value)}
+          className={buttonValue === value ? classes.buttonSelected : classes.buttonUnselected}
+        >
+          {value} GB
+        </Button>
+      </Box>
+    )
+  }
+
   function sliderValueChange(_: unknown, newValue: number | number[]) {
     if (typeof newValue !== 'number') {
       return
@@ -138,38 +157,11 @@ export function PostageStampStandardCreation({ onFinished }: Props): ReactElemen
         <Typography variant="h2">Batch size</Typography>
       </Box>
       <Box mb={2}>
-        <Grid container justifyContent="space-between" spacing={2}>
+        <Box sx={{ display: 'flex', gap: 1 }}>
-          <Grid sx={{ width: { xs: '100%', sm: '33.333%' } }}>
+          {getBatchValue(4)}
-            <Button
+          {getBatchValue(32)}
-              variant="contained"
+          {getBatchValue(256)}
-              fullWidth
+        </Box>
-              onClick={() => handleBatchSize(4)}
-              className={buttonValue === 4 ? classes.buttonSelected : ''}
-            >
-              4 GB
-            </Button>
-          </Grid>
-          <Grid sx={{ width: { xs: '100%', sm: '33.333%' } }}>
-            <Button
-              variant="contained"
-              fullWidth
-              onClick={() => handleBatchSize(32)}
-              className={buttonValue === 32 ? classes.buttonSelected : ''}
-            >
-              32 GB
-            </Button>
-          </Grid>
-          <Grid sx={{ width: { xs: '100%', sm: '33.333%' } }}>
-            <Button
-              variant="contained"
-              fullWidth
-              onClick={() => handleBatchSize(256)}
-              className={buttonValue === 256 ? classes.buttonSelected : ''}
-            >
-              256 GB
-            </Button>
-          </Grid>
-        </Grid>
       </Box>
       <Box mb={1}>
         <Typography variant="h2">Data persistence</Typography>