web/satellite: rework open bucket modal styling

Reworked open bucket modal styling to correspond to create access grant flow Issue: #5819 Change-Id: I618b50472e45413a63a531ad959d9af69511d464
storj · Apr 27, 2023 · 978b714 · 978b714
1 parent b89e0e0
commit 978b714
Showing 1 changed file with 45 additions and 28 deletions.
diff --git a/web/satellite/src/components/modals/OpenBucketModal.vue b/web/satellite/src/components/modals/OpenBucketModal.vue
@@ -5,10 +5,13 @@
     <VModal :on-close="closeModal">
         <template #content>
             <div class="modal">
-                <OpenBucketIcon />
-                <h1 class="modal__title">Enter your encryption passphrase</h1>
+                <div class="modal__header">
+                    <AccessEncryptionIcon />
+                    <h1 class="modal__header__title">Enter passphrase</h1>
+                </div>
                 <p class="modal__info">
-                    To open a bucket and view your encrypted files, <br>please enter your encryption passphrase.
+                    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.
                 </p>
                 <VInput
                     :class="{'orange-border': isWarningState}"
@@ -32,17 +35,21 @@
                 <div class="modal__buttons">
                     <VButton
                         label="Cancel"
-                        height="48px"
+                        height="52px"
+                        font-size="14px"
+                        border-radius="10px"
                         :is-transparent="true"
                         :on-press="closeModal"
                         :is-disabled="isLoading"
                     />
                     <VButton
-                        :label="isWarningState ? 'Continue Anyway ->' : 'Continue ->'"
-                        height="48px"
+                        label="Continue ->"
+                        height="52px"
+                        font-size="14px"
+                        border-radius="10px"
                         :on-press="onContinue"
-                        :is-disabled="isLoading"
-                        :is-orange="isWarningState"
+                        :is-disabled="isLoading || !passphrase"
+                        :is-transparent="isWarningState"
                     />
                 </div>
             </div>
@@ -67,7 +74,7 @@ import VModal from '@/components/common/VModal.vue';
 import VInput from '@/components/common/VInput.vue';
 import VButton from '@/components/common/VButton.vue';
 
-import OpenBucketIcon from '@/../static/images/buckets/openBucket.svg';
+import AccessEncryptionIcon from '@/../static/images/accessGrants/newCreateFlow/accessEncryption.svg';
 import OpenWarningIcon from '@/../static/images/objects/openWarning.svg';
 
 const bucketsStore = useBucketsStore();
@@ -173,28 +180,34 @@ function setPassphrase(value: string): void {
         font-family: 'font_regular', sans-serif;
         display: flex;
         flex-direction: column;
-        align-items: center;
-        padding: 62px 62px 54px;
-        max-width: 500px;
+        padding: 32px;
+        max-width: 350px;
 
-        @media screen and (max-width: 600px) {
-            padding: 62px 24px 54px;
-        }
-
-        &__title {
-            font-family: 'font_bold', sans-serif;
-            font-size: 26px;
-            line-height: 31px;
-            color: #131621;
-            margin: 30px 0 15px;
+        &__header {
+            display: flex;
+            align-items: center;
+            padding-bottom: 16px;
+            margin-bottom: 16px;
+            border-bottom: 1px solid var(--c-grey-2);
+
+            &__title {
+                font-family: 'font_bold', sans-serif;
+                font-size: 24px;
+                line-height: 31px;
+                color: var(--c-grey-8);
+                margin-left: 16px;
+                text-align: left;
+            }
         }
 
         &__info {
-            font-size: 16px;
-            line-height: 21px;
-            text-align: center;
+            font-size: 14px;
+            line-height: 19px;
             color: #354049;
-            margin-bottom: 32px;
+            padding-bottom: 16px;
+            margin-bottom: 16px;
+            border-bottom: 1px solid var(--c-grey-2);
+            text-align: left;
         }
 
         &__warning {
@@ -216,7 +229,7 @@ function setPassphrase(value: string): void {
                 margin-left: 16px;
 
                 &__title {
-                    font-family: 'font_medium', sans-serif;
+                    font-weight: 500;
                     font-size: 14px;
                     line-height: 20px;
                     color: #000;
@@ -241,8 +254,12 @@ function setPassphrase(value: string): void {
 
     .orange-border {
 
+        :deep(h3) {
+            color: var(--c-yellow-5);
+        }
+
         :deep(input) {
-            border-color: #ff8a00;
+            border-color: var(--c-yellow-5);
         }
     }
 </style>