From e7ec98f7f1d0c5babee9ac1d83913876bf84d89d Mon Sep 17 00:00:00 2001
From: Mayank Chhabra <mayankchhabra9@gmail.com>
Date: Wed, 21 Jun 2023 17:25:00 +0700
Subject: [PATCH] Wording tweaks

---
 packages/dashboard/src/App.vue                |  2 +-
 .../src/components/MigratingComplete.vue      |  4 +--
 .../dashboard/src/global-styles/custom.scss   | 21 ++++++++++++
 packages/dashboard/src/layouts/HomeLayout.vue |  6 ++--
 .../src/views/Home/AppSuggestions.vue         |  1 +
 packages/dashboard/src/views/Home/Home.vue    |  2 +-
 .../src/views/Settings/RamWidget.vue          |  2 +-
 .../dashboard/src/views/Settings/Settings.vue | 32 +++++++++----------
 8 files changed, 46 insertions(+), 24 deletions(-)

diff --git a/packages/dashboard/src/App.vue b/packages/dashboard/src/App.vue
index 34bdbf28f..1e996289b 100644
--- a/packages/dashboard/src/App.vue
+++ b/packages/dashboard/src/App.vue
@@ -10,7 +10,7 @@
         <div class="d-flex flex-column align-items-center justify-content-center min-vh100 p-2">
           <logo class="mb-5 logo" />
           <span class="text-muted w-75 text-center">
-            <small>For security reasons Umbrel cannot be embedded in an iframe.</small>
+            <small>For security reasons umbrelOS cannot be embedded in an iframe.</small>
           </span>
         </div>
       </div>
diff --git a/packages/dashboard/src/components/MigratingComplete.vue b/packages/dashboard/src/components/MigratingComplete.vue
index 19a52b319..ce04d29ad 100644
--- a/packages/dashboard/src/components/MigratingComplete.vue
+++ b/packages/dashboard/src/components/MigratingComplete.vue
@@ -2,7 +2,7 @@
   <div class="d-flex flex-column align-items-center justify-content-center min-vh100 p-2">
     <logo compact class="mb-1 logo-loading" />
     <h2 v-if="error" class="text-white text-center">Migration failed</h2>
-    <h2 v-else class="text-white text-center">Migration successful!</h2>
+    <h2 v-else class="text-white text-center">Migration complete</h2>
 
     <div class="text-center">
       <div v-if="error">
@@ -19,7 +19,7 @@
       class="mt-4 px-4 login-button bg-white font-weight-bold"
       pill
       @click="resetMigrationState"
-      >Continue to log in</b-button
+      >Login</b-button
       >
     </div>
   </div>
