fix: rebase

src/screens/ManageGroups/GroupManagementStyles.ts

@@ -1,6 +1,8 @@
 import { styled } from '@mui/material';
 import { IconButton, Box } from '@mui/material';
 
+import { theme } from '../../assets/styles/theme';
+
 export const styles = {
   container: {
     textAlign: 'center',
@@ -10,7 +12,10 @@ export const styles = {
     display: 'flex',
     justifyContent: 'space-between',
     padding: '1rem 2rem',
-    borderBottom: '2px solid black',
+    borderBottom: `2px solid ${theme.colors.black_100}`,
+    width: '100vw',
+    marginLeft: 'calc(-50vw + 50%)',
+    boxSizing: 'border-box',
   },
   icon: {
     fontSize: '3rem',
@@ -30,13 +35,13 @@ export const styles = {
     margin: '1rem',
   },
   title: {
-    fontSize: '2 rem',
+    fontSize: '2rem',
   },
   groupCard: {
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'space-between',
-    backgroundColor: '#ffcccc',
+    backgroundColor: theme.colors.red_25,
     padding: '1rem',
     borderRadius: '1rem',
   },
@@ -46,16 +51,18 @@ export const styles = {
     gap: '1rem',
   },
   groupAvatar: {
-    width: '6rem',
-    height: '6rem',
-    backgroundColor: '#ffcccc',
+    width: '4rem',
+    height: '4rem',
+    backgroundColor: theme.colors.red_25,
   },
   groupName: {
     fontSize: '1rem',
+    textAlign: 'left',
   },
   groupMembers: {
-    color: '#777',
+    color: theme.colors.grey_50,
     fontSize: '0.8rem',
+    textAlign: 'left',
   },
   manageButtons: {
     display: 'flex',
@@ -67,26 +74,26 @@ export const styles = {
     padding: '1rem',
     borderRadius: '1rem',
     fontSize: '1.2rem',
-    backgroundColor: '#f13d42',
+    backgroundColor: theme.colors.red_100,
     fontWeight: 'bold',
     textTransform: 'none',
   },
   buttonColor: {
-    backgroundColor: '#f13d42',
+    backgroundColor: theme.colors.red_100,
   },
 };
 
 export const BackButton = styled(IconButton)({
   borderRadius: '50%',
-  border: '0.2rem solid #bbbbbb',
+  border: `0.2rem solid ${theme.colors.grey_25}`,
   padding: '0.6rem',
-  backgroundColor: '#ffffff',
+  backgroundColor: theme.colors.white_100,
   width: '2.5rem',
   height: '2.5rem',
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',
-  color: '#000000',
+  color: theme.colors.black_100,
 });
 
 export const BackButtonWrapper = styled(Box)({

src/screens/ManageGroups/ManageGroups.tsx

@@ -1,7 +1,9 @@
 import React from 'react';
-import { IconButton, Button, Box, Typography, Avatar } from '@mui/material';
+
 import { Groups, Person, Edit } from '@mui/icons-material';
 import ArrowBackIcon from '@mui/icons-material/ArrowBack';
+import { IconButton, Button, Box, Typography, Avatar } from '@mui/material';
+
 import { styles, BackButton, BackButtonWrapper } from './GroupManagementStyles';
 
 const GroupManagement: React.FC = () => {

vite.config.ts

@@ -9,7 +9,4 @@ export default defineConfig({
       '@': '/src',
     },
   },
-})
-
-
 });