fix(filtration-section): fix colors (#279)

visgl · Mar 6, 2023 · fc25621 · fc25621
1 parent 3684236
commit fc25621
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 13 deletions.
diff --git a/public/images/floor-image-inactive.svg b/public/images/floor-image-inactive.svg
diff --git a/src/app.tsx b/src/app.tsx
@@ -74,6 +74,7 @@ const THEMES: AppThemes = {
       bookmarkFileInteracrions: dim_canvas_primary,
       validateTileOk: color_brand_secondary_dark,
       validateTileWarning: color_accent_tertiary,
+      filtrationImage: color_brand_quaternary,
     },
     name: Theme.Dark,
   },
@@ -104,6 +105,7 @@ const THEMES: AppThemes = {
       bookmarkFileInteracrions: color_canvas_secondary_inverted,
       validateTileOk: color_brand_secondary,
       validateTileWarning: color_accent_primary,
+      filtrationImage: color_canvas_secondary,
     },
     name: Theme.Light,
   },

diff --git a/src/components/layers-panel/filtration-section/filtration-section.tsx b/src/components/layers-panel/filtration-section/filtration-section.tsx
@@ -1,5 +1,5 @@
 import { useState } from "react";
-import styled, { css } from "styled-components";
+import styled, { css, useTheme } from "styled-components";
 import { Slider } from "../../slider/slider";
 import Floor from "../../../../public/images/floor-image-inactive.svg";
 import FloorActive from "../../../../public/images/floor-image-active.svg";
@@ -91,6 +91,8 @@ export const FiltrationSection = () => {
   const [selectedFloorId, setSelectedFloorId] = useState<string>("");
   const [selectedPhaseId, setSelectedPhaseId] = useState<string>("");
 
+  const theme = useTheme();
+
   const onSelectFloorHandler = (floorId: string) => {
     const floor = floors.find(({ id }) => id === floorId);
     if (!floor) {
@@ -130,7 +132,14 @@ export const FiltrationSection = () => {
                 zIndex={index}
               >
                 <FloorsImage>
-                  {isFloorActive ? <FloorActive /> : <Floor />}
+                  {isFloorActive ? (
+                    <FloorActive />
+                  ) : (
+                    <Floor
+                      fill={theme.colors.mainAttributeHighlightColor}
+                      stroke={theme.colors.filtrationImage}
+                    />
+                  )}
                 </FloorsImage>
               </FloorsItem>
             );

diff --git a/src/components/slider/slider-list-item.tsx b/src/components/slider/slider-list-item.tsx
@@ -4,7 +4,7 @@ import {
   color_canvas_secondary,
   color_brand_tertiary,
   color_accent_primary,
-  color_brand_primary,
+  color_canvas_primary_inverted,
 } from "../../constants/colors";
 import TrashIcon from "../../../public/icons/trash.svg";
 import CloseIcon from "../../../public/icons/close.svg";
@@ -132,8 +132,8 @@ const ListItem = styled.div<LayoutProps & ListItemProps>`
       `;
     } else {
       return css<ListItemProps>`
-        background: ${({ selected }) =>
-          selected ? color_brand_tertiary : color_brand_primary};
+        background: ${({ selected, theme }) =>
+          selected ? color_brand_tertiary : theme.colors.mainAttibuteItemColor};
       `;
     }
   }};
@@ -148,11 +148,16 @@ const TrashIconContainer = styled.div<{ deleting: boolean }>`
   fill: ${({ deleting }) => deleting && color_accent_primary};
 `;
 
-const SliderItemText = styled.div`
+const SliderItemText = styled.div<{ selected: boolean }>`
   font-weight: 500;
   font-size: 16px;
   line-height: 19px;
   color: ${({ theme }) => theme.colors.fontColor};
+  ${({ selected }) =>
+    selected &&
+    css`
+      color: ${color_canvas_primary_inverted};
+    `}
 `;
 
 type SliderListItemProps = {
@@ -215,11 +220,7 @@ export const SliderListItem = forwardRef(
         <>
           {deleteBookmark && (
             <>
-              <SliderInnerButton
-                width={32}
-                height={32}
-                onInnerClick={onDelete}
-              >
+              <SliderInnerButton width={32} height={32} onInnerClick={onDelete}>
                 <ConfirmIcon />
               </SliderInnerButton>
               <SliderInnerButton
@@ -277,7 +278,11 @@ export const SliderListItem = forwardRef(
             editingMode &&
             renderListItemContentDesktop()}
           {isMobileLayout && editingMode && renderListItemContentMobile()}
-          {sliderItemText && <SliderItemText>{sliderItemText}</SliderItemText>}
+          {sliderItemText && (
+            <SliderItemText selected={selected}>
+              {sliderItemText}
+            </SliderItemText>
+          )}
         </ListItem>
         {isDeletePanelOpen && (
           <ConfirmDeletingPanel