From 7bd5cd5d74b3d0fcd7c33f0791f677b681578b9e Mon Sep 17 00:00:00 2001
From: Ivan <8611739+IRBorisov@users.noreply.github.com>
Date: Fri, 20 Dec 2024 11:54:38 +0300
Subject: [PATCH] F: Improve navigation toggles

---
 rsconcept/frontend/src/app/Navigation/NavigationButton.tsx | 3 +--
 rsconcept/frontend/src/app/Navigation/ToggleNavigation.tsx | 6 +++---
 rsconcept/frontend/src/components/ui/TabLabel.tsx          | 2 +-
 rsconcept/frontend/src/styling/styles.css                  | 2 +-
 4 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/rsconcept/frontend/src/app/Navigation/NavigationButton.tsx b/rsconcept/frontend/src/app/Navigation/NavigationButton.tsx
index 3dadc51b..b16970d7 100644
--- a/rsconcept/frontend/src/app/Navigation/NavigationButton.tsx
+++ b/rsconcept/frontend/src/app/Navigation/NavigationButton.tsx
@@ -31,9 +31,8 @@ function NavigationButton({
       className={clsx(
         'mr-1 h-full', // prettier: split lines
         'flex items-center gap-1',
-        'clr-btn-nav cc-animate-color',
+        'clr-btn-nav cc-animate-color duration-500',
         'rounded-xl',
-        'transition duration-500',
         'font-controls whitespace-nowrap',
         {
           'px-2': text,
diff --git a/rsconcept/frontend/src/app/Navigation/ToggleNavigation.tsx b/rsconcept/frontend/src/app/Navigation/ToggleNavigation.tsx
index 5a696366..03e79a6b 100644
--- a/rsconcept/frontend/src/app/Navigation/ToggleNavigation.tsx
+++ b/rsconcept/frontend/src/app/Navigation/ToggleNavigation.tsx
@@ -12,7 +12,7 @@ function ToggleNavigation() {
       className={clsx(
         'absolute top-0 right-0 z-navigation',
         'min-h-[2rem] min-w-[2rem]',
-        'flex items-center justify-center gap-1',
+        'flex items-end justify-center gap-1',
         'select-none',
         !noNavigation && 'flex-col-reverse'
       )}
@@ -27,7 +27,7 @@ function ToggleNavigation() {
         <button
           tabIndex={-1}
           type='button'
-          className='p-1 rounded-full'
+          className='p-1'
           onClick={toggleDarkMode}
           data-tooltip-id={globals.tooltip}
           data-tooltip-content={darkMode ? 'Тема: Темная' : 'Тема: Светлая'}
@@ -39,7 +39,7 @@ function ToggleNavigation() {
       <button
         tabIndex={-1}
         type='button'
-        className='p-1 rounded-full'
+        className='p-1'
         onClick={toggleNoNavigation}
         data-tooltip-id={globals.tooltip}
         data-tooltip-content={noNavigationAnimation ? 'Показать навигацию' : 'Скрыть навигацию'}
diff --git a/rsconcept/frontend/src/components/ui/TabLabel.tsx b/rsconcept/frontend/src/components/ui/TabLabel.tsx
index 882009f4..52fac683 100644
--- a/rsconcept/frontend/src/components/ui/TabLabel.tsx
+++ b/rsconcept/frontend/src/components/ui/TabLabel.tsx
@@ -20,7 +20,7 @@ function TabLabel({ label, title, titleHtml, hideTitle, className, ...otherProps
       className={clsx(
         'min-w-[5.5rem] h-full',
         'px-2 py-1 flex justify-center',
-        'clr-hover cc-animate-color',
+        'clr-hover cc-animate-color duration-150',
         'text-sm whitespace-nowrap font-controls',
         'select-none hover:cursor-pointer',
         'outline-none',
diff --git a/rsconcept/frontend/src/styling/styles.css b/rsconcept/frontend/src/styling/styles.css
index e95531fe..f778a6f7 100644
--- a/rsconcept/frontend/src/styling/styles.css
+++ b/rsconcept/frontend/src/styling/styles.css
@@ -223,6 +223,6 @@
   .cc-animate-color {
     transition-property: color, background-color;
     transition-timing-function: var(--transition-bezier);
-    transition-duration: var(--duration-select);
+    transition-duration: var(--duration-fade);
   }
 }