web/satellite: notifications for billing page implemented (#3004)

web/satellite/src/components/account/billing/AccountBalance.vue

@@ -3,7 +3,15 @@
 
 <template>
     <div class="account-balance-area">
-        <h1 class="account-balance-area__title">Account Balance</h1>
+        <div class="account-balance-area__title-area">
+            <h1 class="account-balance-area__title-area__title">Account Balance</h1>
+            <InfoComponent class="account-balance-area__title-area__info-button" boldText="Prepaid STORJ token amount and any additional credits, minus current usage">
+                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <rect x="0.5" y="0.5" width="19" height="19" rx="9.5" stroke="#AFB7C1"/>
+                    <path d="M7 7.25177C7.00959 6.23527 7.28777 5.44177 7.83453 4.87129C8.38129 4.29043 9.1199 4 10.0504 4C10.952 4 11.6667 4.22819 12.1942 4.68458C12.7314 5.14097 13 5.79444 13 6.64498C13 7.03913 12.9376 7.38661 12.8129 7.68741C12.6882 7.98821 12.5396 8.24234 12.3669 8.44979C12.1942 8.65724 11.9592 8.90099 11.6619 9.18105C11.2686 9.54408 10.9712 9.876 10.7698 10.1768C10.5779 10.4672 10.482 10.8303 10.482 11.2659H9.04317C9.04317 10.851 9.10072 10.488 9.21583 10.1768C9.33094 9.86563 9.46523 9.6115 9.61871 9.41443C9.78177 9.20698 10.0024 8.96841 10.2806 8.69873C10.6067 8.37718 10.8465 8.09712 11 7.85856C11.1535 7.61999 11.2302 7.31919 11.2302 6.95615C11.2302 6.55163 11.1103 6.25082 10.8705 6.05375C10.6403 5.8463 10.3141 5.74257 9.89209 5.74257C9.45084 5.74257 9.10552 5.87223 8.85611 6.13154C8.60671 6.38048 8.47242 6.75389 8.45324 7.25177H7ZM9.73381 12.7595C10.0216 12.7595 10.2566 12.8633 10.4388 13.0707C10.6307 13.2782 10.7266 13.5427 10.7266 13.8642C10.7266 14.1961 10.6307 14.471 10.4388 14.6888C10.2566 14.8963 10.0216 15 9.73381 15C9.45564 15 9.22062 14.8911 9.02878 14.6733C8.84652 14.4554 8.7554 14.1858 8.7554 13.8642C8.7554 13.5427 8.84652 13.2782 9.02878 13.0707C9.22062 12.8633 9.45564 12.7595 9.73381 12.7595Z" fill="#354049"/>
+                </svg>
+            </InfoComponent>
+        </div>
         <div class="account-balance-area__balance-area">
             <span class="account-balance-area__balance-area__balance">Balance <b>$25.00</b></span>
             <Button
@@ -20,9 +28,11 @@
 import { Component, Vue } from 'vue-property-decorator';
 
 import Button from '@/components/common/Button.vue';
+import InfoComponent from '@/components/common/InfoComponent.vue';
 
 @Component({
     components: {
+        InfoComponent,
         Button
     }
 })
@@ -53,15 +63,41 @@ export default class AccountBalance extends Vue {
         align-items: center;
         justify-content: space-between;
         padding: 40px;
-        margin-bottom: 47px;
+        margin-bottom: 32px;
         background-color: #FFFFFF;
         border-radius: 8px;
         font-family: 'font_regular';
 
-        &__title {
+        &__title-area {
-            font-family: 'font_bold';
+            display: flex;
-            font-size: 32px;
+            align-items: center;
-            line-height: 48px;
+
+            &__title {
+                font-family: 'font_bold';
+                font-size: 32px;
+                line-height: 48px;
+                margin-right: 13px;
+            }
+
+            &__info-button {
+                max-height: 20px;
+                cursor: pointer;
+                margin-right: 10px;
+
+                &:hover {
+
+                    svg {
+
+                        path {
+                            fill: #FFFFFF;
+                        }
+
+                        rect {
+                            fill: #2683FF;
+                        }
+                    }
+                }
+            }
         }
 
         &__balance-area {
@@ -79,4 +115,26 @@ export default class AccountBalance extends Vue {
             }
         }
     }
+
+    /deep/ .info__message-box {
+        background-image: url('../../../../static/images/account/MessageBox.png');
+        background-repeat: no-repeat;
+        min-height: 80px;
+        min-width: 195px;
+        top: 110%;
+        left: -200%;
+        padding: 0 20px 12px 20px;
+
+        &__text {
+            text-align: left;
+            font-size: 13px;
+            line-height: 17px;
+            margin-top: 20px;
+
+            &__bold-text {
+                font-family: 'font_medium';
+                color: #354049;
+            }
+        }
+    }
 </style>

web/satellite/src/components/account/billing/BillingArea.vue

@@ -3,6 +3,22 @@
 
 <template>
     <div class="account-billing-area">
+        <div class="account-billing-area__notification-container" v-if="false">
+            <div class="account-billing-area__notification-container__negative-balance">
+                <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <rect width="40" height="40" rx="10" fill="#EB5757"/>
+                    <path d="M20.5 22.75C21.7676 22.75 22.8047 21.645 22.8047 20.2944V10.4556C22.8047 10.3328 22.797 10.2019 22.7816 10.0791C22.6126 8.90857 21.6523 8 20.5 8C19.2324 8 18.1953 9.10502 18.1953 10.4556V20.2862C18.1953 21.645 19.2324 22.75 20.5 22.75Z" fill="#F5F5F9"/>
+                    <path d="M20.5 25.1465C18.7146 25.1465 17.2734 26.5877 17.2734 28.373C17.2734 30.1584 18.7146 31.5996 20.5 31.5996C22.2853 31.5996 23.7265 30.1584 23.7265 28.373C23.7337 26.5877 22.2925 25.1465 20.5 25.1465Z" fill="#F5F5F9"/>
+                </svg>
+                <p class="account-billing-area__notification-container__negative-balance__text">Your usage charges exceed your account balance. Please add STORJ Tokens or a debit/credit card to prevent data loss.</p>
+            </div>
+            <div class="account-billing-area__notification-container__low-balance">
+                <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M37.0275 30.9607C36.5353 30.0514 36.04 29.1404 35.5463 28.2264C34.6275 26.531 33.7103 24.8357 32.7931 23.1404C31.6916 21.1091 30.5931 19.0748 29.4931 17.0436C28.4307 15.0826 27.3713 13.1248 26.3088 11.1656C25.5275 9.72492 24.7494 8.28276 23.9681 6.84076C23.7572 6.45014 23.5463 6.05952 23.3353 5.672C23.1166 5.26576 22.8853 4.87512 22.5541 4.54388C21.3979 3.3798 19.4791 3.15636 18.0885 4.03608C17.4916 4.41421 17.0604 4.95016 16.7291 5.5642C16.2213 6.50172 15.7135 7.4392 15.2057 8.37984C14.2807 10.0908 13.3541 11.8017 12.4291 13.5126C11.3151 15.5548 10.2104 17.6018 9.10102 19.6486C8.05102 21.5893 6.99946 23.5268 5.9479 25.469C5.17914 26.8909 4.40882 28.3097 3.63854 29.7314C3.43541 30.1064 3.2323 30.4814 3.02918 30.8564C2.7448 31.3846 2.52138 31.9189 2.45106 32.5283C2.25262 34.2502 3.45886 35.9471 5.12606 36.369C5.5667 36.4815 6.00106 36.4861 6.44638 36.4861H33.9464H33.9901C34.8964 36.4674 35.7558 36.1268 36.4198 35.5096C37.0604 34.9158 37.4354 34.1033 37.5417 33.2439C37.6432 32.4346 37.4089 31.6689 37.0276 30.9611L37.0275 30.9607ZM18.4367 13.9527C18.4367 13.0777 19.1523 12.4293 19.9992 12.3902C20.8429 12.3512 21.5617 13.1371 21.5617 13.9527V24.9559C21.5617 25.8309 20.846 26.4794 19.9992 26.5184C19.1554 26.5575 18.4367 25.7715 18.4367 24.9559V13.9527ZM19.9992 31.8403C19.1211 31.8403 18.4085 31.1294 18.4085 30.2497C18.4085 29.3716 19.1195 28.659 19.9992 28.659C20.8773 28.659 21.5898 29.37 21.5898 30.2497C21.5898 31.1278 20.8773 31.8403 19.9992 31.8403Z" fill="#F4D638"/>
+                </svg>
+                <p class="account-billing-area__notification-container__low-balance__text">Your account balance is running low. Please add STORJ Tokens or a debit/credit card to prevent data loss.</p>
+            </div>
+        </div>
         <AccountBalance/>
         <MonthlyBillingSummary/>
         <DepositAndBilling/>
@@ -37,5 +53,34 @@ export default class BillingArea extends Vue {}
         margin-top: 83px;
         overflow-y: scroll;
         height: 75vh;
+
+        &__notification-container {
+
+            &__negative-balance,
+            &__low-balance {
+                display: flex;
+                align-items: center;
+                justify-content: flex-start;
+                padding: 20px 20px 20px 20px;
+                border-radius: 12px;
+                margin-bottom: 32px;
+
+                &__text {
+                    font-family: 'font_medium';
+                    margin: 0 17px;
+                    font-size: 14px;
+                    font-weight: 500;
+                    line-height: 19px;
+                }
+            }
+
+            &__negative-balance {
+                background-color: #FFD4D2;
+            }
+
+            &__low-balance {
+                background-color: #FCF8E3;
+            }
+        }
     }
 </style>

web/satellite/src/components/account/billing/DepositAndBilling.vue

@@ -43,7 +43,7 @@ export default class DepositAndBilling extends Vue {
     }
 
     .deposit-and-billing-area {
-        margin-bottom: 47px;
+        margin-bottom: 32px;
         padding: 40px;
         background-color: #FFFFFF;
         border-radius: 8px;

web/satellite/src/components/account/billing/MonthlyBillingSummary.vue

@@ -16,7 +16,6 @@
                     height="48px"/>
             </div>
         </div>
-        <div class="divider"></div>
         <div class="current-month-area__content">
             <h2 class="current-month-area__content__title">DETAILED SUMMARY</h2>
             <div class="current-month-area__content__usage-charges" @click="toggleUsageChargesPopup">
@@ -105,7 +104,7 @@ export default class MonthlyBillingSummary extends Vue {
     }
 
     .current-month-area {
-        margin-bottom: 47px;
+        margin-bottom: 32px;
         padding: 40px;
         background-color: #FFFFFF;
         border-radius: 8px;