make design button primary on activation

GRBurst · Jun 19, 2024 · 2425eee · 2425eee
1 parent 4aef943
commit 2425eee
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 9 deletions.
diff --git a/frontend/src/components/FilterableJobList.tsx b/frontend/src/components/FilterableJobList.tsx
@@ -1,7 +1,6 @@
 import { Flex, FloatButton, List, Slider } from "antd";
-import { ConfigContext } from "antd/es/config-provider";
 import { HashSet } from "effect";
-import { CSSProperties, useContext, useState } from "react";
+import { CSSProperties, useState } from "react";
 import sanitizeHtml from "sanitize-html";
 import { DesignPaletteIcon } from "./Icons";
 
@@ -63,7 +62,6 @@ interface ItemListProps {
 }
 const ItemList = ({ items, tagFilters, searchFilter }: ItemListProps) => {
   const [showSlider, setShowSlider] = useState<boolean>(false);
-  const appContext = useContext(ConfigContext);
   const displayStyle: CSSProperties = {
     display: showSlider ? "block" : "none",
   };
@@ -73,12 +71,7 @@ const ItemList = ({ items, tagFilters, searchFilter }: ItemListProps) => {
       onClick={() => setShowSlider(!showSlider)}
       tooltip={<div>Edit Design</div>}
       icon={<DesignPaletteIcon />}
-      style={{
-        color: showSlider
-          ? appContext.theme?.token?.colorPrimaryBg
-          : appContext.theme?.token?.colorPrimary,
-        bottom: "100px",
-      }}
+      type={showSlider ? "primary" : "default"}
     />
   );
   const slider = (

diff --git a/frontend/src/index.css b/frontend/src/index.css
@@ -105,6 +105,8 @@ h3.list-header {
 @media (min-width:641px)  { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */
   .design-button {
     display: block;
+    position: absolute;
+    bottom: 100px;
   }
 }
 @media (min-width:961px)  { /* tablet, landscape iPad, lo-res laptops ands desktops */