Merge pull request #18 from tnfAngel-Chat:dev

better responsive & margins
tnfAngel-Chat · May 9, 2024 · 366aaeb · 366aaeb
2 parents 1abc0b6 + 7bac6e6
commit 366aaeb
Show file tree

Hide file tree

Showing 5 changed files with 5 additions and 4 deletions.
diff --git a/src/components/channel/ChannelTopBarContent.tsx b/src/components/channel/ChannelTopBarContent.tsx
@@ -92,7 +92,7 @@ export default function ChannelTopBarContent({ channel, userSidebarRef, channelF
 				) : null}
 			</Flex>
 			<Spacer />
-			<Flex gap={['10px', '24px']}>
+			<Flex gap={['5px', '10px', '24px']}>
 				{(channel.type === ChannelTypes.DirectMessage || channel.type === ChannelTypes.Group) && (
 					<>
 						<Center>

diff --git a/src/components/channel/InputArea.tsx b/src/components/channel/InputArea.tsx
@@ -393,7 +393,7 @@ export default function InputArea({ channel }: Readonly<InputBoxProps>) {
 							</Flex>
 						</Flex>
 					) : null}
-					<Flex h='100%' w='100%' gap={['12px', '24px']}>
+					<Flex h='100%' w='100%' gap={['8px', '12px', '24px']}>
 						<Flex gap='24px' paddingTop='6px'>
 							<IconButton
 								aria-label='Add attachments'

diff --git a/src/components/friends/Friends.tsx b/src/components/friends/Friends.tsx
@@ -14,7 +14,7 @@ export default function Friends() {
 
 	return (
 		<Center ref={mainRef} h='100%' className='adjustScreen'>
-			<Stack spacing='24px'>
+			<Stack spacing='24px' p='10px'>
 				<Heading as='h1'>Friends</Heading>
 				<Text>Oh, you don't have any friends right now...</Text>
 			</Stack>

diff --git a/src/components/screens/GuildScreen.tsx b/src/components/screens/GuildScreen.tsx
@@ -47,7 +47,7 @@ export default function GuildScreen() {
 				spacing='10px'
 				w='100%'
 			>
-				<Center w='100%' h='100%'>
+				<Center w='100%' h='100%' p='10px'>
 					<Stack>
 						<Heading as='h1' size='lg'>
 							Welcome to {guild.name}

diff --git a/src/components/screens/IndexScreen.tsx b/src/components/screens/IndexScreen.tsx
@@ -35,6 +35,7 @@ export default function IndexScreen() {
 				padding='20px'
 				borderRadius='10px'
 				alignItems='center'
+				m='5px'
 				bg={getColorValue('sidebarBackground')}
 			>
 				<Alert status='error' borderRadius='5px'>