Skip to content

Commit

Permalink
Wording tweaks
Browse files Browse the repository at this point in the history
  • Loading branch information
@mayankchhabra
mayankchhabra committed Jun 21, 2023
1 parent 3394747 commit e7ec98f
Show file tree
Hide file tree
Showing 8 changed files with 46 additions and 24 deletions.
2 changes: 1 addition & 1 deletion packages/dashboard/src/App.vue
View file
Expand Up @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions packages/dashboard/src/components/MigratingComplete.vue
View file
Expand Up @@ -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">
Expand All @@ -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>
Expand Down
21 changes: 21 additions & 0 deletions packages/dashboard/src/global-styles/custom.scss
View file
Expand Up @@ -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);
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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
Expand Down
6 changes: 3 additions & 3 deletions packages/dashboard/src/layouts/HomeLayout.vue
View file
Expand Up @@ -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="#"
Expand Down Expand Up @@ -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>
Expand Down
1 change: 1 addition & 0 deletions packages/dashboard/src/views/Home/AppSuggestions.vue
View file
Expand Up @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion packages/dashboard/src/views/Home/Home.vue
View file
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion packages/dashboard/src/views/Settings/RamWidget.vue
View file
Expand Up @@ -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">
Expand Down
32 changes: 16 additions & 16 deletions packages/dashboard/src/views/Settings/Settings.vue
View file
Expand Up @@ -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>

Expand All @@ -362,27 +362,27 @@
<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">
<img :src="require(`@/assets/icon-modal-close.svg`)" />
</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">
Expand All @@ -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>
Expand All @@ -417,32 +417,32 @@
<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">
<img :src="require(`@/assets/icon-modal-close.svg`)" />
</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">
<div class="migration-icon-container-lg">
<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>
Expand All @@ -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>
Expand Down Expand Up @@ -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"
Expand Down

0 comments on commit e7ec98f

Please sign in to comment.