align responsive settings styles

components/settings/AnimationSettings.tsx

@@ -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">
+      <div className="flex items-center justify-between border-t border-th-bkg-3 p-4">
-        <p className="mb-2 lg:mb-0">{t('settings:number-scroll')}</p>
+        <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">
+      <div className="flex items-center justify-between border-t border-th-bkg-3 p-4">
-        <p className="mb-2 lg:mb-0">{t('settings:orderbook-flash')}</p>
+        <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">
+      <div className="flex items-center justify-between border-t border-th-bkg-3 p-4">
-        <p className="mb-2 lg:mb-0">{t('settings:swap-success')}</p>
+        <p>{t('settings:swap-success')}</p>
         <Switch
           checked={animationSettings['swap-success']}
           onChange={() => handleToggleAnimationSetting('swap-success')}

components/settings/DisplaySettings.tsx

@@ -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}

components/settings/SoundSettings.tsx

@@ -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">
+      <div className="flex items-center justify-between border-t border-th-bkg-3 p-4">
-        <p className="mb-2 lg:mb-0">{t('settings:recent-trades')}</p>
+        <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">
+      <div className="flex items-center justify-between border-t border-th-bkg-3 p-4">
-        <p className="mb-2 lg:mb-0">{t('settings:swap-success')}</p>
+        <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">
+      <div className="flex items-center justify-between border-t border-th-bkg-3 p-4">
-        <p className="mb-2 lg:mb-0">{t('settings:transaction-success')}</p>
+        <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">
+      <div className="flex items-center justify-between border-t border-th-bkg-3 p-4">
-        <p className="mb-2 lg:mb-0">{t('settings:transaction-fail')}</p>
+        <p>{t('settings:transaction-fail')}</p>
         <Switch
           checked={soundSettings['transaction-fail']}
           onChange={() => handleToggleSoundSetting('transaction-fail')}