New UI For Settings Page (#22)

* New UI For Settings Page

* WIP UI improvements

Co-authored-by: Julien Nahum <jhumanj@MacBook-Pro-de-Julien.local>

resources/js/components/common/Button.vue

@@ -1,6 +1,6 @@
 <template>
   <button v-if="!to" :type="nativeType" :disabled="loading" :class="btnClasses"
-          @click="$emit('click',$event)"
+          @click="onClick($event)"
   >
     <template v-if="!loading">
       <span class="no-underline mx-auto">
@@ -158,6 +158,12 @@ export default {
         'p-x': 'px-4'
       }
     }
+  },
+
+  methods: {
+    onClick(event) {
+      this.$emit('click',event)
+    }
   }
 }
 </script>

resources/js/pages/settings/account.vue

@@ -1,18 +1,18 @@
 <template>
-  <card title="Account" class="bg-gray-50 dark:bg-notion-dark-light">
+  <div>
-    <h3 class="text-lg font-semibold mb-4">
+    <h3 class="font-semibold text-2xl text-gray-900">Danger zone</h3>
-      Your Account
+    <p class="text-gray-600 text-sm mt-2">
-    </h3>
+      This will permanently delete your entire account. All your forms, submissions and workspaces will be deleted.
-
+    <span class="text-red-500">
-    <p class="text-gray-800 dark:text-gray-200">
+      This cannot be undone.
-      You can delete your account. All your data will be removed. <span class="font-semibold">This cannot be undone.</span>
+    </span>
     </p>
 
     <!-- Submit Button -->
     <v-button :loading="loading" class="mt-4" color="red" @click="alertConfirm('Do you really want to delete your account?',deleteAccount)">
-      Delete my account
+      Delete account
     </v-button>
-  </card>
+  </div>
 </template>
 
 <script>

resources/js/pages/settings/admin.vue

@@ -1,9 +1,13 @@
 <template>
-  <card title="Admin" class="bg-gray-50 dark:bg-notion-dark-light">
+  <div>
-    <h3 class="text-lg font-semibold mb-4">
+    <h3 class="font-semibold text-2xl text-gray-900">Admin settings</h3>
+    <small class="text-gray-600">Manage settings.</small>
+
+  
+    <h3 class="mt-3 text-lg font-semibold mb-4">
       Tools
     </h3>
-    <div class="flex flex-wrap mb-10">
+    <div class="flex flex-wrap mb-5">
       <a href="/stats">
         <v-button class="mx-1" color="gray" shade="lighter">
           Stats
@@ -25,11 +29,9 @@
       />
 
       <!-- Submit Button -->
-      <v-button :loading="loading" class="mt-4 w-full">
+      <v-button :loading="loading" class="mt-4">Impersonate User</v-button>
-        Impersonate User
-      </v-button>
     </form>
-  </card>
+  </div>
 </template>
 
 <script>

resources/js/pages/settings/billing.vue

@@ -1,12 +1,17 @@
 <template>
-  <card title="Billing" class="bg-gray-50 dark:bg-notion-dark-light">
+  <div>
+    <h3 class="font-semibold text-2xl text-gray-900">Billing details</h3>
+    <small class="text-gray-600">Manage your billing.</small>
+    
+    <div class="mt-4">
       <v-button color="gray" shade="light" :loading="billingLoading" @click.prevent="openBillingDashboard">
         Manage Subscription
       </v-button>
       <v-button color="red" class="mt-3" @click.prevent="cancelSubscription">
         Cancel Subscription
       </v-button>
-  </card>
+    </div>
+  </div>
 </template>
 
 <script>

resources/js/pages/settings/index.vue

@@ -1,82 +1,40 @@
 <template>
-  <div class="flex flex-wrap mt-6 md:max-w-3xl w-full md:mx-auto">
+  <div class="bg-white">
-    <div class="w-full md:w-1/3 md:pr-4">
+    <div class="flex bg-gray-50">
-      <card :padding="false" class="bg-gray-50 dark:bg-notion-dark-light">
+      <div class="w-full md:w-4/5 lg:w-3/5 md:mx-auto md:max-w-4xl px-4">
-        <ul>
+        <div class="pt-4 pb-0">
-          <li v-for="tab in tabs" :key="tab.route">
+          <div class="flex">
+            <h2 class="flex-grow text-gray-900">
+              My Account
+            </h2>
+          </div>
+          <ul class="flex text-gray-500">
+            <li>{{ user.email }}</li>
+          </ul>
+
+          <div class="mt-4 border-b border-gray-200 dark:border-gray-700">
+            <ul class="flex flex-wrap -mb-px text-sm font-medium text-center">
+              <li class="mr-6" v-for="(tab, i) in tabsList" :key="i+1">
                 <router-link :to="{ name: tab.route }"
