Merge pull request #12 from tnfAngel-Chat:dev

Dev
tnfAngel-Chat · Apr 17, 2024 · 7d9b5d2 · 7d9b5d2
2 parents 7145a23 + 29b0655
commit 7d9b5d2
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 3 deletions.
diff --git 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
@@ -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