chore: change sidebar font size & style (#191)

* chore: change sidebar font size & style

* chore: create font size style for sidebar

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)}
     />
   );

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

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}

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',

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)}
     />
   );

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}
         />
       )}

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>

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>

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')

tailwind.config.js

@@ -7,6 +7,9 @@ module.exports = {
   ],
   darkMode: 'class',
   theme: {
+    fontSize: {
+      sidebar: ['13px', '18px']
+    },
     extend: {},
   },
   plugins: [require('@tailwindcss/typography')],