From 4d0d1e8b95ddf52af68f22a66a380d399c1ca25f Mon Sep 17 00:00:00 2001
From: Danil Shishkevich <44939683+shishkevichd@users.noreply.github.com>
Date: Sun, 26 Mar 2023 16:29:31 +0700
Subject: [PATCH] chore: change sidebar font size & style (#191)

* chore: change sidebar font size & style

* chore: create font size style for sidebar
---
 components/Sidebar/ClearConversations.tsx |  4 ++--
 components/Sidebar/Conversation.tsx       |  4 ++--
 components/Sidebar/Folder.tsx             |  2 +-
 components/Sidebar/Import.tsx             |  2 +-
 components/Sidebar/Key.tsx                |  4 ++--
 components/Sidebar/Search.tsx             |  4 ++--
 components/Sidebar/Sidebar.tsx            | 14 ++++++++------
 components/Sidebar/SidebarButton.tsx      |  2 +-
 components/Sidebar/SidebarSettings.tsx    |  4 ++--
 tailwind.config.js                        |  3 +++
 10 files changed, 24 insertions(+), 19 deletions(-)

diff --git a/components/Sidebar/ClearConversations.tsx b/components/Sidebar/ClearConversations.tsx
index a583c21..1bba3dc 100644
--- a/components/Sidebar/ClearConversations.tsx
+++ b/components/Sidebar/ClearConversations.tsx
@@ -19,7 +19,7 @@ export const ClearConversations: FC<Props> = ({ onClearConversations }) => {
 
   return isConfirming ? (
     <div className="flex w-full cursor-pointer items-center rounded-md py-3 px-3 hover:bg-[#343541]">
-      <IconTrash size={16} />
+      <IconTrash size={18} />
 
       <div className="ml-3 flex-1 text-left text-white">
         {t('Are you sure?')}
@@ -48,7 +48,7 @@ export const ClearConversations: FC<Props> = ({ onClearConversations }) => {
   ) : (
     <SidebarButton
       text={t('Clear conversations')}
-      icon={<IconTrash size={16} />}
+      icon={<IconTrash size={18} />}
       onClick={() => setIsConfirming(true)}
     />
   );
diff --git a/components/Sidebar/Conversation.tsx b/components/Sidebar/Conversation.tsx
index b8625c0..4ba766b 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-sm transition-colors duration-200 hover:bg-[#343541]/90 ${
+      className={`flex w-full cursor-pointer items-center gap-3 rounded-lg p-3 text-sidebar transition-colors duration-200 hover:bg-[#343541]/90 ${
         loading ? 'disabled:cursor-not-allowed' : ''
       } ${
         selectedConversation.id === conversation.id ? 'bg-[#343541]/90' : ''
@@ -74,7 +74,7 @@ export const ConversationComponent: FC<Props> = ({
       draggable="true"
       onDragStart={(e) => handleDragStart(e, conversation)}
     >
-      <IconMessage size={16} />
+      <IconMessage size={18} />
 
       {isRenaming && selectedConversation.id === conversation.id ? (
         <input
diff --git a/components/Sidebar/Folder.tsx b/components/Sidebar/Folder.tsx
index a915260..d4c13a5 100644
--- a/components/Sidebar/Folder.tsx
+++ b/components/Sidebar/Folder.tsx
@@ -100,7 +100,7 @@ export const Folder: FC<Props> = ({
   return (
     <div>
       <div
-        className={`mb-1 flex cursor-pointer items-center gap-3 rounded-lg px-3 py-2 text-sm transition-colors duration-200 hover:bg-[#343541]/90`}
+        className={`mb-1 flex cursor-pointer items-center gap-3 rounded-lg px-3 py-2 text-sidebar transition-colors duration-200 hover:bg-[#343541]/90`}
         onClick={() => setIsOpen(!isOpen)}
         onDrop={(e) => handleDrop(e, currentFolder)}
         onDragOver={allowDrop}
diff --git a/components/Sidebar/Import.tsx b/components/Sidebar/Import.tsx
index 8297a4b..9625461 100644
--- a/components/Sidebar/Import.tsx
+++ b/components/Sidebar/Import.tsx
@@ -42,7 +42,7 @@ export const Import: FC<Props> = ({ onImport }) => {
 
       <SidebarButton
         text={t('Import conversations')}
-        icon={<IconFileImport size={16} />}
+        icon={<IconFileImport size={18} />}
         onClick={() => {
           const importFile = document.querySelector(
             '#import-file',
diff --git a/components/Sidebar/Key.tsx b/components/Sidebar/Key.tsx
index d11abe4..9518a6e 100644
--- a/components/Sidebar/Key.tsx
+++ b/components/Sidebar/Key.tsx
@@ -27,7 +27,7 @@ export const Key: FC<Props> = ({ apiKey, onApiKeyChange }) => {
 
   return isChanging ? (
     <div className="duration:200 flex w-full cursor-pointer items-center rounded-md py-3 px-3 transition-colors hover:bg-gray-500/10">
-      <IconKey size={16} />
+      <IconKey size={18} />
 
       <input
         className="ml-2 h-[20px] flex-1 overflow-hidden overflow-ellipsis border-b border-neutral-400 bg-transparent pr-1 text-left text-white outline-none focus:border-neutral-100"
@@ -61,7 +61,7 @@ export const Key: FC<Props> = ({ apiKey, onApiKeyChange }) => {
   ) : (
     <SidebarButton
       text={t('OpenAI API Key')}
-      icon={<IconKey size={16} />}
+      icon={<IconKey size={18} />}
       onClick={() => setIsChanging(true)}
     />
   );
diff --git a/components/Sidebar/Search.tsx b/components/Sidebar/Search.tsx
index e64e7f1..c60a2f1 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-sm text-white"
+        className="w-full flex-1 rounded-md border border-neutral-600 bg-[#202123] px-4 py-3 pr-10 text-sidebar text-white"
         type="text"
         placeholder={t('Search conversations...') || ''}
         value={searchTerm}
@@ -31,7 +31,7 @@ export const Search: FC<Props> = ({ searchTerm, onSearch }) => {
       {searchTerm && (
         <IconX
           className="absolute right-4 cursor-pointer text-neutral-300 hover:text-neutral-400"
-          size={24}
+          size={18}
           onClick={clearSearch}
         />
       )}
diff --git a/components/Sidebar/Sidebar.tsx b/components/Sidebar/Sidebar.tsx
index b664658..697959d 100644
--- a/components/Sidebar/Sidebar.tsx
+++ b/components/Sidebar/Sidebar.tsx
@@ -2,6 +2,7 @@ import { ChatFolder, Conversation, KeyValuePair } from '@/types';
 import {
   IconArrowBarLeft,
   IconFolderPlus,
+  IconMessagesOff,
   IconPlus,
 } from '@tabler/icons-react';
 import { FC, useEffect, useState } from 'react';
@@ -121,21 +122,21 @@ 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-sm text-white transition-colors duration-200 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-sidebar text-white transition-colors duration-200 select-none hover:bg-gray-500/10"
           onClick={() => {
             onNewConversation();
             setSearchTerm('');
           }}
         >
-          <IconPlus size={16} />
+          <IconPlus size={18} />
           {t('New chat')}
         </button>
 
         <button
-          className="ml-2 flex flex-shrink-0 cursor-pointer items-center gap-3 rounded-md border border-white/20 p-3 text-sm 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-sidebar text-white transition-colors duration-200 hover:bg-gray-500/10"
           onClick={() => onCreateFolder(t('New folder'))}
         >
-          <IconFolderPlus size={16} />
+          <IconFolderPlus size={18} />
         </button>
 
         <IconArrowBarLeft
@@ -191,8 +192,9 @@ export const Sidebar: FC<Props> = ({
             />
           </div>
         ) : (
-          <div className="mt-4 text-center text-white">
-            <div>{t('No conversations.')}</div>
+          <div className="mt-8 text-white text-center opacity-50 select-none">
+            <IconMessagesOff className='mx-auto mb-3'/>
+            <span className='text-sidebar'>{t('No conversations.')}</span>
           </div>
         )}
       </div>
diff --git a/components/Sidebar/SidebarButton.tsx b/components/Sidebar/SidebarButton.tsx
index 8733dce..6f62be8 100644
--- a/components/Sidebar/SidebarButton.tsx
+++ b/components/Sidebar/SidebarButton.tsx
@@ -9,7 +9,7 @@ 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 transition-colors duration-200 hover:bg-gray-500/10"
+      className="flex w-full cursor-pointer items-center gap-3 rounded-md py-3 px-3 text-white text-sidebar transition-colors duration-200 hover:bg-gray-500/10 select-none"
       onClick={onClick}
     >
       <div>{icon}</div>
diff --git a/components/Sidebar/SidebarSettings.tsx b/components/Sidebar/SidebarSettings.tsx
index ffb30c7..020da8d 100644
--- a/components/Sidebar/SidebarSettings.tsx
+++ b/components/Sidebar/SidebarSettings.tsx
@@ -38,14 +38,14 @@ export const SidebarSettings: FC<Props> = ({
 
       <SidebarButton
         text={t('Export conversations')}
-        icon={<IconFileExport size={16} />}
+        icon={<IconFileExport size={18} />}
         onClick={() => onExportConversations()}
       />
 
       <SidebarButton
         text={lightMode === 'light' ? t('Dark mode') : t('Light mode')}
         icon={
-          lightMode === 'light' ? <IconMoon size={16} /> : <IconSun size={16} />
+          lightMode === 'light' ? <IconMoon size={18} /> : <IconSun size={18} />
         }
         onClick={() =>
           onToggleLightMode(lightMode === 'light' ? 'dark' : 'light')
diff --git a/tailwind.config.js b/tailwind.config.js
index ef71b3c..81c0ede 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -7,6 +7,9 @@ module.exports = {
   ],
   darkMode: 'class',
   theme: {
+    fontSize: {
+      sidebar: ['13px', '18px']
+    },
     extend: {},
   },
   plugins: [require('@tailwindcss/typography')],