A few minor tweaks

ucarion · Dec 27, 2019 · a33bc36 · a33bc36
1 parent 45f2493
commit a33bc36
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 32 deletions.
diff --git a/src/App/PaletteDisplay.tsx b/src/App/PaletteDisplay.tsx
@@ -38,7 +38,7 @@ export default function PaletteDisplay({
       <div
         style={{
           display: "flex",
-          justifyContent: "right",
+          justifyContent: "flex-end",
           alignItems: "center",
           paddingRight: "8px"
         }}

diff --git a/src/App/index.tsx b/src/App/index.tsx
@@ -37,8 +37,8 @@ export default function App() {
   const [isUsingLocal, setIsUsingLocal] = useState(true);
   const [{ hues, shades, colors }, setPalette] = useState(getSavedPalette());
   const [selectedColor, setSelectedColor] = useState({
-    hue: Math.round(PRESETS[0].hues.length / 2),
-    shade: Math.round(PRESETS[0].shades.length / 2)
+    hue: Math.floor((hues.length - 1) / 1.1),
+    shade: Math.floor((shades.length - 1) / 1.75)
   });
 
   const [newHueName, setNewHueName] = useState("");
@@ -51,8 +51,8 @@ export default function App() {
         : PRESETS[event.target.selectedIndex - 1];
 
     setSelectedColor({
-      hue: Math.round(preset.hues.length / 2),
-      shade: Math.round(preset.shades.length / 2)
+      hue: Math.floor((preset.hues.length - 1) / 2),
+      shade: Math.floor((preset.shades.length - 1) / 2)
     });
     setPalette(preset);
     setIsUsingLocal(event.target.selectedIndex === 0);
@@ -153,7 +153,14 @@ export default function App() {
             cielab.io
           </Nav.Link>
 
-          <Form inline className="ml-3">
+          <Nav.Link
+            className="ml-3"
+            href="https://github.com/ucarion/cielab.io"
+          >
+            About this tool
+          </Nav.Link>
+
+          <Form className="ml-3" inline>
             <Form.Label
               className={isHeaderTextWhite ? "text-light" : "text-dark"}
             >

diff --git a/src/App/presets.ts b/src/App/presets.ts
@@ -393,31 +393,31 @@ export const PRESETS: Palette[] = [
   },
   {
     hues: [
-      "mint-cool",
-      "cyan",
-      "blue-cool",
-      "gray-cool",
-      "blue",
-      "blue-warm",
-      "indigo-cool",
-      "indigo",
-      "indigo-warm",
-      "violet",
-      "violet-warm",
-      "magenta",
-      "red-cool",
-      "red",
-      "red-warm",
-      "orange-warm",
-      "orange",
-      "gold",
-      "yellow",
-      "gray-warm",
-      "green-warm",
-      "green",
-      "green-cool",
-      "gray",
-      "mint"
+      "CoolMint",
+      "Cyan",
+      "CoolBlue",
+      "CoolGray",
+      "Blue",
+      "WarmBlue",
+      "CoolIndigo",
+      "Indigo",
+      "WarmIndigo",
+      "Violet",
+      "VioletWarm",
+      "Magenta",
+      "CoolRed",
+      "Red",
+      "WarmRed",
+      "WarmOrange",
+      "Orange",
+      "Gold",
+      "Yellow",
+      "WarmGray",
+      "WarmGreen",
+      "Green",
+      "CoolGreen",
+      "Gray",
+      "Mint"
     ],
     shades: ["5", "10", "20", "30", "40", "50", "60", "70", "80", "90"],
     colors: [

diff --git a/webpack.config.js b/webpack.config.js
@@ -25,7 +25,11 @@ module.exports = {
     publicPath: "/",
     filename: "[name].bundle.js"
   },
-  plugins: [new HtmlWebpackPlugin()],
+  plugins: [
+    new HtmlWebpackPlugin({
+      title: "CIELab | Color tool based on human perception"
+    })
+  ],
   devServer: {
     historyApiFallback: true
   }