Fix colors (#320)

sonic16x · Nov 20, 2024 · 64b1ea6 · 64b1ea6
1 parent 3e5eed9
commit 64b1ea6
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 24 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "interslavic",
-  "version": "1.22.8",
+  "version": "1.23.1",
   "license": "MIT",
   "description": "Interslavic Dictionary",
   "author": "Sergey Cherebedov",

diff --git a/src/colors.scss b/src/colors.scss
@@ -10,7 +10,7 @@
   --input-border-color: #E0E0E0;
   --shadow: 0 8px 16px rgba(0, 0, 0, .05);
   --border: 1px solid var(--input-border-color);
-  --table-highlighted-cell: #BBDEFB;
+  --table-highlighted-cell: #81D4FA;
   --table-border-color: var(--gray-9);
   --overlay-color: #000;
   --tips-font-color: #122f80;
@@ -49,7 +49,7 @@
   --input-border-color: #444;
   --shadow: 0 8px 16px rgba(0, 0, 0, .05);
   --border: 1px solid var(--input-border-color);
-  --table-highlighted-cell: #BBDEFB;
+  --table-highlighted-cell: #0288D1;
   --table-border-color: var(--gray-9);
   --overlay-color: #000;
   --tips-font-color: #122f80;

diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useDispatch } from 'react-redux';
 
 import { t } from 'translations';
@@ -54,6 +54,21 @@ export const Header =
         useEffect(() => {
             onResize();
         }, [navRef, logoRef, enabledPages, onResize]);
+
+        const filteredPages = useMemo(() => (
+            pages
+                .filter(({ value }) => {
+                    if (value === 'community' && !IS_COM) {
+                        return false
+                    }
+
+                    return (defaultPages.includes(value) || enabledPages.includes(value))
+                })
+        ), [IS_COM, pages])
+
+        const showBadges = useMemo(() => (
+            filteredPages.some(({ value }) => (badges.includes(value)))
+        ), [badges, filteredPages])
 
         return (
             <header
@@ -78,7 +93,7 @@ export const Header =
                 </h1>
                 <button
                     type="button"
-                    className={classNames('show-menu-button', { 'expanded': menuIsVisible, 'badge': badges.length })}
+                    className={classNames('show-menu-button', { 'expanded': menuIsVisible, 'badge': showBadges })}
                     aria-label="Menu button"
                     onClick={() => setMenuIsVisible(!menuIsVisible)}
                 >
@@ -88,25 +103,17 @@ export const Header =
                     className={classNames('menu', { active: menuIsVisible })}
                     ref={navRef}
                 >
-                    {pages
-                        .filter(({ value }) => {
-                            if (value === 'community' && !IS_COM) {
-                                return false
-                            }
-
-                            return (defaultPages.includes(value) || enabledPages.includes(value))
-                        })
-                        .map((({ title, value, subTitle }) => (
-                            <MenuItem
-                                key={value}
-                                title={title}
-                                subTitle={subTitle}
-                                value={value}
-                                active={page === value}
-                                hasBadge={badges.includes(value)}
-                                onClick={collapseMenu}
-                            />
-                        )))}
+                    {filteredPages.map((({ title, value, subTitle }) => (
+                        <MenuItem
+                            key={value}
+                            title={title}
+                            subTitle={subTitle}
+                            value={value}
+                            active={page === value}
+                            hasBadge={badges.includes(value)}
+                            onClick={collapseMenu}
+                        />
+                    )))}
                 </nav>
             </header>
         );