web/satellite: theme and style updates (#6860)

Updating color theme and styles, plus few copy updates.

web/satellite/src/components/BucketsDataTable.vue

@@ -75,15 +75,15 @@
                 </span>
             </template>
             <template #item.location="{ item }">
-                <v-icon size="28" class="mr-1 pa-1 rounded border">
+                <v-icon size="28" class="mr-1 pa-1 rounded-lg border">
                     <icon-location />
                 </v-icon>
-                <v-chip variant="tonal" color="default" size="small" rounded>
+                <v-chip variant="tonal" color="default" size="small" class="text-capitalize" rounded>
                     {{ item.location || `unknown(${item.defaultPlacement})` }}
                 </v-chip>
             </template>
             <template #item.versioning="{ item }">
-                <v-icon size="28" class="mr-1 pa-1 rounded border text-cursor-pointer">
+                <v-icon size="28" class="mr-1 pa-1 rounded-lg border text-cursor-pointer">
                     <v-tooltip activator="parent" location="top">{{ getVersioningInfo(item.versioning) }}</v-tooltip>
                     <icon-versioning />
                 </v-icon>

web/satellite/src/components/CardStatsComponent.vue

@@ -19,7 +19,7 @@ const props = withDefaults(defineProps<{
     color?: string;
     to?: string;
 }>(), {
-    color: 'info',
+    color: 'default',
     to: undefined,
 });
 </script>

web/satellite/src/components/LimitWarningBanners.vue

@@ -17,7 +17,7 @@
             You can increase your limits
             <a class="text-decoration-underline text-cursor-pointer" @click="openLimitDialog(bannerText[threshold].limitType)">here</a>
             or in the
-            <a class="text-decoration-underline text-cursor-pointer" @click="goToProjectSettings">Project Settings page</a>.
+            <a class="text-decoration-underline text-cursor-pointer" @click="goToProjectSettings">project settings page</a>.
         </template>
         <template v-else-if="!isPaidTier && bannerText[threshold].hundred" #text>
             <a class="text-decoration-underline text-cursor-pointer" @click="appStore.toggleUpgradeFlow(true)">Upgrade</a> to avoid any service interruptions.

web/satellite/src/components/StorjTokenCardComponent.vue

@@ -43,7 +43,7 @@
             </v-row>
             <v-divider class="my-4" />
             <p>Total Balance</p>
-            <v-chip rounded color="green" variant="outlined" class="font-weight-bold mt-2">{{ balance || '------' }}</v-chip>
+            <v-chip rounded color="success" variant="outlined" class="font-weight-bold mt-2">{{ balance || '------' }}</v-chip>
             <v-divider class="mt-4 mb-2" />
             <v-btn v-if="wallet.address" variant="flat" color="success" size="small" :loading="isLoading" class="mt-2 mr-2" @click="onAddTokens">+ Add STORJ Tokens</v-btn>
             <v-btn v-else variant="flat" color="success" size="small" :loading="isLoading" class="mt-2" @click="claimWalletClick">Create New Wallet</v-btn>

web/satellite/src/components/TokenTransactionsTableComponent.vue

@@ -41,7 +41,7 @@
                 </p>
             </template>
             <template #item.amount="{ item }">
-                <p class="font-weight-bold text-green">
+                <p class="font-weight-bold text-success">
                     {{ item.amount }}
                 </p>
             </template>

web/satellite/src/components/dialogs/EmissionsDialog.vue

@@ -48,14 +48,14 @@
                 </v-card>
                 <v-card class="pa-4 mb-4">
                     <p class="text-body-2 font-weight-bold mb-2">Total Carbon Avoided</p>
-                    <v-chip variant="tonal" color="green" class="font-weight-bold">
+                    <v-chip variant="tonal" color="success" class="font-weight-bold">
                         {{ co2Savings }} kg CO₂e
                     </v-chip>
                     <p class="text-body-2 mt-2">Estimated by using Storj. <a href="https://www.storj.io/documents/storj-sustainability-whitepaper.pdf" target="_blank" rel="noopener noreferrer" class="link font-weight-bold">Learn more</a></p>
                 </v-card>
                 <v-card class="pa-4 mb-2">
                     <p class="text-body-2 font-weight-bold mb-2">Carbon Avoided Equals To</p>
-                    <v-chip variant="tonal" color="green" class="font-weight-bold">
+                    <v-chip variant="tonal" color="success" class="font-weight-bold">
                         {{ emission.savedTrees.toLocaleString() }} tree{{ emission.savedTrees !== 1 ? 's' : '' }} grown for 10 years
                     </v-chip>
                     <p class="text-body-2 mt-2">Estimated equivalencies. <a href="https://www.epa.gov/energy/greenhouse-gases-equivalencies-calculator-calculations-and-references#seedlings" target="_blank" rel="noopener noreferrer" class="link font-weight-bold">Learn more</a></p>

web/satellite/src/components/dialogs/EnterProjectPassphraseDialog.vue

@@ -37,11 +37,10 @@
                     <v-row>
                         <v-col cols="12">
                             <p v-if="isSkipping" class="pb-3">
-                                Do you want to remember this choice and always skip the passphrase when opening a project?
+                                Do you want to remember this choice and skip the passphrase when opening a project?
                             </p>
                             <p v-else>
-                                Enter your encryption passphrase to view and manage your data in the browser.
-                                This passphrase will be used to unlock all buckets in this project.
+                                Enter your encryption passphrase to view and manage the data in this project.
                             </p>
                         </v-col>
 
@@ -81,7 +80,7 @@
                         :disabled="isLoading"
                         @click="() => isSkipping ? model = false : onSkip()"
                     >
-                        {{ isSkipping ? 'No' : 'Skip' }}
+                        {{ isSkipping ? 'No, skip just now' : 'Skip' }}
                     </v-btn>
                 </v-col>
                 <v-col>
@@ -93,7 +92,7 @@
                         :disabled="!formValid"
                         @click="() => isSkipping ? onSkip(true) : onContinue()"
                     >
-                        {{ isSkipping ? 'Yes' : 'Continue ->' }}
+                        {{ isSkipping ? 'Yes, always skip' : 'Continue ->' }}
                     </v-btn>
                 </v-col>
             </v-card-actions>

web/satellite/src/components/dialogs/upgradeAccountFlow/PricingPlanSelectionStep.vue

@@ -55,11 +55,11 @@ const plans = ref<PricingPlanInfo[]>([
         PricingPlanType.PRO,
         'Pro Account',
         '25 GB Free',
-        'Only pay for what you need. $4/TB stored per month* $7/TB for egress bandwidth.',
+        'Only pay for what you need. $4/TB stored per month* $7/TB for download bandwidth.',
         '*Additional per-segment fee of $0.0000088 applies.',
         null,
         null,
-        'Add a credit card to activate your Pro Account.<br><br>Get 25GB free storage and egress. Only pay for what you use beyond that.',
+        'Add a credit card to activate your Pro Account.<br><br>Get 25GB free storage and download. Only pay for what you use beyond that.',
         'No charge today',
         '25GB Free',
     ),

web/satellite/src/layouts/default/ProjectNav.vue

@@ -57,7 +57,7 @@
                                 <IconProject />
                             </template>
                             <v-list-item-title class="ml-3">
-                                <v-chip color="green" variant="tonal" size="small" rounded="xl" class="font-weight-bold" link @click="() => registerLinkClick(ROUTES.Projects.path)">
+                                <v-chip color="success" variant="tonal" size="small" rounded="xl" class="font-weight-bold" link @click="() => registerLinkClick(ROUTES.Projects.path)">
                                     Shared Projects
                                 </v-chip>
                             </v-list-item-title>

web/satellite/src/plugins/theme.ts

@@ -9,8 +9,8 @@ export const THEME_OPTIONS: ThemeOptions = {
     themes: {
         light: {
             colors: {
-                primary: '#0149FF',
-                secondary: '#0218A7',
+                primary: '#0052FF',
+                secondary: '#091C45',
                 background: '#FFF',
                 surface: '#FFF',
                 info: '#0059D0',
@@ -19,39 +19,41 @@ export const THEME_OPTIONS: ThemeOptions = {
                 warning: '#FF7F00',
                 error: '#FF0149',
                 purple: '#7B61FF',
+                purple2: '#502EFF',
                 blue7: '#090920',
                 blue6:  '#091c45',
                 blue5: '#0218A7',
                 blue4: '#0059D0',
                 blue2: '#003ACD',
                 yellow: '#FFC600',
-                yellow2: '#FFB701',
+                yellow2: '#FFB018',
                 orange: '#FFA800',
-                green: '#00B150',
-                purple2: '#502EFF',
+                green: '#00E366',
+                paragraph: '#283968',
+
             },
         },
         dark: {
             colors: {
-                primary: '#0149FF',
+                primary: '#0052FF',
                 secondary: '#537CFF',
-                background: '#090920',
+                background: '#090927',
                 success: '#00AC26',
                 help: '#FFC600',
                 error: '#FF0149',
-                surface: '#090920',
+                surface: '#090927',
                 purple: '#A18EFF',
+                purple2: '#A18EFF',
                 blue7: '#090920',
                 blue6:  '#091c45',
                 blue5: '#2196f3',
                 blue4: '#0059D0',
                 blue2: '#003ACD',
                 yellow: '#FFC600',
-                yellow2: '#FFB701',
+                yellow2: '#FFB018',
                 orange: '#FFA800',
                 warning: '#FF8A00',
-                green: '#00e366',
-                purple2: '#A18EFF',
+                green: '#00E366',
             },
         },
     },

web/satellite/src/styles/styles.scss

@@ -1,4 +1,4 @@
-// Copyright (C) 2023 Storj Labs, Inc.
+// Copyright (C) 2024 Storj Labs, Inc.
 // See LICENSE for copying information.
 
 @import './variables';
@@ -22,9 +22,9 @@ body {
   --v-border-color: 0, 0, 0;
   --v-theme-overlay-multiplier: 0.75 !important;
   --v-border-opacity: 0.09 !important;
-  // --v-theme-on-background: var(--v-theme-blue6) !important;
-  --v-theme-on-background: var(--v-theme-blue7) !important;
-  --v-theme-on-surface: var(--v-theme-blue7) !important;
+  --v-theme-on-background: var(--v-theme-secondary) !important;
+  --v-theme-on-surface: var(--v-theme-secondary) !important;
+  --v-theme-surface-variant: var(--v-theme-secondary) !important;
 }
 
 // Dark Theme
@@ -34,6 +34,18 @@ body {
   --v-theme-on-surface-variant: 70,70,70 !important;
 }
 
+h1,h2,h3,h4,h5,h6 {
+  font-weight: 800 !important;
+}
+
+.v-theme--light p {
+  color: var(--v-theme-paragraph) !important;
+}
+
+.font-weight-bold {
+  font-weight: 800 !important;
+}
+
 // Nav
 .v-app-bar.v-toolbar {
   border-bottom: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
@@ -119,7 +131,10 @@ body {
 
 // Menu list item
 .v-list-item--active .v-list-item-title {
-  font-weight: 700 !important;
+  font-weight: 800 !important;
+}
+.v-list-item-subtitle {
+  opacity: 1 !important;
 }
 
 // Select Input Menu
@@ -161,11 +176,15 @@ body {
 
 // Cards Title
 .v-card-item .v-card-title {
-  font-weight: 700;
+  font-weight: 800;
   font-size: 1.1rem;
   letter-spacing: 0;
 }
 
+.v-card-subtitle {
+  opacity: 1;
+}
+
 // Cards Hover
 .v-card--hover:hover {
   box-shadow: 0 5px 5px -3px var(--v-shadow-key-umbra-opacity, rgba(0, 0, 0, .1)), 0 8px 10px 1px var(--v-shadow-key-penumbra-opacity, rgba(0, 0, 0, .07)), 0 3px 14px 2px var(--v-shadow-key-ambient-opacity, rgba(0, 0, 0, .05));
@@ -306,7 +325,7 @@ table {
   color: rgb(var(--v-theme-secondary));
 }
 .v-theme--dark .link:hover {
-  color: rgb(var(--v-theme-info));
+  color: rgb(var(--v-theme-on-background));
 }
 
 
@@ -347,7 +366,7 @@ table {
 
 // Alerts
 .v-alert-title {
-  font-weight: bold !important;
+  font-weight: 800 !important;
   letter-spacing: 0 !important;
 }
 .v-alert__prepend {

web/satellite/src/types/projects.ts

@@ -379,7 +379,7 @@ export type ProjectItemRole = Exclude<ProjectRole, ProjectRole.InviteExpired>;
  * PROJECT_ROLE_COLORS defines what colors project role tags should use.
  */
 export const PROJECT_ROLE_COLORS: Record<ProjectRole, string> = {
-    [ProjectRole.Member]: 'green',
+    [ProjectRole.Member]: 'success',
     [ProjectRole.Owner]: 'secondary',
     [ProjectRole.Invited]: 'warning',
     [ProjectRole.InviteExpired]: 'error',

web/satellite/src/views/Billing.vue

@@ -53,7 +53,7 @@
                                 <v-progress-linear v-if="isLoading" indeterminate />
                             </template>
                             <v-card-text>
-                                <v-chip rounded color="green" variant="tonal" class="font-weight-bold mb-2">
+                                <v-chip rounded color="success" variant="tonal" class="font-weight-bold mb-2">
                                     {{ centsToDollars(priceSummary) }}
                                 </v-chip>
                                 <v-divider class="my-4" />
@@ -68,7 +68,7 @@
                                 <v-progress-linear v-if="isLoading" indeterminate />
                             </template>
                             <v-card-text>
-                                <v-chip rounded color="green" variant="tonal" class="font-weight-bold mb-2">
+                                <v-chip rounded color="success" variant="tonal" class="font-weight-bold mb-2">
                                     {{ formattedAccountBalance }}
                                 </v-chip>
                                 <v-divider class="my-4" />
@@ -101,7 +101,7 @@
                         >
                             <v-card-text>
                                 <v-chip
-                                    :color="isCouponActive ? 'green' : 'error'"
+                                    :color="isCouponActive ? 'success' : 'error'"
                                     variant="tonal"
                                     class="font-weight-bold mb-2"
                                     rounded

web/satellite/src/views/Dashboard.vue

@@ -38,16 +38,16 @@
 
         <v-row class="d-flex align-center mt-2">
             <v-col cols="6" md="4" lg="2">
-                <CardStatsComponent title="Files" subtitle="Project files" :data="limits.objectCount.toLocaleString()" :to="ROUTES.Buckets.path" />
+                <CardStatsComponent title="Files" subtitle="Project total" :data="limits.objectCount.toLocaleString()" :to="ROUTES.Buckets.path" />
             </v-col>
             <v-col v-if="!emissionImpactViewEnabled" cols="6" md="4" lg="2">
                 <CardStatsComponent title="Segments" subtitle="All file pieces" :data="limits.segmentCount.toLocaleString()" :to="ROUTES.Buckets.path" />
             </v-col>
             <v-col cols="6" md="4" lg="2">
-                <CardStatsComponent title="Buckets" subtitle="Project buckets" :data="bucketsCount.toLocaleString()" :to="ROUTES.Buckets.path" />
+                <CardStatsComponent title="Buckets" subtitle="In this project" :data="bucketsCount.toLocaleString()" :to="ROUTES.Buckets.path" />
             </v-col>
             <v-col cols="6" md="4" lg="2">
-                <CardStatsComponent title="Access" subtitle="Project accesses" :data="accessGrantsCount.toLocaleString()" :to="ROUTES.Access.path" />
+                <CardStatsComponent title="Access Keys" subtitle="Total keys" :data="accessGrantsCount.toLocaleString()" :to="ROUTES.Access.path" />
             </v-col>
             <v-col cols="6" md="4" lg="2">
                 <CardStatsComponent title="Team" subtitle="Project members" :data="teamSize.toLocaleString()" :to="ROUTES.Team.path" />
@@ -75,7 +75,7 @@
                     >
                         Click to learn more
                     </v-tooltip>
-                    <CardStatsComponent title="CO₂ Avoided" subtitle="By using Storj" :data="co2Saved" color="green" link />
+                    <CardStatsComponent title="CO₂ Avoided" subtitle="By using Storj" :data="co2Saved" color="success" link />
                 </v-col>
             </template>
             <v-col v-if="billingEnabled && !emissionImpactViewEnabled" cols="6" md="4" lg="2">
@@ -105,7 +105,7 @@
                     :limit="`Limit: ${usedLimitFormatted(limits.bandwidthLimit)} per month`"
                     :available="`${usedLimitFormatted(availableEgress)} Available`"
                     :cta="getCTALabel(egressUsedPercent)"
-                    extra-info="Your download usage limit is applied only for the current billing period."
+                    extra-info="The download usage is only for the current billing period of one month."
                     @cta-click="onNeedMoreClicked(LimitToChange.Bandwidth)"
                 />
             </v-col>

web/satellite/src/views/Signup.vue

@@ -143,7 +143,7 @@
                                 </template>
                                 <template #text>
                                     This means any data you upload to this satellite can be
-                                    deleted at any time and your storage/egress limits
+                                    deleted at any time and your storage/download limits
                                     can fluctuate. To use our production service please
                                     create an account on one of our production Satellites.
                                     <a href="https://storj.io/v2/signup/" target="_blank" rel="noopener noreferrer">https://storj.io/v2/signup/</a>