Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 669b01c

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

File tree

22 files changed

+377
-90
lines changed

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
}
File renamed without changes.

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /