From 270031c7839d49daec5232f36d508e098a0dc3c1 Mon Sep 17 00:00:00 2001
From: MACHINSOFT <110278369+machinsoft@users.noreply.github.com>
Date: Tue, 5 Dec 2023 16:37:36 +0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=AA=9F=20Minor=20UI=20Styling=20Changes?=
 =?UTF-8?q?=20(#1260)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Correct the display of the interface when hovering with the mouse

* Replace ring-1 with border completely.

* Fix it so that the text does not overlap with the SVG in mobile navigation.

* Remove the extra class -ml-0.5 -mt-0.5, there is no need to shift the buttons
---
 client/src/components/Chat/Input/PopoverButtons.tsx | 2 +-
 client/src/components/Endpoints/PopoverButtons.tsx  | 2 +-
 client/src/components/Nav/MobileNav.tsx             | 6 +++---
 client/src/components/ui/Button.tsx                 | 2 +-
 client/src/components/ui/SelectDropDown.tsx         | 2 +-
 client/src/components/ui/Slider.tsx                 | 2 +-
 client/src/localization/languages/Ru.tsx            | 3 ++-
 7 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/client/src/components/Chat/Input/PopoverButtons.tsx b/client/src/components/Chat/Input/PopoverButtons.tsx
index 9c9e6b9043..e2230148e5 100644
--- a/client/src/components/Chat/Input/PopoverButtons.tsx
+++ b/client/src/components/Chat/Input/PopoverButtons.tsx
@@ -42,7 +42,7 @@ export default function PopoverButtons({
         label: `Show ${showAgentSettings ? 'Completion' : 'Agent'} Settings`,
         buttonClass: '',
         handler: () => setShowAgentSettings((prev) => !prev),
-        icon: <GPTIcon className={cn('mr-1 mt-[2px] w-[14px]', iconClass)} size={14} />,
+        icon: <GPTIcon className={cn('mr-1 w-[14px]', iconClass)} size={24} />,
       },
     ],
   };
diff --git a/client/src/components/Endpoints/PopoverButtons.tsx b/client/src/components/Endpoints/PopoverButtons.tsx
index 37c4e08c1f..217cce1a52 100644
--- a/client/src/components/Endpoints/PopoverButtons.tsx
+++ b/client/src/components/Endpoints/PopoverButtons.tsx
@@ -43,7 +43,7 @@ export default function PopoverButtons({
         label: localize('com_endpoint_show_what_settings', showAgentSettings ? localize('com_endpoint_completion') : localize('com_endpoint_agent')),
         buttonClass: '',
         handler: () => setShowAgentSettings((prev) => !prev),
-        icon: <GPTIcon className={cn('mr-1 mt-[2px] w-[14px]', iconClass)} size={14} />,
+        icon: <GPTIcon className={cn('mr-1 w-[14px]', iconClass)} size={24} />,
       },
     ],
   };
