Skip to content

Commit 1d26e85

Browse files
lokesh-coderlokesh-coder
committed
update header and add color settings
1 parent 2ac1fc2 commit 1d26e85

File tree

15 files changed

+92
-67
lines changed

15 files changed

+92
-67
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@400;800&display=swap"
95+
rel="stylesheet"
96+
/>
9397
</head>
9498
<body>
9599
<div id="root"></div>

‎src/app.scss

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,6 @@ html body {
99
max-width: 500px;
1010
}
1111

12-
#blob {
13-
fill: #d1d8e0;
14-
}
15-
1612
.ant-slider-step {
1713
background: rgb(209, 216, 224);
1814
}

‎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-manrope {
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-manrope {
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-manrope {
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-manrope {
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-manrope {
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: 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
import Download from "../common/download";
99

1010
const SVGCopy = view(({ onClose }) => {

‎src/components/blob.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ const Blob = view(() => {
1111
width={`100%`}
1212
id="blobSvg"
1313
>
14-
<path id="blob" d={appStore.path} />
14+
<path id="blob" d={appStore.path} fill={appStore.color} />
1515
</svg>
1616
);
1717
});

‎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/layout/grid.jsx

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

88
export default function Grid() {
99
return (
10-
<div className="app bg-gray-100">
10+
<div className="app">
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+
<Blob />
17+
<div className="py-10">
18+
<ActionBar />
19+
</div>
1920
</div>
2021
</div>
2122
</div>
2223
<div className="md:w-3/12 flex items-center">
2324
<div className="flex-1">
25+
<Header />
2426
<Settings />
2527
</div>
2628
</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 font-manrope">
10+
Blob generator
11+
</h1>
912
</div>
1013
</nav>
1114
);

‎src/components/settings/colorPicker.jsx

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import React, { useState } from "react";
2+
import { Popover, Divider, Input } from "antd";
3+
import { view } from "@risingstack/react-easy-state";
4+
import { appStore } from "../../store";
5+
6+
const ColorPicker = view(() => {
7+
const [val, setVal] = useState(appStore.color);
8+
const colors = ["#00cec9", "#fab1a0", "#fdcb6e", "#fd79a8", "#a29bfe"];
9+
const content = () => {
10+
return (
11+
<div className="flex flex-col">
12+
<div className="flex justify-between">
13+
{colors.map((color, i) => {
14+
return (
15+
<div
16+
className="w-6 h-6 rounded-full mx-1 cursor-pointer"
17+
style={{ backgroundColor: color }}
18+
onClick={() => {
19+
setVal(color);
20+
appStore.color = color;
21+
}}
22+
></div>
23+
);
24+
})}
25+
</div>
26+
<hr className="my-4" />
27+
<Input
28+
placeholder="#ffffff"
29+
defaultValue={appStore.color}
30+
value={val}
31+
onChange={(e) => {
32+
setVal(e.target.value);
33+
}}
34+
onPressEnter={(e) => {
35+
setVal(e.target.value);
36+
appStore.color = e.target.value;
37+
}}
38+
/>
39+
</div>
40+
);
41+
};
42+
return (
43+
<Popover content={content} trigger="click">
44+
<div
45+
className="w-6 h-6 rounded-full cursor-pointer"
46+
style={{ backgroundColor: appStore.color }}
47+
></div>
48+
</Popover>
49+
);
50+
});
51+
52+
export default ColorPicker;

‎src/components/settings/settings.jsx

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import SettingsItem from "../common/settingsItem";
33
import EdgesSlider from "./edgesSlider";
44
import GrowthSlider from "./growthSlider";
55
import Links from "./links";
6+
import ColorPicker from "./colorPicker";
67

78
export default function Settings() {
89
const edgeInfo =
@@ -17,6 +18,10 @@ export default function Settings() {
1718
<SettingsItem label="Complexity" info={edgeInfo}>
1819
<EdgesSlider />
1920
</SettingsItem>
21+
22+
<SettingsItem label="Color">
23+
<ColorPicker />
24+
</SettingsItem>
2025
<Links />
2126
</div>
2227
);

‎src/services/animator.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import * as dynamics from "dynamics.js";
2-
import { appStore } from "../store";
32

43
export default function animator(path, id = "blob") {
54
const element = document.getElementById(id);

‎src/store.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ const appStore = store({
77
size: 500,
88
path: "",
99
id: "",
10+
color: "#d1d8e0",
1011
});
1112

1213
export { appStore };

‎tailwind.config.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,9 @@ module.exports = {
1515
},
1616
},
1717
},
18+
fontFamily: {
19+
manrope: ["Manrope"],
20+
},
1821
},
1922
purge: ["./src/**/*.html", "./src/**/*.jsx"],
2023
variants: {

0 commit comments

Comments
 (0)