small ui and ux improvment for pop-ups

prakhar56 · Dec 2, 2020 · 45c4e73 · 45c4e73
1 parent 930957a
commit 45c4e73
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 7 deletions.
diff --git a/src/components/colorTool.jsx b/src/components/colorTool.jsx
@@ -2,7 +2,11 @@ import { h } from 'preact'
 import { useState } from 'preact/hooks'
 import { TwitterPicker } from 'react-color'
 
-import { colorToolMode, gradientPickerStyle } from '../constants'
+import {
+  colorToolMode,
+  gradientPickerStyle,
+  colorPickerLightStyle,
+} from '../constants'
 import GradientPicker from './gradientPicker'
 
 import CloseSVG from './../assets/001-cross-sign.svg'
@@ -47,6 +51,7 @@ function ColorTool({
   }
 
   const isGradient = colorTool === colorToolMode.GRADIENT
+  const isColor = colorTool === colorToolMode.COLOR
 
   return (
     <div className="relative flex items-center w-full justify-evenly">
@@ -114,26 +119,32 @@ function ColorTool({
         <div className="absolute w-full color-tool">
           <button
             onClick={() => setShowTool(false)}
-            className="absolute bottom-0 right-0 z-20 m-3 scale-in-center"
+            className="absolute top-0 right-0 z-20 m-3 scale-in-center"
           >
             {isDark ? (
               <img src={CloseWhiteSVG} alt="close svg" width="10" />
             ) : (
               <img src={CloseSVG} alt="close svg" width="10" />
             )}
           </button>
-          {colorTool === colorToolMode.COLOR && (
+          {isColor && (
             <TwitterPicker
               color={fillColor}
               onChangeComplete={({ hex }) => handleColorChange(hex)}
               width="100%"
               z-index="20"
               triangle="hide"
-              styles={isDark ? colorPickerDarkStyle : gradientPickerStyle}
-              className="scale-in-center"
+              styles={
+                isDark
+                  ? colorPickerDarkStyle
+                  : isColor
+                  ? colorPickerLightStyle
+                  : gradientPickerStyle
+              }
+              className="py-6 scale-in-center"
             />
           )}
-          {colorTool === colorToolMode.GRADIENT && (
+          {isGradient && (
             <GradientPicker
               onGradColorsChange={onGradColorsChange}
               gradColors={gradColors}

diff --git a/src/components/gradientPicker.jsx b/src/components/gradientPicker.jsx
@@ -87,7 +87,7 @@ function GradientPicker({ gradColors, onGradColorsChange, isDark }) {
   )
 
   return (
-    <div className="flex flex-col w-full bg-white rounded-lg custom-shadow scale-in-center dark:bg-darkish-blue">
+    <div className="flex flex-col w-full py-6 bg-white rounded-lg custom-shadow scale-in-center dark:bg-darkish-blue">
       <div className="flex">
         {colorBoxes}
         {gradientBox}

diff --git a/src/constants.js b/src/constants.js
@@ -21,11 +21,22 @@ export const colorPickerDarkStyle = {
   default: {
     card: {
       boxShadow: 'none',
+      borderRadius: '.5rem',
       backgroundColor: 'hsl(210,38%,15%)',
     },
   },
 }
 
+export const colorPickerLightStyle = {
+  default: {
+    card: {
+      border: 'none',
+      borderRadius: '.5rem',
+      boxShadow: '0 16px 40px rgba(0,0,0,0.12)',
+    },
+  },
+}
+
 export const gradientPickerStyle = {
   default: {
     card: {

diff --git a/src/styles/main.css b/src/styles/main.css
@@ -1065,6 +1065,11 @@ video {
   padding-right: 1.25rem;
 }
 
+.py-6 {
+  padding-top: 1.5rem;
+  padding-bottom: 1.5rem;
+}
+
 .pb-0 {
   padding-bottom: 0;
 }