Merge branch 'frontend-prefer-button'

BitBoxSwiss · May 7, 2024 · 4a8febf · 4a8febf
2 parents 541b1c6 + 0049dec
commit 4a8febf
Show file tree

Hide file tree

Showing 9 changed files with 59 additions and 63 deletions.
diff --git a/backend/backend.go b/backend/backend.go
@@ -97,6 +97,9 @@ var fixedURLWhitelist = []string{
 	"https://bitcoincore.org/en/2016/01/26/segwit-benefits/",
 	"https://en.bitcoin.it/wiki/Bech32_adoption",
 	"https://github.com/bitcoin/bips/",
+	// app stores
+	"https://itunes.apple.com/",
+	"https://play.google.com/store/",
 	// Others
 	"https://cointracking.info/import/bitbox/",
 }

diff --git a/frontends/web/src/components/devices/bitbox02bootloader/bitbox02bootloader.tsx b/frontends/web/src/components/devices/bitbox02bootloader/bitbox02bootloader.tsx
@@ -104,11 +104,12 @@ export const BitBox02Bootloader = ({ deviceID }: TProps) => {
         </div>
         <div className="flex flex-center" style={{ marginTop: 32 }}>
           {t('bb02Bootloader.orientation')}&nbsp;
-          <a
+          <Button
             onClick={() => bitbox02BootloaderAPI.screenRotate(deviceID)}
-            style={{ textDecoration: 'underline', cursor: 'pointer' }} >
+            style={{ height: 'auto', padding: 0, textDecoration: 'underline' }}
+            transparent>
             {t('bb02Bootloader.flipscreen')}
-          </a>
+          </Button>
         </div>
         <hr/>
         <details>

diff --git a/frontends/web/src/components/layout/header.module.css b/frontends/web/src/components/layout/header.module.css
@@ -31,32 +31,30 @@
     z-index: 1001;
 }
 
-.disabled {
-    opacity: 0.4;    
-}
-
 .forceHidden .sidebarToggler {
     display: none !important;
 }
 
