web/satellite: added info message to sharing modals

Add notification explaining that the share will be public to anyone with the link.
Remove the cancel button as it may be interpreted as cancelling or revoking the shared access.
Make the copy link full width block button.

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

Change-Id: I7b9580b3d8135802c36af8e68f46630b499ab110

web/satellite/src/components/modals/ShareModal.vue

@@ -9,6 +9,12 @@
                     :icon="ShareIcon"
                     :title="'Share ' + shareType"
                 />
+                <div class="modal__notification">
+                    <p class="modal__notification__msg">
+                        Sharing a {{ shareType.toLowerCase() }} will create a publicly shareable URL.
+                        Anyone with this link will be able to access your shared {{ shareType.toLowerCase() }}.
+                    </p>
+                </div>
                 <VLoader v-if="loading" width="40px" height="40px" />
                 <template v-else>
                     <h1 class="modal__title">Share via</h1>
@@ -22,26 +28,17 @@
                         readonly
                     >
                 </template>
-                <div class="modal__buttons">
-                    <VButton
-                        label="Cancel"
-                        height="52px"
-                        width="100%"
-                        border-radius="10px"
-                        font-size="14px"
-                        :on-press="closeModal"
-                        is-white
-                    />
-                    <VButton
-                        :label="copyButtonState === ButtonStates.Copy ? 'Copy link' : 'Copied'"
-                        height="52px"
-                        width="100%"
-                        border-radius="10px"
-                        font-size="14px"
-                        :on-press="onCopy"
-                        :is-green="copyButtonState === ButtonStates.Copied"
-                    />
-                </div>
+                <VButton
+                    class="modal__button"
+                    :label="copyButtonState === ButtonStates.Copy ? 'Copy link' : 'Link Copied'"
+                    height="52px"
+                    width="100%"
+                    border-radius="10px"
+                    font-size="14px"
+                    :icon="copyButtonState === ButtonStates.Copy ? 'none' : 'check'"
+                    :on-press="onCopy"
+                    :is-green="copyButtonState === ButtonStates.Copied"
+                />
             </div>
         </template>
     </VModal>
@@ -154,6 +151,21 @@ onMounted(async (): Promise<void> => {
         width: unset;
     }
 
+    &__notification {
+        margin-bottom: 16px;
+        border-radius: 10px;
+        border: 1px solid var(--c-yellow-2);
+        background: var(--c-yellow-1);
+        padding: 16px;
+
+        &__msg {
+            font-family: 'font-medium', sans-serif;
+            font-size: 14px;
+            line-height: 20px;
+            text-align: left;
+        }
+    }
+
     &__title {
         font-family: 'font_bold', sans-serif;
         font-size: 14px;
@@ -187,13 +199,8 @@ onMounted(async (): Promise<void> => {
         border-radius: 6px;
     }
 
-    &__buttons {
-        display: flex;
-        align-items: center;
-        column-gap: 16px;
-        padding-top: 16px;
+    &__button {
         margin-top: 16px;
-        border-top: 1px solid var(--c-grey-2);
     }
 }
 </style>

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

@@ -1,3 +1,3 @@
 <svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.5566 3.47068C14.9085 3.82252 14.917 4.38764 14.5824 4.74989L14.5566 4.77667L7.63828 11.695C7.50267 11.8306 7.33611 11.9171 7.16103 11.9541C6.85999 12.0546 6.51479 11.9912 6.26674 11.7591L6.25597 11.7489L2.37049 7.86357C2.00985 7.50293 2.00985 6.91821 2.37049 6.55757C2.72233 6.20573 3.28745 6.19715 3.6497 6.53183L3.67648 6.55757L6.92022 9.80107L13.2506 3.47068C13.6113 3.11004 14.196 3.11004 14.5566 3.47068Z" fill="#ffffff"/>
+<path d="M8.49999 0.800049C12.4764 0.800049 15.7 4.0236 15.7 8.00005C15.7 11.9765 12.4764 15.2 8.49999 15.2C4.52354 15.2 1.29999 11.9765 1.29999 8.00005C1.29999 4.0236 4.52354 0.800049 8.49999 0.800049ZM8.49999 2.12005C5.25255 2.12005 2.61999 4.75261 2.61999 8.00005C2.61999 11.2475 5.25255 13.88 8.49999 13.88C11.7474 13.88 14.38 11.2475 14.38 8.00005C14.38 4.75261 11.7474 2.12005 8.49999 2.12005ZM11.571 6.00374C11.8225 6.2552 11.8286 6.65908 11.5894 6.91798L11.571 6.93712L8.32364 10.1845C8.22672 10.2814 8.10768 10.3432 7.98256 10.3697C7.76741 10.4416 7.52069 10.3962 7.34341 10.2303L7.33572 10.223L5.40733 8.29476C5.14959 8.03702 5.14959 7.61913 5.40733 7.36138C5.65879 7.10992 6.06268 7.10379 6.32157 7.34298L6.34071 7.36138L7.81045 8.83095L10.6377 6.00374C10.8954 5.74599 11.3133 5.74599 11.571 6.00374Z" fill="white"/>
 </svg>