🪟 Minor UI Styling Changes (#1260)

* 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

@@ -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} />,
       },
     ],
   };

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} />,
       },
     ],
   };

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"

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: {

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 ?? '',
                   )}
                 >

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

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: 'Пока нет предустановок',