-.guideIcon {
-    font-size: var(--size-default);
-    text-decoration: none;
+.guideClose {
+    align-items: center;
     display: flex;
     flex-direction: row;
-    align-items: center;
+    font-size: var(--size-default);
+    height: 18px;
+    margin-left: var(--space-half);
+    padding: 0;
+    text-decoration: none;
 }
 
-.guideIcon img {
+.guideClose img {
     width: 18px;
     height: 18px;
     color: var(--color-blue);
     margin-right: calc(var(--space-quarter) / 2);
 }
 
-.guideIconContainer {
-    height: 18px;
-    margin-left: var(--space-half);
+.disabled {
+    opacity: 0.4;    
 }
 
 .header {

diff --git a/frontends/web/src/components/layout/header.tsx b/frontends/web/src/components/layout/header.tsx
@@ -20,6 +20,7 @@ import { useTranslation } from 'react-i18next';
 import { GuideActive, MenuLight, MenuDark } from '../icon';
 import { AppContext } from '../../contexts/AppContext';
 import style from './header.module.css';
+import { Button } from '../forms';
 interface HeaderProps {
     title?: string | JSX.Element | JSX.Element[];
     narrow?: boolean;
@@ -56,16 +57,16 @@ const Header = ({
         <div className={style.title}>{title}</div>
         <div className={style.children}>
           {children}
-          {
-            guideExists && (
-              <span className={style.guideIconContainer}>
-                <a href="#" onClick={toggle} className={[style.guideIcon, guideShown ? style.disabled : ''].join(' ')}>
-                  <GuideActive />
-                  {t('guide.toggle.open')}
-                </a>
-              </span>
-            )
-          }
+          { guideExists && (
+            <Button
+              transparent
+              onClick={toggle}
+              className={`${style.guideClose} ${guideShown ? style.disabled : ''}`}
+            >
+              <GuideActive />
+              {t('guide.toggle.open')}
+            </Button>
+          )}
         </div>
       </div>
     </div>

diff --git a/frontends/web/src/components/sidebar/sidebar.module.css b/frontends/web/src/components/sidebar/sidebar.module.css
@@ -118,29 +118,19 @@
     border-radius: 2px;
 }
 
-.sidebarArrow {
-    display: none;
-}
-
 .sidebarItem a.sidebarActive {
     text-decoration: none;
     background-color: rgba(255, 255, 255, 0.1);
 }
 
-.activeGroup .sidebarArrow {
-    display: inline;
-    margin-right: var(--sidebar-margin);
-}
-
 .sidebarItem :global(.stacked),
 .sidebarItem .single {
     margin: 0 var(--sidebar-icon-margin) 0 var(--sidebar-margin);
     height: var(--sidebar-icon-size);
 }
 
 a.sidebarActive .sidebarLabel,
-.sidebar a:hover .sidebarLabel,
-.activeGroup .sidebarLabel {
+.sidebar a:hover .sidebarLabel {
     color: var(--color-alt);
 }
 
@@ -154,8 +144,7 @@ a.sidebarActive :global(.stacked) img:first-child,
 }
 
 a.sidebarActive :global(.stacked) img:last-child,
-.sidebar a:hover :global(.stacked) img:last-child,
-.activeGroup :global(.stacked) img:last-child {
+.sidebar a:hover :global(.stacked) img:last-child {
     opacity: 1;
 }
 
@@ -190,22 +179,6 @@ a.sidebarActive .single img,
     word-break: break-word;
 }
 
-.activeGroup {
-    background-color: #555555;
-}
-
-.sidebarSubmenu a svg {
-    width: 18px;
-    height: 18px;
-    margin-right: var(--sidebar-icon-margin);
-    margin-left: calc(var(--sidebar-margin) + var(--sidebar-icon-margin));
-}
-
-.sidebarArrow {
-    width: 12px;
-    height: 12px;
-}
-
 @media (max-width: 1199px) {
     .sidebar {
         transition: margin-left 0.2s ease;
@@ -231,3 +204,10 @@ a.sidebarActive .single img,
         width: 100vw;
     }
 }
+
+.closeSoftwareKeystore {
+    display: flex;
+    padding: 0;
+    text-align: left;
+    width: 100%;
+}
diff --git a/frontends/web/src/components/sidebar/sidebar.tsx b/frontends/web/src/components/sidebar/sidebar.tsx
@@ -35,6 +35,7 @@ import { getAccountsByKeystore, isAmbiguiousName, isBitcoinOnly } from '../../ro
 import { SkipForTesting } from '../../routes/device/components/skipfortesting';
 import { Badge } from '../badge/badge';
 import { AppContext } from '../../contexts/AppContext';
+import { Button } from '../forms';
 import style from './sidebar.module.css';
 
 type SidebarProps = {
@@ -248,14 +249,17 @@ const Sidebar = ({
         { !keystores || keystores.length === 0 ? <SkipForTesting /> : null }
         {(debug && keystores?.some(({ type }) => type === 'software') && deviceIDs.length === 0) && (
           <div key="eject" className={style.sidebarItem}>
-            <a href="#" onClick={eject}>
+            <Button transparent onClick={eject} className={style.closeSoftwareKeystore}>
               <div className={style.single}>
                 <img
                   draggable={false}
                   src={ejectIcon}
                   alt={t('sidebar.leave')} />
               </div>
-            </a>
+              <span className={style.sidebarLabel}>
+                Eject software keystore
+              </span>
+            </Button>
           </div>
         )}
       </nav>

diff --git a/frontends/web/src/routes/device/bitbox01/settings/components/mobile-pairing.tsx b/frontends/web/src/routes/device/bitbox01/settings/components/mobile-pairing.tsx
@@ -26,6 +26,7 @@ import { QRCode } from '../../../../../components/qrcode/qrcode';
 import { SettingsButton } from '../../../../../components/settingsButton/settingsButton';
 import { translate, TranslateProps } from '../../../../../decorators/translate';
 import { apiPost } from '../../../../../utils/request';
+import { A } from '../../../../../components/anchor/anchor';
 import style from '../../bitbox01.module.css';
 
 interface PairingProps {
@@ -173,14 +174,18 @@ class MobilePairing extends Component<Props, State> {
                         <label className="text-center">Apple App Store</label>
                         <div className="flex flex-column flex-center flex-items-center">
                           <QRCode tapToCopy={false} data="https://itunes.apple.com/us/app/digital-bitbox-2fa/id1079896740" size={148} />
-                          <a target="_blank" rel="noreferrer" href="https://itunes.apple.com/us/app/digital-bitbox-2fa/id1079896740"><img src={appStoreBadge} className={style.badge} /></a>
+                          <A href="https://itunes.apple.com/us/app/digital-bitbox-2fa/id1079896740">
+                            <img src={appStoreBadge} className={style.badge} />
+                          </A>
                         </div>
                       </div>
                       <div className="column column-1-2">
                         <label className="text-center">Google Play Store</label>
                         <div className="flex flex-column flex-center flex-items-center">
                           <QRCode tapToCopy={false} data="https://play.google.com/store/apps/details?id=com.digitalbitbox.tfa" size={148} />
-                          <a target="_blank" rel="noreferrer" href="https://play.google.com/store/apps/details?id=com.digitalbitbox.tfa"><img src={playStoreBadge} className={style.badge} /></a>
+                          <A href="https://play.google.com/store/apps/details?id=com.digitalbitbox.tfa">
+                            <img src={playStoreBadge} className={style.badge} />
+                          </A>
                         </div>
                       </div>
                     </div>

diff --git a/frontends/web/src/routes/settings/electrum.tsx b/frontends/web/src/routes/settings/electrum.tsx
@@ -22,7 +22,7 @@ import { ElectrumServers } from './electrum-servers';
 import { getTesting } from '../../api/backend';
 import { Guide } from '../../components/guide/guide';
 import { Entry } from '../../components/guide/entry';
-import { ButtonLink } from '../../components/forms';
+import { Button, ButtonLink } from '../../components/forms';
 import { useLoad } from '../../hooks/api';
 import { Header } from '../../components/layout';
 
@@ -48,10 +48,14 @@ export const ElectrumSettings = () => {
           <div className="content padded">
             <div className="flex flex-row flex-between flex-items-center tabs">
               <div className={['tab', activeTab === 'btc' ? 'active' : ''].join(' ')}>
-                <a href="#" onClick={handleTab} data-tab="btc">{t(`settings.electrum.title-${testing ? 'tbtc' : 'btc'}`)}</a>
+                <Button transparent onClick={handleTab} data-tab="btc">
+                  {t(`settings.electrum.title-${testing ? 'tbtc' : 'btc'}`)}
+                </Button>
               </div>
               <div className={['tab', activeTab === 'ltc' ? 'active' : ''].join(' ')}>
-                <a href="#" onClick={handleTab} data-tab="ltc">{t(`settings.electrum.title-${testing ? 'tltc' : 'ltc'}`)}</a>
+                <Button transparent onClick={handleTab} data-tab="ltc">
+                  {t(`settings.electrum.title-${testing ? 'tltc' : 'ltc'}`)}
+                </Button>
               </div>
             </div>
             {

diff --git a/frontends/web/src/style/layout.css b/frontends/web/src/style/layout.css
@@ -172,7 +172,7 @@
     border: solid 1px var(--color-blue);
 }
 
-.tabs .tab a {
+.tabs .tab button {
     width: 100%;
     height: 100%;
     padding: var(--space-quarter);
@@ -187,7 +187,7 @@
     transition: all .2s ease-out;
 }
 
-.tabs .tab.active a {
+.tabs .tab.active button {
     color: var(--color-blue);
     background-color: var(--background-secondary);
 }