Skip to content

Commit 669b01c

Browse files
lokesh-coderlokesh-coder
authored
Merge pull request #2 from lokesh-coder/develop
Customize color
2 parents 2ac1fc2 + 96e14ba commit 669b01c

22 files changed

+377
-90
lines changed

‎config/template.html

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -90,6 +90,10 @@
9090
<meta name="msapplication-TileColor" content="#ffffff" />
9191
<meta name="msapplication-config" content="/favicons/browserconfig.xml" />
9292
<meta name="theme-color" content="#ffffff" />
93+
<link
94+
href="https://fonts.googleapis.com/css2?family=Manrope:wght@500;800&display=swap"
95+
rel="stylesheet"
96+
/>
9397
</head>
9498
<body>
9599
<div id="root"></div>

‎config/webpack.dev.config.js

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
1-
const webpackBaseConfig = require('./webpack.base.config');
2-
const paths = require('./paths');
1+
const webpackBaseConfig = require("./webpack.base.config");
2+
const paths = require("./paths");
33

44
module.exports = {
5-
mode: 'development',
6-
devtool: 'eval-source-map',
7-
...webpackBaseConfig({ plugins: [] }),
8-
devServer: {
9-
contentBase: paths.output,
10-
port: 9000,
11-
hot: true,
12-
}
5+
mode: "development",
6+
devtool: "eval-source-map",
7+
...webpackBaseConfig({ plugins: [] }),
8+
devServer: {
9+
contentBase: paths.output,
10+
port: 9000,
11+
host: "0.0.0.0",
12+
hot: true,
13+
},
1314
};

