Merge pull request #218 from ColinLefter/modal-ui-adjustments

Modal UI Adjustments
ColinLefter · Apr 9, 2024 · fbd4640 · fbd4640
2 parents f24a192 + faf0a7c
commit fbd4640
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 19 deletions.
diff --git a/Application/components/FriendsColumn/AddFriendModal.tsx b/Application/components/FriendsColumn/AddFriendModal.tsx
@@ -5,6 +5,7 @@ import { IconPlus } from '@tabler/icons-react';
 import { NewFriendModalProps } from '@/accordTypes';
 import { notifications, showNotification } from '@mantine/notifications';
 import { useUser } from '@clerk/nextjs';
+import { IconUserPlus } from '@tabler/icons-react';
 
 export function AddFriendModal({ senderID, setLastFetched }: NewFriendModalProps) {
   const { user } = useUser();
@@ -74,6 +75,7 @@ export function AddFriendModal({ senderID, setLastFetched }: NewFriendModalProps
         fullWidth
         onClick={open}
         variant="gradient"
+        leftSection={<IconUserPlus size={16} color="white" />}
       >
         Add friend
       </Button>

diff --git a/Application/components/FriendsColumn/RemoveFriendModal.tsx b/Application/components/FriendsColumn/RemoveFriendModal.tsx
@@ -96,21 +96,10 @@ export function RemoveFriendModal(): JSX.Element {
     <>
       <Button
         onClick={handleOpenModalClick}
-        variant="subtle"
-        style={{
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          gap: '10px',
-          backgroundImage: 'linear-gradient(to right, #E14D7D, #FF9D0A)',
-          color: 'white',
-          border: 'none',
-          borderRadius: '5px',
-          padding: '8px 16px',
-        }}
+        variant="gradient"
+        leftSection={<IconUserMinus size={16} color="white" />}
       >
-        <IconUserMinus size={16} style={{ color: 'white', marginRight: 5 }} />
-        Remove a friend
+        Remove friends
       </Button>
 
       <Modal
@@ -120,13 +109,13 @@ export function RemoveFriendModal(): JSX.Element {
         title={
           <Stack gap="0">
             <Text variant="gradient" fw={500} size="xl" component="span">
-              Remove a Friend
+              Update Friend List
             </Text>
-            <Text color={theme.colors.dark[1]}>Select a friend to remove</Text>
+            <Text c={theme.colors.dark[1]}>Select friends to remove</Text>
           </Stack>
         }
       >
-        <Paper withBorder shadow="md">
+        <Paper>
           <Stack>
             <MultiSelect
               data={friendOptions}
@@ -138,7 +127,7 @@ export function RemoveFriendModal(): JSX.Element {
               searchable
             />
             <Button fullWidth variant="gradient" onClick={handleRemoveFriendClick}>
-              Remove Friend
+              Update friend list
             </Button>
           </Stack>
         </Paper>

diff --git a/Application/pages/accord.tsx b/Application/pages/accord.tsx
@@ -112,7 +112,7 @@ export default function Accord() {
             <Button
               value="friends"
               onClick={() => setActiveView('friends')} // Directly set active view to 'friends'
-              leftSection={<IconUsers />}
+              leftSection={<IconUsers size={16} />}
               variant="gradient"
             >
               Friends