-                         class="px-6 py-4 flex items-center text-gray-600 dark:text-gray-400 dark:hover:text-gray-300 hover:text-gray-900 hover:bg-gray-50 dark:hover:bg-gray-900 rounded"
+                    class="hover:no-underline inline-block py-4 rounded-t-lg border-b-2 border-transparent text-gray-500 hover:text-gray-600"
-                         active-class="text-nt-blue bg-indigo-50 dark:bg-gray-800 hover:bg-blue-50"
+                    active-class="text-blue-600 hover:text-blue-900 dark:text-blue-500 dark:hover:text-blue-500 border-blue-600 dark:border-blue-500"
-            >
+                >{{tab.name}}</router-link>
-              <template v-if="tab.route == 'settings.profile'">
-                <svg class="w-6 h-6 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
-                     stroke="currentColor"
-                >
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                        d="M5.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0zm6 2a9 9 0 11-18 0 9 9 0 0118 0z"
-                  />
-                </svg>
-              </template>
-              <template v-else-if="tab.route == 'settings.account'">
-                <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7a4 4 0 11-8 0 4 4 0 018 0zM9 14a6 6 0 00-6 6v1h12v-1a6 6 0 00-6-6zM21 12h-6" />
-                </svg>
-              </template>
-              <template v-else-if="tab.route == 'settings.workspaces'">
-                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" />
-                </svg>
-              </template>
-              <template v-else-if="tab.route == 'settings.billing'">
-                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2" fill="none" viewBox="0 0 24 24"
-                     stroke="currentColor"
-                >
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                        d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"
-                  />
-                </svg>
-              </template>
-              <template v-else-if="tab.route == 'settings.password'">
-                <svg class="w-6 h-6 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
-                     stroke="currentColor"
-                >
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                        d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
-                  />
-                </svg>
-              </template>
-              <span class="ml-2">
-                {{ tab.name }}
-              </span>
-            </router-link>
-          </li>
-          <li v-if="user.admin">
-            <router-link :to="{ name: 'settings.admin' }"
-                         class="px-6 py-4 flex items-center text-gray-600 dark:text-gray-400 dark:hover:text-gray-300 hover:text-gray-900 hover:bg-gray-50 dark:hover:bg-gray-900 rounded"
-                         active-class="text-nt-blue bg-indigo-50 dark:bg-gray-800 hover:bg-blue-50"
-            >
-              <svg class="w-6 h-6 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
-                   stroke="currentColor"
-              >
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                      d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"
-                />
-              </svg>
-              <span class="ml-2">
-                Admin
-              </span>
-            </router-link>
               </li>
             </ul>
-      </card>
           </div>
-
+        </div>
-    <div class="w-full md:w-2/3">
+      </div>
+    </div>
+    <div class="flex bg-white">
+      <div class="w-full md:w-4/5 lg:w-3/5 md:mx-auto md:max-w-4xl px-4">
+        <div class="mt-8 pb-0">
           <transition name="fade" mode="out-in">
             <router-view />
           </transition>
         </div>
       </div>
+    </div>
+  </div>
 </template>
 
 <script>
