Vue Remove Margins (#377)

## What this does Removes margins from several Vue components ## How to test Add user steps to achieve desired functionality for this feature. --------- Co-authored-by: JSicardi <[email protected]>
thinknimble · Jan 23, 2025 · 11327a7 · 11327a7
1 parent 1f015a4
commit 11327a7
Show file tree

Hide file tree

Showing 9 changed files with 43 additions and 41 deletions.
diff --git a/{{cookiecutter.project_slug}}/clients/web/vue3/src/components/NavBar.vue b/{{cookiecutter.project_slug}}/clients/web/vue3/src/components/NavBar.vue
@@ -38,7 +38,7 @@ const user = computed(() => userStore.user)
           <router-link :to="{ name: 'Home' }" class="flex flex-shrink-0 items-center">
             <img class="h-4" src="@/assets/icons/logo.svg" alt="ThinkNimble"
           /></router-link>
-          <div class="hidden sm:ml-6 sm:flex sm:space-x-8">
+          <div class="hidden sm:pl-6 sm:flex sm:space-x-8">
             <router-link :to="{ name: 'Home' }" class="router" active-class="active"
               >Home</router-link
             >
@@ -51,22 +51,24 @@ const user = computed(() => userStore.user)
             >
           </div>
         </div>
-        <div class="hidden sm:ml-6 sm:flex sm:items-center">
+        <div class="hidden sm:pl-6 sm:flex sm:items-center">
           <template v-if="!isLoggedIn">
             <router-link
               :to="{ name: 'Login' }"
               class="flex w-full cursor-pointer items-center justify-center rounded-md border px-3 py-2 text-sm font-semibold shadow-sm border-primary bg-primary text-white hover:bg-primaryLight"
               data-cy="login"
               >Login</router-link
             >
-            <router-link
-              :to="{ name: 'Signup' }"
-              class="flex w-full cursor-pointer items-center justify-center rounded-md border px-3 py-2 text-sm font-semibold shadow-sm hover:bg-gray-50 ml-6"
-              >Signup</router-link
-            >
+            <div class="pl-6">
+              <router-link
+                :to="{ name: 'Signup' }"
+                class="flex w-full cursor-pointer items-center justify-center rounded-md border px-3 py-2 text-sm font-semibold shadow-sm hover:bg-gray-50"
+                >Signup</router-link
+              >
+            </div>
           </template>
           <!-- Profile dropdown -->
-          <div class="relative ml-3 focus:ring-2" v-if="isLoggedIn">
+          <div class="relative pl-3 focus:ring-2" v-if="isLoggedIn">
             <img
               @click="profileMenuOpen = !profileMenuOpen"
               class="h-8 w-8 cursor-pointer rounded-full"
@@ -76,15 +78,15 @@ const user = computed(() => userStore.user)
 
             <div
               v-if="profileMenuOpen"
-              class="absolute right-0 z-10 mt-2 w-48 rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
+              class="absolute right-0 z-10 pt-2 w-48 rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
             >
               <div class="block cursor-pointer px-4 py-2 text-sm text-gray-700" @click="logout()">
                 Log Out
               </div>
             </div>
           </div>
         </div>
-        <div class="-mr-2 flex items-center sm:hidden">
+        <div class="flex pr-2 items-center sm:hidden">
           <!-- Mobile menu button -->
           <div class="rounded-md p-2 hover:bg-gray-100 hover:text-gray-500 focus:outline-none">
             <img
@@ -135,14 +137,14 @@ const user = computed(() => userStore.user)
               alt="Profile"
             />
           </div>
-          <div class="ml-3">
+          <div class="pl-3">
             <div class="text-base font-medium text-gray-800">
               {{ user?.firstName }} {{ user?.lastName }}
             </div>
             <div class="text-sm font-medium text-gray-500">{{ user?.email }}</div>
           </div>
         </div>
-        <div class="mt-3 space-y-1">
+        <div class="pt-3 space-y-1">
           <template v-if="!isLoggedIn">
             <router-link
               @click="mobileMenuOpen = false"

diff --git a/{{cookiecutter.project_slug}}/clients/web/vue3/src/components/inputs/InputField.vue b/{{cookiecutter.project_slug}}/clients/web/vue3/src/components/inputs/InputField.vue
@@ -33,13 +33,13 @@ const val = useModelWrapper(props, emit, 'value')
 </script>
 
 <template>
-  <div class="mb-2 flex w-full flex-col items-start">
+  <div class="pb-2 flex w-full flex-col items-start">
     <slot name="input-label">
       <label
         v-if="label"
         :for="id ? id : `${label} - field`"
         v-text="label"
-        class="mb-2 block text-sm font-medium text-primary"
+        class="pb-2 block text-sm font-medium text-primary"
       />
     </slot>
     <input
@@ -52,7 +52,7 @@ const val = useModelWrapper(props, emit, 'value')
       @input="$emit('input', $event)"
       @blur="$emit('blur')"
       @focus="$emit('focus', $event)"
-      class="mb-2 border rounded p-2 text-gray-700 leading-tight w-full placeholder:text-grey-scale disabled:opacity-50 disabled:cursor-not-allowed focus-within:outline-none focus-within:ring-[2px] focus-within:ring-inset focus-within:ring-primary"
+      class="pb-2 border rounded p-2 text-gray-700 leading-tight w-full placeholder:text-grey-scale disabled:opacity-50 disabled:cursor-not-allowed focus-within:outline-none focus-within:ring-[2px] focus-within:ring-inset focus-within:ring-primary"
       :autocomplete="autocomplete"
     />
     <ul v-if="errors?.length">

diff --git a/{{cookiecutter.project_slug}}/clients/web/vue3/src/views/Dashboard.vue b/{{cookiecutter.project_slug}}/clients/web/vue3/src/views/Dashboard.vue
@@ -4,7 +4,7 @@
   <div class="flex min-h-full flex-1 flex-col">
     <header class="relative mx-auto flex h-32 w-full flex-col justify-center bg-primary sm:h-48">
       <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 w-full">
-        <h1 class="text-3xl mb-6 text-left font-bold uppercase text-white">Dashboard</h1>
+        <h1 class="text-3xl pb-6 text-left font-bold uppercase text-white">Dashboard</h1>
       </div>
     </header>
     <div class="h-full min-h-full p-4 sm:px-16 sm:py-4">Content goes here...</div>

diff --git a/{{cookiecutter.project_slug}}/clients/web/vue3/src/views/Home.vue b/{{cookiecutter.project_slug}}/clients/web/vue3/src/views/Home.vue
@@ -5,11 +5,11 @@
     <h1 class="text-4xl font-bold tracking-tight text-gray-900 sm:text-6xl">
       Welcome to {{ cookiecutter.project_name }}!
     </h1>
-    <p class="mt-6 text-lg leading-8 text-gray-600">
-      Here's some information about {{ cookiecutter.project_name }}. Please update and expand on this text. This text is
-      first thing that users will see on the home page.
+    <p class="pt-6 text-lg leading-8 text-gray-600">
+      Here's some information about {{ cookiecutter.project_name }}. Please update and expand on this text. This text
+      is first thing that users will see on the home page.
     </p>
-    <div class="mt-10 flex items-center justify-center gap-x-6">
+    <div class="pt-10 flex items-center justify-center gap-x-6">
       <router-link
         :to="{ name: 'Dashboard' }"
         class="bg-accent rounded-md px-3 py-2 text-sm cursor-pointer text-white"

diff --git a/{{cookiecutter.project_slug}}/clients/web/vue3/src/views/Login.vue b/{{cookiecutter.project_slug}}/clients/web/vue3/src/views/Login.vue
@@ -20,12 +20,12 @@ const onSubmit = () => {
   <div class="flex min-h-full flex-1 flex-col justify-center px-6 py-12 lg:px-8">
     <div class="sm:mx-auto sm:w-full sm:max-w-sm">
       <img class="mx-auto h-12 w-auto" src="@/assets/icons/glyph.svg" alt="ThinkNimble" />
-      <h2 class="mt-4 text-center text-2xl font-bold leading-9 tracking-tight text-primary">
+      <h2 class="pt-4 text-center text-2xl font-bold leading-9 tracking-tight text-primary">
         Log in
       </h2>
     </div>
 
-    <div class="mt-6 sm:mx-auto sm:w-full sm:max-w-sm">
+    <div class="pt-6 sm:mx-auto sm:w-full sm:max-w-sm">
       <form @submit.prevent="onSubmit()">
         <InputField
           v-model:value="form.email.value"
@@ -37,7 +37,7 @@ const onSubmit = () => {
           :id="form.email.id"
         />
         <div>
-          <div class="mt-2">
+          <div class="pt-2">
             <InputField
               v-model:value="form.password.value"
               :errors="form.password.errors"
@@ -79,8 +79,8 @@ const onSubmit = () => {
         </div>
       </form>
     </div>
-    <div class="m-4 flex self-center text-sm">
-      <p class="mr-2">Don't have an account?</p>
+    <div class="p-4 flex self-center text-sm">
+      <p class="pr-2">Don't have an account?</p>
       <router-link :to="{ name: 'Signup' }" class="font-bold text-primary hover:underline">
         Sign up.
       </router-link>

diff --git a/{{cookiecutter.project_slug}}/clients/web/vue3/src/views/PageNotFound.vue b/{{cookiecutter.project_slug}}/clients/web/vue3/src/views/PageNotFound.vue
@@ -4,9 +4,9 @@
   <main class="grid h-full flex-auto place-items-center bg-white px-6 py-24 sm:py-32 lg:px-8">
     <div class="text-center">
       <p class="font-semibold text-accent">404</p>
-      <h1 class="mt-4 text-3xl font-bold tracking-tight sm:text-5xl">Page not found</h1>
-      <p class="mt-6 leading-7">Sorry, we couldn't find the page you're looking for.</p>
-      <div class="mt-10 gap-x-6">
+      <h1 class="pt-4 text-3xl font-bold tracking-tight sm:text-5xl">Page not found</h1>
+      <p class="pt-6 leading-7">Sorry, we couldn't find the page you're looking for.</p>
+      <div class="pt-10 gap-x-6">
         <router-link
           to="/"
           class="rounded-md bg-accent px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-primary focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"

diff --git a/{{cookiecutter.project_slug}}/clients/web/vue3/src/views/RequestPasswordReset.vue b/{{cookiecutter.project_slug}}/clients/web/vue3/src/views/RequestPasswordReset.vue
@@ -19,11 +19,11 @@ const makeRequest = async () => {
   <div class="flex min-h-full flex-1 flex-col justify-center px-6 py-12 lg:px-8">
     <div class="sm:mx-auto sm:w-full sm:max-w-sm">
       <img class="mx-auto h-12 w-auto" src="@/assets/icons/glyph.svg" alt="ThinkNimble" />
-      <h2 class="mt-4 text-center text-2xl font-bold leading-9 tracking-tight text-primary">
+      <h2 class="pt-4 text-center text-2xl font-bold leading-9 tracking-tight text-primary">
         Request Password Reset
       </h2>
     </div>
-    <div class="mt-6 sm:mx-auto sm:w-full sm:max-w-sm">
+    <div class="pt-6 sm:mx-auto sm:w-full sm:max-w-sm">
       <form @submit.prevent="makeRequest">
         <InputField
           v-model:value="form.email.value"

diff --git a/{{cookiecutter.project_slug}}/clients/web/vue3/src/views/ResetPassword.vue b/{{cookiecutter.project_slug}}/clients/web/vue3/src/views/ResetPassword.vue
@@ -20,11 +20,11 @@ const onResetPassword = () => {
   <div class="flex min-h-full flex-1 flex-col justify-center px-6 py-12 lg:px-8">
     <div class="sm:mx-auto sm:w-full sm:max-w-sm">
       <img class="mx-auto h-12 w-auto" src="@/assets/icons/glyph.svg" alt="ThinkNimble" />
-      <h2 class="mt-4 text-center text-2xl font-bold leading-9 tracking-tight text-primary">
+      <h2 class="pt-4 text-center text-2xl font-bold leading-9 tracking-tight text-primary">
         Password Reset
       </h2>
     </div>
-    <div class="mt-6 sm:mx-auto sm:w-full sm:max-w-sm">
+    <div class="pt-6 sm:mx-auto sm:w-full sm:max-w-sm">
       <form @submit.prevent="onResetPassword()">
         <InputField
           v-model:value="form.password.value"

diff --git a/{{cookiecutter.project_slug}}/clients/web/vue3/src/views/Signup.vue b/{{cookiecutter.project_slug}}/clients/web/vue3/src/views/Signup.vue
@@ -21,15 +21,15 @@ const onRegister = () => {
   <div class="flex min-h-full flex-1 flex-col justify-center px-6 py-10 lg:px-8">
     <div class="sm:mx-auto sm:w-full sm:max-w-sm">
       <img class="mx-auto h-12 w-auto" src="@/assets/icons/glyph.svg" alt="ThinkNimble" />
-      <h2 class="mt-4 text-center text-2xl font-bold leading-9 tracking-tight text-primary">
+      <h2 class="pt-4 text-center text-2xl font-bold leading-9 tracking-tight text-primary">
         Sign up
       </h2>
     </div>
 
-    <div class="mt-6 sm:mx-auto sm:w-full sm:max-w-sm">
+    <div class="pt-6 sm:mx-auto sm:w-full sm:max-w-sm">
       <form @submit.prevent="onRegister()">
         <div>
-          <label class="mb-2 block text-left text-sm font-medium leading-6 text-primary"
+          <label class="pb-2 block text-left text-sm font-medium leading-6 text-primary"
             >First Name</label
           >
           <InputField
@@ -41,7 +41,7 @@ const onRegister = () => {
         </div>
 
         <div>
-          <label class="mb-2 block text-left text-sm font-medium leading-6 text-primary"
+          <label class="pb-2 block text-left text-sm font-medium leading-6 text-primary"
             >Last Name</label
           >
           <InputField
@@ -53,7 +53,7 @@ const onRegister = () => {
         </div>
 
         <div>
-          <label class="mb-2 block text-left text-sm font-medium leading-6 text-primary"
+          <label class="pb-2 block text-left text-sm font-medium leading-6 text-primary"
             >Email</label
           >
           <InputField
@@ -66,7 +66,7 @@ const onRegister = () => {
         </div>
 
         <div>
-          <label class="mb-2 block text-left text-sm font-medium leading-6 text-primary"
+          <label class="pb-2 block text-left text-sm font-medium leading-6 text-primary"
             >Password</label
           >
           <InputField
@@ -78,7 +78,7 @@ const onRegister = () => {
           />
         </div>
         <div>
-          <label class="mb-2 block text-left text-sm font-medium leading-6 text-primary"
+          <label class="pb-2 block text-left text-sm font-medium leading-6 text-primary"
             >Confirm Password</label
           >
           <InputField
@@ -103,8 +103,8 @@ const onRegister = () => {
         </div>
       </form>
     </div>
-    <div class="m-4 flex self-center text-sm">
-      <p class="mr-2">Already have an account?</p>
+    <div class="p-4 flex self-center text-sm">
+      <p class="p-2">Already have an account?</p>
       <router-link :to="{ name: 'Login' }" class="font-bold text-primary hover:underline">
         Log in.
       </router-link>