feat: Update auth screens (#11108)

# Pull Request Template

## Description

This PR includes style updates for auth screens

## Type of change

- [x] Bug fix (non-breaking change which fixes an issue)


## Checklist:

- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my code
- [x] I have commented on my code, particularly in hard-to-understand
areas
- [ ] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [x] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged and published in downstream
modules

app/javascript/dashboard/routes/dashboard/settings/teams/Create/AddAgents.vue

@@ -89,7 +89,7 @@ export default {
 
 <template>
   <div
-    class="border border-slate-25 dark:border-slate-800/60 overflow-x-auto bg-white dark:bg-slate-900 h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
+    class="border border-n-weak bg-n-solid-1 rounded-t-lg border-b-0 h-full w-full p-6 col-span-6 overflow-auto"
   >
     <form
       class="flex flex-wrap mx-0 overflow-x-auto"

app/javascript/dashboard/routes/dashboard/settings/teams/Create/CreateTeam.vue

@@ -38,7 +38,7 @@ export default {
 
 <template>
   <div
-    class="border border-n-weak bg-n-background h-full w-full p-6 col-span-6 overflow-auto"
+    class="border border-n-weak bg-n-solid-1 rounded-t-lg border-b-0 h-full w-full p-6 col-span-6 overflow-auto"
   >
     <PageHeader
       :header-title="$t('TEAMS_SETTINGS.CREATE_FLOW.CREATE.TITLE')"

app/javascript/dashboard/routes/dashboard/settings/teams/Create/Index.vue

@@ -23,10 +23,8 @@ export default {
 </script>
 
 <template>
-  <div
-    class="overflow-auto p-4 max-w-full my-auto flex flex-row flex-nowrap h-full"
-  >
-    <woot-wizard class="hidden md:block w-1/4" :items="items" />
+  <div class="grid grid-cols-1 md:grid-cols-8 overflow-auto h-full px-5 flex-1">
+    <woot-wizard class="hidden md:block col-span-2" :items="items" />
     <router-view />
   </div>
 </template>

app/javascript/dashboard/routes/dashboard/settings/teams/Edit/EditAgents.vue

@@ -104,7 +104,7 @@ export default {
 
 <template>
   <div
-    class="border border-n-weak bg-n-background h-full w-full p-6 col-span-6 overflow-auto"
+    class="border border-n-weak bg-n-solid-1 rounded-t-lg border-b-0 h-full w-full p-6 col-span-6 overflow-auto"
   >
     <form
       class="flex flex-wrap mx-0 overflow-x-auto"

app/javascript/dashboard/routes/dashboard/settings/teams/Edit/EditTeam.vue

@@ -58,7 +58,7 @@ export default {
 
 <template>
   <div
-    class="border border-slate-25 dark:border-slate-800/60 bg-n-background h-full p-6 w-full max-w-full md:w-3/4 md:max-w-[75%] flex-shrink-0 flex-grow-0"
+    class="border border-n-weak bg-n-solid-1 rounded-t-lg border-b-0 h-full w-full p-6 col-span-6 overflow-auto"
   >
     <PageHeader
       :header-title="$t('TEAMS_SETTINGS.EDIT_FLOW.CREATE.TITLE')"

app/javascript/dashboard/routes/dashboard/settings/teams/Edit/Index.vue

@@ -27,10 +27,8 @@ export default {
 </script>
 
 <template>
-  <div
-    class="overflow-auto p-4 max-w-full my-auto flex flex-row flex-nowrap h-full"
-  >
-    <woot-wizard class="hidden md:block w-1/4" :items="items" />
+  <div class="grid grid-cols-1 md:grid-cols-8 overflow-auto h-full px-5 flex-1">
+    <woot-wizard class="hidden md:block col-span-2" :items="items" />
     <router-view />
   </div>
 </template>

app/javascript/dashboard/routes/dashboard/settings/teams/FinishSetup.vue

@@ -10,7 +10,7 @@ export default {
 
 <template>
   <div
-    class="border border-n-weak bg-n-background h-full w-full p-6 col-span-6 overflow-auto"
+    class="border border-n-weak bg-n-solid-1 rounded-t-lg border-b-0 h-full w-full p-6 col-span-6 overflow-auto"
   >
     <EmptyState
       :title="$t('TEAMS_SETTINGS.FINISH.TITLE')"

app/javascript/dashboard/routes/dashboard/settings/teams/TeamForm.vue

@@ -63,7 +63,7 @@ export default {
 </script>
 
 <template>
-  <div class="flex-shrink-0 w-full max-w-lg">
+  <div class="flex-shrink-0 w-full">
     <form class="mx-0 grid gap-4" @submit.prevent="handleSubmit">
       <FormInput
         v-model="state.title"