Fix merge conflicts.

README.md

@@ -1,16 +1,18 @@
-# 🌊 [SVG Wave](www.svgwave.in) - A tiny SVG wave generator - 
+# 🌊 [SVG Wave](https://www.svgwave.in) - A tiny, customizable gradient SVG wave generator
 
 ![](./svgwavecover.png)
 
 
 ----
 
-SVG Wave is a **tiny, free and beautiful SVG waves generator** for your UI or website desgin. It offers dead simple UI to customize, and style your waves based on your theme specifications.
+SVG Wave is a **tiny, free and beautiful gradient SVG waves generator** for your UI or website desgin. It offers dead simple UI to customize, and style your waves based on your theme specifications.
 
 SVG Wave is a tiny UI tool built with **Preact, tailwind and bundled with Webpack**. ⚛
 
 ---
 
+### Updated ! - New Gradient Wave Support 🌈
+
 ### Features
 
  - Adjust number of layers of waves 🏢
@@ -19,13 +21,14 @@ SVG Wave is a tiny UI tool built with **Preact, tailwind and bundled with Webpac
  - Export as SVG or PNG ⬇
  - Randomize 🔁
  - New cool Dark mode 🖤
+ - Gradient fill to waves 🌈
  - Coming soon...
 
 
 ---
 
 ### App ⭐
-
+![](updated_svg_wave.png)
 ![](bg.png)
 
 ---
@@ -42,4 +45,9 @@ Give a star if you like It.👍
 
 ### Contributors
 
-- your name is soon to be here. 😀
+- [anup-a](https://github.com/anup-a)
+- [kychok98](https://github.com/kychok98)
+- [yencolon](https://github.com/yencolon)
+- [Remakh](https://github.com/Remakh)
+- [ansh-les](https://github.com/ansh-les)
+- [ansh-saini](https://github.com/ansh-saini)

src/App.jsx

@@ -1,12 +1,13 @@
 import { h } from 'preact';
-import { useState} from 'preact/hooks'
 import Home from './components/home'
+import { useDarkModeState }  from './hooks/useDarkMode'
 import './styles/main.css'
 
 function App() {
-  const [isDark, setIsDark] = useState(false)
+  const [isDark, setIsDark] = useDarkModeState()
+
   const onChangeTheme = (arg) => {
-    setIsDark(arg)
+     setIsDark(arg)
   }
 
   return (

src/components/colorTool.jsx

@@ -0,0 +1,160 @@
+import { h } from 'preact'
+import { useState } from 'preact/hooks'
+import { TwitterPicker } from 'react-color'
+
+import {
+  colorToolMode,
+  gradientPickerStyle,
+  colorPickerLightStyle,
+} from '../constants'
+import GradientPicker from './gradientPicker'
+
+import CloseSVG from './../assets/001-cross-sign.svg'
+import CloseWhiteSVG from './../assets/cross_white.svg'
+
+import { colorPickerDarkStyle } from './../constants'
+
+function ColorTool({
+  onBGChange,
+  isDark,
+  onGradColorsChange,
+  onGradientToggle,
+  gradient,
+  gradColors,
+}) {
+  const [colorTool, setColorTool] = useState(
+    gradient ? colorToolMode.GRADIENT : colorToolMode.COLOR,
+  )
+  const [showTool, setShowTool] = useState(false)
+  const [fillColor, setFillColor] = useState('#ff0080')
+
+  const handleColorChange = (hex) => {
+    setFillColor(hex)
+    onBGChange(hex)
+    setColorTool(colorToolMode.NONE)
+    setShowTool(false)
+  }
+
+  const handleColorTool = (colorStatus) => {
+    setColorTool(colorStatus)
+    if (colorStatus === colorToolMode.GRADIENT) {
+      onGradientToggle(true)
+    } else {
+      onGradientToggle(false)
+    }
+  }
+
+  const handleToggleTool = (e, colorStatus) => {
+    e.stopPropagation()
+    handleColorTool(colorStatus)
+    setShowTool(true)
+  }
+
+  const isGradient = colorTool === colorToolMode.GRADIENT
+  const isColor = colorTool === colorToolMode.COLOR
+
+  return (
+    <div className="relative flex items-center w-full justify-evenly">
+      <div
+        className="flex flex-col items-center justify-center w-1/2 p-3 rounded-lg cursor-pointer section"
+        onClick={() => handleColorTool(colorToolMode.COLOR)}
+        style={
+          !isGradient
+            ? isDark
+              ? { background: '#182635' }
+              : { background: '#edf2f7' }
+            : {}
+        }
+      >
+        <div className="flex items-center justify-center w-12 h-12 bg-white border-2 border-indigo-900 rounded-full shadow-lg color-btn">
+          <div
+            className="w-10 h-10 rounded-full shadow-md "
+            onClick={(e) => handleToggleTool(e, colorToolMode.COLOR)}
+            style={{ backgroundColor: fillColor }}
+          ></div>
+        </div>
+        <div
+          className="mt-3 font-semibold"
+          style={isGradient && { color: '#718096' }}
+        >
+          Color
+        </div>
+      </div>
+
+      <div
+        className="flex flex-col items-center justify-center w-1/2 p-3 rounded-lg cursor-pointer section"
+        onClick={() => handleColorTool(colorToolMode.GRADIENT)}
+        style={
+          isGradient
+            ? isDark
+              ? { background: '#182635' }
+              : { background: '#edf2f7' }
+            : {}
+        }
+      >
+        <div className="flex items-center justify-center w-12 h-12 bg-white border-2 border-indigo-900 rounded-full shadow-lg color-btn">
+          <div
+            className="w-10 h-10 rounded-full shadow-md "
+            onClick={(e) => handleToggleTool(e, colorToolMode.GRADIENT)}
+            style={
+              isGradient
+                ? {
+                    background: '#718096',
+                    background: `linear-gradient(90deg, ${gradColors.colorOne} 0%, ${gradColors.colorTwo} 100%)`,
+                  }
+                : {
+                    background: `linear-gradient(90deg, ${gradColors.colorOne} 0%, ${gradColors.colorTwo} 100%)`,
+                  }
+            }
+          ></div>
+        </div>
+        <div
+          className="mt-3 font-semibold"
+          style={!isGradient && { color: '#718096' }}
+        >
+          Gradient
+        </div>
+      </div>
+      {showTool && (
+        <div className="absolute w-full color-tool">
+          <button
+            onClick={() => setShowTool(false)}
+            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>
+          {isColor && (
+            <TwitterPicker
+              color={fillColor}
+              onChangeComplete={({ hex }) => handleColorChange(hex)}
+              width="100%"
+              z-index="20"
+              triangle="hide"
+              styles={
+                isDark
+                  ? colorPickerDarkStyle
+                  : isColor
+                  ? colorPickerLightStyle
+                  : gradientPickerStyle
+              }
+              className="py-6 scale-in-center"
+            />
+          )}
+          {isGradient && (
+            <GradientPicker
+              onGradColorsChange={onGradColorsChange}
+              gradColors={gradColors}
+              isDark={isDark}
+            />
+          )}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default ColorTool