From f398dde5cb55e2d95395875a1e538bb8931b2f47 Mon Sep 17 00:00:00 2001
From: Sean King <seanking2919@protonmail.com>
Date: Sun, 2 Aug 2020 14:41:26 -0600
Subject: [PATCH] Color picker for admin config

---
 app/soapbox/features/configuration/index.js | Bin 16875 -> 16875 bytes
 app/soapbox/features/forms/index.js         | Bin 4905 -> 7614 bytes
 app/styles/forms.scss                       |  13 +++++++
 package.json                                |   1 +
 yarn.lock                                   |  39 ++++++++++++++++++++
 5 files changed, 53 insertions(+)

diff --git a/app/soapbox/features/configuration/index.js b/app/soapbox/features/configuration/index.js
index c5218c8df6ae25d94e771e5c96566ff55c698907..768e510224d523da50bab08032f8fc4f5acf9df1 100644
GIT binary patch
delta 147
zcmaFe%=o&Qal<-Begy^R{G9xv@XV5ofXw9V&8rxvh%#rSR&4eXZ{nT2z=UUVoSf8T
zJ#9&T6m_XZlMgBiizStol;r1mrr4?{6(#1S#3zHyQU^&*eywCSSxeP$@>K<q$vafF
kz+!XlL?{1H6`bs>A~<=!hS1~*)<TodYFTVvt>z#N0JOI@TmS$7

delta 208
zcmaFe%=o&Qal<;s%?BALh)!N8F1I;NynuJ|6l;OW_1YZb3K=E2Id1tyw(3bmiFqmU
z$@w|?Me25wKWgYro~mjjXrrH#n3S4hXOmQ<pbsJ^Z?qIKx5>;aC@oPasVqpfRflL%
z$V@>sLm@9Q7buHt?BrXj+LOiA)OjFAAq<>+*P30STA?H(vskaVB(Wq_53J1@<QRoo
Ms2es1sLhrJ0Hw=G?f?J)

diff --git a/app/soapbox/features/forms/index.js b/app/soapbox/features/forms/index.js
index 75feac6d47009ba926541c0aac837be8dd23bea5..53621981f7b992a01e004275565bab9a6846c9dc 100644
GIT binary patch
delta 2194
zcmb7G%Wm676h$_9*j8Pj1zNOdagCy;jLNi=rEEF~oB$1wG=`nRi!2O^ypjeU&9I!I
zY?mRp>b?QLqU-GQ2koM}0{w~pLGR3v6z$k4DhL9}xjb|3<DAiN>+g1c{kvqdM5Y>Y
zI66fgO%GUfiYXK@PUQ@|6vIewMv}|a+gYk(U(7M(;l-s8>7J=A&PH2xz~YS@n0hWp
zjAM)J`&;y7kJQP`E-Zp$)EMc5P$@RYCvy~9)myoh&BQHjqFsCQ*Dr^W6iNeUN~6H^
zMWPu!fB>$6@~5FX$`YIOLrS{_8-h+V!)^%UkSl!q>efHYU+kO2>yqF(fyW9CO-cM}
zdwFnM=?jj-YV+1-)$hH2_0>n8mp)U6_*2GGj0a0VA1U^^R5*l#R3<Mk5>);;6Omag
zmgr|1ikRbL8D%rdbe~iGi8w;A2e}1cW9aKCQ@)Tf!umR_wRb+{twSbMAAKFB6V&C#
zM*SLq4NGWO<<}(o8#@-VXf}@|bzjiFk6HX&W<vLy*W;RyAI7om!Lz!!eJ?T`y@A8O
zLccU?16RU&vkxF?nMG47>J4BH>q=KGs;yj0{+Mz8qnH`~<@*VwIHTeGA31y=g=?|8
zSsa;0U8%``q@hqB;+T3KEqdN|*gURw??GutZ2<F-XE-oJMVm~_yat^<yY6z-Fr#T;
z;)LT^pCnGwL94<3856NQ^O+#A9J5$YH{c<754MwYkLKUI|9~!b%y0svsIyc+*|&E9
zyD^&sivzD~7yE7uG4&{Z9ORb1%c}s(JjiqKeZS7av3o}3hSxA1Kq3`05+*L;NJ*aQ
zS4cDR^HUMy`4H}JZ*N0U?A4TrRF@1`w+eDwssduB!V$+uJeh`V-GaQSU;$gzTJO76
ztMp^0YXhvlUf#Pq%Cwf^X<Yr;`=+XT(1^Tx^YN#p6ffmuLWUMVA2$}QGjd%+{}eCa
z^=oh!K@foVL})5dqc4C~*Gh*PeKHlYyTx*?Un#z4F**xs<V(&0C6Y<CQg4Hgrt+)~
z##(>IXG|ws(cArqwzC(vZ|!={vJxIfXxwNBBICTZsxFt(<lRZTY59>!rk}$lSSS{%
zm14osVC3MOi((c<ya~;Dv;jMyjIKs?csIw*4WmAi)Y+LG_LNPg+JmCnxwi&Q#|OZ}
z5%Tx+R<S!@e$pgIbJ`TDy0f}o%~n>ccPq<FCnxT_+*_*tSn<kT2Wmu<H~0laoDQ)c
z!WjmhjowseAsxToLN22)I-R6sYVpv?o<`nXw6kq&oy1)Wu9-+0>5eqY=CoEc8bR**
zQY@$kd7DL1x5D9d^hFA@`lwGrtE?^w>qT8n)#r@?`j!l_J2;owHGdV}uJ!KT{ue$n
B-MRn(

delta 24
gcmdmIy;5z$oyqeVn<j5(;oaQK^pJb=L-D(;0FEsR_5c6?

diff --git a/app/styles/forms.scss b/app/styles/forms.scss
index 6cf1f5f0ff..bce0cf97b0 100644
--- a/app/styles/forms.scss
+++ b/app/styles/forms.scss
@@ -444,6 +444,19 @@ code {
   }
 
   .label_input {
+
+    &__color {
+      display: inline-flex;
+      font-size: 14px;
+
+      .color-swatch {
+        width: 32px;
+        height: 16px;
+        margin-left: 12px;
+        display: inline-block;
+      }
+    }
+
     &__wrapper {
       position: relative;
     }
diff --git a/package.json b/package.json
index 9682ef3094..eaeac44789 100644
--- a/package.json
+++ b/package.json
@@ -102,6 +102,7 @@
     "punycode": "^2.1.0",
     "rails-ujs": "^5.2.3",
     "react": "^16.13.1",
+    "react-color": "^2.18.1",
     "react-dom": "^16.13.1",
     "react-helmet": "^6.0.0",
     "react-hotkeys": "^1.1.4",
diff --git a/yarn.lock b/yarn.lock
index c6908bd86a..daf4e0faa3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1229,6 +1229,11 @@
   dependencies:
     emojis-list "^3.0.0"
 
+"@icons/material@^0.2.4":
+  version "0.2.4"
+  resolved "https://registry.yarnpkg.com/@icons/material/-/material-0.2.4.tgz#e90c9f71768b3736e76d7dd6783fc6c2afa88bc8"
+  integrity sha512-QPcGmICAPbGLGb6F/yNf/KzKqvFx8z5qx3D1yFqVAjoFmXK35EgyW+cJ57Te3CNsmzblwtzakLGFqHPqrfb4Tw==
+
 "@istanbuljs/load-nyc-config@^1.0.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz#fd3db1d59ecf7cf121e80650bb86712f9b55eced"
@@ -7411,6 +7416,11 @@ lodash@^4.0.0, lodash@^4.17.12, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.1
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548"
   integrity sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==
 
+lodash@^4.0.1:
+  version "4.17.19"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.19.tgz#e48ddedbe30b3321783c5b4301fbd353bc1e4a4b"
+  integrity sha512-JNvd8XER9GQX0v2qJgsaN/mzFCNA5BRe/j8JN9d+tWyGLSodKQHKFicdwNYzWwI3wjRnaKPsGj1XkBjx/F96DQ==
+
 lodash@^4.15.0, lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.5, lodash@^4.7.11:
   version "4.17.11"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.11.tgz#b39ea6229ef607ecd89e2c8df12536891cac9b8d"
@@ -7510,6 +7520,11 @@ marky@^1.2.1:
   resolved "https://registry.yarnpkg.com/marky/-/marky-1.2.1.tgz#a3fcf82ffd357756b8b8affec9fdbf3a30dc1b02"
   integrity sha512-md9k+Gxa3qLH6sUKpeC2CNkJK/Ld+bEz5X96nYwloqphQE0CKCVEKco/6jxEZixinqNdz5RFi/KaCyfbMDMAXQ==
 
+material-colors@^1.2.1:
+  version "1.2.6"
+  resolved "https://registry.yarnpkg.com/material-colors/-/material-colors-1.2.6.tgz#6d1958871126992ceecc72f4bcc4d8f010865f46"
+  integrity sha512-6qE4B9deFBIa9YSpOc9O0Sgc43zTeVYbgDT5veRKSlB2+ZuHNoVVxA1L/ckMUayV9Ay9y7Z/SZCLcGteW9i7bg==
+
 md5.js@^1.3.4:
   version "1.3.5"
   resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.5.tgz#b5d07b8e3216e3e27cd728d72f70d1e6a342005f"
@@ -9423,6 +9438,18 @@ rc@^1.2.7:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
+react-color@^2.18.1:
+  version "2.18.1"
+  resolved "https://registry.yarnpkg.com/react-color/-/react-color-2.18.1.tgz#2cda8cc8e06a9e2c52ad391a30ddad31972472f4"
+  integrity sha512-X5XpyJS6ncplZs74ak0JJoqPi+33Nzpv5RYWWxn17bslih+X7OlgmfpmGC1fNvdkK7/SGWYf1JJdn7D2n5gSuQ==
+  dependencies:
+    "@icons/material" "^0.2.4"
+    lodash "^4.17.11"
+    material-colors "^1.2.1"
+    prop-types "^15.5.10"
+    reactcss "^1.2.0"
+    tinycolor2 "^1.4.1"
+
 react-dom@^16.13.1:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.13.1.tgz#c1bd37331a0486c078ee54c4740720993b2e0e7f"
@@ -9738,6 +9765,13 @@ react@^16.13.1:
     object-assign "^4.1.1"
     prop-types "^15.6.2"
 
+reactcss@^1.2.0:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/reactcss/-/reactcss-1.2.3.tgz#c00013875e557b1cf0dfd9a368a1c3dab3b548dd"
+  integrity sha512-KiwVUcFu1RErkI97ywr8nvx8dNOpT03rbnma0SSalTYjkrPYaEajR4a/MRt6DZ46K6arDRbWMNHF+xH7G7n/8A==
+  dependencies:
+    lodash "^4.0.1"
+
 read-pkg-up@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-2.0.0.tgz#6b72a8048984e0c41e79510fd5e9fa99b3b549be"
@@ -11330,6 +11364,11 @@ tiny-warning@^1.0.0:
   resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754"
   integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==
 
+tinycolor2@^1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.4.1.tgz#f4fad333447bc0b07d4dc8e9209d8f39a8ac77e8"
+  integrity sha1-9PrTM0R7wLB9TcjpIJ2POaisd+g=
+
 tmp@^0.0.33:
   version "0.0.33"
   resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9"