web/satellite: ui-ux updates

Update styles, icons, spacing, links, colors.
Update signup pages.
Update coupon code dialog.
Update remove member dialog.
Update upgrade dialog.
Fix completed token transaction color.
Add resources to account nav.
Rename card view to gallery, and table to list.
Add hints for qa satellite and local env.

web/satellite/src/components/BrowserCardViewComponent.vue

@@ -28,7 +28,7 @@
                             :prepend-icon="mdiSort"
                             :append-icon="mdiChevronDown"
                             v-bind="sortProps"
-                            class="mr-2"
+                            class="mr-2 ml-n2"
                         >
                             <span class="text-body-2 hidden-xs">Sort by</span> <span class="ml-1 text-capitalize">{{ sortKey }}</span>
                         </v-btn>

web/satellite/src/components/CardStatsComponent.vue

@@ -10,7 +10,7 @@
             </v-card-title>
         </template>
         <v-card-text>
-            <v-chip rounded color="default" variant="tonal" class="font-weight-bold">{{ data }}</v-chip>
+            <v-chip rounded color="default" variant="tonal" class="font-weight-bold" :to="to">{{ data }}</v-chip>
         </v-card-text>
     </v-card>
 </template>

web/satellite/src/components/CreditCardComponent.vue

@@ -5,7 +5,7 @@
     <v-card title="Credit Card" variant="flat" border rounded="xlg">
         <v-card-text>
             <v-chip rounded color="default" variant="tonal" class="font-weight-bold mr-2 text-capitalize">{{ card.brand }}</v-chip>
-            <v-chip v-if="card.isDefault" rounded color="primary" variant="tonal" class="font-weight-bold">Default</v-chip>
+            <v-chip v-if="card.isDefault" rounded color="info" variant="tonal" class="font-weight-bold">Default</v-chip>
             <v-divider class="my-4" />
             <p>Card Number</p>
             <v-chip rounded color="default" variant="text" class="pl-0 font-weight-bold mt-2">**** **** **** {{ card.last4 }}</v-chip>

web/satellite/src/components/PasswordStrength.vue

@@ -3,7 +3,7 @@
 
 <template>
     <v-card
-        class="positioning"
+        class="positioning mt-n2"
         width="100%"
         position="absolute"
         elevation="12"
@@ -203,8 +203,6 @@ function scorePassword(): number {
 
 <style scoped lang="scss">
 .positioning {
-    top: calc(100% - 20px);
-    left: 0;
     z-index: 1;
 }
 </style>

web/satellite/src/components/ProjectCard.vue

@@ -65,7 +65,7 @@
                                     <IconNew size="18" />
                                 </template>
                                 <v-list-item-title class="text-body-2 ml-3">
-                                    Invite Members
+                                    Add Members
                                 </v-list-item-title>
                             </v-list-item>
                         </v-list>

web/satellite/src/components/StorjTokenCardComponent.vue

@@ -41,10 +41,10 @@
             <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-divider class="my-4" />
-            <v-btn v-if="wallet.address" variant="flat" color="success" size="small" :loading="isLoading" class="mr-2" @click="onAddTokens">+ Add STORJ Tokens</v-btn>
-            <v-btn v-else variant="flat" color="success" size="small" :loading="isLoading" @click="claimWalletClick">Create New Wallet</v-btn>
-            <v-btn v-if="wallet.address" variant="outlined" color="default" size="small" :loading="isLoading" @click="emit('historyClicked')">View Transactions</v-btn>
+            <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>
+            <v-btn v-if="wallet.address" variant="outlined" color="default" size="small" :loading="isLoading" class="mt-2" @click="emit('historyClicked')">View Transactions</v-btn>
         </v-card-text>
     </v-card>
 

web/satellite/src/components/TeamTableComponent.vue

@@ -71,20 +71,21 @@
                                     <icon-copy v-else />
                                 </template>
                                 <v-list-item-title class="pl-2 text-body-2 font-weight-medium">
-                                    {{ item.expired ? 'Resend invite' : 'Copy invite link' }}
+                                    {{ item.expired ? 'Resend Invite' : 'Copy Invite Link' }}
                                 </v-list-item-title>
                             </v-list-item>
+                            <v-divider class="my-1" />
                             <v-list-item
                                 class="text-error"
                                 density="comfortable"
                                 link rounded="lg"
                                 @click="() => onSingleDelete(item.email)"
                             >
                                 <template #prepend>
-                                    <icon-trash bold />
+                                    <icon-remove size="16" bold />
                                 </template>
                                 <v-list-item-title class="pl-2 text-body-2 font-weight-medium">
-                                    Remove member
+                                    Remove Member
                                 </v-list-item-title>
                             </v-list-item>
                         </v-list>
@@ -121,7 +122,7 @@
                         @click="showDeleteDialog"
                     >
                         <template #prepend>
-                            <icon-trash bold />
+                            <icon-remove size="16" bold />
                         </template>
                         Remove
                     </v-btn>
@@ -147,6 +148,7 @@ import {
     VListItemTitle,
     VDataTableServer,
     VSnackbar,
+    VDivider,
 } from 'vuetify/components';
 import { useRouter } from 'vue-router';
 import { mdiDotsHorizontal, mdiMagnify } from '@mdi/js';
@@ -174,7 +176,7 @@ import { ROUTES } from '@/router';
 import RemoveProjectMemberDialog from '@/components/dialogs/RemoveProjectMemberDialog.vue';
 import IconUpload from '@/components/icons/IconUpload.vue';
 import IconCopy from '@/components/icons/IconCopy.vue';
-import IconTrash from '@/components/icons/IconTrash.vue';
+import IconRemove from '@/components/icons/IconRemove.vue';
 
 type RenderedItem = {
     name: string,

web/satellite/src/components/TokenTransactionsTableComponent.vue

@@ -51,7 +51,7 @@
                 </v-chip>
             </template>
             <template #item.link="{ item }">
-                <a :href="item.link" target="_blank" rel="noopener noreferrer">View</a>
+                <a :href="item.link" target="_blank" rel="noopener noreferrer" class="link">View</a>
             </template>
         </v-data-table>
     </v-card>
@@ -130,7 +130,7 @@ const nativePaymentHistoryItems = computed((): DisplayedItem[] => {
  * @param status
  */
 function getColor(status: string): string {
-    if (status === 'Confirmed' || status === 'Complete') return 'success';
+    if (status === 'Confirmed' || status === 'Completed') return 'success';
     if (status === 'Pending') return 'warning';
     return 'error';
 }