web/satellite: rework styling of manage project passphrase modals

Reworked styling of manage project passphrase modals to crrespond to create access grant flow.

Issue:
https://github.com/storj/storj/issues/5815

Change-Id: Iab02d2d94239d9e8c7f85a498fb3a3d83ece34e0

web/satellite/src/components/modals/manageProjectPassphrase/ClearStep.vue

@@ -3,7 +3,6 @@
 
 <template>
     <div class="clear-step">
-        <h1 class="clear-step__title">Clear my passphrase</h1>
         <p class="clear-step__info">
             By choosing to clear your passphrase for this session, your data will become locked while you can use the
             rest of the dashboard.
@@ -12,14 +11,18 @@
             <VButton
                 label="Back"
                 width="100%"
-                height="48px"
+                height="52px"
+                font-size="14px"
+                border-radius="10px"
                 :is-white="true"
                 :on-press="onCancel"
             />
             <VButton
-                label="Clear my passphrase"
+                label="Continue ->"
                 width="100%"
-                height="48px"
+                height="52px"
+                font-size="14px"
+                border-radius="10px"
                 :on-press="onClear"
             />
         </div>
@@ -58,30 +61,24 @@ function onClear(): void {
 .clear-step {
     display: flex;
     flex-direction: column;
-    align-items: center;
     font-family: 'font_regular', sans-serif;
-    max-width: 433px;
+    max-width: 350px;
-
-    &__title {
-        font-family: 'font_bold', sans-serif;
-        font-size: 32px;
-        line-height: 39px;
-        color: #1b2533;
-        margin: 14px 0;
-    }
 
     &__info {
         font-size: 14px;
         line-height: 19px;
         color: #354049;
-        margin-bottom: 24px;
+        padding-bottom: 16px;
+        margin-bottom: 16px;
+        border-bottom: 1px solid var(--c-grey-2);
+        text-align: left;
     }
 
     &__buttons {
         display: flex;
         align-items: center;
         justify-content: center;
-        column-gap: 33px;
+        column-gap: 16px;
         width: 100%;
 
         @media screen and (max-width: 530px) {

web/satellite/src/components/modals/manageProjectPassphrase/CreateStep.vue

@@ -3,7 +3,6 @@
 
 <template>
     <div class="create-step">
-        <h1 class="create-step__title">Create a new passphrase</h1>
         <p class="create-step__info">
             Creating a new passphrase allows you to upload data separately from the data uploaded with the current
             encryption passphrase.
@@ -12,14 +11,18 @@
             <VButton
                 label="Back"
                 width="100%"
-                height="48px"
+                height="52px"
+                font-size="14px"
+                border-radius="10px"
                 :is-white="true"
                 :on-press="onCancel"
             />
             <VButton
-                label="Next"
+                label="Continue ->"
                 width="100%"
-                height="48px"
+                height="52px"
+                font-size="14px"
+                border-radius="10px"
                 :on-press="onNext"
             />
         </div>
@@ -53,30 +56,24 @@ function onNext(): void {
 .create-step {
     display: flex;
     flex-direction: column;
-    align-items: center;
     font-family: 'font_regular', sans-serif;
-    max-width: 433px;
+    max-width: 350px;
-
-    &__title {
-        font-family: 'font_bold', sans-serif;
-        font-size: 32px;
-        line-height: 39px;
-        color: #1b2533;
-        margin: 14px 0;
-    }
 
     &__info {
         font-size: 14px;
         line-height: 19px;
         color: #354049;
+        padding-bottom: 16px;
         margin-bottom: 24px;
+        border-bottom: 1px solid var(--c-grey-2);
+        text-align: left;
     }
 
     &__buttons {
         display: flex;
         align-items: center;
         justify-content: center;
-        column-gap: 33px;
+        column-gap: 16px;
         width: 100%;
 
         @media screen and (max-width: 530px) {

web/satellite/src/components/modals/manageProjectPassphrase/ManageOptionsStep.vue

@@ -3,10 +3,6 @@
 
 <template>
     <div class="manage-options">
-        <h1 class="manage-options__title">Manage passphrases</h1>
-        <p class="manage-options__info">
-            Here are all the options for your encryption passphrases.
-        </p>
         <div class="manage-options__option" @click="setCreate">
             <PlusIcon class="manage-options__option__icon" />
             <div class="manage-options__option__info">
@@ -31,10 +27,22 @@
             </div>
             <ChevronIcon class="manage-options__option__arrow" />
         </div>
+        <div class="manage-options__divider" />
+        <VButton
+            label="Cancel"
+            width="100%"
+            height="48px"
+            font-size="14px"
+            border-radius="10px"
+            :on-press="onCancel"
+            :is-white="true"
+        />
     </div>
 </template>
 
 <script setup lang="ts">
+import VButton from '@/components/common/VButton.vue';
+
 import PlusIcon from '@/../static/images/projectPassphrase/plus.svg';
 import SwitchIcon from '@/../static/images/projectPassphrase/switch.svg';
 import ClearIcon from '@/../static/images/projectPassphrase/clear.svg';
@@ -44,10 +52,12 @@ const props = withDefaults(defineProps<{
     setCreate?: () => void,
     setSwitch?: () => void,
     setClear?: () => void,
+    onCancel?: () => void,
 }>(), {
     setCreate: () => () => {},
     setSwitch: () => () => {},
     setClear: () => () => {},
+    onCancel: () => () => {},
 });
 </script>
 
@@ -57,22 +67,7 @@ const props = withDefaults(defineProps<{
     flex-direction: column;
     align-items: center;
     font-family: 'font_regular', sans-serif;
-    max-width: 433px;
+    max-width: 350px;
-
-    &__title {
-        font-family: 'font_bold', sans-serif;
-        font-size: 32px;
-        line-height: 39px;
-        color: #1b2533;
-        margin: 14px 0;
-    }
-
-    &__info {
-        font-size: 14px;
-        line-height: 19px;
-        color: #354049;
-        margin-bottom: 24px;
-    }
 
     &__option {
         display: flex;
@@ -129,6 +124,13 @@ const props = withDefaults(defineProps<{
             }
         }
     }
+
+    &__divider {
+        width: 100%;
+        height: 1px;
+        margin: 16px 0;
+        background-color: var(--c-grey-2);
+    }
 }
 
 .middle {

web/satellite/src/components/modals/manageProjectPassphrase/ManageProjectPassphraseModal.vue

@@ -5,12 +5,16 @@
     <VModal :on-close="closeModal">
         <template #content>
             <div class="modal">
-                <LockIcon />
+                <div class="modal__header">
+                    <AccessEncryptionIcon />
+                    <p class="modal__header__title">{{ title }}</p>
+                </div>
                 <ManageOptionsStep
                     v-if="activeStep === ManageProjectPassphraseStep.ManageOptions"
                     :set-create="setCreate"
                     :set-switch="setSwitch"
                     :set-clear="setClear"
+                    :on-cancel="closeModal"
                 />
                 <CreateStep
                     v-if="activeStep === ManageProjectPassphraseStep.Create"
@@ -43,7 +47,7 @@ import CreateStep from '@/components/modals/manageProjectPassphrase/CreateStep.v
 import SwitchStep from '@/components/modals/manageProjectPassphrase/SwitchStep.vue';
 import ClearStep from '@/components/modals/manageProjectPassphrase/ClearStep.vue';
 
-import LockIcon from '@/../static/images/projectPassphrase/lock.svg';
+import AccessEncryptionIcon from '@/../static/images/accessGrants/newCreateFlow/accessEncryption.svg';
 
 const appStore = useAppStore();
 const notify = useNotify();
@@ -57,6 +61,24 @@ const storedStep = computed((): ManageProjectPassphraseStep | undefined => {
 
 const activeStep = ref<ManageProjectPassphraseStep>(storedStep.value || ManageProjectPassphraseStep.ManageOptions);
 
+/**
+ * Returns modal title based on active step.
+ */
+const title = computed((): string => {
+    switch (activeStep.value) {
+    case ManageProjectPassphraseStep.ManageOptions:
+        return 'Manage Passphrase';
+    case ManageProjectPassphraseStep.Create:
+        return 'Create a new passphrase';
+    case ManageProjectPassphraseStep.Switch:
+        return 'Switch passphrase';
+    case ManageProjectPassphraseStep.Clear:
+        return 'Clear my passphrase';
+    }
+
+    return '';
+});
+
 /**
  * Sets flow to create step.
  */
@@ -99,10 +121,28 @@ onMounted(() => {
 
 <style scoped lang="scss">
 .modal {
-    padding: 40px 60px 68px;
+    padding: 32px;
 
     @media screen and (max-width: 615px) {
         padding: 30px 20px;
     }
+
+    &__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;
+            letter-spacing: -0.02em;
+            text-align: left;
+        }
+    }
 }
 </style>

web/satellite/src/components/modals/manageProjectPassphrase/SwitchStep.vue

@@ -3,7 +3,6 @@
 
 <template>
     <div class="switch-step">
-        <h1 class="switch-step__title">Switch passphrase</h1>
         <p class="switch-step__info">
             Switch passphrases to view existing data that is uploaded with a different passphrase, or upload new data.
             Please note that you won’t see the previous data once you switch passphrases.
@@ -21,15 +20,20 @@
             <VButton
                 label="Back"
                 width="100%"
-                height="48px"
+                height="52px"
+                font-size="14px"
+                border-radius="10px"
                 :is-white="true"
                 :on-press="onCancel"
             />
             <VButton
-                label="Switch Passphrase"
+                label="Continue ->"
                 width="100%"
-                height="48px"
+                height="52px"
+                font-size="14px"
+                border-radius="10px"
                 :on-press="onSwitch"
+                :is-disabled="!passphrase"
             />
         </div>
     </div>
@@ -98,29 +102,26 @@ async function onSwitch(): Promise<void> {
     flex-direction: column;
     align-items: center;
     font-family: 'font_regular', sans-serif;
-    max-width: 433px;
+    max-width: 350px;
-
-    &__title {
-        font-family: 'font_bold', sans-serif;
-        font-size: 32px;
-        line-height: 39px;
-        color: #1b2533;
-        margin: 14px 0;
-    }
 
     &__info {
         font-size: 14px;
         line-height: 19px;
         color: #354049;
-        margin-bottom: 24px;
+        padding-bottom: 16px;
+        margin-bottom: 6px;
+        border-bottom: 1px solid var(--c-grey-2);
+        text-align: left;
     }
 
     &__buttons {
         display: flex;
         align-items: center;
         justify-content: center;
-        column-gap: 33px;
+        column-gap: 16px;
-        margin-top: 20px;
+        margin-top: 16px;
+        padding-top: 24px;
+        border-top: 1px solid var(--c-grey-2);
         width: 100%;
 
         @media screen and (max-width: 530px) {

web/satellite/static/images/projectPassphrase/lock.svg

@@ -1,7 +0,0 @@
-<svg width="112" height="113" viewBox="0 0 112 113" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M46.0385 0H65.3698C80.8738 0 87.0253 1.73377 93.059 4.98942C99.0926 8.24507 103.828 13.0226 107.055 19.1102L107.3 19.5788C110.328 25.444 111.957 31.6399 112 46.4496V65.9534C112 81.5959 110.282 87.8023 107.055 93.8898C103.828 99.9774 99.0926 104.755 93.059 108.011L92.5944 108.258C86.7812 111.313 80.6401 112.956 65.9615 113H46.6303C31.1262 113 24.9747 111.266 18.941 108.011C12.9074 104.755 8.17211 99.9774 4.94527 93.8898L4.70003 93.4212C1.67181 87.556 0.0431812 81.3601 0 66.5504V47.0466C0 31.4041 1.71842 25.1977 4.94527 19.1102C8.17211 13.0226 12.9074 8.24507 18.941 4.98942L19.4056 4.74199C25.2188 1.68673 31.3599 0.0435667 46.0385 0Z" fill="#EBEEF1"/>
-    <path d="M56.4626 69.107C68.2203 69.107 77.7519 59.4905 77.7519 47.628C77.7519 35.7654 68.2203 26.1489 56.4626 26.1489C44.7049 26.1489 35.1733 35.7654 35.1733 47.628C35.1733 59.4905 44.7049 69.107 56.4626 69.107Z" fill="#FFC600"/>
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M55.9998 20.5452C71.5917 20.5452 84.2313 33.0884 84.2313 48.5612C84.2313 64.034 71.5917 76.5771 55.9998 76.5771C41.3477 76.5771 29.3027 65.5003 27.904 51.3247C28.1184 46.3639 28.5849 42.5898 29.2915 39.4617C33.0976 28.4555 43.6178 20.5452 55.9998 20.5452ZM55.9998 28.95C44.9784 28.95 36.099 37.7616 36.099 48.5612C36.099 59.3607 44.9784 68.1723 55.9998 68.1723C67.0213 68.1723 75.9007 59.3607 75.9007 48.5612C75.9007 37.7616 67.0213 28.95 55.9998 28.95Z" fill="#FF458B"/>
-    <path d="M84.2313 48.5625H27.7688V91.5204H84.2313V48.5625Z" fill="#0149FF"/>
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M56.4627 59.7683C59.5299 59.7683 62.0164 62.1107 62.0164 65.0002C62.0164 67.1873 60.5919 69.061 58.5692 69.8427L58.5693 75.6445H54.3562L54.3563 69.8427C52.3336 69.061 50.9091 67.1873 50.9091 65.0002C50.9091 62.1107 53.3955 59.7683 56.4627 59.7683Z" fill="#0218A7"/>
-</svg>