lokesh-coder · lokesh-coder · Jun 11, 2020 · Jun 10, 2020 · Jun 11, 2020
diff --git a/config/template.html b/config/template.html
@@ -90,6 +90,10 @@
     <meta name="msapplication-TileColor" content="#ffffff" />
     <meta name="msapplication-config" content="/favicons/browserconfig.xml" />
     <meta name="theme-color" content="#ffffff" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Manrope:wght@500;800&display=swap"
+      rel="stylesheet"
+    />
   </head>
   <body>
     <div id="root"></div>

diff --git a/config/webpack.dev.config.js b/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,
+  },
 };
diff --git a/package.json b/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",

diff --git a/src/app.scss b/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,8 +15,23 @@ html body {
     max-width: 500px;
   }
 
-  #blob {
-    fill: #d1d8e0;
+  .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 {
@@ -49,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 {

diff --git a/src/assets/css/main.css b/src/assets/css/main.css
@@ -559,7 +559,7 @@ pre,
 code,
 kbd,
 samp {
-  font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 }
 
 /**
@@ -6431,16 +6431,8 @@ video {
   clear: none;
 }
 
-.font-sans {
-  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-}
-
-.font-serif {
-  font-family: Georgia, Cambria, "Times New Roman", Times, serif;
-}
-
-.font-mono {
-  font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+.font-body {
+  font-family: Manrope;
 }
 
 .font-hairline {
@@ -26385,16 +26377,8 @@ video {
     clear: none;
   }
 
-  .sm\:font-sans {
-    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-  }
-
-  .sm\:font-serif {
-    font-family: Georgia, Cambria, "Times New Roman", Times, serif;
-  }
-
-  .sm\:font-mono {
-    font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  .sm\:font-body {
+    font-family: Manrope;
   }
 
   .sm\:font-hairline {
@@ -46338,16 +46322,8 @@ video {
     clear: none;
   }
 
-  .md\:font-sans {
-    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-  }
-
-  .md\:font-serif {
-    font-family: Georgia, Cambria, "Times New Roman", Times, serif;
-  }
-
-  .md\:font-mono {
-    font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  .md\:font-body {
+    font-family: Manrope;
   }
 
   .md\:font-hairline {
@@ -66291,16 +66267,8 @@ video {
     clear: none;
   }
 
-  .lg\:font-sans {
-    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-  }
-
-  .lg\:font-serif {
-    font-family: Georgia, Cambria, "Times New Roman", Times, serif;
-  }
-
-  .lg\:font-mono {
-    font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  .lg\:font-body {
+    font-family: Manrope;
   }
 
   .lg\:font-hairline {
@@ -86244,16 +86212,8 @@ video {
     clear: none;
   }
 
-  .xl\:font-sans {
-    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-  }
-
-  .xl\:font-serif {
-    font-family: Georgia, Cambria, "Times New Roman", Times, serif;
-  }
-
-  .xl\:font-mono {
-    font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  .xl\:font-body {
+    font-family: Manrope;
   }
 
   .xl\:font-hairline {

diff --git a/src/components/actions/flutterCopy.jsx b/src/components/actions/flutterCopy.jsx
@@ -4,7 +4,7 @@ import Button from "../common/button";
 import { appStore } from "../../store";
 import Modal from "../common/modal";
 import Highlight from "../common/highlight";
-import Copy from "../common/ copy";
+import Copy from "../common/copy";
 
 const FlutterCopy = view(({ onClose }) => {
   const [isModalOpen, openModal] = useState(false);

diff --git a/src/components/actions/svgCopy.jsx b/src/components/actions/svgCopy.jsx
@@ -4,17 +4,15 @@ import Button from "../common/button";
 import { appStore } from "../../store";
 import Modal from "../common/modal";
 import Highlight from "../common/highlight";
-import Copy from "../common/ copy";
+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

diff --git a/src/components/blob.jsx b/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} />
+      {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>
   );
 });

diff --git a/src/components/common/button.jsx b/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";
   }

diff --git a/src/components/common/ copy.jsx → src/components/common/copy.jsx b/src/components/common/ copy.jsx → src/components/common/copy.jsx
diff --git a/src/components/common/modal.jsx b/src/components/common/modal.jsx
@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { Modal as DefaultModal } from "antd";
 import Button from "./button";
-import Copy from "./ copy";
+import Copy from "./copy";
 
 export default function Modal({ isOpen, children, onClose }) {
   return (

diff --git a/src/components/common/settingsItem.jsx b/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>

diff --git a/src/components/layout/grid.jsx b/src/components/layout/grid.jsx
@@ -7,20 +7,27 @@ import Settings from "../settings/settings";
 
 export default function Grid() {
   return (
-    <div className="app bg-gray-100">
+    <div className="app font-body">
       <div className="flex flex-col w-full max-w-screen-xl mx-auto px-6 min-h-screen">
-        <Header />
         <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 items-center flex-col">
-              <Blob />
-              <div className="py-10">
-                <ActionBar />
+            <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 />
+                </div>
               </div>
             </div>
           </div>
           <div className="md:w-3/12 flex items-center">
             <div className="flex-1">
+              <div className="hidden md:block">
+                <Header />
+              </div>
               <Settings />
             </div>
           </div>

diff --git a/src/components/layout/header.jsx b/src/components/layout/header.jsx
@@ -4,8 +4,11 @@ import Logo from "assets/blobs_logo.png";
 export default function Header() {
   return (
     <nav className="flex items-center justify-center flex-wrap p-6 my-4">
-      <div className="flex items-center flex-shrink-0 mr-6 leading-none">
+      <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">
+          Blob generator
+        </h1>
       </div>
     </nav>
   );