Bootstrapify

ucarion · Dec 24, 2019 · ef0d7dc · ef0d7dc
1 parent 3969031
commit ef0d7dc
Show file tree

Hide file tree

Showing 9 changed files with 472 additions and 125 deletions.
diff --git a/package.json b/package.json
@@ -1,10 +1,16 @@
 {
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^1.2.26",
+    "@fortawesome/free-regular-svg-icons": "^5.12.0",
+    "@fortawesome/free-solid-svg-icons": "^5.12.0",
+    "@fortawesome/react-fontawesome": "^0.1.8",
     "@types/react": "^16.9.16",
     "@types/react-dom": "^16.9.4",
+    "bootstrap": "^4.4.1",
     "css-loader": "^3.4.0",
     "html-webpack-plugin": "^3.2.0",
     "react": "^16.12.0",
+    "react-bootstrap": "^1.0.0-beta.16",
     "react-dom": "^16.12.0",
     "style-loader": "^1.1.1",
     "ts-loader": "^6.2.1",

diff --git a/src/App/ColorEditor.tsx b/src/App/ColorEditor.tsx
@@ -5,6 +5,8 @@ import React, {
   useEffect,
   useMemo
 } from "react";
+import InputGroup from "react-bootstrap/InputGroup";
+import Form from "react-bootstrap/Form";
 import {
   RGB,
   LCH,
@@ -148,7 +150,8 @@ export default function ColorEditor({
           display: "grid",
           justifyContent: "center",
           alignItems: "center",
-          color: isTextWhite ? "white" : "black"
+          color: isTextWhite ? "white" : "black",
+          marginBottom: "8px"
         }}
       >
         {hue} {shade}{" "}
@@ -163,81 +166,62 @@ export default function ColorEditor({
           gridColumnGap: "16px"
         }}
       >
-        <div style={{ textAlign: "center" }}>
-          <div>
-            <input
-              style={{
-                width: "100%",
-                textAlign: "center",
-                borderWidth: "1px",
-                borderStyle: "solid",
-                borderColor: isRGBInputValid ? "black" : "red"
-              }}
-              value={rgbInput}
-              onChange={handleRGBChange}
-              onBlur={handleRGBBlur}
-              onKeyPress={handleRGBKeyPress}
-            />
-          </div>
-          RGB HEX
-        </div>
+        <InputGroup className="mb-3">
+          <InputGroup.Prepend>
+            <InputGroup.Text>HEX</InputGroup.Text>
+          </InputGroup.Prepend>
+          <Form.Control
+            value={rgbInput}
+            onChange={handleRGBChange}
+            onBlur={handleRGBBlur}
+            onKeyPress={handleRGBKeyPress}
+            isInvalid={!isRGBInputValid}
+          />
+        </InputGroup>
+
         <div
           style={{
             textAlign: "center",
             display: "grid",
-            gridTemplateColumns: "repeat(3, 1fr)"
+            gridTemplateColumns: "repeat(3, 1fr)",
+            gridColumnGap: "8px"
           }}
         >
-          <div>
-            <input
-              style={{
-                width: "100%",
-                textAlign: "center",
-                borderWidth: "1px",
-                borderStyle: "solid",
-                borderColor: isLInputValid ? "black" : "red"
-              }}
+          <InputGroup className="mb-3">
+            <InputGroup.Prepend>
+              <InputGroup.Text>L</InputGroup.Text>
+            </InputGroup.Prepend>
+            <Form.Control
               value={lInput}
-              onChange={event => handleLCHChange(event, "l")}
+              onChange={(event: any) => handleLCHChange(event, "l")}
               onBlur={handleLCHBlur}
               onKeyPress={handleLCHKeyPress}
             />
-            Luminance
-          </div>
-          <div>
-            <input
-              style={{
-                width: "100%",
-                textAlign: "center",
-                borderWidth: "1px",
-                borderStyle: "solid",
-                borderColor: isCInputValid ? "black" : "red"
-              }}
+          </InputGroup>
+
+          <InputGroup className="mb-3">
+            <InputGroup.Prepend>
+              <InputGroup.Text>C</InputGroup.Text>
+            </InputGroup.Prepend>
+            <Form.Control
               value={cInput}
-              onChange={event => handleLCHChange(event, "c")}
+              onChange={(event: any) => handleLCHChange(event, "c")}
               onBlur={handleLCHBlur}
               onKeyPress={handleLCHKeyPress}
             />
-            Chroma
-          </div>
-          <div>
-            <input
-              style={{
-                boxSizing: "border-box",
-                width: "100%",
-                maxWidth: "100%",
-                textAlign: "center",
-                borderWidth: "1px",
-                borderStyle: "solid",
-                borderColor: isHInputValid ? "black" : "red"
-              }}
+          </InputGroup>
+
+          <InputGroup className="mb-3">
+            <InputGroup.Prepend>
+              <InputGroup.Text>H</InputGroup.Text>
+            </InputGroup.Prepend>
+            <Form.Control
               value={hInput}
-              onChange={event => handleLCHChange(event, "h")}
+              onChange={(event: any) => handleLCHChange(event, "h")}
               onBlur={handleLCHBlur}
               onKeyPress={handleLCHKeyPress}
             />
-            Hue
-          </div>
+          </InputGroup>
         </div>
       </div>
     </div>

diff --git a/src/App/PaletteDisplay.tsx b/src/App/PaletteDisplay.tsx
@@ -105,8 +105,8 @@ function ColorDisplay({ rgb, selected, onSelect }: ColorDisplayProps) {
       onClick={onSelect}
     >
       {isTextWhite
-        ? contrastRatioWhite.toFixed(2)
-        : contrastRatioBlack.toFixed(2)}
+        ? contrastRatioWhite.toFixed(1)
+        : contrastRatioBlack.toFixed(1)}
     </div>
   );
 }
diff --git a/src/App/TunnelGraph.tsx b/src/App/TunnelGraph.tsx
@@ -19,11 +19,17 @@ import {
 
 interface Props {
   axis: "l" | "c" | "h";
+  displayPrecision: number;
   sequence: RGB[];
   selectedIndex: number;
 }
 
-export default function TunnelGraph({ axis, sequence, selectedIndex }: Props) {
+export default function TunnelGraph({
+  axis,
+  sequence,
+  selectedIndex,
+  displayPrecision
+}: Props) {
   const colorSequence = useMemo(
     () => sequence.map(rgb => ({ rgb, lch: rgbToLCH(rgb) })),
     [sequence]
@@ -49,7 +55,7 @@ export default function TunnelGraph({ axis, sequence, selectedIndex }: Props) {
               backgroundColor: index === selectedIndex ? "#eee" : "white"
             }}
           >
-            {lch[axis].toFixed(2)}
+            {lch[axis].toFixed(displayPrecision)}
           </div>
         ))}
 

diff --git a/src/App/index.css b/src/App/index.css
@@ -1,7 +0,0 @@
-@import url("https://fonts.googleapis.com/css?family=Roboto&display=swap");
-
-body {
-  font-family: "Roboto", sans-serif;
-  margin: 0;
-  padding: 0;
-}