From 3910b3c7e901761b0f818895679324caeb247071 Mon Sep 17 00:00:00 2001
From: Natalia Venditto <nataliafrontend@gmail.com>
Date: Sat, 11 Nov 2023 22:23:20 +0100
Subject: [PATCH] feat: add color picker to developer panel in webapp

---
 .../SettingsStyles/SettingsStyles.css         | 11 ++++
 .../SettingsStyles/SettingsStyles.tsx         | 57 +++++++++++++++++++
 .../src/components/SettingsStyles/index.tsx   |  1 +
 3 files changed, 69 insertions(+)
 create mode 100644 packages/webapp/src/components/SettingsStyles/SettingsStyles.css
 create mode 100644 packages/webapp/src/components/SettingsStyles/SettingsStyles.tsx
 create mode 100644 packages/webapp/src/components/SettingsStyles/index.tsx

diff --git a/packages/webapp/src/components/SettingsStyles/SettingsStyles.css b/packages/webapp/src/components/SettingsStyles/SettingsStyles.css
new file mode 100644
index 00000000..dace429d
--- /dev/null
+++ b/packages/webapp/src/components/SettingsStyles/SettingsStyles.css
@@ -0,0 +1,11 @@
+.ms-style-picker {
+  display: grid;
+  margin-top: 10px;
+  grid-template-columns: repeat(4, 1fr);
+}
+
+.ms-style-picker > input,
+.ms-style-picker > label {
+  margin-bottom: 10px;
+  margin-right: 10px;
+}
diff --git a/packages/webapp/src/components/SettingsStyles/SettingsStyles.tsx b/packages/webapp/src/components/SettingsStyles/SettingsStyles.tsx
new file mode 100644
index 00000000..0a9af890
--- /dev/null
+++ b/packages/webapp/src/components/SettingsStyles/SettingsStyles.tsx
@@ -0,0 +1,57 @@
+import React, { useState } from 'react';
+import './SettingsStyles.css';
+
+type CustomStylesState = {
+  AccentHigh: string;
+  AccentLighter: string;
+  AccentContrast: string;
+};
+
+interface Props {
+  onChange: (newStyles: CustomStylesState) => void;
+}
+
+export const SettingsStyles = ({ onChange }: Props) => {
+  const defaultColors = ['#692b61', '#f6d5f2', '#5e3c7d'];
+
+  const [customStyles, setStyles] = useState<CustomStylesState>({
+    AccentHigh: defaultColors[0],
+    AccentLighter: defaultColors[1],
+    AccentContrast: defaultColors[2],
+  });
+
+  const handleInputChange = (key: keyof CustomStylesState, value: string) => {
+    setStyles((previousStyles) => ({
+      ...previousStyles,
+      [key]: value,
+    }));
+    onChange({
+      ...customStyles,
+      [key]: value,
+    });
+  };
+
+  return (
+    <>
+      <h3>Modify Styles</h3>
+      <div className="ms-style-picker">
+        {[
+          { label: 'Accent High', name: 'AccentHigh', placeholder: 'Accent high' },
+          { label: 'Accent Lighter', name: 'AccentLighter', placeholder: 'Accent lighter' },
+          { label: 'Accent Contrast', name: 'AccentContrast', placeholder: 'Accent contrast' },
+        ].map((input) => (
+          <React.Fragment key={input.name}>
+            <label htmlFor={`accent-${input.name.toLowerCase()}-picker`}>{input.label}</label>
+            <input
+              name={`accent-${input.name.toLowerCase()}-picker`}
+              type="color"
+              placeholder={input.placeholder}
+              value={customStyles[input.name as keyof CustomStylesState]}
+              onChange={(event) => handleInputChange(input.name as keyof CustomStylesState, event.target.value)}
+            />
+          </React.Fragment>
+        ))}
+      </div>
+    </>
+  );
+};
diff --git a/packages/webapp/src/components/SettingsStyles/index.tsx b/packages/webapp/src/components/SettingsStyles/index.tsx
new file mode 100644
index 00000000..086817fe
--- /dev/null
+++ b/packages/webapp/src/components/SettingsStyles/index.tsx
@@ -0,0 +1 @@
+export * from './SettingsStyles.jsx';