update header and add color settings

lokesh-coder · lokesh-coder · commit 1d26e85e5325 · 2020-06-10T22:57:53.000+05:30
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@400;800&display=swap"
+      rel="stylesheet"
+    />
   </head>
   <body>
     <div id="root"></div>
diff --git 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
@@ -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
@@ -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,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
@@ -11,7 +11,7 @@ const Blob = view(() => {
       width={`100%`}
       id="blobSvg"
     >
-      <path id="blob" d={appStore.path} />
+      <path id="blob" d={appStore.path} fill={appStore.color} />
     </svg>
   );
 });
diff --git a/src/components/common/copy.jsx b/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/layout/grid.jsx b/src/components/layout/grid.jsx
@@ -7,20 +7,22 @@ import Settings from "../settings/settings";
 
 export default function Grid() {
   return (
-    <div className="app bg-gray-100">
+    <div className="app">
       <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">
+                <Blob />
+                <div className="py-10">
+                  <ActionBar />
+                </div>
               </div>
             </div>
           </div>
           <div className="md:w-3/12 flex items-center">
             <div className="flex-1">
+              <Header />
               <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 font-manrope">
+          Blob generator
+        </h1>
       </div>
     </nav>
   );
diff --git a/src/components/settings/colorPicker.jsx 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 (
+      <div className="flex flex-col">
+        <div className="flex justify-between">
+          {colors.map((color, i) => {
+            return (
+              <div
+                className="w-6 h-6 rounded-full mx-1 cursor-pointer"
+                style={{ backgroundColor: color }}
+                onClick={() => {
+                  setVal(color);
+                  appStore.color = color;
+                }}
+              ></div>
+            );
+          })}
+        </div>
+        <hr className="my-4" />
+        <Input
+          placeholder="#ffffff"
+          defaultValue={appStore.color}
+          value={val}
+          onChange={(e) => {
+            setVal(e.target.value);
+          }}
+          onPressEnter={(e) => {
+            setVal(e.target.value);
+            appStore.color = e.target.value;
+          }}
+        />
+      </div>
+    );
+  };
+  return (
+    <Popover content={content} trigger="click">
+      <div
+        className="w-6 h-6 rounded-full cursor-pointer"
+        style={{ backgroundColor: appStore.color }}
+      ></div>
+    </Popover>
+  );
+});
+
+export default ColorPicker;
diff --git 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() {
       <SettingsItem label="Complexity" info={edgeInfo}>
         <EdgesSlider />
       </SettingsItem>
+
+      <SettingsItem label="Color">
+        <ColorPicker />
+      </SettingsItem>
       <Links />
     </div>
   );
diff --git 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
@@ -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
@@ -15,6 +15,9 @@ module.exports = {
         },
       },
     },
+    fontFamily: {
+      manrope: ["Manrope"],
+    },
   },
   purge: ["./src/**/*.html", "./src/**/*.jsx"],
   variants: {

Original file line number	Diff line number	Diff line change
`@@ -9,10 +9,6 @@ html body {`
`9`	`9`	`max-width: 500px;`
`10`	`10`	`}`
`11`	`11`
`12`		`- #blob {`
`13`		`- fill: #d1d8e0;`
`14`		`- }`
`15`		`-`
`16`	`12`	`.ant-slider-step {`
`17`	`13`	`background: rgb(209, 216, 224);`
`18`	`14`	`}`
Original file line number	Diff line number	Diff line change
`@@ -11,7 +11,7 @@ const Blob = view(() => {`
`11`	`11`	width={`100%`}
`12`	`12`	`id="blobSvg"`
`13`	`13`	`>`
`14`		`- <path id="blob" d={appStore.path} />`
	`14`	`+ <path id="blob" d={appStore.path} fill={appStore.color} />`
`15`	`15`	`</svg>`
`16`	`16`	`);`
`17`	`17`	`});`