From 6d5d09d69f1312746e624df00ba2758ad9c775c4 Mon Sep 17 00:00:00 2001
From: Danil Shishkevich <44939683+shishkevichd@users.noreply.github.com>
Date: Sun, 26 Mar 2023 22:14:47 +0700
Subject: [PATCH] chore: restyle modal with model select (#202)

chore: set normal font size for sidebar
chore: set normal gradient for `ChatInput`
---
 components/Chat/Chat.tsx                  |  4 +--
 components/Chat/ChatInput.tsx             |  8 ++---
 components/Chat/ModelSelect.tsx           | 36 +++++++++++++----------
 components/Chat/SystemPrompt.tsx          |  2 +-
 components/Sidebar/ClearConversations.tsx |  4 +--
 components/Sidebar/Conversation.tsx       |  2 +-
 components/Sidebar/Search.tsx             |  2 +-
 components/Sidebar/Sidebar.tsx            |  6 ++--
 components/Sidebar/SidebarButton.tsx      |  4 +--
 9 files changed, 36 insertions(+), 32 deletions(-)

diff --git a/components/Chat/Chat.tsx b/components/Chat/Chat.tsx
index d4548c7..1d42332 100644
--- a/components/Chat/Chat.tsx
+++ b/components/Chat/Chat.tsx
@@ -126,12 +126,12 @@ export const Chat: FC<Props> = ({
             {conversation.messages.length === 0 ? (
               <>
                 <div className="mx-auto flex w-[350px] flex-col space-y-10 pt-12 sm:w-[600px]">
-                  <div className="text-center text-4xl font-semibold text-gray-800 dark:text-gray-100">
+                  <div className="text-center text-3xl font-semibold text-gray-800 dark:text-gray-100">
                     {models.length === 0 ? t('Loading...') : 'Chatbot UI'}
                   </div>
 
                   {models.length > 0 && (
-                    <div className="flex h-full flex-col space-y-4 rounded border border-neutral-500 p-4">
+                    <div className="flex h-full flex-col space-y-4 rounded border border-neutral-200 dark:border-neutral-600 p-4">
                       <ModelSelect
                         model={conversation.model}
                         models={models}
diff --git a/components/Chat/ChatInput.tsx b/components/Chat/ChatInput.tsx
index 58797bc..d9bb300 100644
--- a/components/Chat/ChatInput.tsx
+++ b/components/Chat/ChatInput.tsx
@@ -102,11 +102,11 @@ export const ChatInput: FC<Props> = ({
   }
 
   return (
-    <div className="dark:bg-vert-dark-gradient absolute bottom-0 left-0 w-full border-transparent bg-white from-[#343541] via-[#343541] to-[#343541]/0 pt-6 dark:border-white/20 dark:bg-[#444654] dark:!bg-transparent dark:bg-gradient-to-t md:pt-2">
+    <div className="absolute bottom-0 left-0 w-full border-transparent pt-6 dark:border-white/20 bg-gradient-to-b from-transparent via-white to-white dark:via-[#343541] dark:to-[#343541] md:pt-2">
       <div className="stretch mx-2 mt-4 flex flex-row gap-3 last:mb-2 md:mx-4 md:mt-[52px] md:last:mb-6 lg:mx-auto lg:max-w-3xl">
         {messageIsStreaming && (
           <button
-            className="absolute -top-2 left-0 right-0 mx-auto w-fit rounded border border-gray-500 py-2 px-4 text-black hover:opacity-50 dark:bg-[#343541] dark:text-white md:top-0"
+            className="absolute -top-2 left-0 right-0 mx-auto w-fit rounded border border-neutral-200 dark:border-neutral-600 py-2 px-4 text-black bg-white dark:bg-[#343541] dark:text-white md:top-0"
             onClick={handleStopConversation}
           >
             <IconPlayerStop size={16} className="mb-[2px] inline-block" />{' '}
@@ -116,7 +116,7 @@ export const ChatInput: FC<Props> = ({
 
         {!messageIsStreaming && messages.length > 0 && (
           <button
-            className="absolute -top-2 left-0 right-0 mx-auto w-fit rounded border border-gray-500 py-2 px-4 text-black hover:opacity-50 dark:bg-[#343541] dark:text-white md:top-0"
+            className="absolute -top-2 left-0 right-0 mx-auto w-fit rounded border border-neutral-200 dark:border-neutral-600 py-2 px-4 text-black bg-white dark:bg-[#343541] dark:text-white md:top-0"
             onClick={onRegenerate}
           >
             <IconRepeat size={16} className="mb-[2px] inline-block" />{' '}
@@ -148,7 +148,7 @@ export const ChatInput: FC<Props> = ({
           />
 
           <button
-            className="absolute right-5 rounded-sm p-1 text-neutral-800 hover:bg-neutral-200 hover:text-neutral-900 focus:outline-none dark:bg-opacity-50 dark:text-neutral-100 dark:hover:text-neutral-200"
+            className="absolute right-3 rounded-sm p-1 text-neutral-800 hover:bg-neutral-200 hover:text-neutral-900 focus:outline-none dark:bg-opacity-50 dark:text-neutral-100 dark:hover:text-neutral-200"
             onClick={handleSend}
           >
             <IconSend size={16} className="opacity-60" />
diff --git a/components/Chat/ModelSelect.tsx b/components/Chat/ModelSelect.tsx
index e1a980c..4deb8d7 100644
--- a/components/Chat/ModelSelect.tsx
+++ b/components/Chat/ModelSelect.tsx
@@ -15,22 +15,26 @@ export const ModelSelect: FC<Props> = ({ model, models, onModelChange }) => {
       <label className="mb-2 text-left text-neutral-700 dark:text-neutral-400">
         {t('Model')}
       </label>
-      <select
-        className="focus:shadow-outline w-full cursor-pointer appearance-none rounded-lg border border-neutral-500 p-3 text-neutral-900 dark:bg-[#343541] dark:text-white"
-        placeholder={t('Select a model') || ''}
-        value={model.id}
-        onChange={(e) => {
-          onModelChange(
-            models.find((model) => model.id === e.target.value) as OpenAIModel,
-          );
-        }}
-      >
-        {models.map((model) => (
-          <option key={model.id} value={model.id}>
-            {model.name}
-          </option>
-        ))}
-      </select>
+      <div className="w-full rounded-lg border border-neutral-200 pr-2 bg-transparent text-neutral-900 dark:border-neutral-600 dark:text-white">
+        <select
+          className="bg-transparent w-full outline-0 p-2"
+          placeholder={t('Select a model') || ''}
+          value={model.id}
+          onChange={(e) => {
+            onModelChange(
+              models.find(
+                (model) => model.id === e.target.value,
+              ) as OpenAIModel,
+            );
+          }}
+        >
+          {models.map((model) => (
+            <option key={model.id} value={model.id}>
+              {model.name}
+            </option>
+          ))}
+        </select>
+      </div>
     </div>
   );
 };
diff --git a/components/Chat/SystemPrompt.tsx b/components/Chat/SystemPrompt.tsx
index ada4199..6bf33ce 100644
--- a/components/Chat/SystemPrompt.tsx
+++ b/components/Chat/SystemPrompt.tsx
@@ -52,7 +52,7 @@ export const SystemPrompt: FC<Props> = ({ conversation, onChangePrompt }) => {
       </label>
       <textarea
         ref={textareaRef}
-        className="w-full rounded-lg border border-neutral-500 px-4 py-2 text-neutral-900 shadow focus:outline-none dark:border-neutral-800 dark:border-opacity-50 dark:bg-[#40414F] dark:text-neutral-100"
+        className="w-full rounded-lg border border-neutral-200 px-4 py-3 text-neutral-900 focus:outline-none bg-transparent dark:border-neutral-600 dark:text-neutral-100"
         style={{
           resize: 'none',
           bottom: `${textareaRef?.current?.scrollHeight}px`,
diff --git a/components/Sidebar/ClearConversations.tsx b/components/Sidebar/ClearConversations.tsx
index 1bba3dc..4e5551f 100644
--- a/components/Sidebar/ClearConversations.tsx
+++ b/components/Sidebar/ClearConversations.tsx
@@ -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();
diff --git a/components/Sidebar/Conversation.tsx b/components/Sidebar/Conversation.tsx
index 7a2df5a..260412c 100644
--- a/components/Sidebar/Conversation.tsx
+++ b/components/Sidebar/Conversation.tsx
@@ -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' : ''
diff --git a/components/Sidebar/Search.tsx b/components/Sidebar/Search.tsx
index 6d73ec2..5ba60f9 100644
--- a/components/Sidebar/Search.tsx
+++ b/components/Sidebar/Search.tsx
@@ -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}
diff --git a/components/Sidebar/Sidebar.tsx b/components/Sidebar/Sidebar.tsx
index 0c12dc3..eb7df29 100644
--- a/components/Sidebar/Sidebar.tsx
+++ b/components/Sidebar/Sidebar.tsx
@@ -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>
diff --git a/components/Sidebar/SidebarButton.tsx b/components/Sidebar/SidebarButton.tsx
index 487e763..222f149 100644
--- a/components/Sidebar/SidebarButton.tsx
+++ b/components/Sidebar/SidebarButton.tsx
@@ -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>
   );
 };