refactor: migrate create user form to immich ui (#15350)

* refactor: migrate create user form to immich ui

* minor styling tweak

* remove unintentional commit

* revert formating diff

---------

Co-authored-by: Alex Tran <alex.tran1502@gmail.com>

web/src/routes/admin/user-management/+page.svelte

@@ -2,9 +2,6 @@
   import { page } from '$app/stores';
   import DeleteConfirmDialog from '$lib/components/admin-page/delete-confirm-dialogue.svelte';
   import RestoreDialogue from '$lib/components/admin-page/restore-dialogue.svelte';
-  import Button from '$lib/components/elements/buttons/button.svelte';
-  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
-  import LinkButton from '$lib/components/elements/buttons/link-button.svelte';
   import Icon from '$lib/components/elements/icon.svelte';
   import CreateUserForm from '$lib/components/forms/create-user-form.svelte';
   import EditUserForm from '$lib/components/forms/edit-user-form.svelte';
@@ -15,12 +12,13 @@
     notificationController,
   } from '$lib/components/shared-components/notification/notification';
   import { locale } from '$lib/stores/preferences.store';
-  import { serverConfig, featureFlags } from '$lib/stores/server-config.store';
+  import { featureFlags, serverConfig } from '$lib/stores/server-config.store';
   import { user } from '$lib/stores/user.store';
   import { websocketEvents } from '$lib/stores/websocket';
   import { copyToClipboard } from '$lib/utils';
   import { getByteUnitString } from '$lib/utils/byte-units';
   import { UserStatus, searchUsersAdmin, type UserAdminResponseDto } from '@immich/sdk';
+  import { Button, Code, IconButton, Text } from '@immich/ui';
   import { mdiContentCopy, mdiDeleteRestore, mdiInfinity, mdiPencilOutline, mdiTrashCanOutline } from '@mdi/js';
   import { DateTime } from 'luxon';
   import { onMount } from 'svelte';
@@ -161,22 +159,21 @@
         >
           {#snippet promptSnippet()}
             <div class="flex flex-col gap-4">
-              <p>{$t('admin.user_password_has_been_reset')}</p>
+              <Text>{$t('admin.user_password_has_been_reset')}</Text>
 
-              <div class="flex justify-center gap-2">
-                <code
-                  class="rounded-md bg-gray-200 px-2 py-1 font-bold text-immich-primary dark:text-immich-dark-primary dark:bg-gray-700"
-                >
-                  {newPassword}
-                </code>
-                <LinkButton onclick={() => copyToClipboard(newPassword)} title={$t('copy_password')}>
-                  <div class="flex place-items-center gap-2 text-sm">
-                    <Icon path={mdiContentCopy} size="18" />
-                  </div>
-                </LinkButton>
+              <div class="flex justify-center gap-2 items-center">
+                <Code color="primary">{newPassword}</Code>
+                <IconButton
+                  icon={mdiContentCopy}
+                  shape="round"
+                  color="secondary"
+                  variant="ghost"
+                  onclick={() => copyToClipboard(newPassword)}
+                  title={$t('copy_password')}
+                />
               </div>
 
-              <p>{$t('admin.user_password_reset_description')}</p>
+              <Text>{$t('admin.user_password_reset_description')}</Text>
             </div>
           {/snippet}
         </ConfirmDialog>
@@ -222,31 +219,31 @@
                   class="flex flex-row flex-wrap justify-center gap-x-2 gap-y-1 w-4/12 lg:w-3/12 xl:w-2/12 text-ellipsis break-all text-sm"
                 >
                   {#if !immichUser.deletedAt}
-                    <CircleIconButton
+                    <IconButton
+                      shape="round"
+                      size="large"
                       icon={mdiPencilOutline}
                       title={$t('edit_user')}
-                      color="primary"
-                      size="16"
                       onclick={() => editUserHandler(immichUser)}
                     />
                     {#if immichUser.id !== $user.id}
-                      <CircleIconButton
+                      <IconButton
+                        shape="round"
+                        size="large"
                         icon={mdiTrashCanOutline}
                         title={$t('delete_user')}
-                        color="primary"
-                        size="16"
                         onclick={() => deleteUserHandler(immichUser)}
                       />
                     {/if}
                   {/if}
                   {#if immichUser.deletedAt && immichUser.status === UserStatus.Deleted}
-                    <CircleIconButton
+                    <IconButton
+                      shape="round"
+                      size="large"
                       icon={mdiDeleteRestore}
                       title={$t('admin.user_restore_scheduled_removal', {
                         values: { date: getDeleteDate(immichUser.deletedAt) },
                       })}
-                      color="primary"
-                      size="16"
                       onclick={() => restoreUserHandler(immichUser)}
                     />
                   {/if}
@@ -256,8 +253,7 @@
           {/if}
         </tbody>
       </table>
-
-      <Button size="sm" onclick={() => (shouldShowCreateUserForm = true)}>{$t('create_user')}</Button>
+      <Button shape="round" onclick={() => (shouldShowCreateUserForm = true)}>{$t('create_user')}</Button>
     </section>
   </section>
 </UserPageLayout>