feat(components): style fixes for Palette component

stuf · Oct 16, 2019 · 49ae864 · 49ae864
1 parent 2a85a7d
commit 49ae864
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 4 deletions.
diff --git a/src/components/ui/Palette/index.js b/src/components/ui/Palette/index.js
@@ -24,12 +24,18 @@ function Palette({ name, items, currentColor }) {
             const c = U.view(L.dropPrefix('#'), it);
             const isActive = U.combine([i, currentColor], R.equals);
             const color = c.map(H.fromHex);
-            const backgroundColor = color.map(x => `rgba(${x.join()})`);
+            const backgroundColor = color.map(
+              x => `rgb(${x.slice(0, 3).join()})`,
+            );
+            backgroundColor.log();
 
             return (
               <li key={`color-${i}`} className={U.when(isActive, style.active)}>
                 <button
-                  style={{ backgroundColor }}
+                  style={{
+                    backgroundColor,
+                    opacity: U.view(3, color).map(x => x / 255),
+                  }}
                   onClick={U.doSet(currentColor, i)}
                 />
               </li>

diff --git a/src/components/ui/Palette/index.module.scss b/src/components/ui/Palette/index.module.scss
@@ -7,7 +7,7 @@
   padding: 0;
   display: grid;
   grid-gap: 1px;
-  grid-auto-rows: 1.5rem;
+  grid-auto-rows: 2rem;
   grid-template-columns: repeat(4, 1fr);
 
   button {
@@ -20,9 +20,11 @@
 }
 
 .active {
-  border: dashed 1px #fff;
+  // border: dashed 1px #fff;
+  padding: 2px;
 
   button {
     font-weight: 700;
+    border: solid 4px rgba(0, 0, 0, 0.3);
   }
 }