remove unnecessary fragment; add rainbow (#5)

laneysmith · Sep 15, 2024 · 17e1e4e · 17e1e4e
1 parent 24c17f9
commit 17e1e4e
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 49 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -90,56 +90,54 @@ function App() {
   );
 
   return (
-    <>
-      <div id="controls">
-        <div className="control-option">
-          <label htmlFor="size">Band size (px)</label>
-          <input
-            type="number"
-            id="size"
-            name="size"
-            min="1"
-            value={size}
-            onChange={handleChangeSize}
-          />
-        </div>
-        <button className="full-width" onClick={addColor}>
-          Add a color&nbsp;
-          <img src={paintRollerIcon} className="icon" role="presentation" />
-        </button>
-        <button className="full-width" onClick={randomizePalette}>
-          Randomize palette&nbsp;
-          <img src={paletteIcon} className="icon" role="presentation" />
-        </button>
-        <DndProvider options={HTML5toTouch}>
-          <ol role="listbox" className="unstyled-list">
-            {colors.map((color, index) => {
-              return (
-                <ColorRow
-                  key={color.key}
-                  index={index}
-                  color={color.color}
-                  updateColor={updateColor}
-                  moveColor={moveColor}
-                  removeColor={removeColor}
-                  disableRemove={colors.length < 2}
-                />
-              );
-            })}
-          </ol>
-        </DndProvider>
-        <CopyButton code={code} />
-        <div className="footer">
-          <a
-            href="https://github.com/laneysmith/gingham"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            View on GitHub
-          </a>
-        </div>
+    <div id="controls">
+      <div className="control-option">
+        <label htmlFor="size">Band size (px)</label>
+        <input
+          type="number"
+          id="size"
+          name="size"
+          min="1"
+          value={size}
+          onChange={handleChangeSize}
+        />
       </div>
-    </>
+      <button className="full-width" onClick={addColor}>
+        Add a color&nbsp;
+        <img src={paintRollerIcon} className="icon" role="presentation" />
+      </button>
+      <button className="full-width" onClick={randomizePalette}>
+        Randomize palette&nbsp;
+        <img src={paletteIcon} className="icon" role="presentation" />
+      </button>
+      <DndProvider options={HTML5toTouch}>
+        <ol role="listbox" className="unstyled-list">
+          {colors.map((color, index) => {
+            return (
+              <ColorRow
+                key={color.key}
+                index={index}
+                color={color.color}
+                updateColor={updateColor}
+                moveColor={moveColor}
+                removeColor={removeColor}
+                disableRemove={colors.length < 2}
+              />
+            );
+          })}
+        </ol>
+      </DndProvider>
+      <CopyButton code={code} />
+      <div className="footer">
+        <a
+          href="https://github.com/laneysmith/gingham"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          View on GitHub
+        </a>
+      </div>
+    </div>
   );
 }
 

diff --git a/src/constants/palettes.ts b/src/constants/palettes.ts
@@ -42,6 +42,18 @@ const BLUEBERRIES = [
   "#BBBDE2",
   "#FFFFFF",
 ];
+const RAINBOW = [
+  "#F49280",
+  "#FFFFFF",
+  "#EA9A4C",
+  "#FFFFFF",
+  "#A0D39F",
+  "#FFFFFF",
+  "#79BBC8",
+  "#FFFFFF",
+  "#B898D7",
+  "#FFFFFF",
+];
 export default [
   GO_LIGHTLY,
   PICNIC,
@@ -58,4 +70,5 @@ export default [
   SKY,
   WATERMELON,
   BLUEBERRIES,
+  RAINBOW,
 ];