‎package.json

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "blobs.app",
3-
"version": "1.0.0",
4-
"description": "Generate blob shapes for Web and Fluttter",
3+
"version": "1.1.0",
4+
"description": "Generate blob shapes for Web and Flutter",
55
"main": "index.js",
66
"scripts": {
77
"build": "rm -rf build && NODE_ENV=production npm run build:css && webpack ---config ./config/webpack.prod.config.js",
@@ -23,12 +23,10 @@
2323
"@babel/preset-env": "^7.9.0",
2424
"@babel/preset-react": "^7.9.4",
2525
"@risingstack/react-easy-state": "^6.3.0",
26-
"animejs": "^3.2.0",
2726
"antd": "^4.2.4",
2827
"autoprefixer": "^9.7.6",
2928
"babel-loader": "^8.1.0",
3029
"dynamics.js": "^1.1.5",
31-
"kute.js": "^1.6.6",
3230
"postcss-cli": "^7.1.0",
3331
"prop-types": "^15.7.2",
3432
"react": "^16.13.1",

‎src/app.scss

Lines changed: 56 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,10 @@
11
html body {
2+
line-height: 25px;
3+
font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
4+
Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
5+
button {
6+
line-height: 25px;
7+
}
28
.brand-bg {
39
margin-top: -16px;
410
transform: translate(-50%, 0);
@@ -9,8 +15,23 @@ html body {
915
max-width: 500px;
1016
}
1117

12-
#blob {
13-
fill: #d1d8e0;
18+
.stroke {
19+
border: 4px solid #d1d8e0;
20+
&.stroke-fill {
21+
position: relative;
22+
display: flex;
23+
align-items: center;
24+
justify-content: center;
25+
&:after {
26+
content: "";
27+
28+
width: 100%;
29+
height: 100%;
30+
transform: scale(0.7);
31+
border-radius: 100%;
32+
background-color: #4a5568;
33+
}
34+
}
1435
}
1536

1637
.ant-slider-step {
@@ -49,7 +70,39 @@ html body {
4970

5071
.ant-popover-inner {
5172
max-width: 300px;
52-
border-radius: 4px;
73+
border-radius: 10px;
74+
}
75+
76+
.ant-popover-arrow {
77+
display: none;
78+
}
79+
80+
.ant-popover-inner-content {
81+
padding: 25px;
82+
background: rgba(207, 214, 222, 0.15);
83+
}
84+
85+
input.ant-input {
86+
border-radius: 6px;
87+
padding: 9px;
88+
font-weight: bold;
89+
color: #828b99;
90+
border-color: #cfd8df;
91+
border-width: 2px;
92+
}
93+
94+
.ant-input:hover {
95+
border-color: #4e566b;
96+
border-right-width: 2px !important;
97+
}
98+
99+
.ant-input:focus,
100+
.ant-input-focused {
101+
border-color: #4c5468;
102+
border-right-width: 2px !important;
103+
outline: 0;
104+
-webkit-box-shadow: 0 0 0 2px rgba(78, 86, 107, 0.34);
105+
box-shadow: 0 0 0 2px rgba(78, 86, 107, 0.34);
53106
}
54107

55108
pre {

‎src/assets/css/main.css

Lines changed: 11 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -559,7 +559,7 @@ pre,
559559
code,
560560
kbd,
561561
samp {
562-
font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
562+
font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
563563
}
564564

565565
/**
@@ -6431,16 +6431,8 @@ video {
64316431
clear: none;
64326432
}
64336433

6434-
.font-sans {
6435-
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";
6436-
}
6437-
6438-
.font-serif {
6439-
font-family: Georgia, Cambria, "Times New Roman", Times, serif;
6440-
}
6441-
6442-
.font-mono {
6443-
font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
6434+
.font-body {
6435+
font-family: Manrope;
64446436
}
64456437

64466438
.font-hairline {
@@ -26385,16 +26377,8 @@ video {
2638526377
clear: none;
2638626378
}
2638726379

26388-
.sm\:font-sans {
26389-
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";
26390-
}
26391-
26392-
.sm\:font-serif {
26393-
font-family: Georgia, Cambria, "Times New Roman", Times, serif;
26394-
}
26395-
26396-
.sm\:font-mono {
26397-
font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
26380+
.sm\:font-body {
26381+
font-family: Manrope;
2639826382
}
2639926383

2640026384
.sm\:font-hairline {
@@ -46338,16 +46322,8 @@ video {
4633846322
clear: none;
4633946323
}
4634046324

46341-
.md\:font-sans {
46342-
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";
46343-
}
46344-
46345-
.md\:font-serif {
46346-
font-family: Georgia, Cambria, "Times New Roman", Times, serif;
46347-
}
46348-
46349-
.md\:font-mono {
46350-
font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
46325+
.md\:font-body {
46326+
font-family: Manrope;
4635146327
}
4635246328

4635346329
.md\:font-hairline {
@@ -66291,16 +66267,8 @@ video {
6629166267
clear: none;
6629266268
}
6629366269

66294-
.lg\:font-sans {
66295-
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";
66296-
}
66297-
66298-
.lg\:font-serif {
66299-
font-family: Georgia, Cambria, "Times New Roman", Times, serif;
66300-
}
66301-
66302-
.lg\:font-mono {
66303-
font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
66270+
.lg\:font-body {
66271+
font-family: Manrope;
6630466272
}
6630566273

6630666274
.lg\:font-hairline {
@@ -86244,16 +86212,8 @@ video {
8624486212
clear: none;
8624586213
}
8624686214

86247-
.xl\:font-sans {
86248-
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";
86249-
}
86250-
86251-
.xl\:font-serif {
86252-
font-family: Georgia, Cambria, "Times New Roman", Times, serif;
86253-
}
86254-
86255-
.xl\:font-mono {
86256-
font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
86215+
.xl\:font-body {
86216+
font-family: Manrope;
8625786217
}
8625886218

8625986219
.xl\:font-hairline {

‎src/components/actions/flutterCopy.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import Button from "../common/button";
44
import { appStore } from "../../store";
55
import Modal from "../common/modal";
66
import Highlight from "../common/highlight";
7-
import Copy from "../common/ copy";
7+
import Copy from "../common/copy";
88

99
const FlutterCopy = view(({ onClose }) => {
1010
const [isModalOpen, openModal] = useState(false);

‎src/components/actions/svgCopy.jsx

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,17 +4,15 @@ import Button from "../common/button";
44
import { appStore } from "../../store";
55
import Modal from "../common/modal";
66
import Highlight from "../common/highlight";
7-
import Copy from "../common/ copy";
7+
import Copy from "../common/copy";
88
import Download from "../common/download";
9+
import formatter from "../../services/formatter";
910

1011
const SVGCopy = view(({ onClose }) => {
1112
const [isModalOpen, openModal] = useState(false);
1213
const ID = `${appStore.edges}-${appStore.growth}-${appStore.id}`;
13-
const code = `
14-
<svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg">
15-
<path d="${appStore.path}"></path>
16-
</svg>
17-
`;
14+
const svgEl = document.getElementById("blobSvg");
15+
const code = svgEl ? formatter(svgEl.outerHTML) : "";
1816
return (
1917
<>
2018
<Button

‎src/components/blob.jsx

Lines changed: 23 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,36 @@ import { appStore } from "../store";
44

55
const Blob = view(() => {
66
const size = appStore.size;
7+
let props = {
8+
fill: appStore.color,
9+
};
10+
if (appStore.type == "gradient") {
11+
props.fill = "url(#gradient)";
12+
}
13+
if (appStore.stroke) {
14+
props.strokeWidth = "7px";
15+
props.fill = "none";
16+
props.stroke = appStore.color;
17+
}
18+
if (appStore.type == "gradient" && appStore.stroke) {
19+
props.stroke = "url(#gradient)";
20+
}
721
return (
822
<svg
923
viewBox={`0 0 ${size} ${size}`}
1024
xmlns="http://www.w3.org/2000/svg"
1125
width={`100%`}
1226
id="blobSvg"
1327
>
14-
<path id="blob" d={appStore.path} />
28+
{appStore.type == "gradient" && (
29+
<defs>
30+
<linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
31+
<stop offset="0%" style={{ stopColor: appStore.gradient[0] }} />
32+
<stop offset="100%" style={{ stopColor: appStore.gradient[1] }} />
33+
</linearGradient>
34+
</defs>
35+
)}
36+
<path id="blob" d={appStore.path} {...props} />
1537
</svg>
1638
);
1739
});

‎src/components/common/button.jsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,7 @@ export default function Button({
1010
}) {
1111
let classNames = "";
1212
if (isPrimary) {
13-
classNames =
14-
"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";
13+
classNames = "shadow-lg bg-theme-400 text-white hover:bg-theme-900";
1514
} else {
1615
classNames = "text-theme-600";
1716
}

‎src/components/common/ copy.jsx renamed to ‎src/components/common/copy.jsx

File renamed without changes.

‎src/components/common/modal.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, { useState } from "react";
22
import { Modal as DefaultModal } from "antd";
33
import Button from "./button";
4-
import Copy from "./ copy";
4+
import Copy from "./copy";
55

66
export default function Modal({ isOpen, children, onClose }) {
77
return (

‎src/components/common/settingsItem.jsx

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,11 @@ export default function SettingsItem({ label, children, info }) {
66
<div className="block w-full py-6">
77
<div className="flex justify-between">
88
<h3>{label}</h3>
9-
<Popover content={info} title={null} trigger="click">
10-
<i className="ri-question-line text-gray-500 cursor-pointer"></i>
11-
</Popover>
9+
{info && (
10+
<Popover content={info} title={null} trigger="click">
11+
<i className="ri-question-line text-gray-500 cursor-pointer"></i>
12+
</Popover>
13+
)}
1214
</div>
1315
{children}
1416
</div>

‎src/components/layout/grid.jsx

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,20 +7,27 @@ import Settings from "../settings/settings";
77

88
export default function Grid() {
99
return (
10-
<div className="app bg-gray-100">
10+
<div className="app font-body">
1111
<div className="flex flex-col w-full max-w-screen-xl mx-auto px-6 min-h-screen">
12-
<Header />
1312
<div className="md:flex flex-1">
1413
<div className="md:w-9/12 flex flex-col items-center justify-center">
15-
<div className="flex flex-1 w-full items-center flex-col">
16-
<Blob />
17-
<div className="py-10">
18-
<ActionBar />
14+
<div className="flex flex-1 w-full justify-center flex-col">
15+
<div className="flex flex-col items-center">
16+
<div className="block md:hidden">
17+
<Header />
18+
</div>
19+
<Blob />
20+
<div className="py-10">
21+
<ActionBar />
22+
</div>
1923
</div>
2024
</div>
2125
</div>
2226
<div className="md:w-3/12 flex items-center">
2327
<div className="flex-1">
28+
<div className="hidden md:block">
29+
<Header />
30+
</div>
2431
<Settings />
2532
</div>
2633
</div>

‎src/components/layout/header.jsx

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,11 @@ import Logo from "assets/blobs_logo.png";
44
export default function Header() {
55
return (
66
<nav className="flex items-center justify-center flex-wrap p-6 my-4">
7-
<div className="flex items-center flex-shrink-0 mr-6 leading-none">
7+
<div className="flex flex-col items-center flex-shrink-0 mr-6 leading-none">
88
<img src={Logo} width="50" />
9+
<h1 className="my-4 font-extrabold text-2xl tracking-tight text-gray-700">
10+
Blob generator
11+
</h1>
912
</div>
1013
</nav>
1114
);

0 commit comments

Comments
 (0)