JakeHillion/storj
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

web/satellite: account area stylings and status fixes

Browse Source 
Fixed user's paid tier status to be set by amount of CCs instead of db field.
Fixed some minor styling issues.

Change-Id: Ie1989289a1bf3ce964de7fe19ca8dd3e11dffc38
This commit is contained in:
Vitalii Shpital 2021-10-29 14:17:15 +03:00
parent 785eb93cd7
commit 4a955b8a76
2 changed files with 25 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
web/satellite/src/components/navigation/newNavigationStructure/AccountArea.vue
View File

@ -8,12 +8,12 @@
</div>
<div class="account-area__info">
<h2 class="account-area__info__email">{{ user.email }}</h2>
<p v-if="user.paidTier" class="account-area__info__type">Pro account</p>
<p v-if="usersCCAmount" class="account-area__info__type">Pro account</p>
<p v-else class="account-area__info__type">Free account</p>
</div>
<div v-if="isDropdown" v-click-outside="closeDropdown" class="account-area__dropdown" :style="style">
<div class="account-area__dropdown__header">
<p class="account-area__dropdown__header__greet">👋🏼 &nbsp; Hi, {{ user.fullName }}</p>
<p class="account-area__dropdown__header__greet">👋🏼 Hi, {{ user.fullName }}</p>
<p class="account-area__dropdown__header__sat">{{ satellite }}</p>
</div>
<div class="account-area__dropdown__item" @click="navigateToSettings">
@ -24,7 +24,7 @@
<BillingIcon />
<p class="account-area__dropdown__item__label">Billing</p>
</div>
<div v-if="!user.paidTier" class="account-area__dropdown__item" @click="onUpgrade">
<div v-if="!usersCCAmount" class="account-area__dropdown__item" @click="onUpgrade">
<PlanIcon />
<p class="account-area__dropdown__item__label">Upgrade Plan</p>
</div>
@ -127,10 +127,14 @@ export default class AccountArea extends Vue {
* Toggles account dropdown visibility.
*/
public toggleDropdown(): void {
const DROPDOWN_HEIGHT = 262;
let dropdownHeight = 262; // pixels
if (this.usersCCAmount) {
dropdownHeight = 210;
}
const accountContainer = this.$refs.accountArea.getBoundingClientRect();
this.dropdownYPos = accountContainer.top - DROPDOWN_HEIGHT;
this.dropdownYPos = accountContainer.top - dropdownHeight;
this.dropdownXPos = accountContainer.left;
this.dropdownWidth = accountContainer.width;
@ -173,11 +177,18 @@ export default class AccountArea extends Vue {
}
/**
* Returns first letter of user`s name.
* Returns first letter of user's name.
*/
public get avatarLetter(): string {
return this.$store.getters.userName.slice(0, 1).toUpperCase();
}
/**
* Returns amount of user's credit cards from store.
*/
public get usersCCAmount(): number {
return this.$store.state.paymentsModule.creditCards.length;
}
}
</script>
@ -193,8 +204,8 @@ export default class AccountArea extends Vue {
position: static;
&__avatar {
width: 40px;
height: 40px;
min-width: 40px;
min-height: 40px;
border-radius: 20px;
display: flex;
align-items: center;
@ -212,6 +223,7 @@ export default class AccountArea extends Vue {
&__info {
margin-left: 16px;
max-width: calc(100% - 40px - 16px);
&__email {
font-family: 'font_bold', sans-serif;
@ -253,6 +265,9 @@ export default class AccountArea extends Vue {
font-size: 14px;
line-height: 20px;
color: #56606d;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
&__sat {

2
web/satellite/src/components/navigation/newNavigationStructure/NewProjectSelection.vue
View File

@ -254,8 +254,10 @@ export default class NewProjectSelection extends Vue {
&__left {
display: flex;
align-items: center;
max-width: calc(100% - 16px);
&__name {
max-width: calc(100% - 24px - 16px);
font-weight: 500;
font-size: 14px;
line-height: 20px;