From 29b06550e6c9c4dec37fd359d1ab5aa26f007f3a Mon Sep 17 00:00:00 2001
From: tnfAngel <57068341+tnfAngel@users.noreply.github.com>
Date: Wed, 17 Apr 2024 08:40:42 +0100
Subject: [PATCH] fix guild bar

---
 src/components/channel/InputArea.tsx |  1 +
 src/components/layout/GuildsBar.tsx  | 13 ++++++++++---
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/components/channel/InputArea.tsx b/src/components/channel/InputArea.tsx
index c267da6..abd9b44 100644
--- a/src/components/channel/InputArea.tsx
+++ b/src/components/channel/InputArea.tsx
@@ -430,6 +430,7 @@ export default function InputArea({ channel }: Readonly<InputBoxProps>) {
 									minH='45px'
 									size='md'
 									resize='none'
+									textOverflow='ellipsis'
 									focusBorderColor={getColorValue('focusBorderColor')}
 									onKeyDown={handleKeyDown}
 									onChange={handleChange}
diff --git a/src/components/layout/GuildsBar.tsx b/src/components/layout/GuildsBar.tsx
index fb57dee..cc6231c 100644
--- a/src/components/layout/GuildsBar.tsx
+++ b/src/components/layout/GuildsBar.tsx
@@ -11,10 +11,12 @@ import AddServerModal from '../modals/AddServerModal';
 export function IconLink({
 	name,
 	icon,
+	isSelected,
 	onClick
 }: Readonly<{
 	name: string;
 	icon: any;
+	isSelected?: boolean;
 	onClick: any;
 }>) {
 	const { getColorValue } = useThemeColors();
@@ -35,10 +37,14 @@ export function IconLink({
 					w='100%'
 					h='100%'
 					borderRadius='50%'
+					bg={getColorValue('iconLinkBackground')}
+					outline={`2px solid ${isSelected ? getColorValue('sidebarButtonActive') : 'transparent'}`}
 					_hover={{
-						bg: getColorValue('sidebarButtonHover')
+						bg: getColorValue('sidebarButtonHover'),
+						outlineColor: isSelected
+							? getColorValue('sidebarButtonActive')
+							: getColorValue('sidebarButtonHover')
 					}}
-					bg={getColorValue('iconLinkBackground')}
 				>
 					{icon}
 				</Center>
@@ -75,7 +81,7 @@ export function GuildLink({
 					h='100%'
 					w='100%'
 					borderRadius='50%'
-					outline={`5px solid ${isSelected ? getColorValue('sidebarButtonActive') : 'transparent'}`}
+					outline={`4px solid ${isSelected ? getColorValue('sidebarButtonActive') : 'transparent'}`}
 					_hover={{
 						outlineColor: isSelected
 							? getColorValue('sidebarButtonActive')
@@ -135,6 +141,7 @@ export default function GuildsBar() {
 								: '/friends'
 						)
 					}
+					isSelected={selectedState.activePage === 'direct'}
 				/>
 				{guilds.map((guild) => (
 					<GuildLink