@@ -85,19 +43,27 @@ import { mapGetters } from 'vuex'
 export default {
   middleware: 'auth',
 
+  data () {
+    return {
+    }
+  },
+
   computed: {
-    tabs () {
+    ...mapGetters({
+      user: 'auth/user'
+    }),
+    tabsList () {
       const tabs = [
         {
-          name: 'Workspaces',
+          name: 'Profile',
-          route: 'settings.workspaces'
-        },
-        {
-          name: this.$t('profile'),
           route: 'settings.profile'
         },
         {
-          name: this.$t('password'),
+          name: 'Workspace Settings',
+          route: 'settings.workspaces'
+        },
+        {
+          name: 'Password',
           route: 'settings.password'
         },
         {
@@ -113,11 +79,18 @@ export default {
         })
       }
 
-      return tabs
+      if(this.user.admin){
-    },
+        tabs.push({
-    ...mapGetters({
+          name: 'Admin',
-      user: 'auth/user'
+          route: 'settings.admin'
         })
       }
+
+      return tabs
+    }
+  },
+
+  methods: {
+  }
 }
 </script>

resources/js/pages/settings/password.vue

@@ -1,24 +1,25 @@
 <template>
-  <card :title="$t('your_password')" class="bg-gray-50 dark:bg-notion-dark-light">
+  <div>
-    <form @submit.prevent="update" @keydown="form.onKeydown($event)">
+    <h3 class="font-semibold text-2xl text-gray-900">Password</h3>
+    <small class="text-gray-600">Manage your password.</small>
+
+    <form @submit.prevent="update" @keydown="form.onKeydown($event)" class="mt-3">
       <alert-success class="mb-5" :form="form" :message="$t('password_updated')" />
 
       <!-- Password -->
-      <text-input class="mt-8" native-type="password"
+      <text-input native-type="password"
                   name="password" :form="form" :label="$t('password')" :required="true"
       />
 
       <!-- Password Confirmation-->
-      <text-input class="mt-8" native-type="password"
+      <text-input native-type="password"
                   name="password_confirmation" :form="form" :label="$t('confirm_password')" :required="true"
       />
 
       <!-- Submit Button -->
-      <v-button :loading="form.busy" class="mt-4 w-full">
+      <v-button :loading="form.busy" class="mt-4">Update password</v-button>
-        {{ $t('update') }}
-      </v-button>
     </form>
-  </card>
+  </div>
 </template>
 
 <script>

resources/js/pages/settings/profile.vue

@@ -1,6 +1,9 @@
 <template>
-  <card title="Profile" class="bg-gray-50 dark:bg-notion-dark-light">
+  <div>
-    <form @submit.prevent="update" @keydown="form.onKeydown($event)">
+    <h3 class="font-semibold text-2xl text-gray-900">Profile details</h3>
+    <small class="text-gray-600">Update your username and manage your account details.</small>
+
+    <form @submit.prevent="update" @keydown="form.onKeydown($event)" class="mt-3">
       <alert-success class="mb-5" :form="form" :message="$t('info_updated')" />
 
       <!-- Name -->
@@ -10,11 +13,9 @@
       <text-input name="email" :form="form" :label="$t('email')" :required="true" />
 
       <!-- Submit Button -->
-      <v-button :loading="form.busy" class="mt-4 w-full">
+      <v-button :loading="form.busy" class="mt-4">Save changes</v-button>
-        {{ $t('update') }}
-      </v-button>
     </form>
-  </card>
+  </div>
 </template>
 
 <script>

resources/js/pages/settings/workspace.vue

@@ -1,21 +1,24 @@
 <template>
-  <card title="Workspaces" class="bg-gray-50 dark:bg-notion-dark-light">
+  <div>
+    <h3 class="font-semibold text-2xl text-gray-900">Workspace settings</h3>
+    <small class="text-gray-600">Manage your workspaces.</small>
+
     <div v-if="loading" class="w-full text-blue-500 text-center">
       <loader class="h-10 w-10 p-5"/>
     </div>
     <div v-else>
       <div v-for="workspace in workspaces" :key="workspace.id"
-           class="border border-nt-blue-light shadow rounded-md p-4 mb-5 max-w-sm w-full flex group mx-auto bg-white dark:bg-notion-dark items-center"
+          class="mt-4 p-4 flex group bg-white hover:bg-gray-50 dark:bg-notion-dark items-center"
       >
-        <div class="flex space-x-4 flex-grow cursor-pointer" role="button" @click.prevent="switchWorkspace(workspace)">
+        <div class="flex space-x-4 flex-grow items-center cursor-pointer" role="button" @click.prevent="switchWorkspace(workspace)">
           <img v-if="isUrl(workspace.icon)" :src="workspace.icon" :alt="workspace.name + ' icon'"
               class="rounded-full h-12 w-12"
           >
-          <div v-else class="rounded-full bg-nt-blue-lighter h-12 w-12 text-2xl pt-2 text-center overflow-hidden"
+          <div v-else class="rounded-2xl bg-gray-100 h-12 w-12 text-2xl pt-2 text-center overflow-hidden"
               v-text="workspace.icon"
           />
-          <div class="flex-1 flex items-center space-y-4 py-1">
+          <div class="space-y-4 py-1">
-            <p class="font-bold truncate" v-text="workspace.name"/>
+            <div class="font-bold truncate">{{workspace.name}}</div>
           </div>
         </div>
         <div v-if="workspaces.length > 1"
@@ -27,12 +30,13 @@
           </svg>
         </div>
       </div>
-      <div class="max-w-sm w-full mx-auto mt-4">
+      <v-button :loading="loading" class="mt-4" @click="workspaceModal=true">
-        <v-button :loading="loading" class="w-full" @click="workspaceModal=true">
+        <svg class="inline text-white mr-1 h-4 w-4" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-          Create a new workspace
+          <path d="M6.99996 1.16699V12.8337M1.16663 7.00033H12.8333" stroke="currentColor" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg>
+        Create new workspace
       </v-button>
     </div>
-    </div>
 
     <!--  Workspace modal  -->
     <modal :show="workspaceModal" @close="workspaceModal=false" max-width="lg">
@@ -65,7 +69,7 @@
       </div>
     </modal>
 
-  </card>
+  </div>
 </template>
 
 <script>