web/satellite: add Back button to Bucket Details page

A button has been added to the Bucket Details page that returns the
user to the file browser.

Change-Id: Ic2868b1fc9e3b2b0e9785728dc7a116c828eced8

web/satellite/src/components/common/VButton.vue

@@ -66,6 +66,7 @@ import FolderIcon from '@/../static/images/objects/newFolder.svg';
 import ResourcesIcon from '@/../static/images/navigation/resources.svg';
 import UploadIcon from '@/../static/images/common/upload.svg';
 import ProjectIcon from '@/../static/images/navigation/project.svg';
+import BackIcon from '@/../static/images/common/arrowLeft.svg';
 
 const props = withDefaults(defineProps<{
     link?: string;
@@ -123,6 +124,7 @@ const icons = new Map<string, string>([
     ['add', WhitePlusIcon],
     ['upload', UploadIcon],
     ['project', ProjectIcon],
+    ['back', BackIcon],
 ]);
 
 const iconComponent = computed((): string | undefined => icons.get(props.icon.toLowerCase()));

web/satellite/src/components/objects/BucketDetails.vue

@@ -15,7 +15,17 @@
                 <p>{{ bucket.name }} created at {{ creationDate }}</p>
             </div>
         </div>
-        <bucket-details-overview class="bucket-details__table" :bucket="bucket" />
+        <VButton
+            class="bucket-details__button"
+            width="unset"
+            border-radius="8px"
+            font-size="12px"
+            icon="back"
+            label="Back"
+            is-white
+            :on-press="openBucket"
+        />
+        <bucket-details-overview :bucket="bucket" />
         <VOverallLoader v-if="isLoading" />
     </div>
 </template>
@@ -38,6 +48,7 @@ import { useProjectsStore } from '@/store/modules/projectsStore';
 
 import BucketDetailsOverview from '@/components/objects/BucketDetailsOverview.vue';
 import VOverallLoader from '@/components/common/VOverallLoader.vue';
+import VButton from '@/components/common/VButton.vue';
 
 import ArrowRightIcon from '@/../static/images/common/arrowRight.svg';
 
@@ -136,6 +147,9 @@ onBeforeMount((): void => {
 <style lang="scss" scoped>
 .bucket-details {
     width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
 
     &__header {
         display: flex;
@@ -174,8 +188,15 @@ onBeforeMount((): void => {
         }
     }
 
-    &__table {
-        margin-top: 40px;
+    &__button {
+        padding: 6px 16px;
+        box-shadow: 0 0 20px rgb(0 0 0 / 4%);
+        align-self: flex-start;
+
+        :deep(.label) {
+            color: var(--c-black) !important;
+            line-height: 20px;
+        }
     }
 }
 </style>

web/satellite/static/images/common/arrowLeft.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<path d="M4.39171 10.9037L4.37256 10.8853L0.893313 7.40604C0.641833 7.15456 0.6357 6.75064 0.874912 6.49172L0.893313 6.47258L4.37256 2.99333C4.63033 2.73556 5.04825 2.73556 5.30602 2.99333C5.5575 3.24481 5.56364 3.64873 5.32442 3.90764L5.30602 3.92679L2.9537 6.2793L12.6399 6.27925C13.0045 6.27925 13.3 6.57477 13.3 6.93931C13.3 7.29495 13.0187 7.58491 12.6665 7.59884L12.6399 7.59936L2.9537 7.59941L5.30602 9.95183C5.5575 10.2033 5.56364 10.6072 5.32442 10.8661L5.30602 10.8853C5.05454 11.1368 4.65062 11.1429 4.39171 10.9037Z" fill="black"/>
+</svg>