Update styles in user details page and user list page

4 years ago · e8fa134c7c
3 changed files with 62 additions and 95 deletions
--- a/packages/builder/src/pages/builder/portal/manage/users/[userId].svelte
+++ b/packages/builder/src/pages/builder/portal/manage/users/[userId].svelte
@ -216,15 +216,13 @@
 </script>

 {#if loaded}
-  <Layout gap="L" noPadding>
-    <Layout gap="XS" noPadding>
-      <div>
-        <ActionButton on:click={() => $goto("./")} icon="ArrowLeft">
-          Back
-        </ActionButton>
-      </div>
-    </Layout>
-    <Layout gap="XS" noPadding>
+  <Layout gap="XL" noPadding>
+    <div>
+      <ActionButton on:click={() => $goto("./")} icon="ArrowLeft">
+        Back
+      </ActionButton>
+    </div>
+    <Layout noPadding gap="S">
      <div class="title">
        <div>
          <div style="display: flex;">
@ -253,8 +251,6 @@
          </div>
        {/if}
      </div>
-    </Layout>
-    <Layout gap="S" noPadding>
      <div class="fields">
        <div class="field">
          <Label size="L">First name</Label>
@ -291,7 +287,7 @@
      <Layout gap="S" noPadding>
        <div class="tableTitle">
          <div>
-            <Heading size="XS">User groups</Heading>
+            <Heading size="S">User groups</Heading>
            <Body size="S">Add or remove this user from user groups</Body>
          </div>
          <div bind:this={popoverAnchor}>
@ -337,7 +333,7 @@
    <!-- User Apps -->
    <Layout gap="S" noPadding>
      <div>
-        <Heading size="XS">Apps</Heading>
+        <Heading size="S">Apps</Heading>
        <Body size="S">Manage apps that this user has been assigned to</Body>
      </div>
      <List>
--- a/packages/builder/src/pages/builder/portal/manage/users/_components/RoleTableRenderer.svelte
+++ b/packages/builder/src/pages/builder/portal/manage/users/_components/RoleTableRenderer.svelte
@ -3,14 +3,18 @@
  import { Constants } from "@budibase/frontend-core"

  export let row
-  $: value =
-    Constants.BbRoles.find(x => x.value === users.getUserRole(row))?.label ||
-    "Not Available"
+
+  const TooltipMap = {
+    appUser: "Only has access to published apps",
+    developer: "Access to the app builder",
+    admin: "Full access",
+  }
+
+  $: role = Constants.BbRoles.find(x => x.value === users.getUserRole(row))
+  $: value = role?.label || "Not available"
+  $: tooltip = TooltipMap[role?.value] || ""
 </script>

-<div on:click|stopPropagation>
+<div on:click|stopPropagation title={tooltip}>
  {value}
 </div>
-
-<style>
-</style>
--- a/packages/builder/src/pages/builder/portal/manage/users/index.svelte
+++ b/packages/builder/src/pages/builder/portal/manage/users/index.svelte
@ -8,11 +8,9 @@
    Layout,
    Modal,
    ModalContent,
-    Icon,
+    Search,
    notifications,
    Pagination,
-    Search,
-    Label,
  } from "@budibase/bbui"
  import AddUserModal from "./_components/AddUserModal.svelte"
  import { users, groups, auth } from "stores/portal"
@ -30,21 +28,6 @@
  import { Constants } from "@budibase/frontend-core"
  import { get } from "svelte/store"

-  const accessTypes = [
-    {
-      icon: "User",
-      description: "App user - Only has access to published apps",
-    },
-    {
-      icon: "Hammer",
-      description: "Developer - Access to the app builder",
-    },
-    {
-      icon: "Draw",
-      description: "Admin - Full access",
-    },
-  ]
-
  //let email
  let enrichedUsers = []
  let createUserModal,
@ -236,19 +219,8 @@
  <Layout gap="XS" noPadding>
    <Heading>Users</Heading>
    <Body>Add users and control who gets access to your published apps</Body>
-
-    <div>
-      {#each accessTypes as type}
-        <div class="access-description">
-          <Icon name={type.icon} />
-          <div class="access-text">
-            <Body size="S">{type.description}</Body>
-          </div>
-        </div>
-      {/each}
-    </div>
  </Layout>
-  <Layout gap="S" noPadding>
+  <div class="controls">
    <ButtonGroup>
      <Button
        dataCy="add-user"
@ -256,39 +228,43 @@
        icon="UserAdd"
        cta>Add users</Button
      >
-      <Button on:click={importUsersModal.show} icon="Import" primary
-        >Import users</Button
+      <Button
+        on:click={importUsersModal.show}
+        icon="Import"
+        secondary
+        newStyles
      >
-
-      <div class="field">
-        <Label size="L">Search email</Label>
-        <Search bind:value={searchEmail} placeholder="" />
-      </div>
+        Import users
+      </Button>
+    </ButtonGroup>
+    <div class="controls-right">
+      <Search bind:value={searchEmail} placeholder="Search email" />
      {#if selectedRows.length > 0}
        <DeleteRowsButton on:updaterows {selectedRows} {deleteRows} />
      {/if}
-    </ButtonGroup>
-    <Table
-      on:click={({ detail }) => $goto(`./${detail._id}`)}
-      {schema}
-      bind:selectedRows
-      data={enrichedUsers}
-      allowEditColumns={false}
-      allowEditRows={false}
-      allowSelectRows={true}
-      showHeaderBorder={false}
-      {customRenderers}
-    />
-    <div class="pagination">
-      <Pagination
-        page={$pageInfo.pageNumber}
-        hasPrevPage={$pageInfo.loading ? false : $pageInfo.hasPrevPage}
-        hasNextPage={$pageInfo.loading ? false : $pageInfo.hasNextPage}
-        goToPrevPage={pageInfo.prevPage}
-        goToNextPage={pageInfo.nextPage}
-      />
    </div>
-  </Layout>
+  </div>
+
+  <Table
+    on:click={({ detail }) => $goto(`./${detail._id}`)}
+    {schema}
+    bind:selectedRows
+    data={enrichedUsers}
+    allowEditColumns={false}
+    allowEditRows={false}
+    allowSelectRows={true}
+    showHeaderBorder={false}
+    {customRenderers}
+  />
+  <div class="pagination">
+    <Pagination
+      page={$pageInfo.pageNumber}
+      hasPrevPage={$pageInfo.loading ? false : $pageInfo.hasPrevPage}
+      hasNextPage={$pageInfo.loading ? false : $pageInfo.hasNextPage}
+      goToPrevPage={pageInfo.prevPage}
+      goToNextPage={pageInfo.nextPage}
+    />
+  </div>
 </Layout>

 <Modal bind:this={createUserModal}>
@ -325,28 +301,19 @@
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
-    margin-top: var(--spacing-xl);
  }

-  .field {
+  .controls {
    display: flex;
-    align-items: center;
    flex-direction: row;
-    grid-gap: var(--spacing-m);
-    margin-left: auto;
-  }
-
-  .field > :global(*) + :global(*) {
-    margin-left: var(--spacing-m);
+    justify-content: space-between;
+    align-items: center;
  }
-
-  .access-description {
+  .controls-right {
    display: flex;
-    margin-top: var(--spacing-xl);
-    opacity: 0.8;
-  }
-
-  .access-text {
-    margin-left: var(--spacing-m);
+    flex-direction: row;
+    justify-content: flex-end;
+    align-items: center;
+    gap: var(--spacing-xl);
  }
 </style>