feat: redesign scroll

sashtje · Oct 16, 2023 · a030d35 · a030d35
1 parent 9cc9ed3
commit a030d35
Show file tree

Hide file tree

Showing 5 changed files with 9 additions and 5 deletions.
diff --git a/src/app/providers/ThemeProvider/ui/ThemeProvider.tsx b/src/app/providers/ThemeProvider/ui/ThemeProvider.tsx
@@ -19,6 +19,7 @@ export const ThemeProvider = (props: ThemeProviderProps) => {
     if (!isThemeInited && !initialTheme && defaultTheme) {
       setTheme(defaultTheme);
       setThemeInited(true);
+      (document.childNodes[1] as HTMLElement).className = defaultTheme;
     }
   }, [defaultTheme, initialTheme, isThemeInited]);
 

diff --git a/src/app/styles/index.scss b/src/app/styles/index.scss
@@ -10,7 +10,7 @@ body {
 }
 
 * {
-  scrollbar-color: var(--card-bg) var(--inverted-primary-color);
+  scrollbar-color: var(--icon-redesigned) var(--light-bg-redesigned);
   scrollbar-width: 10px;
 }
 
@@ -39,11 +39,11 @@ body.redesigned {
 }
 
 *::-webkit-scrollbar-track {
-  background: var(--card-bg);
+  background: var(--light-bg-redesigned);
 }
 
 *::-webkit-scrollbar-thumb {
-  background-color: var(--inverted-primary-color);
+  background-color: var(--icon-redesigned);
   border-radius: 20px;
-  border: 3px solid var(--primary-color);
+  border: 3px solid var(--accent-redesigned);
 }
diff --git a/src/features/ThemeSwitcher/ui/ThemeSwitcher.tsx b/src/features/ThemeSwitcher/ui/ThemeSwitcher.tsx
@@ -16,7 +16,7 @@ interface ThemeSwitcherProps {
 }
 
 export const ThemeSwitcher = memo(({ className }: ThemeSwitcherProps) => {
-  const { theme, toggleTheme } = useTheme();
+  const { toggleTheme } = useTheme();
   const dispatch = useAppDispatch();
 
   const onToggleHandler = useCallback(() => {

diff --git a/src/shared/lib/hooks/useTheme/useTheme.ts b/src/shared/lib/hooks/useTheme/useTheme.ts
@@ -20,6 +20,8 @@ export function useTheme(): UseThemeResult {
       on: () => 'redesigned',
       off: () => '',
     })} ${theme || Theme.LIGHT}`;
+
+    (document.childNodes[1] as HTMLElement).className = theme || Theme.LIGHT;
   }, [theme]);
 
   const toggleTheme = (saveAction: (theme: Theme) => void) => {

diff --git a/src/shared/ui/redesigned/StarRating/ui/StarRating.tsx b/src/shared/ui/redesigned/StarRating/ui/StarRating.tsx
@@ -47,6 +47,7 @@ export const StarRating = memo((props: StarRatingProps) => {
     <div className={classNames(cls.starRating, {}, [className])}>
       {stars.map((starNumber) => (
         <ToggleFeatures
+          key={starNumber}
           feature="isAppRedesigned"
           on={
             <Icon