iod/page-assist
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(NewChat): improve button styles and layout

Browse Source 
- Update the styles and layout of the "New Chat" and dropdown buttons in the NewChat component
- Rounded the buttons to match the design
- Adjusted the spacing and alignment of the button elements
- Ensured consistent styling between light and dark modes
This commit is contained in:
n4ze3m 2024-11-17 12:29:41 +05:30
parent 92013f3bfc
commit eaf0e5b241
1 changed files with 4 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/Layouts/NewChat.tsx
View File

@ -43,15 +43,15 @@ export const NewChat: React.FC<Props> = ({ clearChat }) => {
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<button <button
onClick={clearChat} onClick={clearChat}
className="inline-flex dark:bg-transparent bg-white items-center rounded-r-none rounded-lg border dark:border-gray-700 bg-transparent px-3 py-2.5 pr-6 text-xs lg:text-sm font-medium leading-4 text-gray-800 dark:text-white disabled:opacity-50 ease-in-out transition-colors duration-200 hover:bg-gray-100 dark:hover:bg-gray-800 dark:hover:text-white"> className="inline-flex dark:bg-transparent bg-white items-center rounded-s-lg rounded-e-none border dark:border-gray-700 bg-transparent px-3 py-2.5 pe-6 text-xs lg:text-sm font-medium leading-4 text-gray-800 dark:text-white disabled:opacity-50 ease-in-out transition-colors duration-200 hover:bg-gray-100 dark:hover:bg-gray-800 dark:hover:text-white">
<SquarePen className="h-5 w-5" /> <SquarePen className="h-5 w-5" />
<span className="truncate ml-3">{t("newChat")}</span> <span className="truncate ms-3">{t("newChat")}</span>
</button> </button>
<Dropdown menu={{ items }} trigger={["click"]}> <Dropdown menu={{ items }} trigger={["click"]}>
<button className="inline-flex dark:bg-transparent bg-white items-center rounded-lg border-l-0 rounded-l-none border dark:border-gray-700 bg-transparent px-3 py-2.5 text-xs lg:text-sm font-medium leading-4 text-gray-800 dark:text-white disabled:opacity-50 ease-in-out transition-colors duration-200 hover:bg-gray-100 dark:hover:bg-gray-800 dark:hover:text-white"> <button className="inline-flex dark:bg-transparent bg-white items-center rounded-lg border-s-0 rounded-s-none border dark:border-gray-700 bg-transparent px-3 py-2.5 text-xs lg:text-sm font-medium leading-4 text-gray-800 dark:text-white disabled:opacity-50 ease-in-out transition-colors duration-200 hover:bg-gray-100 dark:hover:bg-gray-800 dark:hover:text-white">
<MoreHorizontal className="h-5 w-5 text-gray-600 dark:text-gray-400" /> <MoreHorizontal className="h-5 w-5 text-gray-600 dark:text-gray-400" />
</button> </button>
</Dropdown> </Dropdown>
</div> </div>
) )
} }