From 810257bcf5feaf9ccfc26ca56cdc00bb5314a5e3 Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Wed, 31 Mar 2021 20:57:30 -0700
Subject: [PATCH] fix: Improve dark mode styling fix: Improve user and group
 list styling fix: Member list reload when changing permissions, closes #1999

---
 app/components/GroupListItem.js               |  8 ++---
 app/components/List/Item.js                   |  8 ++---
 app/menus/MemberMenu.js                       |  3 +-
 .../CollectionGroupMemberListItem.js          | 11 ++++++-
 .../components/MemberListItem.js              | 30 ++++++++++++++-----
 .../components/UserListItem.js                |  2 +-
 app/scenes/CollectionPermissions/index.js     |  1 +
 .../components/GroupMemberListItem.js         |  2 +-
 .../Settings/components/UserListItem.js       |  2 +-
 shared/styles/theme.js                        |  4 +--
 10 files changed, 47 insertions(+), 24 deletions(-)

diff --git a/app/components/GroupListItem.js b/app/components/GroupListItem.js
index 48155691..249080eb 100644
--- a/app/components/GroupListItem.js
+++ b/app/components/GroupListItem.js
@@ -52,7 +52,7 @@ class GroupListItem extends React.Component<Props> {
         <ListItem
           image={
             <Image>
-              <GroupIcon size={28} />
+              <GroupIcon size={24} />
             </Image>
           }
           title={
@@ -94,10 +94,10 @@ class GroupListItem extends React.Component<Props> {
 const Image = styled(Flex)`
   align-items: center;
   justify-content: center;
-  width: 40px;
-  height: 40px;
+  width: 32px;
+  height: 32px;
   background: ${(props) => props.theme.secondaryBackground};
-  border-radius: 20px;
+  border-radius: 32px;
 `;
 
 const Title = styled.span`
diff --git a/app/components/List/Item.js b/app/components/List/Item.js
index f38df86a..587d4cab 100644
--- a/app/components/List/Item.js
+++ b/app/components/List/Item.js
@@ -27,7 +27,7 @@ const ListItem = ({ image, title, subtitle, actions }: Props) => {
 
 const Wrapper = styled.li`
   display: flex;
-  padding: 8px 0;
+  padding: 10px 0;
   margin: 0;
   border-bottom: 1px solid ${(props) => props.theme.divider};
 
@@ -38,17 +38,17 @@ const Wrapper = styled.li`
 
 const Image = styled(Flex)`
   padding: 0 8px 0 0;
-  max-height: 40px;
+  max-height: 32px;
   align-items: center;
   user-select: none;
   flex-shrink: 0;
-  align-self: flex-start;
+  align-self: center;
 `;
 
 const Heading = styled.p`
   font-size: 16px;
   font-weight: 500;
-  line-height: 1.2;
+  line-height: 1.1;
   margin: 0;
 `;
 
diff --git a/app/menus/MemberMenu.js b/app/menus/MemberMenu.js
index 6ea1ab89..cfc84652 100644
--- a/app/menus/MemberMenu.js
+++ b/app/menus/MemberMenu.js
@@ -1,5 +1,4 @@
 // @flow
-import { observer } from "mobx-react";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { useMenuState } from "reakit/Menu";
@@ -33,4 +32,4 @@ function MemberMenu({ onRemove }: Props) {
   );
 }
 
-export default observer(MemberMenu);
+export default MemberMenu;
diff --git a/app/scenes/CollectionPermissions/components/CollectionGroupMemberListItem.js b/app/scenes/CollectionPermissions/components/CollectionGroupMemberListItem.js
index a3aecc99..bc988b9d 100644
--- a/app/scenes/CollectionPermissions/components/CollectionGroupMemberListItem.js
+++ b/app/scenes/CollectionPermissions/components/CollectionGroupMemberListItem.js
@@ -49,7 +49,8 @@ const CollectionGroupMemberListItem = ({
             }
             onChange={(ev) => onUpdate(ev.target.value)}
             labelHidden
-          />{" "}
+          />
+          <Spacer />
           <CollectionGroupMemberMenu
             onMembers={openMembersModal}
             onRemove={onRemove}
@@ -60,10 +61,18 @@ const CollectionGroupMemberListItem = ({
   );
 };
 
+const Spacer = styled.div`
+  width: 8px;
+`;
+
 const Select = styled(InputSelect)`
   margin: 0;
   font-size: 14px;
   border-color: transparent;
+
+  select {
+    margin: 0;
+  }
 `;
 
 export default CollectionGroupMemberListItem;
diff --git a/app/scenes/CollectionPermissions/components/MemberListItem.js b/app/scenes/CollectionPermissions/components/MemberListItem.js
index 870cd7f0..e3e2f49f 100644
--- a/app/scenes/CollectionPermissions/components/MemberListItem.js
+++ b/app/scenes/CollectionPermissions/components/MemberListItem.js
@@ -56,23 +56,29 @@ const MemberListItem = ({
           {user.isAdmin && <Badge primary={user.isAdmin}>{t("Admin")}</Badge>}
         </>
       }
-      image={<Avatar src={user.avatarUrl} size={40} />}
+      image={<Avatar src={user.avatarUrl} size={32} />}
       actions={
         <Flex align="center">
-          {canEdit && onUpdate && (
+          {onUpdate && (
             <Select
               label={t("Permissions")}
               options={PERMISSIONS}
               value={membership ? membership.permission : undefined}
               onChange={(ev) => onUpdate(ev.target.value)}
+              disabled={!canEdit}
               labelHidden
             />
-          )}{" "}
-          {canEdit && onRemove && <MemberMenu onRemove={onRemove} />}
-          {canEdit && onAdd && (
-            <Button onClick={onAdd} neutral>
-              {t("Add")}
-            </Button>
+          )}
+          {canEdit && (
+            <>
+              <Spacer />
+              {onRemove && <MemberMenu onRemove={onRemove} />}
+              {onAdd && (
+                <Button onClick={onAdd} neutral>
+                  {t("Add")}
+                </Button>
+              )}
+            </>
           )}
         </Flex>
       }
@@ -80,10 +86,18 @@ const MemberListItem = ({
   );
 };
 
+const Spacer = styled.div`
+  width: 8px;
+`;
+
 const Select = styled(InputSelect)`
   margin: 0;
   font-size: 14px;
   border-color: transparent;
+
+  select {
+    margin: 0;
+  }
 `;
 
 export default MemberListItem;
diff --git a/app/scenes/CollectionPermissions/components/UserListItem.js b/app/scenes/CollectionPermissions/components/UserListItem.js
index b97eeb72..815e1061 100644
--- a/app/scenes/CollectionPermissions/components/UserListItem.js
+++ b/app/scenes/CollectionPermissions/components/UserListItem.js
@@ -21,7 +21,7 @@ const UserListItem = ({ user, onAdd, canEdit }: Props) => {
   return (
     <ListItem
       title={user.name}
-      image={<Avatar src={user.avatarUrl} size={40} />}
+      image={<Avatar src={user.avatarUrl} size={32} />}
       subtitle={
         <>
           {user.lastActiveAt ? (
diff --git a/app/scenes/CollectionPermissions/index.js b/app/scenes/CollectionPermissions/index.js
index d929968f..cb84dfac 100644
--- a/app/scenes/CollectionPermissions/index.js
+++ b/app/scenes/CollectionPermissions/index.js
@@ -225,6 +225,7 @@ function CollectionPermissions({ collection }: Props) {
       />
       {collectionGroups.length ? <Divider /> : null}
       <PaginatedList
+        key={`collection-users-${collection.permission || "none"}`}
         items={collectionUsers}
         fetch={memberships.fetchPage}
         options={fetchOptions}
diff --git a/app/scenes/GroupMembers/components/GroupMemberListItem.js b/app/scenes/GroupMembers/components/GroupMemberListItem.js
index a5ca3376..e48121d7 100644
--- a/app/scenes/GroupMembers/components/GroupMemberListItem.js
+++ b/app/scenes/GroupMembers/components/GroupMemberListItem.js
@@ -32,7 +32,7 @@ const GroupMemberListItem = ({ user, onRemove, onAdd }: Props) => {
           {user.isAdmin && <Badge primary={user.isAdmin}>Admin</Badge>}
         </>
       }
-      image={<Avatar src={user.avatarUrl} size={40} />}
+      image={<Avatar src={user.avatarUrl} size={32} />}
       actions={
         <Flex align="center">
           {onRemove && <GroupMemberMenu onRemove={onRemove} />}
diff --git a/app/scenes/Settings/components/UserListItem.js b/app/scenes/Settings/components/UserListItem.js
index 765dfba5..18c0c84c 100644
--- a/app/scenes/Settings/components/UserListItem.js
+++ b/app/scenes/Settings/components/UserListItem.js
@@ -38,7 +38,7 @@ class UserListItem extends React.Component<Props> {
           <>
             <Avatar
               src={user.avatarUrl}
-              size={40}
+              size={32}
               onClick={this.handleOpenProfile}
             />
             <UserProfile
diff --git a/shared/styles/theme.js b/shared/styles/theme.js
index fc4a7f8b..ee075224 100644
--- a/shared/styles/theme.js
+++ b/shared/styles/theme.js
@@ -198,7 +198,7 @@ export const dark = {
   menuBackground: lighten(0.015, colors.almostBlack),
   menuShadow:
     "0 0 0 1px rgba(0, 0, 0, 0.1), 0 8px 16px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.08), inset 0 0 1px rgba(255,255,255,.2)",
-  divider: darken(0.2, colors.slate),
+  divider: lighten(0.1, colors.almostBlack),
   titleBarDivider: darken(0.4, colors.slate),
   inputBorder: colors.slateDark,
   inputBorderFocused: colors.slate,
@@ -229,7 +229,7 @@ export const dark = {
   codeBorder: colors.black50,
   codeString: "#3d8fd1",
   embedBorder: colors.black50,
-  horizontalRule: darken(0.2, colors.slate),
+  horizontalRule: lighten(0.1, colors.almostBlack),
 
   noticeInfoBackground: colors.white10,
   noticeInfoText: colors.almostWhite,