From b71a27a0f43ddc0004d0f18ea075829502970db1 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 2 Aug 2022 19:22:14 +0100
Subject: [PATCH] Update styles of user details page and user list page to
 match new designs

---
 .../portal/manage/users/[userId].svelte       | 91 ++++++++++---------
 .../builder/portal/manage/users/index.svelte  |  1 -
 2 files changed, 50 insertions(+), 42 deletions(-)
diff --git a/packages/builder/src/pages/builder/portal/manage/users/[userId].svelte b/packages/builder/src/pages/builder/portal/manage/users/[userId].svelte
index 74a1629357..8019c567a2 100644
--- a/packages/builder/src/pages/builder/portal/manage/users/[userId].svelte
+++ b/packages/builder/src/pages/builder/portal/manage/users/[userId].svelte
@@ -18,6 +18,7 @@
     Select,
     Modal,
     notifications,
+    Divider,
     StatusLight,
   } from "@budibase/bbui"
   import { onMount } from "svelte"
@@ -222,7 +223,8 @@
         Back
       </ActionButton>
     </div>
-    <Layout noPadding gap="S">
+
+    <Layout noPadding gap="M">
       <div class="title">
         <div>
           <div style="display: flex;">
@@ -251,48 +253,56 @@
           </div>
         {/if}
       </div>
-      <div class="fields">
-        <div class="field">
-          <Label size="L">First name</Label>
-          <Input
-            thin
-            value={$userFetch?.data?.firstName}
-            on:blur={updateUserFirstName}
-          />
-        </div>
-        <div class="field">
-          <Label size="L">Last name</Label>
-          <Input
-            thin
-            value={$userFetch?.data?.lastName}
-            on:blur={updateUserLastName}
-          />
-        </div>
-        <!-- don't let a user remove the privileges that let them be here -->
-        {#if userId !== $auth.user._id}
+      <Divider size="S" />
+      <Layout noPadding gap="S">
+        <Heading size="S">Details</Heading>
+        <div class="fields">
           <div class="field">
-            <Label size="L">Role</Label>
-            <Select
-              value={globalRole}
-              options={Constants.BbRoles}
-              on:change={updateUserRole}
+            <Label size="L">Email</Label>
+            <Input disabled value={$userFetch?.data?.email} />
+          </div>
+          <div class="field">
+            <Label size="L">First name</Label>
+            <Input
+              value={$userFetch?.data?.firstName}
+              on:blur={updateUserFirstName}
             />
           </div>
-        {/if}
-      </div>
+          <div class="field">
+            <Label size="L">Last name</Label>
+            <Input
+              value={$userFetch?.data?.lastName}
+              on:blur={updateUserLastName}
+            />
+          </div>
+          <!-- don't let a user remove the privileges that let them be here -->
+          {#if userId !== $auth.user._id}
+            <div class="field">
+              <Label size="L">Role</Label>
+              <Select
+                value={globalRole}
+                options={Constants.BbRoles}
+                on:change={updateUserRole}
+              />
+            </div>
+          {/if}
+        </div>
+      </Layout>
     </Layout>
 
     {#if hasGroupsLicense}
       <!-- User groups -->
       <Layout gap="S" noPadding>
         <div class="tableTitle">
-          <div>
-            <Heading size="S">User groups</Heading>
-            <Body size="S">Add or remove this user from user groups</Body>
-          </div>
+          <Heading size="S">Groups</Heading>
           <div bind:this={popoverAnchor}>
-            <Button on:click={popover.show()} icon="UserGroup" cta>
-              Add user group
+            <Button
+              on:click={popover.show()}
+              icon="UserGroup"
+              secondary
+              newStyles
+            >
+              Add to group
             </Button>
           </div>
           <Popover align="right" bind:this={popover} anchor={popoverAnchor}>
@@ -307,7 +317,6 @@
             />
           </Popover>
         </div>
-
         <List>
           {#if userGroups.length}
             {#each userGroups as group}
@@ -315,6 +324,8 @@
                 title={group.name}
                 icon={group.icon}
                 iconBackground={group.color}
+                hoverable
+                on:click={() => $goto(`../groups/${group._id}`)}
               >
                 <Icon
                   on:click={removeGroup(group._id)}
@@ -330,12 +341,9 @@
         </List>
       </Layout>
     {/if}
-    <!-- User Apps -->
+
     <Layout gap="S" noPadding>
-      <div>
-        <Heading size="S">Apps</Heading>
-        <Body size="S">Manage apps that this user has been assigned to</Body>
-      </div>
+      <Heading size="S">Apps</Heading>
       <List>
         {#if allAppList.length}
           {#each allAppList as app}
@@ -344,7 +352,7 @@
               iconBackground={app?.icon?.color || ""}
               icon={app?.icon?.name || "Apps"}
               hoverable
-              on:click={$goto(`../../overview/${app.devId}`)}
+              on:click={() => $goto(`../../overview/${app.devId}`)}
             >
               <div class="title ">
                 <StatusLight
@@ -381,7 +389,7 @@
   }
   .field {
     display: grid;
-    grid-template-columns: 100px 1fr;
+    grid-template-columns: 120px 1fr;
     align-items: center;
   }
 
@@ -394,6 +402,7 @@
   .tableTitle {
     display: flex;
     justify-content: space-between;
+    align-items: flex-end;
   }
 
   .subtitle {
diff --git a/packages/builder/src/pages/builder/portal/manage/users/index.svelte b/packages/builder/src/pages/builder/portal/manage/users/index.svelte
index 0de147ee2f..ebe020aade 100644
--- a/packages/builder/src/pages/builder/portal/manage/users/index.svelte
+++ b/packages/builder/src/pages/builder/portal/manage/users/index.svelte
@@ -219,7 +219,6 @@
     <Body>Add users and control who gets access to your published apps</Body>
   </Layout>
   <Divider size="S" />
-
   <div class="controls">
     <ButtonGroup>
       <Button
