From e3f82aa0d9ed510d7057f5513d71b07a13629b5a Mon Sep 17 00:00:00 2001
From: "Leon.kov" <kovzel.leo@gmail.com>
Date: Wed, 17 Apr 2024 16:57:06 +0300
Subject: [PATCH] fix: icon sizes and colors with svgr lib

---
 .eslintrc.js                                  |  2 +-
 config/build/buildLoaders.ts                  | 28 +++++++++++++++----
 src/app/App.tsx                               |  2 +-
 src/entities/User/model/slice/userSlice.ts    |  4 +--
 .../ui/ArticleViewSelector.tsx                |  2 ++
 .../ThemeSwitcher/ui/ThemeSwitcher.tsx        |  7 ++---
 src/shared/lib/features/setGetFeatures.ts     |  4 +--
 7 files changed, 32 insertions(+), 17 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index b998021..68c7a41 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -73,7 +73,7 @@ module.exports = {
                 ],
             },
         ],
-        'react/jsx-max-props-per-line': ['error', { maximum: 3 }],
+        'react/jsx-max-props-per-line': ['error', { maximum: 4 }],
     },
     globals: {
         __IS_DEV__: true,
diff --git a/config/build/buildLoaders.ts b/config/build/buildLoaders.ts
index 4f9c2e2..5e7a720 100644
--- a/config/build/buildLoaders.ts
+++ b/config/build/buildLoaders.ts
@@ -13,17 +13,33 @@ export function buildLoaders(options: BuildOptions): webpack.RuleSetRule[] {
         paths,
     } = options;
 
-    const svgLoader = {
-        test: /\.svg$/,
-        use: ['@svgr/webpack'],
-    };
+	const svgLoader = {
+		test: /\.svg$/,
+		use: [{
+			loader: '@svgr/webpack',
+			options: {
+				icon: true,
+				svgoConfig: {
+					plugins: [
+						{
+							name: 'convertColors',
+							params: {
+								currentColor: true,
+							}
+						}
+					]
+				}
+			}
+		}],
+	};
+
 
-    const codeBabelLoader = buildBabelLoader({ ...options, isTsx: false });
+	const codeBabelLoader = buildBabelLoader({ ...options, isTsx: false });
     const tsxCodeBabelLoader = buildBabelLoader({ ...options, isTsx: true });
 
     const cssLoader = buildCssLoader(isDev);
 
-    // Если не используем тайпскрипт - нужен babel-loader
+    // if not using ts -  babel-loader needed
     // const typescriptLoader = {
     //     test: /\.tsx?$/,
     //     use: 'ts-loader',
diff --git a/src/app/App.tsx b/src/app/App.tsx
index 5ff1e1d..af9603f 100644
--- a/src/app/App.tsx
+++ b/src/app/App.tsx
@@ -8,9 +8,9 @@ import { Sidebar } from '@/widgets/Sidebar';
 import { getUserInited, initAuthData } from '@/entities/User';
 import { useTheme } from '@/shared/lib/hook/useTheme/useTheme';
 import { useAppDispatch } from '@/shared/lib/hook/useAppDispatch/useAppDispatch';
-import { PageLoader } from '@/features/PageLoader';
 import { ToggleFeatures } from '@/shared/lib/features';
 import { MainLayout } from '@/shared/layouts/MainLayout';
+import { PageLoader } from '@/features/PageLoader';
 
 function App() {
     const { theme } = useTheme();
diff --git a/src/entities/User/model/slice/userSlice.ts b/src/entities/User/model/slice/userSlice.ts
index a1292c3..fe2ba74 100644
--- a/src/entities/User/model/slice/userSlice.ts
+++ b/src/entities/User/model/slice/userSlice.ts
@@ -42,9 +42,7 @@ export const userSlice = createSlice({
             },
         );
         builder.addCase(initAuthData.rejected, (state) => {
-            if (state.authData) {
-                state._inited = true;
-            }
+            state._inited = true;
         });
     },
 });
diff --git a/src/features/ArticleViewSelector/ui/ArticleViewSelector.tsx b/src/features/ArticleViewSelector/ui/ArticleViewSelector.tsx
index 6fe8b92..bf4a607 100644
--- a/src/features/ArticleViewSelector/ui/ArticleViewSelector.tsx
+++ b/src/features/ArticleViewSelector/ui/ArticleViewSelector.tsx
@@ -44,6 +44,8 @@ export const ArticleViewSelector = memo((props: ArticleViewSelectorProps) => {
                             [cls.notSelected]: viewType.view !== view,
                         })}
                         Svg={viewType.icon}
+                        width={24}
+                        height={24}
                     />
                 </Button>
             ))}
diff --git a/src/features/ThemeSwitcher/ui/ThemeSwitcher.tsx b/src/features/ThemeSwitcher/ui/ThemeSwitcher.tsx
index 116d21e..a544149 100644
--- a/src/features/ThemeSwitcher/ui/ThemeSwitcher.tsx
+++ b/src/features/ThemeSwitcher/ui/ThemeSwitcher.tsx
@@ -1,12 +1,11 @@
 import React, { useCallback } from 'react';
 import { classNames } from '@/shared/lib/classNames/classNames';
 import { Button, ButtonTheme } from '@/shared/ui/Button';
-import LightIcon from '../../../shared/assets/icons/theme-light.svg';
-import DarkIcon from '../../../shared/assets/icons/theme-dark.svg';
-import { Theme } from '@/shared/const/theme';
+import ThemeIcon from '../../../shared/assets/icons/theme-light.svg';
 import { useTheme } from '@/shared/lib/hook/useTheme/useTheme';
 import { saveJsonSettings } from '@/entities/User';
 import { useAppDispatch } from '@/shared/lib/hook/useAppDispatch/useAppDispatch';
+import { Icon } from '@/shared/ui/Icon';
 
 interface ThemeSwitcherProps {
     className?: string;
@@ -29,7 +28,7 @@ export const ThemeSwitcher = ({ className }: ThemeSwitcherProps) => {
             className={classNames('', {}, [className])}
             onClick={onToggleHandler}
         >
-            {theme === Theme.DARK ? <DarkIcon /> : <LightIcon />}
+            <Icon Svg={ThemeIcon} width={40} height={40} inverted />
         </Button>
     );
 };
diff --git a/src/shared/lib/features/setGetFeatures.ts b/src/shared/lib/features/setGetFeatures.ts
index 847d538..57f8578 100644
--- a/src/shared/lib/features/setGetFeatures.ts
+++ b/src/shared/lib/features/setGetFeatures.ts
@@ -1,7 +1,7 @@
 import { FeatureFlags } from '@/shared/types/featureFlags';
 
 // features does not change on session, only after
-let featureFlags: FeatureFlags;
+let featureFlags: FeatureFlags = {};
 
 export function setFeatureFlags(newFeatureFlags?: FeatureFlags) {
     if (newFeatureFlags) {
@@ -10,5 +10,5 @@ export function setFeatureFlags(newFeatureFlags?: FeatureFlags) {
 }
 
 export function getFeatureFlag(flag: keyof FeatureFlags) {
-    return featureFlags[flag] ?? false;
+    return featureFlags?.[flag];
 }