frontend: automatically show chevronright if settingsitem is btn

Author: shonsirsha

frontends/web/src/components/actionable-item/actionable-item.tsx

@@ -49,7 +49,10 @@ export const ActionableItem = ({
           onClick={onClick}>
           {children}
           {icon ? icon : (
-            <ChevronRightDark />
+            <ChevronRightDark
+              width={24}
+              height={24}
+            />
           )}
         </button>
       )}

frontends/web/src/components/bottom-navigation/bottom-navigation.tsx

@@ -47,7 +47,7 @@ export const BottomNavigation = () => {
         {t('generic.buySell')}
       </Link>
       <Link
-        className={`${styles.link} ${pathname.startsWith('/settings/') || pathname.startsWith('/bitsurance/') ? styles.active : ''}`}
+        className={`${styles.link} ${pathname.startsWith('/settings') || pathname.startsWith('/bitsurance/') ? styles.active : ''}`}
         to="/settings/more"
       >
         <MoreIconSVG />

frontends/web/src/components/dropdown/mobile-fullscreen-selector.module.css

@@ -1,18 +1,8 @@
-.dropdown {
-    appearance: none;
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' aria-labelledby='chevron down' color='%23777'%3E%3Cdefs/%3E%3Cpolyline points='6 10 12 16 18 10'/%3E%3C/svg%3E%0A");
-    background-repeat: no-repeat;
-    font-weight: 400;
-    height: calc(var(--space-quarter) * 3);
-    padding: 0 calc(var(--space-quarter) + var(--space-eight));
-    transform: rotate(270deg);
-}
-
 .dropdownContainer {
     width: 100%;
 }
 
-.mobileDropdownTrigger {
+.mobileSelectorTrigger {
     background-color: var(--background-secondary);
     border: none;
     border-radius: 2px;
@@ -28,7 +18,7 @@
     text-align: end;
 }
 
-.mobileDropdownValue {
+.mobileSelectorValue {
     flex: 1;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -145,7 +135,7 @@
 }
 
 @media screen and (max-width: 560px) {
-    .mobileDropdownTrigger {
+    .mobileSelectorTrigger {
         padding-top: var(--space-quarter);
         text-align: start;
     }

frontends/web/src/components/dropdown/mobile-fullscreen-selector.tsx

@@ -112,14 +112,21 @@ export const MobileFullscreenSelector = <T, IsMulti extends boolean = false>({
         return false;
       }}
       />
-      <button
-        className={styles.mobileDropdownTrigger}
-        onClick={handleOpen}
-        type="button"
-      >
-        <span className={styles.mobileDropdownValue}>{displayValue}</span>
-        <div className={styles.dropdown} />
-      </button>
+      {onOpenChange ? (
+        <div
+          className={styles.mobileSelectorTrigger}
+        >
+          <span className={styles.mobileSelectorValue}>{displayValue}</span>
+        </div>
+      ) : (
+        <button
+          className={styles.mobileSelectorTrigger}
+          onClick={handleOpen}
+        >
+          <span className={styles.mobileSelectorValue}>{displayValue}</span>
+        </button>
+      )
+      }
 
       {isOpen && (
         <div className={styles.fullscreenOverlay}>
@@ -156,7 +163,6 @@ export const MobileFullscreenSelector = <T, IsMulti extends boolean = false>({
                     key={String(option.value)}
                     className={`${styles.optionItem} ${isSelected(option) ? styles.selectedOption : ''}`}
                     onClick={(e) => handleSelect(option, e)}
-                    type="button"
                   >
                     <div className={styles.optionContent}>{renderOptions(option)}</div>
                   </button>

frontends/web/src/routes/settings/components/advanced-settings/connect-full-node-setting.tsx

@@ -17,7 +17,6 @@
 import { useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { SettingsItem } from '@/routes/settings/components/settingsItem/settingsItem';
-import { ChevronRightDark } from '@/components/icon';
 
 export const ConnectFullNodeSetting = () => {
   const navigate = useNavigate();
@@ -28,12 +27,6 @@ export const ConnectFullNodeSetting = () => {
       settingName={t('settings.expert.electrum.title')}
       onClick={() => navigate('/settings/electrum')}
       secondaryText={t('settings.expert.electrum.description')}
-      extraComponent={
-        <ChevronRightDark
-          width={24}
-          height={24}
-        />
-      }
     />
   );
 };

frontends/web/src/routes/settings/components/advanced-settings/enable-tor-proxy-setting.tsx

@@ -17,7 +17,6 @@
 import { Dispatch, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { SettingsItem } from '@/routes/settings/components/settingsItem/settingsItem';
-import { ChevronRightDark } from '@/components/icon';
 import { TorProxyDialog } from './tor-proxy-dialog';
 import { Message } from '@/components/message/message';
 import { TProxyConfig } from '@/routes/settings/advanced-settings';
@@ -48,7 +47,6 @@ export const EnableTorProxySetting = ({ proxyConfig, onChangeConfig }: TProps) =
         onClick={() => setShowTorProxyDialog(true)}
         secondaryText={t('newSettings.advancedSettings.torProxy.description')}
         displayedValue={proxyEnabled ? t('generic.enabled_true') : t('generic.enabled_false')}
-        extraComponent={<ChevronRightDark width={24} height={24} />}
       />
       <TorProxyDialog
         open={showTorProxyDialog}

frontends/web/src/routes/settings/components/advanced-settings/export-log-setting.tsx

@@ -16,7 +16,6 @@
 
 import { useTranslation } from 'react-i18next';
 import { SettingsItem } from '@/routes/settings/components/settingsItem/settingsItem';
-import { ChevronRightDark } from '@/components/icon';
 import { debug } from '@/utils/env';
 import { alertUser } from '@/components/alert/Alert';
 import { exportLogs } from '@/api/backend';
@@ -37,12 +36,6 @@ export const ExportLogSetting = () => {
         }
       }}
       secondaryText={t('settings.expert.exportLogs.description')}
-      extraComponent={
-        <ChevronRightDark
-          width={24}
-          height={24}
-        />
-      }
     />
   );
 };

frontends/web/src/routes/settings/components/appearance/activeCurrenciesDropdownSetting.tsx

@@ -26,7 +26,7 @@ const ActiveCurrenciesDropdownSetting = () => {
   const { t, i18n } = useTranslation();
   const { activeCurrencies, defaultCurrency } = useContext(RatesContext);
   const { formattedCurrencies } = useLocalizedFormattedCurrencies(i18n.language);
-  const [isMobileDropdownOpen, setIsMobileDropdownOpen] = useState(false);
+  const [isMobileSelectorOpen, setIsMobileSelectorOpen] = useState(false);
   const isMobile = useMediaQuery('(max-width: 768px)');
 
   return (
@@ -35,11 +35,11 @@ const ActiveCurrenciesDropdownSetting = () => {
       collapseOnSmall
       settingName={t('newSettings.appearance.activeCurrencies.title')}
       secondaryText={t('newSettings.appearance.activeCurrencies.description')}
-      onClick={() => setIsMobileDropdownOpen(true)}
+      onClick={!isMobileSelectorOpen ? () => setIsMobileSelectorOpen(true) : undefined}
       extraComponent={
         <ActiveCurrenciesDropdown
-          isOpen={isMobileDropdownOpen}
-          onOpenChange={(isOpen) => setIsMobileDropdownOpen(isOpen)}
+          isOpen={isMobileSelectorOpen}
+          onOpenChange={(isOpen) => setIsMobileSelectorOpen(isOpen)}
           options={formattedCurrencies}
           defaultCurrency={defaultCurrency}
           activeCurrencies={activeCurrencies}

frontends/web/src/routes/settings/components/appearance/defaultCurrencyDropdownSetting.tsx

@@ -25,7 +25,7 @@ import settingsDropdownStyles from './settingsdropdown.module.css';
 
 export const DefaultCurrencyDropdownSetting = () => {
   const { t, i18n } = useTranslation();
-  const [isMobileDropdownOpen, setIsMobileDropdownOpen] = useState(false);
+  const [isMobileSelectorOpen, setIsMobileSelectorOpen] = useState(false);
   const currencyName = new Intl.DisplayNames([i18n.language], { type: 'currency' });
   const { formattedCurrencies, currenciesWithDisplayName } = useLocalizedFormattedCurrencies(i18n.language);
   const { addToActiveCurrencies, updateDefaultCurrency, defaultCurrency, activeCurrencies } = useContext(RatesContext);
@@ -39,7 +39,7 @@ export const DefaultCurrencyDropdownSetting = () => {
       settingName={t('newSettings.appearance.defaultCurrency.title')}
       secondaryText={t('newSettings.appearance.defaultCurrency.description')}
       collapseOnSmall
-      onClick={() => setIsMobileDropdownOpen(true)}
+      onClick={!isMobileSelectorOpen ? () => setIsMobileSelectorOpen(true) : undefined}
       extraComponent={
         <Dropdown
           className={settingsDropdownStyles.select}
@@ -48,8 +48,8 @@ export const DefaultCurrencyDropdownSetting = () => {
           options={formattedCurrencies}
           title={t('newSettings.appearance.defaultCurrency.title')}
           mobileFullScreen
-          isOpen={isMobileDropdownOpen}
-          onOpenChange={(isOpen) => setIsMobileDropdownOpen(isOpen)}
+          isOpen={isMobileSelectorOpen}
+          onOpenChange={(isOpen) => setIsMobileSelectorOpen(isOpen)}
           onChange={async (selected) => {
             const fiat = selected.value;
             updateDefaultCurrency(fiat);

frontends/web/src/routes/settings/components/appearance/languageDropdownSetting.tsx

@@ -30,7 +30,7 @@ import styles from './languageDropDownSetting.module.css';
 
 export const LanguageDropdownSetting = () => {
   const { i18n, t } = useTranslation();
-  const [isMobileDropdownOpen, setIsMobileDropdownOpen] = useState(false);
+  const [isMobileSelectorOpen, setIsMobileSelectorOpen] = useState(false);
   const nativeLocale = useLoad(getNativeLocale);
   const selectedLanguage = defaultLanguages[getSelectedIndex(defaultLanguages, i18n)];
   const formattedLanguages = defaultLanguages.map(lang => ({ label: lang.display, value: lang.code }));
@@ -40,15 +40,15 @@ export const LanguageDropdownSetting = () => {
   return (
     <SettingsItem
       disabled={!isMobile}
-      onClick={() => setIsMobileDropdownOpen(true)}
+      onClick={!isMobileSelectorOpen ? () => setIsMobileSelectorOpen(true) : undefined}
       settingName={<div className={styles.container}>{globe}{t('newSettings.appearance.language.title')}</div>}
       secondaryText={t('newSettings.appearance.language.description')}
       collapseOnSmall
       title={nativeLocale && `Detected native locale: ${nativeLocale}`}
       extraComponent={
         <Dropdown
-          isOpen={isMobileDropdownOpen}
-          onOpenChange={(isOpen) => setIsMobileDropdownOpen(isOpen)}
+          isOpen={isMobileSelectorOpen}
+          onOpenChange={(isOpen) => setIsMobileSelectorOpen(isOpen)}
           mobileFullScreen
           className={settingsDropdownStyles.select}
           renderOptions={(o) => (o.label)}