fix(fe2): Align dialogs with the designs (#2895)

* Updates to Dialogs

* Updates to dialogs

packages/frontend-2/components/automate/automation/CreateDialog.vue

@@ -204,7 +204,7 @@ const enableSubmitTestAutomation = computed(() => {
 })
 
 const title = computed(() => {
-  return isTestAutomation.value ? undefined : 'Create Automation'
+  return isTestAutomation.value ? undefined : 'Create automation'
 })
 
 const buttons = computed((): LayoutDialogButton[] => {

packages/frontend-2/components/form/select/WorkspaceRoles.vue

@@ -9,6 +9,7 @@
     :label-id="labelId"
     :button-id="buttonId"
     mount-menu-on-body
+    show-label
     :fully-control-value="fullyControlValue"
     :disabled="disabled"
     :disabled-item-predicate="disabledItemPredicate"

packages/frontend-2/components/project/model-page/dialog/Delete.vue

@@ -1,11 +1,11 @@
 <template>
   <LayoutDialog
     v-model:open="isOpen"
-    max-width="sm"
+    max-width="xs"
     :buttons="[
       {
         text: 'Delete',
-        props: { color: 'danger', fullWidth: true, disabled: loading },
+        props: { color: 'danger', disabled: loading },
         onClick: () => {
           onDelete()
         }
@@ -18,14 +18,13 @@
     </template>
     <div class="flex flex-col text-foreground">
       <p>
-        Deleting versions is an irrevocable action! If you are sure about wanting to
-        delete
+        Are you sure you want to delete
         <template v-if="versions.length > 1">the selected versions,</template>
         <template v-else-if="versions.length">
           the selected version
-          <span class="inline font-medium">"{{ versions[0].message }}",</span>
+          <span class="inline font-medium">"{{ versions[0].message }}"</span>
         </template>
-        please click on the button below!
+        ?
       </p>
     </div>
   </LayoutDialog>

packages/frontend-2/components/project/model-page/dialog/EditMessage.vue

@@ -1,18 +1,18 @@
 <template>
   <LayoutDialog
     v-model:open="isOpen"
-    max-width="sm"
+    max-width="xs"
     :buttons="[
       {
         text: 'Cancel',
-        props: { color: 'outline', fullWidth: true },
+        props: { color: 'outline' },
         onClick: () => {
           isOpen = false
         }
       },
       {
         text: 'Save',
-        props: { fullWidth: true, disabled: loading },
+        props: { disabled: loading },
         onClick: () => {
           onSubmit()
         }
@@ -20,14 +20,15 @@
     ]"
     @fully-closed="$emit('fully-closed')"
   >
-    <template #header>Edit Version Message</template>
-    <form class="flex flex-col text-foreground space-y-4" @submit="onSubmit">
-      <FormTextInput
+    <template #header>Edit version message</template>
+    <form class="flex flex-col text-foreground space-y-4 mb-2" @submit="onSubmit">
+      <FormTextArea
         v-model="message"
         name="newMessage"
         label="Version message"
         placeholder="Version message"
         show-required
+        show-label
         color="foundation"
         :rules="[isRequired]"
         :disabled="loading"

packages/frontend-2/components/project/model-page/dialog/MoveTo.vue

@@ -1,7 +1,7 @@
 <template>
   <LayoutDialog
     v-model:open="isOpen"
-    max-width="sm"
+    max-width="xs"
     @fully-closed="$emit('fully-closed')"
   >
     <template #header>

packages/frontend-2/components/project/model-page/dialog/embed/Embed.vue

@@ -1,7 +1,7 @@
 <template>
   <LayoutDialog
     v-model:open="isOpen"
-    max-width="md"
+    max-width="lg"
     :buttons="isPrivate ? nonDiscoverableButtons : discoverableButtons"
   >
     <template v-if="isPrivate" #header>Change access permissions</template>
@@ -196,14 +196,14 @@ const isPrivate = computed(() => {
 const discoverableButtons = computed((): LayoutDialogButton[] => [
   {
     text: 'Cancel',
-    props: { color: 'outline', fullWidth: true },
+    props: { color: 'outline' },
     onClick: () => {
       isOpen.value = false
     }
   },
   {
     text: 'Copy embed code',
-    props: { fullWidth: true },
+    props: {},
     onClick: () => {
       handleEmbedCodeCopy(iframeCode.value)
     }
@@ -213,7 +213,7 @@ const discoverableButtons = computed((): LayoutDialogButton[] => [
 const nonDiscoverableButtons = computed((): LayoutDialogButton[] => [
   {
     text: 'Close',
-    props: { color: 'outline', fullWidth: true },
+    props: { color: 'outline' },
     onClick: () => {
       isOpen.value = false
     }
@@ -221,7 +221,6 @@ const nonDiscoverableButtons = computed((): LayoutDialogButton[] => [
   {
     text: 'Save',
     props: {
-      fullWidth: true,
       disabled: projectVisibility.value === props.project.visibility
     },
     onClick: saveProjectVisibility

packages/frontend-2/components/project/models/BasicCardView.vue

@@ -51,7 +51,7 @@ const classes = computed(() => {
   if (props.vertical) {
     classParts.push('grid-cols-1')
   } else if (props.smallView) {
-    classParts.push('grid-cols-1 sm:grid-cols-2 lg:grid-cols-3')
+    classParts.push('grid-cols-1 sm:grid-cols-2')
   } else {
     classParts.push('grid-cols-1 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4')
   }

packages/frontend-2/components/project/page/InviteDialog.vue

@@ -1,7 +1,7 @@
 <template>
   <LayoutDialog v-model:open="isOpen" max-width="md" :buttons="dialogButtons">
     <template #header>Invite to project</template>
-    <div class="flex flex-col gap-4 my-2">
+    <div class="flex flex-col gap-4 mb-2">
       <div v-if="!isWorkspaceMemberAndProjectOwner" class="flex flex-col gap-4">
         <FormSelectWorkspaceRoles
           v-if="project?.workspaceId"
@@ -218,7 +218,7 @@ const isWorkspaceMemberAndProjectOwner = computed(() => {
 const dialogButtons = computed<LayoutDialogButton[]>(() => [
   {
     text: 'Cancel',
-    props: { color: 'outline', fullWidth: true },
+    props: { color: 'outline' },
     onClick: () => {
       isOpen.value = false
     }

packages/frontend-2/components/project/page/models/NewDialog.vue

@@ -99,14 +99,14 @@ watch(
 const dialogButtons = computed((): LayoutDialogButton[] => [
   {
     text: 'Cancel',
-    props: { color: 'outline', fullWidth: true },
+    props: { color: 'outline' },
     onClick: () => {
       openState.value = false
     }
   },
   {
     text: 'Create',
-    props: { fullWidth: true },
+    props: {},
     onClick: () => {
       onSubmit()
     },

packages/frontend-2/components/project/page/models/card/DeleteDialog.vue

@@ -4,14 +4,14 @@
     :buttons="[
       {
         text: 'Cancel',
-        props: { color: 'outline', fullWidth: true },
+        props: { color: 'outline' },
         onClick: () => {
           isOpen = false
         }
       },
       {
         text: 'Delete',
-        props: { color: 'danger', fullWidth: true, disabled: loading },
+        props: { color: 'danger', disabled: loading },
         onClick: () => {
           onDelete()
         }

packages/frontend-2/components/project/page/models/card/EditDialog.vue

@@ -5,14 +5,14 @@
     :buttons="[
       {
         text: 'Cancel',
-        props: { color: 'outline', fullWidth: true },
+        props: { color: 'outline' },
         onClick: () => {
           isOpen = false
         }
       },
       {
         text: 'Save',
-        props: { fullWidth: true },
+        props: {},
         onClick: () => {
           onSubmit()
         }
@@ -21,7 +21,7 @@
   >
     <template #header>Edit model</template>
     <form class="flex flex-col text-foreground" @submit="onSubmit">
-      <div class="flex flex-col gap-6 my-2">
+      <div class="flex flex-col gap-4 mb-4">
         <FormTextInput
           v-model="newName"
           name="name"

packages/frontend-2/components/project/page/settings/general/block/Delete/Dialog.vue

@@ -1,7 +1,7 @@
 <template>
   <LayoutDialog v-model:open="isOpen" max-width="md" :buttons="dialogButtons">
     <template #header>Delete project</template>
-    <div class="space-y-4 text-sm">
+    <div class="space-y-4 text-body-xs">
       <p>
         Are you sure you want to permanently
         <strong>delete “{{ project.name }}”</strong>
@@ -61,7 +61,7 @@ const discussionText = computed(() =>
 const dialogButtons = computed<LayoutDialogButton[]>(() => [
   {
     text: 'Cancel',
-    props: { color: 'outline', fullWidth: true },
+    props: { color: 'outline' },
     onClick: () => {
       isOpen.value = false
       projectNameInput.value = ''
@@ -71,7 +71,7 @@ const dialogButtons = computed<LayoutDialogButton[]>(() => [
     text: 'Delete',
     props: {
       color: 'danger',
-      fullWidth: true,
+
       disabled: projectNameInput.value !== props.project.name
     },
     onClick: async () => {

packages/frontend-2/components/project/page/settings/general/block/Leave/Dialog.vue

@@ -29,7 +29,7 @@ const mp = useMixpanel()
 const dialogButtons = computed<LayoutDialogButton[]>(() => [
   {
     text: 'Cancel',
-    props: { color: 'outline', fullWidth: true },
+    props: { color: 'outline' },
     onClick: () => {
       isOpen.value = false
     }
@@ -38,7 +38,7 @@ const dialogButtons = computed<LayoutDialogButton[]>(() => [
     text: 'Leave',
     props: {
       color: 'danger',
-      fullWidth: true,
+
       submit: true
     },
     onClick: onLeave

packages/frontend-2/components/project/page/settings/general/block/ProjectInfo.vue

@@ -113,13 +113,12 @@ const resetLocalState = () => {
 const dialogButtons = computed<LayoutDialogButton[]>(() => [
   {
     text: 'Discard Changes',
-    props: { color: 'outline', fullWidth: true },
+    props: { color: 'outline' },
     onClick: handleRedirection
   },
   {
     text: 'Save Changes',
     props: {
-      fullWidth: true,
       submit: true
     },
     onClick: () => {

packages/frontend-2/components/project/page/settings/webhooks/CreateOrEditDialog.vue

@@ -9,7 +9,7 @@
       {{ props.webhook ? 'Edit webhook' : 'Create webhook' }}
     </template>
     <form @submit="onSubmit">
-      <div class="flex flex-col gap-4">
+      <div class="flex flex-col gap-3">
         <FormTextInput
           v-model="url"
           label="URL"
@@ -225,14 +225,14 @@ const resetWebhookModel = () => {
 const dialogButtons = computed((): LayoutDialogButton[] => [
   {
     text: 'Cancel',
-    props: { color: 'outline', fullWidth: true },
+    props: { color: 'outline' },
     onClick: () => {
       isOpen.value = false
     }
   },
   {
     text: props.webhook ? 'Save' : 'Create',
-    props: { fullWidth: true },
+    props: {},
     onClick: onSubmit
   }
 ])

packages/frontend-2/components/project/page/settings/webhooks/DeleteDialog.vue

@@ -1,11 +1,11 @@
 <template>
   <LayoutDialog
     v-model:open="isOpen"
-    max-width="sm"
+    max-width="xs"
     title="Delete webhook"
     :buttons="dialogButtons"
   >
-    <div class="flex flex-col gap-6 text-sm text-foreground">
+    <div class="flex flex-col gap-2 text-body-xs text-foreground">
       <p>
         Are you sure you want to
         <strong>permanently delete</strong>
@@ -108,12 +108,12 @@ const deleteConfirmed = async () => {
 const dialogButtons: LayoutDialogButton[] = [
   {
     text: 'Cancel',
-    props: { color: 'outline', fullWidth: true },
+    props: { color: 'outline' },
     onClick: () => (isOpen.value = false)
   },
   {
     text: 'Delete',
-    props: { color: 'danger', fullWidth: true },
+    props: { color: 'danger' },
     onClick: deleteConfirmed
   }
 ]

packages/frontend-2/components/projects/AddDialog.vue

@@ -1,11 +1,11 @@
 <template>
   <LayoutDialog v-model:open="open" max-width="sm" :buttons="dialogButtons">
-    <template #header>Create new project</template>
+    <template #header>Create a new project</template>
     <form class="flex flex-col text-foreground" @submit="onSubmit">
-      <div class="flex flex-col gap-3 mb-6">
+      <div class="flex flex-col gap-3 mb-2">
         <FormTextInput
           name="name"
-          label="Name"
+          label="Project name"
           placeholder="Project name"
           color="foundation"
           :rules="[isRequired, isStringOfLength({ maxLength: 512 })]"
@@ -16,20 +16,22 @@
         />
         <FormTextArea
           name="description"
-          label="Description"
-          placeholder="Description (optional)"
+          label="Project description"
+          placeholder="Description"
           color="foundation"
           size="lg"
           show-label
           :rules="[isStringOfLength({ maxLength: 65536 })]"
         />
+        <div>
+          <h3 class="label mb-2">Access permissions</h3>
+          <ProjectVisibilitySelect
+            v-model="visibility"
+            class="max-w-xs"
+            mount-menu-on-body
+          />
+        </div>
       </div>
-      <h3 class="label mb-2">Access permissions</h3>
-      <ProjectVisibilitySelect
-        v-model="visibility"
-        class="sm:max-w-none w-full"
-        mount-menu-on-body
-      />
     </form>
   </LayoutDialog>
 </template>
@@ -82,7 +84,7 @@ const onSubmit = handleSubmit(async (values) => {
 const dialogButtons = computed((): LayoutDialogButton[] => [
   {
     text: 'Cancel',
-    props: { color: 'outline', fullWidth: true },
+    props: { color: 'outline' },
     onClick: () => {
       open.value = false
     }
@@ -90,7 +92,6 @@ const dialogButtons = computed((): LayoutDialogButton[] => [
   {
     text: 'Create',
     props: {
-      fullWidth: true,
       submit: true
     },
     onClick: onSubmit

packages/frontend-2/components/projects/NewSpeckle/Dialog.vue

@@ -23,7 +23,7 @@ const open = defineModel<boolean>('open', { required: true })
 const dialogButtons = computed((): LayoutDialogButton[] => [
   {
     text: 'Close',
-    props: { color: 'outline', fullWidth: true },
+    props: { color: 'outline' },
     onClick: () => {
       open.value = false
     }
@@ -31,7 +31,6 @@ const dialogButtons = computed((): LayoutDialogButton[] => [
   {
     text: 'Learn more',
     props: {
-      fullWidth: true,
       iconRight: ArrowTopRightOnSquareIcon,
       to: 'https://speckle.systems/blog/the-new-way-to-collaborate-in-aec/',
       external: true,

packages/frontend-2/components/settings/Dialog.vue

@@ -235,6 +235,6 @@ watch(
 </script>
 <style>
 .workspace-item h6 {
-  @apply !font-normal !text-body-xs !text-foreground;
+  @apply !font-normal text-body-xs !text-foreground;
 }
 </style>

packages/frontend-2/components/settings/server/pending-invitations/DeleteDialog.vue

@@ -123,12 +123,12 @@ const deleteConfirmed = async () => {
 const dialogButtons: LayoutDialogButton[] = [
   {
     text: 'Delete',
-    props: { color: 'danger', fullWidth: true },
+    props: { color: 'danger' },
     onClick: deleteConfirmed
   },
   {
     text: 'Cancel',
-    props: { color: 'outline', fullWidth: true },
+    props: { color: 'outline' },
     onClick: () => (isOpen.value = false)
   }
 ]

packages/frontend-2/components/settings/server/user/ChangeRoleDialog.vue

@@ -1,5 +1,5 @@
 <template>
-  <LayoutDialog v-model:open="isOpen" max-width="sm" :buttons="dialogButtons">
+  <LayoutDialog v-model:open="isOpen" max-width="xs" :buttons="dialogButtons">
     <template #header>Change role</template>
     <div class="flex flex-col gap-6 text-sm text-foreground">
       <p>
@@ -118,12 +118,12 @@ const changeUserRoleConfirmed = async () => {
 const dialogButtons = computed((): LayoutDialogButton[] => [
   {
     text: 'Change role',
-    props: { color: 'danger', fullWidth: true },
+    props: { color: 'danger' },
     onClick: changeUserRoleConfirmed
   },
   {
     text: 'Cancel',
-    props: { color: 'outline', fullWidth: true },
+    props: { color: 'outline' },
     onClick: () => emit('update:open', false)
   }
 ])

packages/frontend-2/components/settings/server/user/DeleteDialog.vue

@@ -144,12 +144,12 @@ const deleteConfirmed = async () => {
 const dialogButtons: LayoutDialogButton[] = [
   {
     text: 'Delete',
-    props: { color: 'danger', fullWidth: true },
+    props: { color: 'danger' },
     onClick: deleteConfirmed
   },
   {
     text: 'Cancel',
-    props: { color: 'outline', fullWidth: true },
+    props: { color: 'outline' },
     onClick: () => (isOpen.value = false)
   }
 ]

packages/frontend-2/components/settings/server/user/InviteDialog.vue

@@ -2,8 +2,8 @@
   <LayoutDialog v-model:open="isOpen" max-width="md" :buttons="dialogButtons">
     <template #header>Get your colleagues in!</template>
     <form @submit="onSubmit">
-      <div class="flex flex-col gap-y-4 text-foreground">
-        <p class="text-body-xs mb-1">
+      <div class="flex flex-col gap-y-4 text-foreground mb-4">
+        <p class="text-body-xs">
           Speckle will send a server invite link to the email(-s) below. You can also
           add a personal message if you want to. To add multiple e-mails, seperate them
           with commas.
@@ -127,7 +127,7 @@ const onSubmit = handleSubmit(async (values) => {
 const dialogButtons = computed((): LayoutDialogButton[] => [
   {
     text: 'Cancel',
-    props: { color: 'outline', fullWidth: true },
+    props: { color: 'outline' },
     onClick: () => {
       isOpen.value = false
     }
@@ -135,7 +135,6 @@ const dialogButtons = computed((): LayoutDialogButton[] => [
   {
     text: 'Send',
     props: {
-      fullWidth: true,
       submit: true,
       disabled: anyMutationsLoading.value
     },

packages/frontend-2/components/settings/shared/ChangeRoleDialog.vue

@@ -1,14 +1,10 @@
 <template>
-  <LayoutDialog v-model:open="open" max-width="sm" :buttons="dialogButtons">
-    <template #header>Change role</template>
-    <div class="flex flex-col gap-4 text-body-xs text-foreground">
-      <p>
-        Select a new role for
-        <span class="font-medium">{{ name }}</span>
-        :
-      </p>
+  <LayoutDialog v-model:open="open" max-width="xs" :buttons="dialogButtons">
+    <template #header>Update role</template>
+    <div class="flex flex-col gap-4 mb-4 -mt-1">
       <FormSelectWorkspaceRoles
         v-model="newRole"
+        label="Role"
         fully-control-value
         :disabled-items="disabledItems"
       />
@@ -61,12 +57,12 @@ const disabledItems = computed<WorkspaceRoles[]>(() =>
 const dialogButtons = computed((): LayoutDialogButton[] => [
   {
     text: 'Cancel',
-    props: { color: 'outline', fullWidth: true },
+    props: { color: 'outline' },
     onClick: () => (open.value = false)
   },
   {
     text: 'Update',
-    props: { color: 'primary', fullWidth: true, disabled: !newRole.value },
+    props: { color: 'primary', disabled: !newRole.value },
     onClick: () => {
       open.value = false
       if (newRole.value) {

packages/frontend-2/components/settings/shared/DeleteUserDialog.vue

@@ -1,10 +1,13 @@
 <template>
-  <LayoutDialog v-model:open="open" max-width="sm" :buttons="dialogButtons">
+  <LayoutDialog v-model:open="open" max-width="xs" :buttons="dialogButtons">
     <template #header>Remove user</template>
     <div class="flex flex-col gap-4 text-body-xs text-foreground">
-      <p>Are you sure you want to remove the following user from the workspace?</p>
-      <p class="font-medium">
-        {{ name }}
+      <p>
+        Are you sure you want to remove
+        <span class="font-medium">
+          {{ name }}
+        </span>
+        from the workspace?
       </p>
     </div>
   </LayoutDialog>
@@ -25,12 +28,12 @@ const open = defineModel<boolean>('open', { required: true })
 const dialogButtons = computed((): LayoutDialogButton[] => [
   {
     text: 'Cancel',
-    props: { color: 'outline', fullWidth: true },
+    props: { color: 'outline' },
     onClick: () => (open.value = false)
   },
   {
     text: 'Remove',
-    props: { color: 'primary', fullWidth: true },
+    props: { color: 'primary' },
     onClick: () => {
       open.value = false
       emit('removeUser')

packages/frontend-2/components/settings/shared/projects/DeleteDialog.vue

@@ -125,12 +125,12 @@ const deleteConfirmed = async () => {
 const dialogButtons: LayoutDialogButton[] = [
   {
     text: 'Cancel',
-    props: { color: 'outline', fullWidth: true },
+    props: { color: 'outline' },
     onClick: () => (isOpen.value = false)
   },
   {
     text: 'Delete',
-    props: { color: 'danger', fullWidth: true },
+    props: { color: 'danger' },
     onClick: deleteConfirmed
   }
 ]

packages/frontend-2/components/settings/user/developer/CreateApplicationSuccessDialog.vue

@@ -1,19 +1,19 @@
 <template>
   <LayoutDialog v-model:open="isOpen" max-width="sm" :buttons="dialogButtons">
     <template #header>Create application</template>
-    <div class="flex flex-col gap-4 text-sm text-foreground">
+    <div class="flex flex-col gap-4 text-body-xs text-foreground">
       <div class="flex flex-col gap-3">
-        <h6 class="h6 font-medium text-center">Your new app is ready</h6>
-        <div class="grid grid-cols-2 gap-x-6 gap-y-3 py-2 text-sm max-w-xs mx-auto">
+        <h6 class="font-medium text-center">Your new app is ready</h6>
+        <div class="grid grid-cols-2 gap-x-6 gap-y-3 py-2 max-w-xs mx-auto">
           <div class="flex items-center">App id:</div>
-          <div class="w-40">
+          <div class="w-40 scale-90">
             <CommonClipboardInputWithToast
               v-if="props.application?.id"
               :value="props.application?.id"
             />
           </div>
           <div class="flex items-center">App secret:</div>
-          <div class="w-40">
+          <div class="w-40 scale-90">
             <CommonClipboardInputWithToast
               v-if="props.application?.secret"
               :value="props.application?.secret"
@@ -23,12 +23,17 @@
       </div>
       <div class="flex gap-4 items-center border-primary border rounded-lg px-4 py-3">
         <ExclamationTriangleIcon class="h-8 w-8 mt-0.5 text-primary" />
-        <div class="max-w-md flex flex-col gap-1.5 text-sm">
+        <div class="max-w-md flex flex-col gap-1.5">
           <p>
             <strong>Note:</strong>
             To authenticate users inside your app, direct them to
           </p>
-          <CommonClipboardInputWithToast v-if="authUrl" :value="authUrl" is-multiline />
+          <CommonClipboardInputWithToast
+            v-if="authUrl"
+            :value="authUrl"
+            is-multiline
+            class="scale-90"
+          />
           <p>
             `{code_challenge}` is an OAuth2 plain code challenge that your app needs to
             generate for each authentication request.
@@ -68,7 +73,7 @@ const authUrl = computed(() => {
 const dialogButtons = computed((): LayoutDialogButton[] => [
   {
     text: 'Close',
-    props: { color: 'outline', fullWidth: true },
+    props: { color: 'outline' },
     onClick: () => (isOpen.value = false)
   }
 ])

packages/frontend-2/components/settings/user/developer/CreateEditApplicationDialog.vue

@@ -4,7 +4,7 @@
       {{ props.application ? 'Edit application' : 'Create application' }}
     </template>
     <form @submit="onSubmit">
-      <div class="flex flex-col gap-6">
+      <div class="flex flex-col gap-4 mb-2">
         <FormTextInput
           v-model="name"
           label="Name"
@@ -199,14 +199,14 @@ const onSubmit = handleSubmit(async (applicationFormValues) => {
 const dialogButtons = computed((): LayoutDialogButton[] => [
   {
     text: 'Cancel',
-    props: { color: 'outline', fullWidth: true },
+    props: { color: 'outline' },
     onClick: () => {
       isOpen.value = false
     }
   },
   {
     text: props.application ? 'Save' : 'Create',
-    props: { fullWidth: true },
+    props: {},
     onClick: onSubmit
   }
 ])

packages/frontend-2/components/settings/user/developer/CreateTokenDialog.vue

@@ -2,7 +2,7 @@
   <LayoutDialog v-model:open="isOpen" max-width="sm" :buttons="dialogButtons">
     <template #header>Create token</template>
     <form @submit="onSubmit">
-      <div class="flex flex-col gap-6">
+      <div class="flex flex-col gap-4 mb-2">
         <FormTextInput
           v-model="name"
           label="Name"
@@ -107,14 +107,14 @@ const onSubmit = handleSubmit(async (tokenFormValues) => {
 const dialogButtons = computed((): LayoutDialogButton[] => [
   {
     text: 'Cancel',
-    props: { color: 'outline', fullWidth: true },
+    props: { color: 'outline' },
     onClick: () => {
       isOpen.value = false
     }
   },
   {
     text: 'Create',
-    props: { fullWidth: true },
+    props: {},
     onClick: onSubmit
   }
 ])

packages/frontend-2/components/settings/user/developer/CreateTokenSuccessDialog.vue

@@ -5,23 +5,21 @@
     :buttons="dialogButtons"
     title="Create Token"
   >
-    <div class="flex flex-col gap-6 text-sm text-foreground">
-      <div class="flex flex-col gap-3">
-        <h6 class="h6 font-medium text-center">Your new token:</h6>
+    <div class="flex flex-col gap-4 text-body-xs text-foreground">
+      <div class="flex flex-col gap-1">
+        <h6 class="font-medium">Your new token:</h6>
         <CommonClipboardInputWithToast :value="props.token" />
       </div>
       <div
-        class="flex gap-4 items-center bg-warning dark:bg-warning-lighter border-warning-darker dark:border-warning-lighter border rounded-lg py-2 pl-4 pr-8"
+        class="flex gap-4 items-center bg-highlight-1 border border-outline-3 rounded-lg py-2 pl-4 pr-8 text-foreground-2"
       >
-        <ExclamationTriangleIcon
-          class="h-8 w-8 mt-0.5 text-warning-darker dark:text-warning-darker"
-        />
-        <div class="text-warning-darker max-w-md">
+        <ExclamationTriangleIcon class="h-8 w-8 mt-0.5" />
+        <div class="max-w-md text-body-xs">
           <p>
-            <strong>Note:</strong>
+            <span class="font-medium">Note:</span>
             This is the first and last time you will be able to see the full token.
           </p>
-          <p><strong>Please copy paste it somewhere safe now.</strong></p>
+          <p class="font-medium">Please copy paste it somewhere safe now.</p>
         </div>
       </div>
     </div>
@@ -41,7 +39,7 @@ const isOpen = defineModel<boolean>('open', { required: true })
 const dialogButtons = computed((): LayoutDialogButton[] => [
   {
     text: 'Close',
-    props: { fullWidth: true },
+    props: {},
     onClick: () => (isOpen.value = false)
   }
 ])

packages/frontend-2/components/settings/user/developer/DeleteDialog.vue

@@ -1,7 +1,7 @@
 <template>
-  <LayoutDialog v-model:open="isOpen" max-width="sm" :buttons="dialogButtons">
+  <LayoutDialog v-model:open="isOpen" max-width="xs" :buttons="dialogButtons">
     <template #header>{{ title }}</template>
-    <div class="flex flex-col gap-6 text-sm text-foreground">
+    <div class="flex flex-col gap-2 text-body-xs text-foreground mb-2">
       <p>
         Are you sure you want to
         <strong>permanently {{ lowerFirst(itemActionVerb) }}</strong>
@@ -68,11 +68,11 @@ const isOpen = defineModel<boolean>('open', { required: true })
 
 const itemType = computed(() => {
   if (isToken(props.item)) {
-    return `Access Token`
+    return `access token`
   } else if (isApplication(props.item)) {
-    return `Application`
+    return `application`
   } else {
-    return 'Authorization'
+    return 'authorization'
   }
 })
 
@@ -194,12 +194,12 @@ const deleteConfirmed = async () => {
 const dialogButtons = computed((): LayoutDialogButton[] => [
   {
     text: 'Cancel',
-    props: { color: 'outline', fullWidth: true },
+    props: { color: 'outline' },
     onClick: (): boolean => (isOpen.value = false)
   },
   {
     text: itemActionVerb.value,
-    props: { color: 'danger', fullWidth: true },
+    props: { color: 'danger' },
     disabled: isLoading.value,
     onClick: deleteConfirmed
   }

packages/frontend-2/components/settings/user/developer/RevealSecretDialog.vue

@@ -1,17 +1,20 @@
 <template>
-  <LayoutDialog v-model:open="isOpen" max-width="sm" :buttons="dialogButtons">
+  <LayoutDialog v-model:open="isOpen" max-width="xs" :buttons="dialogButtons">
     <template #header>Reveal application secret</template>
-    <div class="grid grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-3 py-2 text-sm">
-      <div class="text-center sm:text-right font-medium sm:font-normal">App Name:</div>
+    <div class="flex gap-4 py-2 text-body-xs">
+      <div class="text-center sm:text-right w-28">App Name:</div>
       <p class="truncate text-center sm:text-left">{{ props.application?.name }}</p>
+    </div>
+    <div class="flex gap-4 py-2 text-body-xs">
       <div
-        class="text-center sm:text-right flex items-center justify-center sm:justify-end font-medium sm:font-normal"
+        class="text-center sm:text-right flex items-center justify-center sm:justify-end w-28"
       >
         App secret:
       </div>
       <div class="w-44 mx-auto sm:ml-0">
         <CommonClipboardInputWithToast
           v-if="props.application?.secret"
+          class="scale-90"
           :value="props.application?.secret"
         />
       </div>
@@ -32,7 +35,7 @@ const isOpen = defineModel<boolean>('open', { required: true })
 const dialogButtons = computed((): LayoutDialogButton[] => [
   {
     text: 'Close',
-    props: { fullWidth: true },
+    props: { color: 'outline' },
     onClick: () => {
       isOpen.value = false
     }

packages/frontend-2/components/settings/user/email/DeleteDialog.vue

@@ -35,14 +35,14 @@ const { triggerNotification } = useGlobalToast()
 const dialogButtons = computed((): LayoutDialogButton[] => [
   {
     text: 'Cancel',
-    props: { color: 'outline', fullWidth: true },
+    props: { color: 'outline' },
     onClick: () => {
       isOpen.value = false
     }
   },
   {
     text: 'Delete',
-    props: { color: 'primary', fullWidth: true },
+    props: { color: 'primary' },
     onClick: () => {
       onDeleteEmail()
     }

packages/frontend-2/components/settings/user/email/SetPrimaryDialog.vue

@@ -35,14 +35,14 @@ const { mutate: updateMutation } = useMutation(settingsSetPrimaryUserEmailMutati
 const dialogButtons = computed((): LayoutDialogButton[] => [
   {
     text: 'Cancel',
-    props: { color: 'outline', fullWidth: true, outline: true },
+    props: { color: 'outline', outline: true },
     onClick: () => {
       isOpen.value = false
     }
   },
   {
     text: 'Make primary',
-    props: { color: 'primary', fullWidth: true },
+    props: { color: 'primary' },
     onClick: () => {
       onSetPrimary()
       isOpen.value = false

packages/frontend-2/components/settings/workspaces/General/DeleteDialog.vue

@@ -121,7 +121,7 @@ const onDelete = async () => {
 const dialogButtons = computed((): LayoutDialogButton[] => [
   {
     text: 'Cancel',
-    props: { color: 'outline', fullWidth: true },
+    props: { color: 'outline' },
     onClick: () => {
       isOpen.value = false
     }
@@ -129,7 +129,6 @@ const dialogButtons = computed((): LayoutDialogButton[] => [
   {
     text: 'Delete',
     props: {
-      fullWidth: true,
       color: 'danger'
     },
     onClick: onDelete

packages/frontend-2/components/settings/workspaces/General/LeaveDialog.vue

@@ -2,13 +2,13 @@
   <LayoutDialog
     v-model:open="isOpen"
     title="Leave workspace"
-    max-width="sm"
+    max-width="xs"
     :buttons="dialogButtons"
   >
-    <p class="text-body-xs text-foreground">
-      Are you sure you want to leave the
+    <p class="text-body-xs text-foreground mb-2">
+      Are you sure you want to leave
       <span class="font-medium">{{ workspace.name }}</span>
-      workspace?
+      ?
     </p>
   </LayoutDialog>
 </template>
@@ -112,7 +112,7 @@ const onLeave = async () => {
 const dialogButtons = computed((): LayoutDialogButton[] => [
   {
     text: 'Cancel',
-    props: { color: 'outline', fullWidth: true },
+    props: { color: 'outline' },
     onClick: () => {
       isOpen.value = false
     }
@@ -120,8 +120,7 @@ const dialogButtons = computed((): LayoutDialogButton[] => [
   {
     text: 'Leave',
     props: {
-      fullWidth: true,
-      color: 'danger'
+      color: 'primary'
     },
     onClick: onLeave
   }

packages/frontend-2/components/settings/workspaces/Members.vue

@@ -5,6 +5,7 @@
         hide-divider
         title="Members"
         text="Manage users in your workspace"
+        class="mb-6"
       />
       <LayoutTabsHorizontal v-model:active-item="activeTab" :items="tabItems">
         <template #default="{ activeItem }">

packages/frontend-2/components/settings/workspaces/members/MembersTable.vue

@@ -210,7 +210,7 @@ const filteredActionsItems = (user: UserItem) => {
 
   // Allow role change if the active user is an admin
   if (isWorkspaceAdmin.value) {
-    baseItems.push([{ title: 'Change role...', id: ActionTypes.ChangeRole }])
+    baseItems.push([{ title: 'Update role...', id: ActionTypes.ChangeRole }])
   }
 
   // Allow the current user to leave the workspace

packages/frontend-2/components/settings/workspaces/security/DomainRemoveDialog.vue

@@ -104,7 +104,7 @@ const handleRemove = async () => {
 const dialogButtons = computed((): LayoutDialogButton[] => [
   {
     text: 'Cancel',
-    props: { color: 'outline', fullWidth: true },
+    props: { color: 'outline' },
     onClick: () => {
       isOpen.value = false
     }
@@ -112,7 +112,6 @@ const dialogButtons = computed((): LayoutDialogButton[] => [
   {
     text: 'Remove',
     props: {
-      fullWidth: true,
       color: 'danger'
     },
     onClick: handleRemove

packages/frontend-2/components/viewer/anchored-point/thread/CommentAttachments.vue

@@ -150,7 +150,6 @@ const dialogButtons = computed((): Optional<LayoutDialogButton[]> => {
       ? prettyFileSize(dialogAttachment.value.fileSize)
       : 'Download',
     props: {
-      fullWidth: true,
       iconLeft: ArrowDownTrayIcon
     },
     onClick: () => {

packages/frontend-2/components/viewer/resources/add-model/Dialog.vue

@@ -1,5 +1,5 @@
 <template>
-  <LayoutDialog v-model:open="open" max-width="lg">
+  <LayoutDialog v-model:open="open" max-width="md">
     <template #header>Add model</template>
     <div class="flex flex-col gap-y-4">
       <LayoutTabsHorizontal v-model:active-item="activeTab" :items="tabItems">

packages/frontend-2/components/viewer/resources/add-model/DialogObjectTab.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="flex flex-col gap-y-4">
-    <div class="text-foreground normal text-sm sm:text-base">
+    <div class="text-foreground text-body-xs">
       Add objects from the current project by their IDs or an Object URL.
     </div>
     <form

packages/frontend-2/components/workspace/CreateDialog.vue

@@ -2,9 +2,8 @@
   <LayoutDialog
     v-model:open="isOpen"
     max-width="sm"
-    hide-closer
     :buttons="dialogButtons"
-    title="Create workspace"
+    title="Create a new workspace"
   >
     <div class="flex flex-col gap-4 w-full">
       <FormTextInput
@@ -20,7 +19,7 @@
       <FormTextInput
         v-model:model-value="workspaceDescription"
         name="description"
-        label="Description"
+        label="Workspace description"
         placeholder="Workspace description"
         :rules="[isStringOfLength({ maxLength: 512 })]"
         color="foundation"
@@ -70,7 +69,7 @@ const defaultLogoIndex = ref<number>(0)
 const dialogButtons = computed((): LayoutDialogButton[] => [
   {
     text: 'Cancel',
-    props: { color: 'outline', fullWidth: true },
+    props: { color: 'outline' },
     onClick: () => {
       isOpen.value = false
     }
@@ -78,7 +77,6 @@ const dialogButtons = computed((): LayoutDialogButton[] => [
   {
     text: 'Create',
     props: {
-      fullWidth: true,
       color: 'primary'
     },
     onClick: handleCreateWorkspace

packages/frontend-2/components/workspace/InviteDialog.vue

@@ -4,7 +4,6 @@
     max-width="sm"
     title="Invite people to workspace"
     :buttons="buttons"
-    buttons-wrapper-classes="flex-row-reverse"
   >
     <div>
       <FormTextInput

packages/frontend-2/pages/projects/[id]/index.vue

@@ -8,7 +8,7 @@
         @processed="onInviteAccepted"
       />
       <div
-        class="flex flex-col md:flex-row md:justify-between md:items-center gap-6 my-2"
+        class="flex flex-col md:flex-row md:justify-between md:items-center gap-6 mt-2 mb-6"
       >
         <ProjectPageHeader :project="project" />
         <div class="flex gap-x-3 items-center justify-between">

packages/ui-components/src/components/form/Button.stories.ts

@@ -181,7 +181,6 @@ export const NoTarget: StoryObj = mergeStories(Default, {
 
 export const FullWidth: StoryObj = mergeStories(Default, {
   args: {
-    fullWidth: true,
     default: 'Full width button'
   }
 })

packages/ui-components/src/components/layout/Dialog.stories.ts

@@ -59,16 +59,14 @@ export const HeaderAndFooter = {
         text: 'Close',
         props: {
           color: 'outline',
-          link: false,
-          fullWidth: true
+          link: false
         }
       },
       {
         text: 'Save',
         props: {
           color: 'default',
-          link: false,
-          fullWidth: true
+          link: false
         }
       }
     ]
@@ -93,8 +91,7 @@ export const WithSubmit = {
         text: 'Submit',
         props: {
           color: 'default',
-          submit: true,
-          fullWidth: true
+          submit: true
         }
       }
     ]

packages/ui-components/src/components/layout/Dialog.vue

@@ -49,11 +49,11 @@
             >
               <div
                 v-if="hasTitle"
-                class="border-b border-outline-2"
+                class="border-b border-outline-3"
                 :class="scrolledFromTop && 'relative z-20 shadow-lg'"
               >
                 <div
-                  class="flex items-center justify-start rounded-t-lg shrink-0 min-h-[2rem] sm:min-h-[3rem] px-6 py-4 truncate text-heading"
+                  class="flex items-center justify-start rounded-t-lg shrink-0 min-h-[2rem] sm:min-h-[3rem] px-6 py-4 truncate text-heading-sm"
                 >
                   <div class="flex items-center pr-12">
                     <ChevronLeftIcon
@@ -80,21 +80,19 @@
                 v-if="!hideCloser"
                 color="subtle"
                 size="sm"
-                :icon-right="XMarkIcon"
-                hide-text
-                class="absolute z-20 top-4 right-5"
+                class="absolute z-20 top-4 right-5 shrink-0 !w-6 !h-6 !p-0"
                 @click="open = false"
               >
-                <XMarkIcon class="h-4 w-4 md:w-5 md:h-5" />
+                <XMarkIcon class="h-6 w-6 text-foreground-2" />
               </FormButton>
               <div ref="slotContainer" :class="slotContainerClasses" @scroll="onScroll">
                 <slot>Put your content here!</slot>
               </div>
               <div
                 v-if="hasButtons"
-                class="relative z-50 flex px-6 py-3 space-x-3 shrink-0 bg-foundation-page"
+                class="relative z-50 flex justify-end px-6 pb-6 space-x-2 shrink-0 bg-foundation-page"
                 :class="{
-                  'shadow-t': !scrolledToBottom,
+                  'shadow-t pt-6': !scrolledToBottom,
                   [buttonsWrapperClasses || '']: true
                 }"
               >
@@ -130,7 +128,7 @@ import { computed, ref, useSlots, watch, onUnmounted } from 'vue'
 import { throttle } from 'lodash'
 import { isClient } from '@vueuse/core'
 
-type MaxWidthValue = 'sm' | 'md' | 'lg' | 'xl'
+type MaxWidthValue = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
 type FullscreenValues = 'mobile' | 'desktop' | 'all' | 'none'
 
 const emit = defineEmits<{
@@ -192,14 +190,16 @@ const open = computed({
 
 const maxWidthWeight = computed(() => {
   switch (props.maxWidth) {
-    case 'sm':
+    case 'xs':
       return 0
-    case 'md':
+    case 'sm':
       return 1
-    case 'lg':
+    case 'md':
       return 2
-    case 'xl':
+    case 'lg':
       return 3
+    case 'xl':
+      return 4
     default:
       return 10000
   }
@@ -209,22 +209,22 @@ const widthClasses = computed(() => {
   const classParts: string[] = ['w-full', 'sm:w-full']
 
   if (!isFullscreenDesktop.value) {
-    classParts.push('md:max-w-2xl')
-
     if (maxWidthWeight.value === 0) {
-      classParts.push('md:max-w-lg')
+      classParts.push('md:max-w-sm')
     }
     if (maxWidthWeight.value >= 1) {
-      classParts.push('md:max-w-2xl')
+      classParts.push('md:max-w-lg')
     }
     if (maxWidthWeight.value >= 2) {
-      classParts.push('lg:max-w-4xl')
+      classParts.push('md:max-w-2xl')
     }
     if (maxWidthWeight.value >= 3) {
-      classParts.push('xl:max-w-6xl')
+      classParts.push('lg:max-w-3xl')
     }
     if (maxWidthWeight.value >= 4) {
-      classParts.push('2xl:max-w-7xl')
+      classParts.push('xl:max-w-6xl')
+    } else {
+      classParts.push('md:max-w-2xl')
     }
   }
 

packages/ui-components/src/components/layout/tabs/Horizontal.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="relative z-10 flex flex-col space-y-4 md:space-y-6">
+  <div class="relative z-10 flex flex-col !mt-0">
     <!-- Left Arrow Button -->
     <div
       class="absolute left-[-2px] top-[-2px] z-20 pr-8 bg-gradient-to-r from-foundation-page to-transparent"
@@ -84,7 +84,7 @@
         <ArrowLongRightIcon class="h-4 w-4" />
       </button>
     </div>
-    <div>
+    <div class="pt-4">
       <slot :active-item="activeItem" />
     </div>
   </div>
@@ -119,7 +119,7 @@ const buttonClass = computed(() => {
       'flex',
       'items-center',
       'disabled:opacity-60 disabled:hover:border-transparent disabled:cursor-not-allowed disabled:hover:bg-transparent',
-      'text-body-sm',
+      'text-body-xs',
       'hover:sm:border-outline-2',
       'pb-2',
       'border-b-[2px]',