web/satellite: added distribution modal for gallery view

Added Object Geographic Distribution modal for gallery view.

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

Change-Id: I379bb933d4f9e759e59882aceb0e74cce79cc5e5

web/satellite/src/components/browser/galleryView/GalleryView.vue

@@ -20,7 +20,7 @@
                         :on-press="toggleDropdown"
                         :is-active="isOptionsDropdown === true"
                     />
-                    <ButtonIcon :icon="MapIcon" :on-press="() => {}" />
+                    <ButtonIcon :icon="MapIcon" :on-press="() => setActiveModal(DistributionModal)" />
                     <ButtonIcon class="gallery__header__functional__item" :icon="DownloadIcon" :on-press="download" />
                     <ButtonIcon class="gallery__header__functional__item" :icon="ShareIcon" :on-press="() => {}" />
                     <ButtonIcon :icon="CloseIcon" :on-press="closeModal" />
@@ -84,6 +84,7 @@
                 :is="activeModal"
                 :on-close="() => setActiveModal(undefined)"
                 :object="file"
+                :map-url="objectMapUrl"
             />
         </div>
     </Teleport>
@@ -103,6 +104,7 @@ import { RouteConfig } from '@/router';
 import ButtonIcon from '@/components/browser/galleryView/ButtonIcon.vue';
 import OptionsDropdown from '@/components/browser/galleryView/OptionsDropdown.vue';
 import DetailsModal from '@/components/browser/galleryView/modals/Details.vue';
+import DistributionModal from '@/components/browser/galleryView/modals/Distribution.vue';
 import VLoader from '@/components/common/VLoader.vue';
 import VButton from '@/components/common/VButton.vue';
 

web/satellite/src/components/browser/galleryView/modals/Distribution.vue

@@ -0,0 +1,101 @@
+// Copyright (C) 2023 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+<template>
+    <VModal :on-close="onClose">
+        <template #content>
+            <div class="modal">
+                <ModalHeader
+                    :icon="DetailsIcon"
+                    title="Geographic Distribution"
+                />
+                <img :src="mapUrl" class="modal__map" alt="map">
+                <h1 class="modal__title">You’re getting this file from all over the world on the Storj network.</h1>
+                <p class="modal__info">
+                    Storj Decentralized Cloud Storage splits files into smaller pieces, then distributes those pieces
+                    over a global network of Nodes and recompiles them securely on download. This map shows the
+                    real-time locations of this file’s pieces.
+                </p>
+                <div class="modal__buttons">
+                    <VButton
+                        link="https://docs.storj.io/dcs/concepts/overview#t1eR9"
+                        label="Learn More"
+                        height="52px"
+                        width="100%"
+                        border-radius="10px"
+                        font-size="14px"
+                        :on-press="() => {}"
+                        is-white
+                    />
+                    <VButton
+                        label="Close"
+                        height="52px"
+                        width="100%"
+                        border-radius="10px"
+                        font-size="14px"
+                        :on-press="onClose"
+                    />
+                </div>
+            </div>
+        </template>
+    </VModal>
+</template>
+
+<script setup lang="ts">
+import VModal from '@/components/common/VModal.vue';
+import VButton from '@/components/common/VButton.vue';
+import ModalHeader from '@/components/browser/galleryView/modals/ModalHeader.vue';
+
+import DetailsIcon from '@/../static/images/browser/galleryView/modals/details.svg';
+
+const props = defineProps<{
+    mapUrl: string
+    onClose: () => void
+}>();
+</script>
+
+<style scoped lang="scss">
+.modal {
+    padding: 32px;
+    font-family: 'font_regular', sans-serif;
+    background-color: var(--c-white);
+    box-shadow: 0 20px 30px rgb(10 27 44 / 20%);
+    border-radius: 20px;
+    width: 410px;
+    box-sizing: border-box;
+
+    @media screen and (width <= 520px) {
+        width: unset;
+    }
+
+    &__map {
+        width: 100%;
+    }
+
+    &__title {
+        font-family: 'font_bold', sans-serif;
+        font-size: 18px;
+        line-height: 24px;
+        letter-spacing: -0.02em;
+        color: var(--c-blue-6);
+        margin-bottom: 16px;
+        text-align: left;
+    }
+
+    &__info {
+        font-size: 14px;
+        line-height: 21px;
+        color: var(--c-blue-6);
+        text-align: left;
+    }
+
+    &__buttons {
+        display: flex;
+        align-items: center;
+        column-gap: 16px;
+        padding-top: 16px;
+        margin-top: 16px;
+        border-top: 1px solid var(--c-grey-2);
+    }
+}
+</style>

web/satellite/src/components/browser/galleryView/modals/ModalHeader.vue

@@ -23,6 +23,15 @@ const props = defineProps<{
     margin-bottom: 16px;
     border-bottom: 1px solid var(--c-grey-2);
 
+    svg {
+        min-width: 40px;
+    }
+
+    @media screen and (width <= 450px) {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+
     &__title {
         font-family: 'font_bold', sans-serif;
         font-size: 24px;
@@ -30,6 +39,11 @@ const props = defineProps<{
         letter-spacing: -0.02em;
         color: var(--c-black);
         margin-left: 16px;
+        text-align: left;
+
+        @media screen and (width <= 450px) {
+            margin: 16px 0 0;
+        }
     }
 }
 </style>