schihei/chatbot-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: restyle modal with model select (#202)

Browse Source 
chore: set normal font size for sidebar
chore: set normal gradient for `ChatInput`
This commit is contained in:
Danil Shishkevich
2023-03-26 22:14:47 +07:00
committed by GitHub
parent 5d9bc10cf4
commit 6d5d09d69f
9 changed files with 36 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/Sidebar/ClearConversations.tsx
+2 -2
View File
@@ -21,13 +21,13 @@ export const ClearConversations: FC<Props> = ({ onClearConversations }) => {
<div className="flex w-full cursor-pointer items-center rounded-md py-3 px-3 hover:bg-[#343541]">
<IconTrash size={18} />
<div className="ml-3 flex-1 text-left text-white">
<div className="ml-3 flex-1 text-left text-[12.5px] leading-3 text-white">
{t('Are you sure?')}
</div>
<div className="flex w-[40px]">
<IconCheck
className="ml-auto min-w-[20px] text-neutral-400 hover:text-neutral-100"
className="ml-auto min-w-[20px] mr-1 text-neutral-400 hover:text-neutral-100"
size={18}
onClick={(e) => {
e.stopPropagation();
components/Sidebar/Conversation.tsx
+1 -1
View File
@@ -64,7 +64,7 @@ export const ConversationComponent: FC<Props> = ({
return (
<button
className={`flex w-full cursor-pointer items-center gap-3 rounded-lg p-3 text-[12px] leading-normal transition-colors duration-200 hover:bg-[#343541]/90 ${
className={`flex w-full cursor-pointer items-center gap-3 rounded-lg p-3 text-[12.5px] leading-3 transition-colors duration-200 hover:bg-[#343541]/90 ${
loading ? 'disabled:cursor-not-allowed' : ''
} ${
selectedConversation.id === conversation.id ? 'bg-[#343541]/90' : ''
components/Sidebar/Search.tsx
+1 -1
View File
@@ -21,7 +21,7 @@ export const Search: FC<Props> = ({ searchTerm, onSearch }) => {
return (
<div className="relative flex items-center">
<input
className="w-full flex-1 rounded-md border border-neutral-600 bg-[#202123] px-4 py-3 pr-10 text-[12px] leading-normal text-white"
className="w-full flex-1 rounded-md border border-neutral-600 bg-[#202123] px-4 py-3 pr-10 text-[12px] leading-3 text-white"
type="text"
placeholder={t('Search conversations...') || ''}
value={searchTerm}
components/Sidebar/Sidebar.tsx
+3 -3
View File
@@ -122,7 +122,7 @@ export const Sidebar: FC<Props> = ({
>
<header className="flex items-center">
<button
className="flex w-[190px] flex-shrink-0 cursor-pointer items-center gap-3 rounded-md border border-white/20 p-3 text-[12px] leading-normal text-white transition-colors duration-200 select-none hover:bg-gray-500/10"
className="flex w-[190px] flex-shrink-0 cursor-pointer items-center gap-3 rounded-md border border-white/20 p-3 text-[12.5px] leading-3 text-white transition-colors duration-200 select-none hover:bg-gray-500/10"
onClick={() => {
onNewConversation();
setSearchTerm('');
@@ -133,7 +133,7 @@ export const Sidebar: FC<Props> = ({
</button>
<button
className="ml-2 flex flex-shrink-0 cursor-pointer items-center gap-3 rounded-md border border-white/20 p-3 text-[12px] leading-normal text-white transition-colors duration-200 hover:bg-gray-500/10"
className="ml-2 flex flex-shrink-0 cursor-pointer items-center gap-3 rounded-md border border-white/20 p-3 text-[12.5px] leading-3 text-white transition-colors duration-200 hover:bg-gray-500/10"
onClick={() => onCreateFolder(t('New folder'))}
>
<IconFolderPlus size={18} />
@@ -194,7 +194,7 @@ export const Sidebar: FC<Props> = ({
) : (
<div className="mt-8 text-white text-center opacity-50 select-none">
<IconMessagesOff className='mx-auto mb-3'/>
<span className='text-[12px] leading-normal'>{t('No conversations.')}</span>
<span className='text-[12.5px] leading-3'>{t('No conversations.')}</span>
</div>
)}
</div>
components/Sidebar/SidebarButton.tsx
+2 -2
View File
@@ -9,11 +9,11 @@ interface Props {
export const SidebarButton: FC<Props> = ({ text, icon, onClick }) => {
return (
<button
className="flex w-full cursor-pointer items-center gap-3 rounded-md py-3 px-3 text-white text-[12px] leading-normal transition-colors duration-200 hover:bg-gray-500/10 select-none"
className="flex w-full cursor-pointer select-none items-center gap-3 rounded-md py-3 px-3 text-[12.5px] leading-3 text-white transition-colors duration-200 hover:bg-gray-500/10"
onClick={onClick}
>
<div>{icon}</div>
<div>{text}</div>
<span>{text}</span>
</button>
);
};