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

@@ -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;
+  width: 32px;
-  height: 40px;
+  height: 32px;
   background: ${(props) => props.theme.secondaryBackground};
-  border-radius: 20px;
+  border-radius: 32px;
 `;
 
 const Title = styled.span`

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;
 `;
 

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;

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;

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 && (
-          {canEdit && onAdd && (
+            <>
-            <Button onClick={onAdd} neutral>
+              <Spacer />
-              {t("Add")}
+              {onRemove && <MemberMenu onRemove={onRemove} />}
-            </Button>
+              {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;

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 ? (

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}

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} />}

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

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,