add gradient and stroke feature

Author: lokesh-coder

config/template.html

@@ -91,7 +91,7 @@
     <meta name="msapplication-config" content="/favicons/browserconfig.xml" />
     <meta name="theme-color" content="#ffffff" />
     <link
-      href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;800&display=swap"
+      href="https://fonts.googleapis.com/css2?family=Manrope:wght@500;800&display=swap"
       rel="stylesheet"
     />
   </head>

config/webpack.dev.config.js

@@ -1,13 +1,14 @@
-const webpackBaseConfig = require('./webpack.base.config');
-const paths = require('./paths');
+const webpackBaseConfig = require("./webpack.base.config");
+const paths = require("./paths");
 
 module.exports = {
-    mode: 'development',
-    devtool: 'eval-source-map',
-    ...webpackBaseConfig({ plugins: [] }),
-    devServer: {
-        contentBase: paths.output,
-        port: 9000,
-        hot: true,
-    }
+  mode: "development",
+  devtool: "eval-source-map",
+  ...webpackBaseConfig({ plugins: [] }),
+  devServer: {
+    contentBase: paths.output,
+    port: 9000,
+    host: "0.0.0.0",
+    hot: true,
+  },
 };

package.json

@@ -1,7 +1,7 @@
 {
   "name": "blobs.app",
-  "version": "1.0.0",
-  "description": "Generate blob shapes for Web and Fluttter",
+  "version": "1.1.0",
+  "description": "Generate blob shapes for Web and Flutter",
   "main": "index.js",
   "scripts": {
     "build": "rm -rf build && NODE_ENV=production npm run build:css && webpack ---config ./config/webpack.prod.config.js",
@@ -23,12 +23,10 @@
     "@babel/preset-env": "^7.9.0",
     "@babel/preset-react": "^7.9.4",
     "@risingstack/react-easy-state": "^6.3.0",
-    "animejs": "^3.2.0",
     "antd": "^4.2.4",
     "autoprefixer": "^9.7.6",
     "babel-loader": "^8.1.0",
     "dynamics.js": "^1.1.5",
-    "kute.js": "^1.6.6",
     "postcss-cli": "^7.1.0",
     "prop-types": "^15.7.2",
     "react": "^16.13.1",

src/app.scss

@@ -1,4 +1,10 @@
 html body {
+  line-height: 25px;
+  font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  button {
+    line-height: 25px;
+  }
   .brand-bg {
     margin-top: -16px;
     transform: translate(-50%, 0);
@@ -9,6 +15,25 @@ html body {
     max-width: 500px;
   }
 
+  .stroke {
+    border: 4px solid #d1d8e0;
+    &.stroke-fill {
+      position: relative;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      &:after {
+        content: "";
+
+        width: 100%;
+        height: 100%;
+        transform: scale(0.7);
+        border-radius: 100%;
+        background-color: #4a5568;
+      }
+    }
+  }
+
   .ant-slider-step {
     background: rgb(209, 216, 224);
   }
@@ -45,7 +70,39 @@ html body {
 
   .ant-popover-inner {
     max-width: 300px;
-    border-radius: 4px;
+    border-radius: 10px;
+  }
+
+  .ant-popover-arrow {
+    display: none;
+  }
+
+  .ant-popover-inner-content {
+    padding: 25px;
+    background: rgba(207, 214, 222, 0.15);
+  }
+
+  input.ant-input {
+    border-radius: 6px;
+    padding: 9px;
+    font-weight: bold;
+    color: #828b99;
+    border-color: #cfd8df;
+    border-width: 2px;
+  }
+
+  .ant-input:hover {
+    border-color: #4e566b;
+    border-right-width: 2px !important;
+  }
+
+  .ant-input:focus,
+  .ant-input-focused {
+    border-color: #4c5468;
+    border-right-width: 2px !important;
+    outline: 0;
+    -webkit-box-shadow: 0 0 0 2px rgba(78, 86, 107, 0.34);
+    box-shadow: 0 0 0 2px rgba(78, 86, 107, 0.34);
   }
 
   pre {

src/assets/css/main.css

@@ -6431,7 +6431,7 @@ video {
   clear: none;
 }
 
-.font-manrope {
+.font-body {
   font-family: Manrope;
 }
 
@@ -26377,7 +26377,7 @@ video {
     clear: none;
   }
 
-  .sm\:font-manrope {
+  .sm\:font-body {
     font-family: Manrope;
   }
 
@@ -46322,7 +46322,7 @@ video {
     clear: none;
   }
 
-  .md\:font-manrope {
+  .md\:font-body {
     font-family: Manrope;
   }
 
@@ -66267,7 +66267,7 @@ video {
     clear: none;
   }
 
-  .lg\:font-manrope {
+  .lg\:font-body {
     font-family: Manrope;
   }
 
@@ -86212,7 +86212,7 @@ video {
     clear: none;
   }
 
-  .xl\:font-manrope {
+  .xl\:font-body {
     font-family: Manrope;
   }
 

src/components/actions/svgCopy.jsx

@@ -6,15 +6,13 @@ import Modal from "../common/modal";
 import Highlight from "../common/highlight";
 import Copy from "../common/copy";
 import Download from "../common/download";
+import formatter from "../../services/formatter";
 
 const SVGCopy = view(({ onClose }) => {
   const [isModalOpen, openModal] = useState(false);
   const ID = `${appStore.edges}-${appStore.growth}-${appStore.id}`;
-  const code = `
-  <svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg">
-    <path d="${appStore.path}"></path>
-  </svg>
-  `;
+  const svgEl = document.getElementById("blobSvg");
+  const code = svgEl ? formatter(svgEl.outerHTML) : "";
   return (
     <>
       <Button

src/components/blob.jsx

@@ -4,14 +4,36 @@ import { appStore } from "../store";
 
 const Blob = view(() => {
   const size = appStore.size;
+  let props = {
+    fill: appStore.color,
+  };
+  if (appStore.type == "gradient") {
+    props.fill = "url(#gradient)";
+  }
+  if (appStore.stroke) {
+    props.strokeWidth = "7px";
+    props.fill = "none";
+    props.stroke = appStore.color;
+  }
+  if (appStore.type == "gradient" && appStore.stroke) {
+    props.stroke = "url(#gradient)";
+  }
   return (
     <svg
       viewBox={`0 0 ${size} ${size}`}
       xmlns="http://www.w3.org/2000/svg"
       width={`100%`}
       id="blobSvg"
     >
-      <path id="blob" d={appStore.path} fill={appStore.color} />
+      {appStore.type == "gradient" && (
+        <defs>
+          <linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
+            <stop offset="0%" style={{ stopColor: appStore.gradient[0] }} />
+            <stop offset="100%" style={{ stopColor: appStore.gradient[1] }} />
+          </linearGradient>
+        </defs>
+      )}
+      <path id="blob" d={appStore.path} {...props} />
     </svg>
   );
 });

src/components/common/button.jsx

@@ -10,8 +10,7 @@ export default function Button({
 }) {
   let classNames = "";
   if (isPrimary) {
-    classNames =
-      "shadow-lg bg-theme-400 text-white hover:bg-theme-900 transition duration-200 ease-in-out transform active:shadow-2xl active:translate-y-1";
+    classNames = "shadow-lg bg-theme-400 text-white hover:bg-theme-900";
   } else {
     classNames = "text-theme-600";
   }

src/components/common/settingsItem.jsx

@@ -6,9 +6,11 @@ export default function SettingsItem({ label, children, info }) {
     <div className="block w-full py-6">
       <div className="flex justify-between">
         <h3>{label}</h3>
-        <Popover content={info} title={null} trigger="click">
-          <i className="ri-question-line text-gray-500 cursor-pointer"></i>
-        </Popover>
+        {info && (
+          <Popover content={info} title={null} trigger="click">
+            <i className="ri-question-line text-gray-500 cursor-pointer"></i>
+          </Popover>
+        )}
       </div>
       {children}
     </div>

src/components/layout/grid.jsx

@@ -7,12 +7,15 @@ import Settings from "../settings/settings";
 
 export default function Grid() {
   return (
-    <div className="app">
+    <div className="app font-body">
       <div className="flex flex-col w-full max-w-screen-xl mx-auto px-6 min-h-screen">
         <div className="md:flex flex-1">
           <div className="md:w-9/12 flex flex-col items-center justify-center">
             <div className="flex flex-1 w-full justify-center flex-col">
               <div className="flex flex-col items-center">
+                <div className="block md:hidden">
+                  <Header />
+                </div>
                 <Blob />
                 <div className="py-10">
                   <ActionBar />
@@ -22,7 +25,9 @@ export default function Grid() {
           </div>
           <div className="md:w-3/12 flex items-center">
             <div className="flex-1">
-              <Header />
+              <div className="hidden md:block">
+                <Header />
+              </div>
               <Settings />
             </div>
           </div>

src/components/layout/header.jsx

@@ -6,7 +6,7 @@ export default function Header() {
     <nav className="flex items-center justify-center flex-wrap p-6 my-4">
       <div className="flex flex-col items-center flex-shrink-0 mr-6 leading-none">
         <img src={Logo} width="50" />
-        <h1 className="my-4 font-extrabold text-2xl tracking-tight text-gray-700 font-manrope">
+        <h1 className="my-4 font-extrabold text-2xl tracking-tight text-gray-700">
           Blob generator
         </h1>
       </div>

src/components/settings/colorPicker.jsx

@@ -2,21 +2,30 @@ import React, { useState } from "react";
 import { Popover, Divider, Input } from "antd";
 import { view } from "@risingstack/react-easy-state";
 import { appStore } from "../../store";
+import hexValidator from "../../services/hex-validator";
 
 const ColorPicker = view(() => {
   const [val, setVal] = useState(appStore.color);
-  const colors = ["#00cec9", "#fab1a0", "#fdcb6e", "#fd79a8", "#a29bfe"];
+  const colors = [
+    "#00cec9",
+    "#fab1a0",
+    "#fdcb6e",
+    "#fd79a8",
+    "#a29bfe",
+    "#B53471",
+  ];
   const content = () => {
     return (
       <div className="flex flex-col">
-        <div className="flex justify-between">
+        <div className="flex justify-center">
           {colors.map((color, i) => {
             return (
               <div
                 className="w-6 h-6 rounded-full mx-1 cursor-pointer"
                 style={{ backgroundColor: color }}
                 onClick={() => {
                   setVal(color);
+                  appStore.type = "color";
                   appStore.color = color;
                 }}
               ></div>
@@ -32,18 +41,27 @@ const ColorPicker = view(() => {
             setVal(e.target.value);
           }}
           onPressEnter={(e) => {
+            if (!hexValidator(e.target.value)) return;
             setVal(e.target.value);
+            appStore.type = "color";
             appStore.color = e.target.value;
           }}
         />
       </div>
     );
   };
+
+  const getBgCss = () => {
+    if (appStore.type == "color") {
+      return { backgroundColor: appStore.color };
+    }
+    return { backgroundColor: "#d1d8e0" };
+  };
   return (
     <Popover content={content} trigger="click">
       <div
-        className="w-6 h-6 rounded-full cursor-pointer"
-        style={{ backgroundColor: appStore.color }}
+        className="w-8 h-8 rounded-full cursor-pointer"
+        style={getBgCss()}
       ></div>
     </Popover>
   );