Merge branch 'frontend-update-welcome-message'

Author: thisconnect

frontends/web/src/locales/en/app.json

@@ -1903,9 +1903,8 @@
   "welcome": {
     "connect": "Connect your BitBox",
     "getStarted": "Let's get started by installing firmware on your BitBox.",
-    "insertBitBox02": "For the BitBox02, please tap the device to continue.",
-    "insertDevice": "Please connect your device to get started",
     "loadingAccounts": "Loading accounts",
+    "message": "Please connect your BitBox and tap the side to continue.",
     "title": "Welcome"
   }
 }

frontends/web/src/routes/device/bitbox01/bitbox01.module.css

@@ -42,107 +42,10 @@
     margin-bottom: var(--spacing-default);
 }
 
-.heading {
-    margin-top: 1px;
-}
-
-.content {
-    display: flex;
-    flex-basis: auto;
-    flex-direction: column;
-    flex-grow: 1;
-    flex-shrink: 1;
-    max-width: var(--content-width);
-    width: 100%;
-    padding: var(--spacing-large) var(--spacing-default) 0 var(--spacing-default);
-}
-
-.verticalButtons {
-    display: flex;
-    flex-direction: column;
-    max-width: 300px;
-    width: 100%;
-    margin: 0 auto;
-}
-
-.verticalButtons button:first-child {
-    margin-bottom: var(--spacing-default);
-}
-
-.block {
-    flex: 1;
-}
-
-.block p:first-child,
-.block h2:first-child {
-    margin-top: 0;
-}
-
-.block p:last-child {
-    margin-bottom: var(--spacing-large);
-}
-
 .list {
     padding-left: 18px;
 }
 
 .list li:not(:first-child) {
     margin-top: var(--spacing-half);
 }
-
-.buttons {
-    margin-bottom: 0;
-    margin-top: var(--spacing-large);
-}
-
-.stepNumber {
-    min-width: 20px !important;
-    margin-right: 20px;
-    text-align: center;
-    color: var(--color-secondary);
-    font-size: var(--size-extra-large);
-    line-height: var(--size-extra-large);
-    font-weight: 400;
-}
-
-.badge {
-    max-height: 40px;
-    height: 40px;
-}
-
-.waitingLogo {
-    margin-bottom: var(--space-default);
-}
-
-.waitingContent {
-    max-width: 540px;
-    width: 100%;
-    background-color: var(--background-secondary);
-    padding: var(--space-default);
-    margin: 0 auto;
-    text-align: center;
-}
-
-.waitingText {
-    margin-top: 0;
-    margin-bottom: var(--space-half);
-    text-align: center;
-    font-weight: 400;
-    font-size: var(--size-subheader);
-}
-
-.waitingDescription {
-    text-align: center;
-    margin-bottom: 0;
-}
-
-@media screen and (max-width: 640px) {
-    .qrcodeContainer {
-        width: 50%;
-    }
-
-    .qrcodeContainer img {
-        width: 100%;
-        height: auto;
-    }
-}

frontends/web/src/routes/device/waiting.module.css

@@ -0,0 +1,7 @@
+.waitingText {
+  margin-top: 0;
+  margin-bottom: var(--space-half);
+  font-size: var(--size-subheader);
+  font-weight: 400;
+  text-align: center;
+}

frontends/web/src/routes/device/waiting.tsx

@@ -34,7 +34,7 @@ import { AppLogo, AppLogoInverted, SwissMadeOpenSource, SwissMadeOpenSourceDark
 import { Footer, GuidedContent, GuideWrapper, Header, Main } from '@/components/layout';
 import { View, ViewContent } from '@/components/view/view';
 import { OutlinedSettingsButton } from '@/components/settingsButton/outlined-settings-button';
-import style from './bitbox01/bitbox01.module.css';
+import style from './waiting.module.css';
 
 export const Waiting = () => {
   const { t } = useTranslation();
@@ -69,13 +69,12 @@ export const Waiting = () => {
             <OutlinedSettingsButton />
           </Header>
           <View verticallyCentered width="550px" fitContent>
-            <ViewContent>
+            <ViewContent textAlign="center">
               <div>
                 {isDarkMode ? (<AppLogoInverted />) : (<AppLogo />)}
-                <div className="box large">
-                  <h3 className={style.waitingText}>{t('welcome.insertDevice')}</h3>
-                  <p className={style.waitingDescription}>{t('welcome.insertBitBox02')}</p>
-                </div>
+                <p className={style.waitingText}>
+                  {t('welcome.message')}
+                </p>
                 <Bluetooth />
               </div>
             </ViewContent>