From b55d13d8624c5e46a7ae1b5c02f1386f86a81436 Mon Sep 17 00:00:00 2001
From: NRayya <82588017+NRayya@users.noreply.github.com>
Date: Tue, 17 Oct 2023 16:20:13 +0200
Subject: [PATCH] feat: add share button for projects and studies

---
 resources/js/Pages/Study/Layout.vue    |  6 ----
 resources/js/Shared/AccessDialogue.vue | 41 ++++++++++++--------------
 2 files changed, 19 insertions(+), 28 deletions(-)

diff --git a/resources/js/Pages/Study/Layout.vue b/resources/js/Pages/Study/Layout.vue
index e5042088..82d1de09 100644
--- a/resources/js/Pages/Study/Layout.vue
+++ b/resources/js/Pages/Study/Layout.vue
@@ -121,10 +121,6 @@
                                             :model="model"
                                             called-from="studyView"
                                         />
-                                        <ToolTip
-                                            class="inline h-4 w-12 ml-0"
-                                            text="The avatars (left) correspond to the users with whom the study is shared. Click there to edit sharing options."
-                                        ></ToolTip>
                                         <a
                                             class="cursor-pointer inline-flex items-center"
                                             @click="toggleDetails"
@@ -406,7 +402,6 @@ import { Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/vue";
 import AccessDialogue from "@/Shared/AccessDialogue.vue";
 import Citation from "@/Shared/Citation.vue";
 import { router } from "@inertiajs/vue3";
-import ToolTip from "@/Shared/ToolTip.vue";
 
 export default {
     components: {
@@ -430,7 +425,6 @@ export default {
         StarIcon,
         AccessDialogue,
         Citation,
-        ToolTip,
     },
     props: [
         "study",
diff --git a/resources/js/Shared/AccessDialogue.vue b/resources/js/Shared/AccessDialogue.vue
index d6ac53cf..7a65adc2 100644
--- a/resources/js/Shared/AccessDialogue.vue
+++ b/resources/js/Shared/AccessDialogue.vue
@@ -1,14 +1,28 @@
 <template>
     <div
-        class="cursor-pointer flex flex-row-reverse justify-end"
+        class="cursor-pointer flex flex-row-reverse justify-end mr-2"
         @click="open = true"
     >
-        <img
+        <div
             v-if="members.length > 0"
-            class="w-8 h-8 -ml-4 rounded-full border-2 border-white"
-            src="https://ui-avatars.com/api/?name=+&color=7F9CF5&background=EBF4FF"
+            class="tooltip w-8 h-8 -ml-.5 rounded-full border-2 border-white bg-gray-100"
             alt=""
-        />
+        >
+            <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="h-4 w-4 m-1.5 text-gray-400"
+                viewBox="0 0 20 20"
+                fill="currentColor"
+            >
+                <path
+                    d="M8 9a3 3 0 100-6 3 3 0 000 6zM8 11a6 6 0 016 6H2a6 6 0 016-6zM16 7a1 1 0 10-2 0v1h-1a1 1 0 100 2h1v1a1 1 0 102 0v-1h1a1 1 0 100-2h-1V7z"
+                />
+            </svg>
+            <span
+                class="bg-gray-900 text-center text-white px-2 py-1 shadow-lg rounded-md tooltiptextbottom"
+                >Click here to edit sharing options.</span
+            >
+        </div>
         <img
             v-for="user in members"
             :key="user.id"
@@ -29,23 +43,6 @@
             :src="team.owner.profile_photo_url"
             :alt="team.owner.first_name"
         />
-        <span v-if="members.length == 0 && !team">
-            <button
-                type="button"
-                class="inline-flex items-center px-0 py-2 ronded-md font-medium text-dark sm:text-sm"
-            >
-                <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    class="h-5 w-5"
-                    viewBox="0 0 20 20"
-                    fill="currentColor"
-                >
-                    <path
-                        d="M8 9a3 3 0 100-6 3 3 0 000 6zM8 11a6 6 0 016 6H2a6 6 0 016-6zM16 7a1 1 0 10-2 0v1h-1a1 1 0 100 2h1v1a1 1 0 102 0v-1h1a1 1 0 100-2h-1V7z"
-                    /></svg
-                >&nbsp; SHARE
-            </button>
-        </span>
     </div>
     <TransitionRoot :show="open" as="template" appear @after-leave="query = ''">
         <Dialog as="div" class="relative z-10 p-4" @close="open = false">