From 35c49ff90c88e0c78c81d772b6e8016388a2e64b Mon Sep 17 00:00:00 2001
From: Julien Nahum <jhumanj@MacBook-Pro-de-Julien.local>
Date: Tue, 18 Oct 2022 16:55:08 +0200
Subject: [PATCH] Re-worked the modal component

---
 resources/js/components/Modal.vue         | 46 ++++++++++++------
 resources/js/components/common/Button.vue |  8 +--
 resources/js/pages/settings/workspace.vue | 59 +++++++++++++----------
 3 files changed, 70 insertions(+), 43 deletions(-)

diff --git a/resources/js/components/Modal.vue b/resources/js/components/Modal.vue
index d44015e..8c73b73 100644
--- a/resources/js/components/Modal.vue
+++ b/resources/js/components/Modal.vue
@@ -11,7 +11,7 @@
                     appear @after-leave="leaveCallback"
         >
           <div v-if="show" class="fixed inset-0 transform" @click="close">
-            <div class="absolute inset-0 bg-gray-500 opacity-75" />
+            <div class="absolute inset-0 bg-gray-500 opacity-75"/>
           </div>
         </transition>
 
@@ -22,25 +22,40 @@
                     leave-class="opacity-100 translate-y-0 sm:scale-100"
                     leave-to-class="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
         >
-          <div v-if="show" class="modal-content bg-white dark:bg-notion-dark rounded-lg overflow-y-scroll shadow-xl transform transition-all sm:w-full"
+          <div v-if="show"
+               class="modal-content bg-white dark:bg-notion-dark rounded-lg overflow-y-scroll shadow-xl transform transition-all sm:w-full"
                :class="maxWidthClass"
           >
-            <div class="bg-white dark:bg-notion-dark px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
-              <div class="sm:flex sm:items-start">
-                <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
-                  <h3 v-if="$scopedSlots.hasOwnProperty('title')" class="text-lg">
-                    <slot name="title" />
-                  </h3>
+            <div class="bg-white relative dark:bg-notion-dark p-4 md:p-6">
+              <div class="absolute top-4 right-4" v-if="closeable">
+                <button class="text-gray-500 hover:text-gray-900 cursor-pointer" @click.prevent="close">
+                  <svg class="h-6 w-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M18 6L6 18M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round"
+                          stroke-linejoin="round"/>
+                  </svg>
+                </button>
+              </div>
+              <div class="sm:flex sm:flex-col sm:items-start">
+                <div v-if="$scopedSlots.hasOwnProperty('icon')" class="flex w-full justify-center mb-4">
+                  <div class="w-14 h-14 rounded-full flex justify-center items-center"
+                       :class="'bg-'+iconColor+'-100 text-'+iconColor+'-600'">
+                    <slot name="icon"/>
+                  </div>
+                </div>
+                <div class="mt-3 text-center sm:mt-0 w-full">
+                  <h2 v-if="$scopedSlots.hasOwnProperty('title')" class="text-2xl font-semibold text-center text-gray-900">
+                    <slot name="title"/>
+                  </h2>
                 </div>
               </div>
 
               <div class="mt-2 w-full">
-                <slot />
+                <slot/>
               </div>
             </div>
 
             <div v-if="$scopedSlots.hasOwnProperty('footer')" class="px-6 py-4 bg-gray-100 text-right">
-              <slot name="footer" />
+              <slot name="footer"/>
             </div>
           </div>
         </transition>
