feat: Now Saturation is a div

Wondermarin · Apr 16, 2021 · 5dd224a · 5dd224a
1 parent c045256
commit 5dd224a
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 42 deletions.
diff --git a/src/components/ColorPicker/ColorPicker.component.tsx b/src/components/ColorPicker/ColorPicker.component.tsx
@@ -13,10 +13,10 @@ const ColorPicker = ({
   hideHSB = false,
   dark = false,
 }: ColorPickerProps): JSX.Element => (
-  <div className={`rcp ${dark ? "rcp-dark" : "rcp-light"}`}>
+  <div className={`rcp ${dark ? "rcp-dark" : "rcp-light"}`} style={{ width }}>
     <Saturation width={width} height={height} color={color} onChange={onChange} />
-    <div className="rcp-body" style={{ width: width - 32 }}>
-      <Hue width={width - 32} color={color} onChange={onChange} />
+    <div className="rcp-body">
+      <Hue width={width - 40} color={color} onChange={onChange} />
       <Fields color={color} hideHEX={hideHEX} hideRGB={hideRGB} hideHSB={hideHSB} onChange={onChange} />
     </div>
   </div>

diff --git a/src/components/Saturation/Saturation.component.tsx b/src/components/Saturation/Saturation.component.tsx
@@ -1,37 +1,9 @@
 import { SaturationProps } from "./Saturation.types";
-import { useRef, useEffect, useMemo } from "react";
+import { useRef, useMemo } from "react";
 import { getCoordinatesByColor, moveAt, getColorByCoordinates } from "../../utils";
 
 export const Saturation = ({ width, height, color, onChange }: SaturationProps): JSX.Element => {
-  const saturationRef = useRef<HTMLCanvasElement>(null);
-
-  useEffect(() => {
-    const drawSaturation = (): void => {
-      if (saturationRef.current) {
-        const ctx = saturationRef.current.getContext("2d");
-
-        if (ctx) {
-          const saturation = ctx.createLinearGradient(0, height / 2, width, height / 2);
-
-          saturation.addColorStop(0, "white");
-          saturation.addColorStop(1, `hsl(${color.hsb.h}, 100%, 50%)`);
-
-          ctx.fillStyle = saturation;
-          ctx.fillRect(0, 0, width, height);
-
-          const brightness = ctx.createLinearGradient(width / 2, 0, width / 2, height);
-
-          brightness.addColorStop(0, "transparent");
-          brightness.addColorStop(1, "black");
-
-          ctx.fillStyle = brightness;
-          ctx.fillRect(0, 0, width, height);
-        }
-      }
-    };
-
-    drawSaturation();
-  }, [color.hsb.h, width, height]);
+  const saturationRef = useRef<HTMLDivElement>(null);
 
   const position = useMemo(() => {
     const [x, y] = getCoordinatesByColor(color, width, height);
@@ -77,8 +49,12 @@ export const Saturation = ({ width, height, color, onChange }: SaturationProps):
   };
 
   return (
-    <div className="rcp-saturation" onMouseDown={onMouseDown}>
-      <canvas ref={saturationRef} width={width} height={height} />
+    <div
+      ref={saturationRef}
+      className="rcp-saturation"
+      style={{ height, backgroundColor: `hsl(${color.hsb.h}, 100%, 50%)` }}
+      onMouseDown={onMouseDown}
+    >
       <div
         className="rcp-saturation-cursor"
         style={{ left: position.x, top: position.y, backgroundColor: color.hex }}

diff --git a/src/css/styles.css b/src/css/styles.css
@@ -17,27 +17,27 @@
   flex-direction: column;
   align-items: center;
 
-  width: max-content;
-
   background-color: var(--rcp-background);
-  border-radius: 0 0 10px 10px;
+  border-radius: 10px;
 }
 
 .rcp-body {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  gap: 16px;
+  gap: 20px;
 
-  padding: 16px 0;
+  padding: 20px;
 }
 
 .rcp-saturation {
-  display: flex;
-
   position: relative;
 
+  width: 100%;
+  background-image: linear-gradient(transparent, black), linear-gradient(to right, white, transparent);
+  border-radius: 10px 10px 0 0;
+
   user-select: none;
 }