Mirror/robosats
1
0
Fork 0
mirror of https://github.com/RoboSats/robosats.git synced 2025-01-31 02:21:35 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Fix adjust swap button book visibility

Browse Source
This commit is contained in:
Reckless_Satoshi 2023-04-03 07:19:30 -07:00
parent d88b391d42
commit 9c5f4d4f46
No known key found for this signature in database
GPG Key ID: 9C4585B561315571
1 changed files with 17 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
frontend/src/components/BookTable/BookControl.tsx
View File

@ -1,4 +1,4 @@
import React, { useEffect, useState } from 'react'; import React, { useEffect, useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { import {
Typography, Typography,
@ -36,16 +36,18 @@ const BookControl = ({
paymentMethod, paymentMethod,
setPaymentMethods, setPaymentMethods,
}: BookControlProps): JSX.Element => { }: BookControlProps): JSX.Element => {
const { t } = useTranslation(); const { t, i18n } = useTranslation();
const theme = useTheme(); const theme = useTheme();
const typeZeroText = fav.mode === 'fiat' ? 'Buy' : 'Swap In'; const [typeZeroText, typeOneText, small, medium, large] = useMemo(() => {
const typeOneText = fav.mode === 'fiat' ? 'Sell' : 'Swap Out'; const typeZeroText = fav.mode === 'fiat' ? t('Buy') : t('Swap In');
const typeOneText = fav.mode === 'fiat' ? t('Sell') : t('Swap Out');
const smallestToolbarWidth = (typeZeroText.length + typeOneText.length) * 0.7 + 12; const small =
const mediumToolbarWidth = smallestToolbarWidth + 12; (typeZeroText.length + typeOneText.length) * 0.7 + (fav.mode == 'fiat' ? 16 : 7.5);
const verboseToolbarWidth = const medium = small + 13;
mediumToolbarWidth + (t('and use').length + t('pay with').length) * 0.6; const large = medium + (t('and use').length + t('pay with').length) * 0.6 + 5;
return [typeZeroText, typeOneText, small, medium, large];
}, [i18n.language, fav.mode]);
const handleCurrencyChange = function (e) { const handleCurrencyChange = function (e) {
const currency = e.target.value; const currency = e.target.value;
@ -72,7 +74,7 @@ const BookControl = ({
spacing={0.5} spacing={0.5}
sx={{ height: '3.4em', padding: '0.2em' }} sx={{ height: '3.4em', padding: '0.2em' }}
> >
{width > verboseToolbarWidth ? ( {width > large ? (
<Grid item sx={{ position: 'relative', top: '0.5em' }}> <Grid item sx={{ position: 'relative', top: '0.5em' }}>
<Typography variant='caption' color='text.secondary'> <Typography variant='caption' color='text.secondary'>
{t('I want to')} {t('I want to')}
@ -80,7 +82,7 @@ const BookControl = ({
</Grid> </Grid>
) : null} ) : null}
{width > smallestToolbarWidth + 5 ? ( {width > small ? (
<Grid item> <Grid item>
<Tooltip <Tooltip
placement='bottom' placement='bottom'
@ -139,7 +141,7 @@ const BookControl = ({
</ToggleButtonGroup> </ToggleButtonGroup>
</Grid> </Grid>
{width > verboseToolbarWidth && fav.mode === 'fiat' ? ( {width > large && fav.mode === 'fiat' ? (
<Grid item sx={{ position: 'relative', top: '0.5em' }}> <Grid item sx={{ position: 'relative', top: '0.5em' }}>
<Typography variant='caption' color='text.secondary'> <Typography variant='caption' color='text.secondary'>
{t('and use')} {t('and use')}
@ -192,7 +194,7 @@ const BookControl = ({
</Grid> </Grid>
) : null} ) : null}
{width > verboseToolbarWidth ? ( {width > large ? (
<Grid item sx={{ position: 'relative', top: '0.5em' }}> <Grid item sx={{ position: 'relative', top: '0.5em' }}>
<Typography variant='caption' color='text.secondary'> <Typography variant='caption' color='text.secondary'>
{fav.currency == 1000 ? t(fav.type === 0 ? 'to' : 'from') : t('pay with')} {fav.currency == 1000 ? t(fav.type === 0 ? 'to' : 'from') : t('pay with')}
@ -200,7 +202,7 @@ const BookControl = ({
</Grid> </Grid>
) : null} ) : null}
{width > mediumToolbarWidth ? ( {width > medium ? (
<Grid item> <Grid item>
<AutocompletePayments <AutocompletePayments
sx={{ sx={{
@ -228,7 +230,7 @@ const BookControl = ({
</Grid> </Grid>
) : null} ) : null}
{width > smallestToolbarWidth && width < mediumToolbarWidth ? ( {width > small && width <= medium ? (
<Grid item> <Grid item>
<Select <Select
sx={{ sx={{