diff --git a/satellite/satellitedb/migrate.go b/satellite/satellitedb/migrate.go
index ed8dc9a3c4df..faa18b088193 100644
--- a/satellite/satellitedb/migrate.go
+++ b/satellite/satellitedb/migrate.go
@@ -2652,7 +2652,8 @@ func (db *satelliteDB) ProductionMigration() *migrate.Migration {
Description: "update storjscan payments table to use chain_id in primary key",
Version: 261,
Action: migrate.SQL{
- `ALTER TABLE storjscan_payments DROP CONSTRAINT storjscan_payments_pkey;`,
+ `ALTER TABLE storjscan_payments DROP CONSTRAINT IF EXISTS "primary";`,
+ `ALTER TABLE storjscan_payments DROP CONSTRAINT IF EXISTS storjscan_payments_pkey;`,
`ALTER TABLE storjscan_payments ADD CONSTRAINT storjscan_payments_pkey PRIMARY KEY ( chain_id, block_hash, log_index );`,
},
},
diff --git a/web/satellite/src/components/AddCreditCardComponent.vue b/web/satellite/src/components/AddCreditCardComponent.vue
index 31229d4f19fb..d102ca405a90 100644
--- a/web/satellite/src/components/AddCreditCardComponent.vue
+++ b/web/satellite/src/components/AddCreditCardComponent.vue
@@ -2,9 +2,9 @@
// See LICENSE for copying information.
-
+
- + Add New Card
+ + Add New Card
(null);
@@ -105,6 +108,19 @@ const isUpgradeSuccessShown = ref(false);
const paymentElementEnabled = computed(() => {
return configStore.state.config.stripePaymentElementEnabled;
});
+
+/**
+ * Triggers enter card info inputs to be shown.
+ */
+function onShowCardInput(): void {
+ if (!usersStore.state.user.paidTier) {
+ appStore.toggleUpgradeFlow(true);
+ return;
+ }
+
+ isCardInputShown.value = true;
+}
+
/**
* Provides card information to Stripe.
*/
diff --git a/web/satellite/src/components/BucketsDataTable.vue b/web/satellite/src/components/BucketsDataTable.vue
index 9ed2a6e81ba9..e4c912db6321 100644
--- a/web/satellite/src/components/BucketsDataTable.vue
+++ b/web/satellite/src/components/BucketsDataTable.vue
@@ -75,15 +75,15 @@
-
+
-
+
{{ item.location || `unknown(${item.defaultPlacement})` }}
-
+
{{ getVersioningInfo(item.versioning) }}
diff --git a/web/satellite/src/components/CardStatsComponent.vue b/web/satellite/src/components/CardStatsComponent.vue
index ff541efa162c..b2a81546f267 100644
--- a/web/satellite/src/components/CardStatsComponent.vue
+++ b/web/satellite/src/components/CardStatsComponent.vue
@@ -19,7 +19,7 @@ const props = withDefaults(defineProps<{
color?: string;
to?: string;
}>(), {
- color: 'info',
+ color: 'default',
to: undefined,
});
diff --git a/web/satellite/src/components/LimitWarningBanners.vue b/web/satellite/src/components/LimitWarningBanners.vue
index d504f5d6305f..4b4f217940a7 100644
--- a/web/satellite/src/components/LimitWarningBanners.vue
+++ b/web/satellite/src/components/LimitWarningBanners.vue
@@ -17,7 +17,7 @@
You can increase your limits
here
or in the
- Project Settings page.
+ project settings page.
Upgrade to avoid any service interruptions.
diff --git a/web/satellite/src/components/StorjTokenCardComponent.vue b/web/satellite/src/components/StorjTokenCardComponent.vue
index cd34011d7792..bedba78c80d6 100644
--- a/web/satellite/src/components/StorjTokenCardComponent.vue
+++ b/web/satellite/src/components/StorjTokenCardComponent.vue
@@ -43,7 +43,7 @@
Total Balance
- {{ balance || '------' }}
+ {{ balance || '------' }}
+ Add STORJ Tokens
Create New Wallet
@@ -66,13 +66,16 @@ import { AnalyticsErrorEventSource, AnalyticsEvent } from '@/utils/constants/ana
import { useNotify } from '@/utils/hooks';
import { useAppStore } from '@/store/modules/appStore';
import { useAnalyticsStore } from '@/store/modules/analyticsStore';
+import { useUsersStore } from '@/store/modules/usersStore';
import AddTokensDialog from '@/components/dialogs/AddTokensDialog.vue';
import InputCopyButton from '@/components/InputCopyButton.vue';
const analyticsStore = useAnalyticsStore();
const appStore = useAppStore();
+const usersStore = useUsersStore();
const billingStore = useBillingStore();
+
const notify = useNotify();
const { isLoading, withLoading } = useLoading();
@@ -145,6 +148,11 @@ async function claimWallet(): Promise {
* Called when "Create New Wallet" button is clicked.
*/
function claimWalletClick(): void {
+ if (!usersStore.state.user.paidTier) {
+ appStore.toggleUpgradeFlow(true);
+ return;
+ }
+
withLoading(async () => {
try {
await claimWallet();
@@ -162,6 +170,11 @@ function claimWalletClick(): void {
function onAddTokens(): void {
analyticsStore.eventTriggered(AnalyticsEvent.ADD_FUNDS_CLICKED);
+ if (!usersStore.state.user.paidTier) {
+ appStore.toggleUpgradeFlow(true);
+ return;
+ }
+
withLoading(async () => {
if (!wallet.value.address) {
// not possible from this component
diff --git a/web/satellite/src/components/TokenTransactionsTableComponent.vue b/web/satellite/src/components/TokenTransactionsTableComponent.vue
index 443a32471392..d7844d39dc0a 100644
--- a/web/satellite/src/components/TokenTransactionsTableComponent.vue
+++ b/web/satellite/src/components/TokenTransactionsTableComponent.vue
@@ -41,7 +41,7 @@
-
+
{{ item.amount }}
diff --git a/web/satellite/src/components/dialogs/CreateProjectDialog.vue b/web/satellite/src/components/dialogs/CreateProjectDialog.vue
index ea07a7c72414..a07b339f3762 100644
--- a/web/satellite/src/components/dialogs/CreateProjectDialog.vue
+++ b/web/satellite/src/components/dialogs/CreateProjectDialog.vue
@@ -322,7 +322,8 @@ const cardTitle = computed((): string => {
watch(innerContent, comp => {
if (comp) {
- isProjectLimitReached.value = projectsStore.state.projects.length >= usersStore.state.user.projectLimit;
+ const ownedProjects = projectsStore.projects.filter((p) => p.ownerId === usersStore.state.user.id);
+ isProjectLimitReached.value = ownedProjects.length >= usersStore.state.user.projectLimit;
isDescriptionShown.value = false;
name.value = '';
description.value = '';
diff --git a/web/satellite/src/components/dialogs/EditProjectLimitDialog.vue b/web/satellite/src/components/dialogs/EditProjectLimitDialog.vue
index 3d48fc155393..da4cdc9d053a 100644
--- a/web/satellite/src/components/dialogs/EditProjectLimitDialog.vue
+++ b/web/satellite/src/components/dialogs/EditProjectLimitDialog.vue
@@ -197,7 +197,9 @@ const input = ref(0);
const dropdownModel = computed<(Dimensions.GB | Dimensions.TB)[]>({
get: () => [ activeMeasurement.value ],
- set: value => activeMeasurement.value = value[0],
+ set: value => {
+ if (value[0]) activeMeasurement.value = value[0];
+ },
});
/**
diff --git a/web/satellite/src/components/dialogs/EmissionsDialog.vue b/web/satellite/src/components/dialogs/EmissionsDialog.vue
index 7464f0c02e39..2b8d8e41f1ca 100644
--- a/web/satellite/src/components/dialogs/EmissionsDialog.vue
+++ b/web/satellite/src/components/dialogs/EmissionsDialog.vue
@@ -48,14 +48,14 @@
Total Carbon Avoided
-
+
{{ co2Savings }} kg CO₂e
Estimated by using Storj. Learn more
Carbon Avoided Equals To
-
+
{{ emission.savedTrees.toLocaleString() }} tree{{ emission.savedTrees !== 1 ? 's' : '' }} grown for 10 years
Estimated equivalencies. Learn more
diff --git a/web/satellite/src/components/dialogs/EnterProjectPassphraseDialog.vue b/web/satellite/src/components/dialogs/EnterProjectPassphraseDialog.vue
index b11dfd12ca9f..0f880f081fd1 100644
--- a/web/satellite/src/components/dialogs/EnterProjectPassphraseDialog.vue
+++ b/web/satellite/src/components/dialogs/EnterProjectPassphraseDialog.vue
@@ -37,11 +37,10 @@
- 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?
- 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.
@@ -81,7 +80,7 @@
:disabled="isLoading"
@click="() => isSkipping ? model = false : onSkip()"
>
- {{ isSkipping ? 'No' : 'Skip' }}
+ {{ isSkipping ? 'No, skip just now' : 'Skip' }}
@@ -93,7 +92,7 @@
:disabled="!formValid"
@click="() => isSkipping ? onSkip(true) : onContinue()"
>
- {{ isSkipping ? 'Yes' : 'Continue ->' }}
+ {{ isSkipping ? 'Yes, always skip' : 'Continue ->' }}
diff --git a/web/satellite/src/components/dialogs/upgradeAccountFlow/PricingPlanSelectionStep.vue b/web/satellite/src/components/dialogs/upgradeAccountFlow/PricingPlanSelectionStep.vue
index 98cc49aee53a..9b3acc7d3f10 100644
--- a/web/satellite/src/components/dialogs/upgradeAccountFlow/PricingPlanSelectionStep.vue
+++ b/web/satellite/src/components/dialogs/upgradeAccountFlow/PricingPlanSelectionStep.vue
@@ -55,11 +55,11 @@ const plans = ref([
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.
Get 25GB free storage and egress. Only pay for what you use beyond that.',
+ 'Add a credit card to activate your Pro Account.
Get 25GB free storage and download. Only pay for what you use beyond that.',
'No charge today',
'25GB Free',
),
diff --git a/web/satellite/src/layouts/default/ProjectNav.vue b/web/satellite/src/layouts/default/ProjectNav.vue
index d2b64e143380..bce04328b106 100644
--- a/web/satellite/src/layouts/default/ProjectNav.vue
+++ b/web/satellite/src/layouts/default/ProjectNav.vue
@@ -57,7 +57,7 @@
- registerLinkClick(ROUTES.Projects.path)">
+ registerLinkClick(ROUTES.Projects.path)">
Shared Projects
diff --git a/web/satellite/src/plugins/theme.ts b/web/satellite/src/plugins/theme.ts
index 8745af4277d7..efde115da0c9 100644
--- a/web/satellite/src/plugins/theme.ts
+++ b/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',
},
},
},
diff --git a/web/satellite/src/styles/styles.scss b/web/satellite/src/styles/styles.scss
index 6543cc1ad609..6915315891f2 100644
--- a/web/satellite/src/styles/styles.scss
+++ b/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 {
diff --git a/web/satellite/src/types/projects.ts b/web/satellite/src/types/projects.ts
index 6c14d62a1e5b..9c124d005953 100644
--- a/web/satellite/src/types/projects.ts
+++ b/web/satellite/src/types/projects.ts
@@ -370,7 +370,7 @@ export type ProjectItemRole = Exclude;
* PROJECT_ROLE_COLORS defines what colors project role tags should use.
*/
export const PROJECT_ROLE_COLORS: Record = {
- [ProjectRole.Member]: 'green',
+ [ProjectRole.Member]: 'success',
[ProjectRole.Owner]: 'secondary',
[ProjectRole.Invited]: 'warning',
[ProjectRole.InviteExpired]: 'error',
diff --git a/web/satellite/src/views/Billing.vue b/web/satellite/src/views/Billing.vue
index 124b01b44619..de97aeada21d 100644
--- a/web/satellite/src/views/Billing.vue
+++ b/web/satellite/src/views/Billing.vue
@@ -53,7 +53,7 @@
-
+
{{ centsToDollars(priceSummary) }}
@@ -68,7 +68,7 @@
-
+
{{ formattedAccountBalance }}
@@ -101,7 +101,7 @@
>
{
});
function onAddTokensClicked(): void {
+ if (!usersStore.state.user.paidTier) {
+ appStore.toggleUpgradeFlow(true);
+ return;
+ }
+
tab.value = TABS['payment-methods'];
tokenCardComponent.value?.onAddTokens();
}
diff --git a/web/satellite/src/views/Dashboard.vue b/web/satellite/src/views/Dashboard.vue
index e72bc9a8d765..0641460103f4 100644
--- a/web/satellite/src/views/Dashboard.vue
+++ b/web/satellite/src/views/Dashboard.vue
@@ -38,16 +38,16 @@
-
+
-
+
-
+
@@ -75,7 +75,7 @@
>
Click to learn more
-
+
@@ -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)"
/>
diff --git a/web/satellite/src/views/Signup.vue b/web/satellite/src/views/Signup.vue
index 46c336c79f5a..d5e98dbb75d5 100644
--- a/web/satellite/src/views/Signup.vue
+++ b/web/satellite/src/views/Signup.vue
@@ -143,7 +143,7 @@
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.
https://storj.io/v2/signup/