diff --git a/packages/dashboard/src/global-styles/custom.scss b/packages/dashboard/src/global-styles/custom.scss
index ad92f93dc..03da7322e 100644
--- a/packages/dashboard/src/global-styles/custom.scss
+++ b/packages/dashboard/src/global-styles/custom.scss
@@ -71,6 +71,9 @@ body {
   --glass-dropdown-hover-text-color: rgba(0, 0, 0, 0.8);
   --glass-dropdown-hover-background-color: rgba(0, 0, 0, 0.1);
 
+  --glass-badge-color: rgba(0, 0, 0, 0.9);
+  --glass-badge-border-color: rgba(0, 0, 0, 0.2);
+
   --input-copy-border-color: rgba(0, 0, 0, 0.2);
 
   --app-store-tab-button-background-color: rgba(255, 255, 255, 0);
@@ -152,6 +155,9 @@ body.dark-mode {
   --glass-dropdown-hover-text-color: rgba(255, 255, 255, 1);
   --glass-dropdown-hover-background-color: rgba(255, 255, 255, 0.1);
 
+  --glass-badge-color: rgba(255, 255, 255, 0.9);
+  --glass-badge-border-color: rgba(255, 255, 255, 0.2);
+
   --input-copy-border-color: rgba(255, 255, 255, 0.2);
 
   --app-store-tab-button-background-color: rgba(255, 255, 255, 0);
@@ -1173,6 +1179,21 @@ input.glass-input::placeholder, input.glass-input::-webkit-input-placeholder, in
   background-color: var(--card-background-color);
 }
 
+.badge-glass {
+  color: var(--glass-badge-color);
+  border: solid 1px var(--glass-badge-border-color);
+  font-weight: 500;
+}
+
+.optimized-for-umbrel-home-icon {
+  height: 1.2rem;
+  width: 1.2rem;
+  vertical-align: middle;
+  path {
+    stroke: var(--glass-badge-color);
+  }
+}
+
 // Enable glassmorphic modals in Safari-only
 // because backdrop-filter interferes in Chromium
 // https://bugs.chromium.org/p/chromium/issues/detail?id=1194050
diff --git a/packages/dashboard/src/layouts/HomeLayout.vue b/packages/dashboard/src/layouts/HomeLayout.vue
index 1da22248e..ba89657f4 100644
--- a/packages/dashboard/src/layouts/HomeLayout.vue
+++ b/packages/dashboard/src/layouts/HomeLayout.vue
@@ -28,7 +28,7 @@
       >
         <template v-slot:modal-header>
           <div class="px-2 px-sm-3 pt-2 d-flex justify-content-between align-items-center w-100">
-            <h3 class="mb-0">Umbrel {{ availableUpdate.version }}</h3>
+            <h3 class="mb-0">umbrelOS {{ availableUpdate.version }}</h3>
             <!-- Emulate built in modal header close button action -->
             <a
               href="#"
@@ -86,12 +86,12 @@
         <div class="px-2">
           <div class="d-flex">
             <img src="@/assets/icon-dead-sd-card.svg" alt="Failed microSD card" class="mr-3" height="100" />
-            <p class="text-muted">It looks like the microSD card in your Raspberry Pi could fail soon. microSD cards are prone to wear and tear over time. But don't worry, Umbrel stores all of your data on the external USB drive.</p>
+            <p class="text-muted">It looks like the microSD card in your Raspberry Pi could fail soon. microSD cards are prone to wear and tear over time. But don't worry, umbrelOS stores all of your data on the external USB drive.</p>
           </div>
           <p class="my-3">Follow these steps to replace your microSD card:</p>
           <p>1. Shutdown your Umbrel.</p>
           <p>2. Disconnect the Rasbperry Pi from the power supply.</p>
-          <p>3. Flash <b-link :href="`https://github.com/getumbrel/umbrel-os/releases/download/v${version}/umbrel-os-v${version}.zip`" target="_blank" class="glass-link">Umbrel OS {{ version }}</b-link> onto a new microSD card (at least 16GB size).</p>
+          <p>3. Flash <b-link :href="`https://github.com/getumbrel/umbrel-os/releases/download/v${version}/umbrel-os-v${version}.zip`" target="_blank" class="glass-link">umbrelOS {{ version }}</b-link> onto a new microSD card (at least 16GB size).</p>
           <p>4. Replace the existing microSD card in your Raspberry Pi with the new one.</p>
           <p>5. Turn on the Raspberry Pi.</p>
           <p class="mt-3">That's it! Your Umbrel should continue to function normally after the replacement.</p>
diff --git a/packages/dashboard/src/views/Home/AppSuggestions.vue b/packages/dashboard/src/views/Home/AppSuggestions.vue
index e2fffe65f..e5eeb04fc 100644
--- a/packages/dashboard/src/views/Home/AppSuggestions.vue
+++ b/packages/dashboard/src/views/Home/AppSuggestions.vue
@@ -125,6 +125,7 @@ export default {
 .card-app-list {
   max-width: 400px;
   .app-name {
+    font-weight: 600;
     height: 1.75rem;
     overflow: hidden;
     text-overflow: ellipsis;
diff --git a/packages/dashboard/src/views/Home/Home.vue b/packages/dashboard/src/views/Home/Home.vue
index 7674cb859..85d887194 100644
--- a/packages/dashboard/src/views/Home/Home.vue
+++ b/packages/dashboard/src/views/Home/Home.vue
@@ -25,7 +25,7 @@
           
           <!-- Umbrel update notification -->
           <transition name="notification-transition" appear>
-            <notification v-if="availableUpdate.version" :text="`Umbrel ${availableUpdate.version} is now available`">
+            <notification v-if="availableUpdate.version" :text="`umbrelOS ${availableUpdate.version} is now available`">
               <b-button @click.prevent="confirmUpdate" variant="alert-glass" size="sm" class="px-2 px-sm-3 mr-2 mr-sm-3" pill>View</b-button>
             </notification>
           </transition>
diff --git a/packages/dashboard/src/views/Settings/RamWidget.vue b/packages/dashboard/src/views/Settings/RamWidget.vue
index 4f2ec041f..eee2c23cc 100644
--- a/packages/dashboard/src/views/Settings/RamWidget.vue
+++ b/packages/dashboard/src/views/Settings/RamWidget.vue
@@ -47,7 +47,7 @@
           </div>
 
           <b-alert v-if="isRunningLowOnRam" :variant="isRamFull ? 'danger' : 'warning'" class="mt-3" show>
-            <small>Consider uninstalling some apps or upgrading your Umbrel's hardware.</small>
+            <small>Consider uninstalling some apps.</small>
           </b-alert>
         </div>
         <div class="pt-1">
diff --git a/packages/dashboard/src/views/Settings/Settings.vue b/packages/dashboard/src/views/Settings/Settings.vue
index ac30ea7d6..dbd105cb0 100644
--- a/packages/dashboard/src/views/Settings/Settings.vue
+++ b/packages/dashboard/src/views/Settings/Settings.vue
@@ -352,7 +352,7 @@
           <div class="d-flex w-100 justify-content-between px-3 px-xl-4 mb-4">
             <div>
               <span class="d-block">Migration Assistant</span>
-              <small class="d-block" style="opacity: 0.4">Transfer your data to Umbrel Home</small>
+              <small class="d-block" style="opacity: 0.4">Transfer data from Raspberry Pi to your Umbrel Home</small>
             </div>
             <b-button variant="outline-primary" size="sm" @click="openMigrationModal">Migrate</b-button>
 
@@ -362,7 +362,7 @@
                 <div class="px-2 px-sm-3 pt-2 d-flex justify-content-between w-100">
                   <div>
                     <h3 class="mb-1">Migration Assistant</h3>
-                    <p class="text-muted mb-0">Transfer your umbrelOS from a Pi-based device to Umbrel Home in 3 steps</p>
+                    <p class="text-muted mb-0">Transfer all your apps and data from a Raspberry Pi-based umbrelOS server to your Umbrel Home in 3 steps</p>
                   </div>
                   <!-- Emulate built in modal header close button action -->
                   <a href="#" class="" @click.stop.prevent="close">
@@ -370,19 +370,19 @@
                   </a>
                 </div>
               </template>
-              <div class="px-3 pb-2">
+              <div class="px-3 pb-3">
                 <div class="py-2">
                   <div class="d-flex align-items-center mb-3">
                     <div class="migration-icon-container-sm">
                       <img :src="require(`@/assets/migration-assistant/icon-power-btn.svg`)" />
                     </div>
-                    <p class="mb-0 ml-2">Shut down Raspberry Pi Umbrel</p>
+                    <p class="mb-0 ml-2">Poweroff your Raspberry Pi-based Umbrel</p>
                   </div>
                   <div class="d-flex align-items-center mb-3">
                     <div class="migration-icon-container-sm">
                       <img :src="require(`@/assets/migration-assistant/icon-usb.svg`)" />
                     </div>
-                    <p class="mb-0 ml-2">Connect its SSD to Umbrel Home via USB</p>
+                    <p class="mb-0 ml-2">Connect its SSD to your Umbrel Home via USB</p>
                   </div>
                   <div class="d-flex align-items-center mb-3">
                     <div class="migration-icon-container-sm">
@@ -404,7 +404,7 @@
                     <div class="d-flex align-items-center">
                       <p class="mb-0">
                         <img :src="require(`@/assets/migration-assistant/icon-warning.svg`)" />
-                        The data in Umbrel Home, if any, will be permanently deleted</p>
+                        The data on your Umbrel Home, if any, will be permanently deleted</p>
                     </div>
                   </b-alert>
                 </div>
@@ -417,7 +417,7 @@
                 <div class="px-2 px-sm-3 pt-2 d-flex justify-content-between w-100">
                   <div>
                     <h3 class="mb-1">You're all set to migrate!</h3>
-                    <p class="text-muted mb-0">umbrelOS is ready to be migrated to Umbrel Home</p>
+                    <p class="text-muted mb-0">Your apps and data are ready to be transferred to your Umbrel Home</p>
                   </div>
                   <!-- Emulate built in modal header close button action -->
                   <a href="#" class="" @click.stop.prevent="close">
@@ -425,15 +425,15 @@
                   </a>
                 </div>
               </template>
-              <div class="px-3 pb-2">
+              <div class="px-3 pb-3">
                 <div class="py-2">
                   <div class="d-flex align-items-center mb-3">
                     <div class="migration-icon-container-lg">
                       <img :src="require(`@/assets/migration-assistant/icon-password.svg`)" />
                     </div>
                     <div class="ml-2">
-                      <p class="mb-0">Use the same password</p>
-                      <p class="text-muted mb-0">Remember to use the password from your Raspberry Pi Umbrel to unlock your Umbrel Home</p>
+                      <p class="mb-0">Use your previous password</p>
+                      <p class="text-muted mb-0">Remember to use the password from your Raspberry Pi-based Umbrel to unlock your Umbrel Home</p>
                     </div>
                   </div>
                   <div class="d-flex align-items-center mb-3">
@@ -441,8 +441,8 @@
                       <img :src="require(`@/assets/migration-assistant/icon-power-btn-red.svg`)" />
                     </div>
                     <div class="ml-2">
-                      <p class="mb-0">Keep your Raspberry Pi off after the update</p>
-                      <p class="text-muted mb-0">This helps prevent issues with apps such as Lightning Node</p>
+                      <p class="mb-0">Keep your Raspberry Pi-based Umbrel turned off after the migration</p>
+                      <p class="text-muted mb-0">This helps prevent issues with certain apps, such as Lightning Node. After migration, you can format your existing drive and use it for various purposes, including running a fresh umbrelOS server on your Raspberry Pi.</p>
                     </div>
                   </div>
                 </div>
@@ -459,7 +459,7 @@
                     <div class="d-flex align-items-center">
                       <p class="mb-0">
                         <img :src="require(`@/assets/migration-assistant/icon-warning.svg`)" />
-                        The data in Umbrel Home, if any, will be permanently deleted.</p>
+                        The data on your Umbrel Home, if any, will be permanently deleted.</p>
                     </div>
                   </b-alert>
                 </div>
@@ -507,20 +507,20 @@
         </div>
         <div class="px-3 px-xl-4 pb-4">
           <div class="w-100 d-flex justify-content-between mb-1">
-            <span class="align-self-end">Umbrel Version</span>
+            <span class="align-self-end">umbrelOS Version</span>
             <span class="font-weight-normal mb-0">{{ version }}</span>
           </div>
           <div v-show="!isCheckingForUpdate">
             <span v-show="!availableUpdate.version">
               <b-icon icon="check-circle-fill" variant="success"></b-icon>
-              <small class="ml-1" style="opacity: 0.4">Your Umbrel is on the latest version</small>
+              <small class="ml-1" style="opacity: 0.4">You are on the latest version</small>
             </span>
             <div v-show="availableUpdate.version">
               <span class="d-block">
                 <b-icon icon="bell-fill" variant="success"></b-icon>
                 <small
                   class="text-muted ml-1"
-                >Umbrel {{availableUpdate.version}} is now available to install</small>
+                >umbrelOS {{availableUpdate.version}} is now available to install</small>
               </span>
               <b-button
                 class="mt-2"