From a33bc36fe57ad4bd9062e6d578ecc72ddc1afdde Mon Sep 17 00:00:00 2001
From: Ulysse Carion <ulysse@segment.com>
Date: Thu, 26 Dec 2019 17:23:45 -0800
Subject: [PATCH] A few minor tweaks

---
 src/App/PaletteDisplay.tsx |  2 +-
 src/App/index.tsx          | 17 +++++++++----
 src/App/presets.ts         | 50 +++++++++++++++++++-------------------
 webpack.config.js          |  6 ++++-
 4 files changed, 43 insertions(+), 32 deletions(-)

diff --git a/src/App/PaletteDisplay.tsx b/src/App/PaletteDisplay.tsx
index 7c2d523..7198e55 100644
--- 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
index a6670b1..f9c3389 100644
--- 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
index bf07bf2..3702cc2 100644
--- 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
index ec6735e..32cc86e 100644
--- 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
   }