blockworks-foundation
/
mango-v4-ui
mirror of https://github.com/blockworks-foundation/mango-v4-ui.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

align responsive settings styles

This commit is contained in:
saml33 2022-12-06 09:33:36 +11:00
parent f006023ba4
commit 59de695d06
3 changed files with 20 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
components/settings/AnimationSettings.tsx
View File

@ -33,29 +33,29 @@ const AnimationSettings = () => {
return (
<>
<div className="mb-4 flex items-center justify-between pr-4">
<div className="mb-4 flex items-center justify-between">
<h2 className="text-base">{t('settings:animations')}</h2>
<Switch
checked={!Object.values(animationSettings).includes(false)}
onChange={() => handleToggleAnimationSetting('all')}
/>
</div>
<div className="flex items-center justify-between border-t border-th-bkg-3 py-4 md:px-4">
<p className="mb-2 lg:mb-0">{t('settings:number-scroll')}</p>
<div className="flex items-center justify-between border-t border-th-bkg-3 p-4">
<p>{t('settings:number-scroll')}</p>
<Switch
checked={animationSettings['number-scroll']}
onChange={() => handleToggleAnimationSetting('number-scroll')}
/>
</div>
<div className="flex items-center justify-between border-t border-th-bkg-3 py-4 md:px-4">
<p className="mb-2 lg:mb-0">{t('settings:orderbook-flash')}</p>
<div className="flex items-center justify-between border-t border-th-bkg-3 p-4">
<p>{t('settings:orderbook-flash')}</p>
<Switch
checked={animationSettings['orderbook-flash']}
onChange={() => handleToggleAnimationSetting('orderbook-flash')}
/>
</div>
<div className="flex items-center justify-between border-t border-th-bkg-3 py-4 md:px-4">
<p className="mb-2 lg:mb-0">{t('settings:swap-success')}</p>
<div className="flex items-center justify-between border-t border-th-bkg-3 p-4">
<p>{t('settings:swap-success')}</p>
<Switch
checked={animationSettings['swap-success']}
onChange={() => handleToggleAnimationSetting('swap-success')}

13
components/settings/DisplaySettings.tsx
View File

@ -69,7 +69,7 @@ const DisplaySettings = () => {
<>
<h2 className="mb-4 text-base">{t('settings:display')}</h2>
<div className="flex flex-col border-t border-th-bkg-3 py-4 md:flex-row md:items-center md:justify-between md:px-4">
<p className="mb-2 lg:mb-0">{t('settings:theme')}</p>
<p className="mb-2 md:mb-0">{t('settings:theme')}</p>
<div className="w-full min-w-[140px] md:w-auto">
<Select
value={theme}
@ -84,15 +84,10 @@ const DisplaySettings = () => {
</Select.Option>
))}
</Select>
{/* <ButtonGroup
activeValue={theme}
onChange={(t) => setTheme(t)}
values={themes}
/> */}
</div>
</div>
<div className="flex flex-col border-t border-th-bkg-3 py-4 md:flex-row md:items-center md:justify-between md:px-4">
<p className="mb-2 lg:mb-0">{t('settings:language')}</p>
<p className="mb-2 md:mb-0">{t('settings:language')}</p>
<div className="w-full min-w-[330px] md:w-[480px] md:pl-4">
<ButtonGroup
activeValue={savedLanguage}
@ -103,7 +98,7 @@ const DisplaySettings = () => {
</div>
</div>
<div className="flex flex-col border-t border-th-bkg-3 py-4 md:flex-row md:items-center md:justify-between md:px-4">
<p className="mb-2 lg:mb-0">{t('settings:notification-position')}</p>
<p className="mb-2 md:mb-0">{t('settings:notification-position')}</p>
<div className="w-full min-w-[330px] md:w-[480px] md:pl-4">
<ButtonGroup
activeValue={notificationPosition}
@ -114,7 +109,7 @@ const DisplaySettings = () => {
</div>
</div>
<div className="flex flex-col border-t border-th-bkg-3 py-4 md:flex-row md:items-center md:justify-between md:px-4">
<p className="mb-2 lg:mb-0">{t('settings:swap-trade-size-selector')}</p>
<p className="mb-2 md:mb-0">{t('settings:swap-trade-size-selector')}</p>
<div className="w-full min-w-[160px] md:w-auto">
<ButtonGroup
activeValue={tradeFormUi}

18
components/settings/SoundSettings.tsx
View File

@ -34,36 +34,36 @@ const SoundSettings = () => {
return (
<>
<div className="mb-4 flex items-center justify-between pr-4">
<div className="mb-4 flex items-center justify-between">
<h2 className="text-base">{t('settings:sounds')}</h2>
<Switch
checked={!Object.values(soundSettings).includes(false)}
onChange={() => handleToggleSoundSetting('all')}
/>
</div>
<div className="flex items-center justify-between border-t border-th-bkg-3 py-4 md:px-4">
<p className="mb-2 lg:mb-0">{t('settings:recent-trades')}</p>
<div className="flex items-center justify-between border-t border-th-bkg-3 p-4">
<p>{t('settings:recent-trades')}</p>
<Switch
checked={soundSettings['recent-trades']}
onChange={() => handleToggleSoundSetting('recent-trades')}
/>
</div>
<div className="flex items-center justify-between border-t border-th-bkg-3 py-4 md:px-4">
<p className="mb-2 lg:mb-0">{t('settings:swap-success')}</p>
<div className="flex items-center justify-between border-t border-th-bkg-3 p-4">
<p>{t('settings:swap-success')}</p>
<Switch
checked={soundSettings['swap-success']}
onChange={() => handleToggleSoundSetting('swap-success')}
/>
</div>
<div className="flex items-center justify-between border-t border-th-bkg-3 py-4 md:px-4">
<p className="mb-2 lg:mb-0">{t('settings:transaction-success')}</p>
<div className="flex items-center justify-between border-t border-th-bkg-3 p-4">
<p>{t('settings:transaction-success')}</p>
<Switch
checked={soundSettings['transaction-success']}
onChange={() => handleToggleSoundSetting('transaction-success')}
/>
</div>
<div className="flex items-center justify-between border-t border-th-bkg-3 py-4 md:px-4">
<p className="mb-2 lg:mb-0">{t('settings:transaction-fail')}</p>
<div className="flex items-center justify-between border-t border-th-bkg-3 p-4">
<p>{t('settings:transaction-fail')}</p>
<Switch
checked={soundSettings['transaction-fail']}
onChange={() => handleToggleSoundSetting('transaction-fail')}