klbr/khoj
1
0
Fork 0
mirror of https://github.com/khoaliber/khoj.git synced 2026-03-03 05:29:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

Make the input area only rounded on the top corners when in mobile view

Browse Source 
- Create better styling for the input area buttons, resizing in mobile and creating more even height with a more minimal send button
This commit is contained in:
sabaimran
2024-08-04 18:28:33 +05:30
parent 322fb34d4b
commit 4f2fcc82f0
6 changed files with 12 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/interface/web/app/components/chatInputArea/chatInputArea.tsx
View File

@@ -9,6 +9,7 @@ import 'katex/dist/katex.min.css';
import {
ArrowCircleUp,
ArrowRight,
ArrowUp,
Browser,
ChatsTeardrop,
GlobeSimple,
@@ -372,7 +373,7 @@ export default function ChatInputArea(props: ChatInputProps) {
className="!bg-none p-1 h-auto text-3xl rounded-full text-gray-300 hover:text-gray-500"
disabled={props.sendDisabled}
onClick={handleFileButtonClick}>
<Paperclip className='w-8 h-8' />
<Paperclip className='w-6 h-6 md:w-8 md:h-8' />
</Button>
<div className="grid w-full gap-1.5 relative">
<Textarea
@@ -404,7 +405,7 @@ export default function ChatInputArea(props: ChatInputProps) {
}}
disabled={props.sendDisabled}
>
<Stop weight='fill' className='w-8 h-8' />
<Stop weight='fill' className='w-6 h-6 md:w-8 md:h-8' />
</Button>
</TooltipTrigger>
<TooltipContent>
@@ -429,7 +430,7 @@ export default function ChatInputArea(props: ChatInputProps) {
}}
disabled={props.sendDisabled}
>
<Microphone weight='fill' className='w-8 h-8' />
<Microphone weight='fill' className='w-6 h-6 md:w-8 md:h-8' />
</Button>
</TooltipTrigger>
<TooltipContent>
@@ -440,10 +441,10 @@ export default function ChatInputArea(props: ChatInputProps) {
)
}
<Button
className={`${props.agentColor ? convertToBGClass(props.agentColor) : 'bg-orange-300 hover:bg-orange-500'} rounded-full p-0 mr-1 h-auto text-3xl transition transform hover:-translate-y-1`}
className={`${props.agentColor ? convertToBGClass(props.agentColor) : 'bg-orange-300 hover:bg-orange-500'} rounded-full p-1 h-auto text-3xl transition transform hover:-translate-y-1`}
onClick={onSendMessage}
disabled={props.sendDisabled}>
<ArrowCircleUp className='w-8 h-8' />
<ArrowUp className='w-4 h-4 md:w-6 md:h-6' weight='bold' />
</Button>
</div >
</>