@@ -57,6 +72,9 @@ export default {
     show: {
       default: false
     },
+    iconColor: {
+      default: 'blue'
+    },
     maxWidth: {
       default: '2xl'
     },
@@ -73,7 +91,7 @@ export default {
   },
 
   computed: {
-    maxWidthClass () {
+    maxWidthClass() {
       return {
         sm: 'sm:max-w-sm',
         md: 'sm:max-w-md',
@@ -97,7 +115,7 @@ export default {
     }
   },
 
-  created () {
+  created() {
     const closeOnEscape = (e) => {
       if (e.key === 'Escape' && this.show) {
         this.close()
@@ -112,12 +130,12 @@ export default {
   },
 
   methods: {
-    close () {
+    close() {
       if (this.closeable) {
         this.$emit('close')
       }
     },
-    leaveCallback () {
+    leaveCallback() {
       if (this.afterLeave) {
         this.afterLeave()
       }
diff --git a/resources/js/components/common/Button.vue b/resources/js/components/common/Button.vue
index 8438670..91892db 100644
--- a/resources/js/components/common/Button.vue
+++ b/resources/js/components/common/Button.vue
@@ -3,7 +3,7 @@
           @click="$emit('click',$event)"
   >
     <template v-if="!loading">
-      <span class="no-underline">
+      <span class="no-underline mx-auto">
       <slot/>
         </span>
       <svg v-if="arrow" class="ml-2 w-3 h-3 inline" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -16,7 +16,7 @@
   </button>
   <router-link v-else :class="btnClasses" :to="to" :target="target"
   >
-      <span class="no-underline">
+      <span class="no-underline mx-auto">
       <slot/>
       </span>
     <svg v-if="arrow" class="ml-2 w-3 h-3 inline" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -72,8 +72,8 @@ export default {
       const sizes = this.sizes
       const colorShades = this.colorShades
       return `${sizes['p-y']} ${sizes['p-x']}
-        ${colorShades['main']} ${colorShades['hover']} ${colorShades['ring']} ${colorShades['ring-offset']}
-        ${colorShades['text']} transition ease-in duration-200 text-center text-${sizes['font']} font-medium focus:outline-none focus:ring-2
+        ${colorShades?.main} ${colorShades?.hover} ${colorShades?.ring} ${colorShades['ring-offset']}
+        ${colorShades?.text} transition ease-in duration-200 text-center text-${sizes?.font} font-medium focus:outline-none focus:ring-2
         focus:ring-offset-2 rounded-lg flex items-center hover:no-underline`
     },
     colorShades() {
diff --git a/resources/js/pages/settings/workspace.vue b/resources/js/pages/settings/workspace.vue
index db54547..484f73b 100644
--- a/resources/js/pages/settings/workspace.vue
+++ b/resources/js/pages/settings/workspace.vue
@@ -1,7 +1,7 @@
 <template>
   <card title="Workspaces" class="bg-gray-50 dark:bg-notion-dark-light">
     <div v-if="loading" class="w-full text-blue-500 text-center">
-      <loader class="h-10 w-10 p-5" />
+      <loader class="h-10 w-10 p-5"/>
     </div>
     <div v-else>
       <div v-for="workspace in workspaces" :key="workspace.id"
@@ -15,12 +15,15 @@
                v-text="workspace.icon"
           />
           <div class="flex-1 flex items-center space-y-4 py-1">
-            <p class="font-bold truncate" v-text="workspace.name" />
+            <p class="font-bold truncate" v-text="workspace.name"/>
           </div>
         </div>
-        <div v-if="workspaces.length > 1" class="block md:hidden group-hover:block text-red-500 p-2 rounded hover:bg-red-50" role="button" @click="deleteWorkspace(workspace)">
+        <div v-if="workspaces.length > 1"
+             class="block md:hidden group-hover:block text-red-500 p-2 rounded hover:bg-red-50" role="button"
+             @click="deleteWorkspace(workspace)">
           <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                  d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
           </svg>
         </div>
       </div>
@@ -32,26 +35,32 @@
     </div>
 
     <!--  Workspace modal  -->
-    <modal :show="workspaceModal" @close="workspaceModal=false">
+    <modal :show="workspaceModal" @close="workspaceModal=false" max-width="lg">
+      <template #icon>
+        <svg class="w-8 h-8" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path
+            d="M12 8V16M8 12H16M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z"
+            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg>
+      </template>
+      <template #title>
+        Create Workspace
+      </template>
       <div class="px-4">
         <form @submit.prevent="createWorkspace" @keydown="form.onKeydown($event)">
-          <h2 class="text-2xl font-bold z-10 truncate mb-5 text-nt-blue">
-            Create Workspace
-          </h2>
-
           <div>
             <text-input name="name" class="mt-4" :form="form" :required="true"
-                  label="Workspace Name"
+                        label="Workspace Name"
             />
             <text-input name="emoji" class="mt-4" :form="form" :required="false"
-                  label="Emoji"
+                        label="Emoji"
             />
           </div>
 
-          <div class="flex justify-end mt-4">
-            <v-button :loading="form.busy" class="mr-1">Save</v-button>
-            <v-button color="gray" shade="light" @click.prevent="workspaceModal=false">Close</v-button>
+          <div class="w-full mt-6">
+            <v-button :loading="form.busy" class="w-full my-3">Save</v-button>
           </div>
+
         </form>
       </div>
     </modal>
@@ -61,15 +70,15 @@
 
 <script>
 import Form from 'vform'
-import { mapActions, mapState } from 'vuex'
+import {mapActions, mapState} from 'vuex'
 
 export default {
 
-  components: { },
+  components: {},
   scrollToTop: false,
 
-  metaInfo () {
-    return { title: 'Workspaces' }
+  metaInfo() {
+    return {title: 'Workspaces'}
   },
 
   data: () => ({
@@ -80,7 +89,7 @@ export default {
     workspaceModal: false
   }),
 
-  mounted () {
+  mounted() {
     this.loadWorkspaces()
   },
 
@@ -95,19 +104,19 @@ export default {
     ...mapActions({
       loadWorkspaces: 'open/workspaces/loadIfEmpty'
     }),
-    switchWorkspace (workspace) {
+    switchWorkspace(workspace) {
       this.$store.commit('open/workspaces/setCurrentId', workspace.id)
-      this.$router.push({ name: 'home' })
+      this.$router.push({name: 'home'})
       this.$store.dispatch('open/forms/load', workspace.id)
     },
-    deleteWorkspace (workspace) {
+    deleteWorkspace(workspace) {
       this.alertConfirm('Do you really want to delete this workspace? All forms created in this workspace will be removed.', () => {
         this.$store.dispatch('open/workspaces/delete', workspace.id).then(() => {
           this.alertSuccess('Workspace successfully removed.')
         })
       })
     },
-    isUrl (str) {
+    isUrl(str) {
       const pattern = new RegExp('^(https?:\\/\\/)?' + // protocol
         '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' + // domain name
         '((\\d{1,3}\\.){3}\\d{1,3}))' + // OR ip (v4) address
@@ -116,8 +125,8 @@ export default {
         '(\\#[-a-z\\d_]*)?$', 'i') // fragment locator
       return !!pattern.test(str)
     },
-    async createWorkspace () {
-      const { data } = await this.form.post('/api/open/workspaces/create')
+    async createWorkspace() {
+      const {data} = await this.form.post('/api/open/workspaces/create')
       this.$store.dispatch('open/workspaces/load')
       this.workspaceModal = false
     }