fix: reduce padding on chat member management dialog (#2779)

Author: gavinbarron

.yarn/install-state.gz

@@ -1,16 +1,46 @@
 import React, { ChangeEvent, useCallback, useState } from 'react';
 import { ChoiceGroup, IChoiceGroupOption } from '@fluentui/react';
-import { Button } from '@fluentui/react-components';
-import { Input, InputOnChangeData } from '@fluentui/react-components';
+import { shorthands, makeStyles, Button, Input, InputOnChangeData } from '@fluentui/react-components';
 import { IDynamicPerson, PeoplePicker } from '@microsoft/mgt-react';
-import { styles } from './manage-chat-members.styles';
 
 interface AddChatMembersProps {
   closeDialog: () => void;
   addChatMembers: (userIds: string[], history?: Date) => Promise<void>;
 }
 
+const useStyles = makeStyles({
+  addMembers: {
+    display: 'flex',
+    flexDirection: 'column',
+    paddingBlockEnd: '18px',
+    ...shorthands.paddingInline('20px')
+  },
+  buttonRow: {
+    display: 'flex',
+    columnGap: '8px',
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    paddingBlockStart: '18px'
+  },
+  dialogHeading: {
+    paddingInlineStart: '4px',
+    marginBlockStart: '18px',
+    marginBlockEnd: '10px'
+  },
+  historyInput: { width: '48px' },
+  option: {
+    display: 'flex',
+    alignItems: 'center',
+    columnGap: '4px'
+  },
+  radio: {
+    marginBlockStart: '8px',
+    paddingInlineStart: '2px'
+  }
+});
+
 const AddChatMembers = ({ addChatMembers, closeDialog }: AddChatMembersProps) => {
+  const styles = useStyles();
   const [daysOfHistory, setDaysOfHistory] = useState<number>(1);
   const handleHistoryChanged = useCallback(
     (_: ChangeEvent<HTMLInputElement>, data: InputOnChangeData) => {
@@ -80,20 +110,25 @@ const AddChatMembers = ({ addChatMembers, closeDialog }: AddChatMembersProps) =>
   ];
   return (
     <div className={styles.addMembers}>
-      <h3>Add</h3>
+      <h3 className={styles.dialogHeading}>Add</h3>
       <PeoplePicker
         selectedPeople={selectedPeople}
         selectionChanged={peopleSelectionChanged}
         disabled={selectedPeople.length >= 20}
       />
-      <ChoiceGroup options={chatHistoryOptions} selectedKey={historyOption} onChange={onHistoryOptionChange} />
+      <ChoiceGroup
+        className={styles.radio}
+        options={chatHistoryOptions}
+        selectedKey={historyOption}
+        onChange={onHistoryOptionChange}
+      />
       <div className={styles.buttonRow}>
-        <Button onClick={addToChat} appearance="primary" disabled={selectedPeople.length < 1}>
-          Save
-        </Button>
         <Button onClick={closeDialog} appearance="secondary">
           Cancel
         </Button>
+        <Button onClick={addToChat} appearance="primary" disabled={selectedPeople.length < 1}>
+          Add
+        </Button>
       </div>
     </div>
   );

packages/mgt-chat/src/components/ManageChatMembers/AddChatMembers.tsx

@@ -1,5 +1,7 @@
 import React, { useCallback, useState } from 'react';
 import {
+  makeStyles,
+  shorthands,
   Button,
   Dialog,
   DialogActions,
@@ -11,8 +13,7 @@ import {
 import { List, ListItem } from '@fluentui/react-northstar';
 import { Person, PersonViewType } from '@microsoft/mgt-react';
 import { AadUserConversationMember } from '@microsoft/microsoft-graph-types';
-import { styles } from './manage-chat-members.styles';
-import { Dismiss24Regular, Dismiss24Filled, bundleIcon } from '@fluentui/react-icons';
+import { Dismiss24Regular, bundleIcon } from '@fluentui/react-icons';
 
 interface ListChatMembersProps {
   currentUserId: string;
@@ -23,7 +24,24 @@ interface ListChatMembersProps {
 
 const RemovePerson = bundleIcon(Dismiss24Regular, () => <></>);
 
+const useStyles = makeStyles({
+  listItem: {
+    listStyleType: 'none',
+    width: '100%'
+  },
+  memberList: {
+    fontWeight: 800,
+    gridGap: '8px',
+    ...shorthands.marginBlock('0px'),
+    ...shorthands.padding('4px')
+  },
+  fullWidth: {
+    width: '100%'
+  }
+});
+
 const ListChatMembers = ({ members, currentUserId, removeChatMember, closeParentPopover }: ListChatMembersProps) => {
+  const styles = useStyles();
   const [removeDialogOpen, setRemoveDialogOpen] = useState(false);
   const [removeUser, setRemoveUser] = useState<AadUserConversationMember | undefined>(undefined);
   const openRemoveDialog = useCallback((user: AadUserConversationMember) => {

packages/mgt-chat/src/components/ManageChatMembers/ListChatMembers.tsx

@@ -1,5 +1,7 @@
 import React, { useCallback, useState } from 'react';
 import {
+  makeStyles,
+  shorthands,
   Button,
   Popover,
   PopoverSurface,
@@ -23,7 +25,6 @@ import {
   DoorArrowLeft20Regular
 } from '@fluentui/react-icons';
 import { AadUserConversationMember } from '@microsoft/microsoft-graph-types';
-import { styles } from './manage-chat-members.styles';
 import { buttonIconStyles } from '../styles/common.styles';
 import { AddChatMembers } from './AddChatMembers';
 import { ListChatMembers } from './ListChatMembers';
@@ -38,7 +39,18 @@ interface ManageChatMembersProps {
 const AddPeople = bundleIcon(PeopleAdd24Filled, PeopleAdd24Regular);
 const Leave = bundleIcon(DoorArrowLeft20Filled, DoorArrowLeft20Regular);
 
+const useStyles = makeStyles({
+  popover: {
+    ...shorthands.padding('0 !important')
+  },
+  triggerButton: {
+    minWidth: 'unset !important',
+    width: 'max-content'
+  }
+});
+
 const ManageChatMembers = ({ currentUserId, members, addChatMembers, removeChatMember }: ManageChatMembersProps) => {
+  const styles = useStyles();
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
   const [showAddMembers, setShowAddMembers] = useState(false);
   const openAddMembers = useCallback(() => {
@@ -81,7 +93,7 @@ const ManageChatMembers = ({ currentUserId, members, addChatMembers, removeChatM
         {showAddMembers ? (
           <AddChatMembers closeDialog={closeCallout} addChatMembers={addChatMembers} />
         ) : (
-          <div>
+          <>
             <ListChatMembers
               members={members}
               removeChatMember={removeChatMember}
@@ -122,7 +134,7 @@ const ManageChatMembers = ({ currentUserId, members, addChatMembers, removeChatM
                 </DialogBody>
               </DialogSurface>
             </Dialog>
-          </div>
+          </>
         )}
       </PopoverSurface>
     </Popover>