frontend: hide buttontext of header buttons on small screen

frontends/web/src/components/hideamountsbutton/hideamountsbutton.module.css

@@ -10,6 +10,13 @@
     height: 18px;
 }
 
-.button span {
+.buttonText {
     margin-left: var(--space-eight);
-}
+}
+
+@media (max-width: 768px) {
+    .button {
+        min-width: auto;
+        padding: 0 var(--space-quarter);
+    }
+}

frontends/web/src/components/hideamountsbutton/hideamountsbutton.tsx

@@ -1,5 +1,5 @@
 /**
- * Copyright 2023 Shift Crypto AG
+ * Copyright 2023-2024 Shift Crypto AG
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -27,19 +27,18 @@ export const HideAmountsButton = () => {
   const { t } = useTranslation();
   const { hideAmounts, toggleHideAmounts } = useContext(AppContext);
   const config = useLoad(getConfig);
-  return (
-    <>
-      {
-        config && config.frontend.allowHideAmounts ?
-          <Button className={styles.button} onClick={toggleHideAmounts} transparent>
-            {hideAmounts ?
-              <><EyeClosed /> <span>{t('newSettings.appearance.hideAmounts.showAmounts')}</span></> :
-              <><EyeOpened /> <span>{t('newSettings.appearance.hideAmounts.hideAmounts')}</span></>
-            }
-          </Button> :
-          null
-      }
-    </>
 
+  if (!config || !config.frontend.allowHideAmounts) {
+    return null;
+  }
+  return (
+    <Button className={styles.button} onClick={toggleHideAmounts} transparent>
+      {hideAmounts ? <EyeClosed /> : <EyeOpened />}
+      <span className={`hide-on-small ${styles.buttonText}`}>
+        {hideAmounts
+          ? t('newSettings.appearance.hideAmounts.showAmounts')
+          : t('newSettings.appearance.hideAmounts.hideAmounts')}
+      </span>
+    </Button>
   );
 };

frontends/web/src/components/layout/header.module.css

@@ -5,52 +5,36 @@
     margin-bottom: var(--space-quarter);
 }
 
-.children > a {
-    display: inline-block;
-    height: 18px;
-    font-size: var(--size-default);
-    text-decoration: none;
-    font-weight: 400;
-}
-
-.children > a > svg {
-    width: 18px;
-    height: 18px;
-    stroke-width: 2;
-}
-
 .container {
     width: 100%;
 }
 
-.container.fixed {
-    position: fixed;
-    left: var(--sidebar-width);
-    height: var(--header-height);
-    width: calc(100% - var(--sidebar-width));
-    z-index: 1001;
-}
-
-.forceHidden .sidebarToggler {
-    display: none !important;
-}
-
 .guideClose {
     align-items: center;
     display: flex;
     flex-direction: row;
     font-size: var(--size-default);
-    height: 18px;
+    height: 50px;
     margin-left: var(--space-half);
     padding: 0;
     text-decoration: none;
 }
+@media (max-width: 768px) {
+    .guideClose {
+        margin-left: 0;
+        min-width: auto;
+        padding: 0 var(--space-quarter);
+    }
+}
 
 .guideClose img {
     width: 18px;
     height: 18px;
     color: var(--color-blue);
-    margin-right: calc(var(--space-quarter) / 2);
+}
+
+.guideCloseText {
+    margin-left: var(--space-eight);
 }
 
 .disabled {
@@ -71,15 +55,6 @@
     flex-wrap: wrap;
 }
 
-.header.narrow > *:nth-child(2) {
-    text-align: center;
-}
-
-.header.narrow > *:nth-child(2) > * {
-    max-width: 600px;
-    width: 100%;
-}
-
 .sidebarToggler {
     width: 32px;
     height: 32px;

frontends/web/src/components/layout/header.tsx

@@ -1,6 +1,6 @@
 /**
  * Copyright 2018 Shift Devices AG
- * Copyright 2022 Shift Crypto AG
+ * Copyright 2022-2024 Shift Crypto AG
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,18 +19,16 @@ import React, { ReactNode, useContext } from 'react';
 import { useTranslation } from 'react-i18next';
 import { GuideActive, MenuLight, MenuDark } from '@/components/icon';
 import { AppContext } from '@/contexts/AppContext';
-import style from './header.module.css';
 import { Button } from '@/components/forms';
-interface HeaderProps {
-    title?: string | JSX.Element | JSX.Element[];
-    narrow?: boolean;
-    hideSidebarToggler?: boolean;
-    children?: ReactNode;
-}
-type Props = HeaderProps;
+import style from './header.module.css';
 
-const Header = ({
-  narrow,
+type Props = {
+  title?: string | JSX.Element | JSX.Element[];
+  hideSidebarToggler?: boolean;
+  children?: ReactNode;
+};
+
+export const Header = ({
   title,
   hideSidebarToggler,
   children
@@ -49,7 +47,7 @@ const Header = ({
 
   return (
     <div className={[style.container, sidebarStatus ? style[sidebarStatus] : ''].join(' ')}>
-      <div className={[style.header, narrow ? style.narrow : ''].join(' ')}>
+      <div className={style.header}>
         <div className={`${style.sidebarToggler} ${hideSidebarToggler ? style.hideSidebarToggler : ''}`} onClick={toggleSidebar}>
           <MenuDark className="show-in-lightmode" />
           <MenuLight className="show-in-darkmode" />
@@ -64,13 +62,13 @@ const Header = ({
               className={`${style.guideClose} ${guideShown ? style.disabled : ''}`}
             >
               <GuideActive />
-              {t('guide.toggle.open')}
+              <span className={`hide-on-small ${style.guideCloseText}`}>
+                {t('guide.toggle.open')}
+              </span>
             </Button>
           )}
         </div>
       </div>
     </div>
   );
 };
-
-export { Header };

frontends/web/src/routes/account/account.module.css

@@ -75,13 +75,32 @@
     opacity: 0.4;
 }
 
+.accountInfoLink {
+    align-items: center;
+    display: flex;
+    font-size: var(--size-default);
+    margin-right: var(--space-half);
+    min-height: 50px;
+    text-decoration: none;
+}
+
 .accountIcon {
     width: 18px;
     height: 18px;
-    margin-right: calc(var(--space-quarter) / 2);
+    margin-right: var(--space-eight);
 }
 
 @media (max-width: 768px) {
+
+    .accountInfoLink {
+        margin-right: 0;
+        padding: 0 var(--space-quarter);
+    }
+
+    .accountIcon {
+        margin-right: 0;
+    }
+
     .actionsContainer {
         justify-content: space-between;
         margin-bottom: var(--space-default);
@@ -92,7 +111,6 @@
         width: 100%;
     }
 
-
     .withWalletConnect.actionsContainer {
         justify-content: center;
     }

frontends/web/src/routes/account/account.tsx

@@ -293,11 +293,16 @@ export const Account = ({
         </Dialog>
         <Header
           title={<h2><span>{account.name}</span>{insured && (<Insured />)}</h2>}>
-          <HideAmountsButton />
-          <Link to={`/account/${code}/info`} title={t('accountInfo.title')} className="flex flex-row flex-items-center m-left-half">
+          <Link
+            to={`/account/${code}/info`}
+            title={t('accountInfo.title')}
+            className={style.accountInfoLink}>
             <Info className={style.accountIcon} />
-            <span>{t('accountInfo.label')}</span>
+            <span className="hide-on-small">
+              {t('accountInfo.label')}
+            </span>
           </Link>
+          <HideAmountsButton />
         </Header>
         {status.synced && hasDataLoaded && isBitcoinBased(account.coinCode) && (
           <HeadersSync coinCode={account.coinCode} />