From 1d26e85e532558a5130e576edfc70b89b4503342 Mon Sep 17 00:00:00 2001 From: lokesh-coder Date: Wed, 10 Jun 2020 22:57:53 +0530 Subject: [PATCH 1/2] update header and add color settings --- config/template.html | 4 ++ src/app.scss | 4 -- src/assets/css/main.css | 62 ++++--------------- src/components/actions/flutterCopy.jsx | 2 +- src/components/actions/svgCopy.jsx | 2 +- src/components/blob.jsx | 2 +- src/components/common/{ copy.jsx => copy.jsx} | 0 src/components/common/modal.jsx | 2 +- src/components/layout/grid.jsx | 14 +++-- src/components/layout/header.jsx | 5 +- src/components/settings/colorPicker.jsx | 52 ++++++++++++++++ src/components/settings/settings.jsx | 5 ++ src/services/animator.js | 1 - src/store.js | 1 + tailwind.config.js | 3 + 15 files changed, 92 insertions(+), 67 deletions(-) rename src/components/common/{ copy.jsx => copy.jsx} (100%) create mode 100644 src/components/settings/colorPicker.jsx diff --git a/config/template.html b/config/template.html index 218ce08..9669925 100644 --- a/config/template.html +++ b/config/template.html @@ -90,6 +90,10 @@ +
diff --git a/src/app.scss b/src/app.scss index 022423b..e25fa00 100644 --- a/src/app.scss +++ b/src/app.scss @@ -9,10 +9,6 @@ html body { max-width: 500px; } - #blob { - fill: #d1d8e0; - } - .ant-slider-step { background: rgb(209, 216, 224); } diff --git a/src/assets/css/main.css b/src/assets/css/main.css index 656da69..f8e94e8 100644 --- 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-manrope { + 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-manrope { + 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-manrope { + 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-manrope { + 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-manrope { + font-family: Manrope; } .xl\:font-hairline { diff --git a/src/components/actions/flutterCopy.jsx b/src/components/actions/flutterCopy.jsx index 0fe5ace..99b14c0 100644 --- 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 index 020adfd..efb97e7 100644 --- a/src/components/actions/svgCopy.jsx +++ b/src/components/actions/svgCopy.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"; import Download from "../common/download"; const SVGCopy = view(({ onClose }) => { diff --git a/src/components/blob.jsx b/src/components/blob.jsx index 9ae17f5..4025dc7 100644 --- a/src/components/blob.jsx +++ b/src/components/blob.jsx @@ -11,7 +11,7 @@ const Blob = view(() => { width={`100%`} id="blobSvg" > - + ); }); diff --git a/src/components/common/ copy.jsx b/src/components/common/copy.jsx similarity index 100% rename from src/components/common/ copy.jsx rename to src/components/common/copy.jsx diff --git a/src/components/common/modal.jsx b/src/components/common/modal.jsx index 2a5aa39..e31638d 100644 --- 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/layout/grid.jsx b/src/components/layout/grid.jsx index 291b5cb..c1e76a2 100644 --- a/src/components/layout/grid.jsx +++ b/src/components/layout/grid.jsx @@ -7,20 +7,22 @@ import Settings from "../settings/settings"; export default function Grid() { return ( -
+
-
-
- -
- +
+
+ +
+ +
+
diff --git a/src/components/layout/header.jsx b/src/components/layout/header.jsx index b8ac42f..4cae942 100644 --- 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 ( ); diff --git a/src/components/settings/colorPicker.jsx b/src/components/settings/colorPicker.jsx new file mode 100644 index 0000000..2eadb00 --- /dev/null +++ b/src/components/settings/colorPicker.jsx @@ -0,0 +1,52 @@ +import React, { useState } from "react"; +import { Popover, Divider, Input } from "antd"; +import { view } from "@risingstack/react-easy-state"; +import { appStore } from "../../store"; + +const ColorPicker = view(() => { + const [val, setVal] = useState(appStore.color); + const colors = ["#00cec9", "#fab1a0", "#fdcb6e", "#fd79a8", "#a29bfe"]; + const content = () => { + return ( +
+
+ {colors.map((color, i) => { + return ( +
{ + setVal(color); + appStore.color = color; + }} + >
+ ); + })} +
+
+ { + setVal(e.target.value); + }} + onPressEnter={(e) => { + setVal(e.target.value); + appStore.color = e.target.value; + }} + /> +
+ ); + }; + return ( + +
+ + ); +}); + +export default ColorPicker; diff --git a/src/components/settings/settings.jsx b/src/components/settings/settings.jsx index 87cf855..8cf948d 100644 --- a/src/components/settings/settings.jsx +++ b/src/components/settings/settings.jsx @@ -3,6 +3,7 @@ import SettingsItem from "../common/settingsItem"; import EdgesSlider from "./edgesSlider"; import GrowthSlider from "./growthSlider"; import Links from "./links"; +import ColorPicker from "./colorPicker"; export default function Settings() { const edgeInfo = @@ -17,6 +18,10 @@ export default function Settings() { + + + +
); diff --git a/src/services/animator.js b/src/services/animator.js index a797e96..6aa8bc1 100644 --- a/src/services/animator.js +++ b/src/services/animator.js @@ -1,5 +1,4 @@ import * as dynamics from "dynamics.js"; -import { appStore } from "../store"; export default function animator(path, id = "blob") { const element = document.getElementById(id); diff --git a/src/store.js b/src/store.js index dd8fe21..a7c959f 100644 --- a/src/store.js +++ b/src/store.js @@ -7,6 +7,7 @@ const appStore = store({ size: 500, path: "", id: "", + color: "#d1d8e0", }); export { appStore }; diff --git a/tailwind.config.js b/tailwind.config.js index 506517f..650223e 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -15,6 +15,9 @@ module.exports = { }, }, }, + fontFamily: { + manrope: ["Manrope"], + }, }, purge: ["./src/**/*.html", "./src/**/*.jsx"], variants: { From 96e14ba8eed9619f7a196c649c81ef248485c53b Mon Sep 17 00:00:00 2001 From: lokesh-coder Date: Thu, 11 Jun 2020 10:25:11 +0530 Subject: [PATCH 2/2] add gradient and stroke feature --- config/template.html | 2 +- config/webpack.dev.config.js | 21 ++--- package.json | 6 +- src/app.scss | 59 +++++++++++++- src/assets/css/main.css | 10 +-- src/components/actions/svgCopy.jsx | 8 +- src/components/blob.jsx | 24 +++++- src/components/common/button.jsx | 3 +- src/components/common/settingsItem.jsx | 8 +- src/components/layout/grid.jsx | 9 ++- src/components/layout/header.jsx | 2 +- src/components/settings/colorPicker.jsx | 26 +++++- src/components/settings/gradientPicker.jsx | 94 ++++++++++++++++++++++ src/components/settings/settings.jsx | 10 ++- src/components/settings/stroke.jsx | 19 +++++ src/services/formatter.js | 28 +++++++ src/services/hex-validator.js | 15 ++++ src/store.js | 3 + tailwind.config.js | 3 - 19 files changed, 306 insertions(+), 44 deletions(-) create mode 100644 src/components/settings/gradientPicker.jsx create mode 100644 src/components/settings/stroke.jsx create mode 100644 src/services/formatter.js create mode 100644 src/services/hex-validator.js diff --git a/config/template.html b/config/template.html index 9669925..404e0ff 100644 --- a/config/template.html +++ b/config/template.html @@ -91,7 +91,7 @@ diff --git a/config/webpack.dev.config.js b/config/webpack.dev.config.js index 3ba7aa0..c566028 100644 --- 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 index 73124fa..8aa1036 100644 --- 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 index e25fa00..a7a90a4 100644 --- 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,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 { diff --git a/src/assets/css/main.css b/src/assets/css/main.css index f8e94e8..9426178 100644 --- a/src/assets/css/main.css +++ b/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; } diff --git a/src/components/actions/svgCopy.jsx b/src/components/actions/svgCopy.jsx index efb97e7..5e53312 100644 --- a/src/components/actions/svgCopy.jsx +++ b/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 = ` - - - - `; + const svgEl = document.getElementById("blobSvg"); + const code = svgEl ? formatter(svgEl.outerHTML) : ""; return ( <>