diff --git a/client/src/components/Nav/MobileNav.tsx b/client/src/components/Nav/MobileNav.tsx
index 3edafe8c38..c100fb6a54 100644
--- a/client/src/components/Nav/MobileNav.tsx
+++ b/client/src/components/Nav/MobileNav.tsx
@@ -15,10 +15,10 @@ export default function MobileNav({
   const { title = 'New Chat' } = conversation || {};
 
   return (
-    <div className="text-token-primary border-token-border-medium bg-token-surface-primary dark:bg-token-surface-secondary sticky top-0 z-10 flex min-h-[40px] items-center border-b pl-1 dark:text-white md:hidden">
+    <div className="text-token-primary border-token-border-medium bg-token-surface-primary dark:bg-token-surface-secondary sticky top-0 z-10 flex min-h-[40px] items-center border-b dark:text-white md:hidden">
       <button
         type="button"
-        className="absolute -ml-0.5 -mt-0.5 inline-flex h-10 w-10 items-center justify-center rounded-md hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white active:opacity-50 dark:hover:text-white"
+        className="inline-flex h-10 w-10 items-center justify-center rounded-md hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white active:opacity-50 dark:hover:text-white"
         onClick={() => setNavVisible((prev) => !prev)}
       >
         <span className="sr-only">{localize('com_nav_open_sidebar')}</span>
@@ -41,7 +41,7 @@ export default function MobileNav({
       <h1 className="flex-1 text-center text-base font-normal">
         {title || localize('com_ui_new_chat')}
       </h1>
-      <button type="button" className="px-3" onClick={() => newConversation()}>
+      <button type="button" className="inline-flex h-10 w-10 items-center justify-center rounded-md hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white active:opacity-50 dark:hover:text-white" onClick={() => newConversation()}>
         <svg
           width="24"
           height="24"
diff --git a/client/src/components/ui/Button.tsx b/client/src/components/ui/Button.tsx
index 1aa55a78c7..50aa827687 100644
--- a/client/src/components/ui/Button.tsx
+++ b/client/src/components/ui/Button.tsx
@@ -4,7 +4,7 @@ import { VariantProps, cva } from 'class-variance-authority';
 import { cn } from '../../utils';
 
 const buttonVariants = cva(
-  'inline-flex items-center justify-center text-sm font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 dark:hover:bg-slate-800 dark:hover:text-slate-100 disabled:opacity-50 dark:focus:ring-slate-400 disabled:pointer-events-none dark:focus:ring-offset-slate-900 data-[state=open]:bg-slate-100 dark:data-[state=open]:bg-slate-800',
+  'rounded-md inline-flex items-center justify-center text-sm font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 dark:hover:bg-slate-800 dark:hover:text-slate-100 disabled:opacity-50 dark:focus:ring-slate-400 disabled:pointer-events-none dark:focus:ring-offset-slate-900 data-[state=open]:bg-slate-100 dark:data-[state=open]:bg-slate-800',
   {
     variants: {
       variant: {
diff --git a/client/src/components/ui/SelectDropDown.tsx b/client/src/components/ui/SelectDropDown.tsx
index 5fe4d7ae13..651f94c3b6 100644
--- a/client/src/components/ui/SelectDropDown.tsx
+++ b/client/src/components/ui/SelectDropDown.tsx
@@ -122,7 +122,7 @@ function SelectDropDown({
               >
                 <Listbox.Options
                   className={cn(
-                    'absolute z-10 mt-2 max-h-60 w-full overflow-auto rounded bg-white text-base text-xs ring-1 ring-black/10 focus:outline-none dark:bg-gray-800 dark:ring-white/20 dark:last:border-0 md:w-[100%]',
+                    'absolute z-10 mt-2 max-h-60 w-full overflow-auto rounded bg-white text-base text-xs border ring-black/10 focus:outline-none dark:bg-gray-800 dark:ring-white/20 dark:last:border-0 md:w-[100%]',
                     optionsListClass ?? '',
                   )}
                 >
diff --git a/client/src/components/ui/Slider.tsx b/client/src/components/ui/Slider.tsx
index fefef62519..eccdf5de1d 100644
--- a/client/src/components/ui/Slider.tsx
+++ b/client/src/components/ui/Slider.tsx
@@ -25,7 +25,7 @@ const Slider = React.forwardRef<React.ElementRef<typeof SliderPrimitive.Root>, S
             return;
           })
         }
-        className="block h-4 w-4 rounded-full border-2 border-gray-400 bg-white transition-colors focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 dark:border-gray-100 dark:bg-gray-400 dark:focus:ring-gray-400 dark:focus:ring-offset-gray-900"
+        className="cursor-pointer block h-4 w-4 rounded-full border-2 border-gray-400 bg-white transition-colors focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 dark:border-gray-100 dark:bg-gray-400 dark:focus:ring-gray-400 dark:focus:ring-offset-gray-900"
       />
     </SliderPrimitive.Root>
   ),
diff --git a/client/src/localization/languages/Ru.tsx b/client/src/localization/languages/Ru.tsx
index 35a169bdd6..4030fce19c 100644
--- a/client/src/localization/languages/Ru.tsx
+++ b/client/src/localization/languages/Ru.tsx
@@ -170,7 +170,8 @@ export default {
   com_endpoint_agent: 'Агент',
   com_endpoint_show_what_settings: 'Показать настройки {0}',
   com_endpoint_save: 'Сохранить',
-  com_endpoint_export: 'Экспорт',
+  com_endpoint_export: 'Экспортировать',
+  com_endpoint_import: 'Импортировать',
   com_endpoint_save_as_preset: 'Сохранить как предустановку',
   com_endpoint_not_implemented: 'Не реализовано',
   com_endpoint_no_presets: 'Пока нет предустановок',