From 2956e15d045dc36241a89f3ce01c1f6579284009 Mon Sep 17 00:00:00 2001
From: Amir Hossein Salar <ah.salar@gmail.com>
Date: Tue, 26 Jan 2021 08:52:22 +0330
Subject: [PATCH 1/5] changes for add theme modal

---
 .../OperatorControls/_OperatorControls.scss   |  10 +
 .../OperatorControls/components/AddTheme.js   | 213 ++++++++++--------
 .../OperatorControls/components/ColorInput.js |   2 +-
 web/src/index.css                             |   7 +
 4 files changed, 141 insertions(+), 91 deletions(-)

diff --git a/web/src/containers/OperatorControls/_OperatorControls.scss b/web/src/containers/OperatorControls/_OperatorControls.scss
index c12b7abacb..9ae04d319d 100644
--- a/web/src/containers/OperatorControls/_OperatorControls.scss
+++ b/web/src/containers/OperatorControls/_OperatorControls.scss
@@ -296,3 +296,13 @@ $operator-controls__panel-border-color: #a7a7a7;
 		border: none !important;
 	}
 }
+
+.operator-button_underline {
+	&.ant-btn > span {
+		text-decoration: underline;
+	}
+	&.ant-btn-link {
+		padding: 4px 8px;
+		color: white;
+	}
+}
diff --git a/web/src/containers/OperatorControls/components/AddTheme.js b/web/src/containers/OperatorControls/components/AddTheme.js
index e61ab07f3f..1a019c1fe4 100644
--- a/web/src/containers/OperatorControls/components/AddTheme.js
+++ b/web/src/containers/OperatorControls/components/AddTheme.js
@@ -2,7 +2,11 @@ import React, { Component } from 'react';
 import Modal from 'components/Dialog/DesktopDialog';
 import { bool, object, func, string } from 'prop-types';
 import { Input, Button, Radio, Divider, Collapse, Tooltip } from 'antd';
-import { UndoOutlined, BgColorsOutlined } from '@ant-design/icons';
+import {
+	UndoOutlined,
+	BgColorsOutlined,
+	CaretDownOutlined,
+} from '@ant-design/icons';
 import initialTheme, {
 	nestedColors as nestedStructure,
 } from 'config/colors/light';
@@ -244,99 +248,128 @@ class AddTheme extends Component {
 					)}
 				</div>
 				<div>
-					{Object.entries(nestedStructure).map(([clusterKey, clusterObj]) => {
-						const renderCollapse = clusterKey === 'base' && isSingleBase;
+					{Object.entries(nestedStructure)
+						.filter(
+							([clusterKey, clusterObj]) =>
+								!isSingleBase || clusterKey === 'base'
+						)
+						.map(([clusterKey, clusterObj]) => {
+							const renderCollapse = clusterKey === 'base' && isSingleBase;
 
-						return (
-							<div className="pb-4" key={clusterKey}>
-								<Divider orientation="left">
-									<span className="caps">
-										<BgColorsOutlined /> {clusterKey}
-									</span>
-								</Divider>
-								{renderCollapse ? (
-									<Collapse defaultActiveKey={['1']} bordered={false} ghost>
-										<Collapse.Panel showArrow={false} key="1" disabled={true}>
-											{Object.keys(clusterObj)
-												.filter(
-													(localColorKey) => localColorKey === 'background'
-												)
-												.map((localColorKey) => {
-													const colorKey = `${clusterKey}_${localColorKey}`;
-													const isCalculated = this.isCalculated(colorKey);
-													const colorValue = isCalculated
-														? baseRatios[colorKey]
-														: theme[colorKey];
+							return (
+								<div className="pb-4" key={clusterKey}>
+									<Divider orientation="left">
+										<span className="caps">
+											<BgColorsOutlined /> {clusterKey}
+										</span>
+									</Divider>
+									{renderCollapse ? (
+										<Collapse defaultActiveKey={['1']} bordered={false} ghost>
+											<Collapse.Panel showArrow={false} key="1" disabled={true}>
+												{Object.keys(clusterObj)
+													.filter(
+														(localColorKey) => localColorKey === 'background'
+													)
+													.map((localColorKey) => {
+														const colorKey = `${clusterKey}_${localColorKey}`;
+														const isCalculated = this.isCalculated(colorKey);
+														const colorValue = isCalculated
+															? baseRatios[colorKey]
+															: theme[colorKey];
 
-													return (
-														<ColorInput
-															colorKey={colorKey}
-															isCalculated={isCalculated}
-															colorValue={colorValue}
-															pickerHandler={this.pickerHandler}
-															onReset={this.onReset}
-															validateColor={this.validateColor}
-															onChange={this.handleInputChange}
-														/>
-													);
-												})}
-										</Collapse.Panel>
-										<Collapse.Panel
-											showArrow={false}
-											header="Modify theme breakdown"
-											key="2"
-										>
-											{Object.keys(clusterObj)
-												.filter(
-													(localColorKey) => localColorKey !== 'background'
-												)
-												.map((localColorKey) => {
-													const colorKey = `${clusterKey}_${localColorKey}`;
-													const isCalculated = this.isCalculated(colorKey);
-													const colorValue = isCalculated
-														? baseRatios[colorKey]
-														: theme[colorKey];
+														return (
+															<ColorInput
+																colorKey={colorKey}
+																isCalculated={isCalculated}
+																colorValue={colorValue}
+																pickerHandler={this.pickerHandler}
+																onReset={this.onReset}
+																validateColor={this.validateColor}
+																onChange={this.handleInputChange}
+															/>
+														);
+													})}
+											</Collapse.Panel>
+											<Collapse.Panel
+												showArrow={false}
+												header={
+													<span>
+														<CaretDownOutlined /> Modify theme breakdown
+													</span>
+												}
+												key="2"
+											>
+												{Object.keys(clusterObj)
+													.filter(
+														(localColorKey) => localColorKey !== 'background'
+													)
+													.map((localColorKey) => {
+														const colorKey = `${clusterKey}_${localColorKey}`;
+														const isCalculated = this.isCalculated(colorKey);
+														const colorValue = isCalculated
+															? baseRatios[colorKey]
+															: theme[colorKey];
 
-													return (
-														<ColorInput
-															colorKey={colorKey}
-															isCalculated={isCalculated}
-															colorValue={colorValue}
-															pickerHandler={this.pickerHandler}
-															onReset={this.onReset}
-															validateColor={this.validateColor}
-															onChange={this.handleInputChange}
-														/>
-													);
-												})}
-										</Collapse.Panel>
-									</Collapse>
-								) : (
-									<div className="pt-2">
-										{Object.keys(clusterObj).map((localColorKey) => {
-											const colorKey = `${clusterKey}_${localColorKey}`;
-											const isCalculated = this.isCalculated(colorKey);
-											const colorValue = isCalculated
-												? baseRatios[colorKey]
-												: theme[colorKey];
+														return (
+															<ColorInput
+																colorKey={colorKey}
+																isCalculated={isCalculated}
+																colorValue={colorValue}
+																pickerHandler={this.pickerHandler}
+																onReset={this.onReset}
+																validateColor={this.validateColor}
+																onChange={this.handleInputChange}
+															/>
+														);
+													})}
+												{isSingleBase && (
+													<div className="pt-2">
+														<span>
+															To edit more colors directly try switching to the
+														</span>
+														<Button
+															type="link"
+															value={false}
+															className="operator-button_underline"
+															onClick={() =>
+																this.setState({
+																	isSingleBase: false,
+																})
+															}
+														>
+															separated base color
+														</Button>
+														<span>configuration</span>
+													</div>
+												)}
+											</Collapse.Panel>
+										</Collapse>
+									) : (
+										<div className="pt-2">
+											{Object.keys(clusterObj).map((localColorKey) => {
+												const colorKey = `${clusterKey}_${localColorKey}`;
+												const isCalculated = this.isCalculated(colorKey);
+												const colorValue = isCalculated
+													? baseRatios[colorKey]
+													: theme[colorKey];
 
-											return (
-												<ColorInput
-													colorKey={colorKey}
-													isCalculated={isCalculated}
-													colorValue={colorValue}
-													pickerHandler={this.pickerHandler}
-													onReset={this.onReset}
-													validateColor={this.validateColor}
-													onChange={this.handleInputChange}
-												/>
-											);
-										})}
-									</div>
-								)}
-							</div>
-						);
-					})}
+												return (
+													<ColorInput
+														colorKey={colorKey}
+														isCalculated={isCalculated}
+														colorValue={colorValue}
+														pickerHandler={this.pickerHandler}
+														onReset={this.onReset}
+														validateColor={this.validateColor}
+														onChange={this.handleInputChange}
+													/>
+												);
+											})}
+										</div>
+									)}
+								</div>
+							);
+						})}
 				</div>
 				<div className="pt-4">
 					<Button
diff --git a/web/src/containers/OperatorControls/components/ColorInput.js b/web/src/containers/OperatorControls/components/ColorInput.js
index c2848ba660..9a2e560e78 100644
--- a/web/src/containers/OperatorControls/components/ColorInput.js
+++ b/web/src/containers/OperatorControls/components/ColorInput.js
@@ -19,7 +19,7 @@ const ColorInput = ({
 			key={colorKey}
 		>
 			<div className="bold">{colorKey.split('_')[1].replace(/-/g, ' ')}</div>
-			<div className="d-flex align-items-center">
+			<div className="d-flex align-items-center pl-2">
 				{!isCalculated && (
 					<ColorPicker
 						color={colorValue}
diff --git a/web/src/index.css b/web/src/index.css
index 0112c40e13..8845650e3a 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -3579,6 +3579,13 @@ table th {
 .operator-controls__table tbody > tr > td {
   border: none !important; }
 
+.operator-button_underline.ant-btn > span {
+  text-decoration: underline; }
+
+.operator-button_underline.ant-btn-link {
+  padding: 4px 8px;
+  color: white; }
+
 .init-container {
   flex: 1;
   height: 100%; }

From 05d46817d563140754378aa2d18f98894c5563cf Mon Sep 17 00:00:00 2001
From: Amir Hossein Salar <ah.salar@gmail.com>
Date: Tue, 26 Jan 2021 09:50:08 +0330
Subject: [PATCH 2/5] change for add theme modal default values, calculation
 mode and styles

---
 .../OperatorControls/_OperatorControls.scss   |  6 +++
 .../OperatorControls/components/AddTheme.js   | 37 ++++++++++---------
 web/src/index.css                             |  3 ++
 3 files changed, 28 insertions(+), 18 deletions(-)

diff --git a/web/src/containers/OperatorControls/_OperatorControls.scss b/web/src/containers/OperatorControls/_OperatorControls.scss
index 9ae04d319d..46ef1db4c8 100644
--- a/web/src/containers/OperatorControls/_OperatorControls.scss
+++ b/web/src/containers/OperatorControls/_OperatorControls.scss
@@ -226,6 +226,12 @@ $operator-controls__panel-border-color: #a7a7a7;
 		}
 	}
 
+	&.add-theme {
+		.ReactModal__Content {
+			width: 532px !important;
+		}
+	}
+
 	.ReactModal__Overlay {
 		position: fixed;
 		z-index: 10001 !important;
diff --git a/web/src/containers/OperatorControls/components/AddTheme.js b/web/src/containers/OperatorControls/components/AddTheme.js
index 1a019c1fe4..f850046eef 100644
--- a/web/src/containers/OperatorControls/components/AddTheme.js
+++ b/web/src/containers/OperatorControls/components/AddTheme.js
@@ -32,12 +32,13 @@ class AddTheme extends Component {
 			themeKey && themes[themeKey] ? themes[themeKey] : initialTheme;
 		const filteredTheme = filterTheme(theme);
 		const baseRatios = CALCULATED_COLOR_RATIO_OBJECT;
+		const isSingleBase = !isEditTheme;
 
 		this.state = {
 			isEditTheme,
 			themeKey,
 			theme: filteredTheme,
-			isSingleBase: false,
+			isSingleBase,
 			isDarken: true,
 			baseRatios,
 		};
@@ -134,11 +135,11 @@ class AddTheme extends Component {
 		}
 	};
 
-	handleColorMode = ({ target: { value } }) => {
-		this.setState({
-			isDarken: value,
-		});
-	};
+	// handleColorMode = ({ target: { value } }) => {
+	// 	this.setState({
+	// 		isDarken: value,
+	// 	});
+	// };
 
 	validateRatio = (value) => {
 		return value >= 0 && value <= 1;
@@ -179,14 +180,14 @@ class AddTheme extends Component {
 			theme,
 			isSingleBase,
 			baseRatios,
-			isDarken,
+			// isDarken,
 		} = this.state;
 
 		return (
 			<Modal
 				isOpen={isOpen}
 				label="operator-controls-modal"
-				className="operator-controls__modal"
+				className="operator-controls__modal add-theme"
 				disableTheme={true}
 				onCloseDialog={() => onCloseDialog(true)}
 				shouldCloseOnOverlayClick={true}
@@ -238,14 +239,14 @@ class AddTheme extends Component {
 							</Tooltip>
 						</Radio>
 					</Group>
-					{isSingleBase && (
-						<div className="pl-5">
-							<Group onChange={this.handleColorMode} value={isDarken}>
-								<Radio value={true}>Darken</Radio>
-								<Radio value={false}>Lighten</Radio>
-							</Group>
-						</div>
-					)}
+					{/*{isSingleBase && (*/}
+					{/*<div className="pl-5">*/}
+					{/*<Group onChange={this.handleColorMode} value={isDarken}>*/}
+					{/*<Radio value={true}>Darken</Radio>*/}
+					{/*<Radio value={false}>Lighten</Radio>*/}
+					{/*</Group>*/}
+					{/*</div>*/}
+					{/*)}*/}
 				</div>
 				<div>
 					{Object.entries(nestedStructure)
@@ -323,7 +324,7 @@ class AddTheme extends Component {
 														);
 													})}
 												{isSingleBase && (
-													<div className="pt-2">
+													<div className="pt-3">
 														<span>
 															To edit more colors directly try switching to the
 														</span>
@@ -371,7 +372,7 @@ class AddTheme extends Component {
 							);
 						})}
 				</div>
-				<div className="pt-4">
+				<div className="pt-3">
 					<Button
 						block
 						type="primary"
diff --git a/web/src/index.css b/web/src/index.css
index 8845650e3a..5f8229130f 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -3527,6 +3527,9 @@ table th {
 .operator-controls__modal.extended .ReactModal__Content {
   height: calc(100vh - 160px) !important; }
 
+.operator-controls__modal.add-theme .ReactModal__Content {
+  width: 532px !important; }
+
 .operator-controls__modal .ReactModal__Overlay {
   position: fixed;
   z-index: 10001 !important;

From ada6e5f35257b075b725c6075dbdb9a27fbd522c Mon Sep 17 00:00:00 2001
From: Amir Hossein Salar <ah.salar@gmail.com>
Date: Tue, 26 Jan 2021 10:17:53 +0330
Subject: [PATCH 3/5] changes for color reset functionality

---
 .../OperatorControls/components/AddTheme.js         | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/web/src/containers/OperatorControls/components/AddTheme.js b/web/src/containers/OperatorControls/components/AddTheme.js
index f850046eef..e42a31b52e 100644
--- a/web/src/containers/OperatorControls/components/AddTheme.js
+++ b/web/src/containers/OperatorControls/components/AddTheme.js
@@ -7,9 +7,11 @@ import {
 	BgColorsOutlined,
 	CaretDownOutlined,
 } from '@ant-design/icons';
-import initialTheme, {
+import Color from 'color';
+import initialLightTheme, {
 	nestedColors as nestedStructure,
 } from 'config/colors/light';
+import initialDarkTheme from 'config/colors/dark';
 import systemThemes from 'config/colors';
 import {
 	getColorByKey,
@@ -29,7 +31,7 @@ class AddTheme extends Component {
 		const { themes, selectedTheme: themeKey = '' } = this.props;
 		const isEditTheme = !!themeKey;
 		const theme =
-			themeKey && themes[themeKey] ? themes[themeKey] : initialTheme;
+			themeKey && themes[themeKey] ? themes[themeKey] : initialLightTheme;
 		const filteredTheme = filterTheme(theme);
 		const baseRatios = CALCULATED_COLOR_RATIO_OBJECT;
 		const isSingleBase = !isEditTheme;
@@ -116,7 +118,12 @@ class AddTheme extends Component {
 	};
 
 	onReset = (name) => {
-		const value = getColorByKey(name);
+		const { theme } = this.state;
+		const baseColor = theme['base_background'];
+		const upstreamTheme = Color(baseColor).isLight()
+			? initialLightTheme
+			: initialDarkTheme;
+		const value = getColorByKey(name, upstreamTheme);
 		this.updateTheme(value, name);
 	};
 

From b319418f27755dd9a44e8718c1573315f9afd0fd Mon Sep 17 00:00:00 2001
From: Amir Hossein Salar <ah.salar@gmail.com>
Date: Tue, 26 Jan 2021 11:15:17 +0330
Subject: [PATCH 4/5] add upstream theme logic

---
 .../OperatorControls/components/AddTheme.js   | 396 ++++++++++--------
 1 file changed, 232 insertions(+), 164 deletions(-)

diff --git a/web/src/containers/OperatorControls/components/AddTheme.js b/web/src/containers/OperatorControls/components/AddTheme.js
index e42a31b52e..fa2aceb439 100644
--- a/web/src/containers/OperatorControls/components/AddTheme.js
+++ b/web/src/containers/OperatorControls/components/AddTheme.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
 import Modal from 'components/Dialog/DesktopDialog';
 import { bool, object, func, string } from 'prop-types';
 import { Input, Button, Radio, Divider, Collapse, Tooltip } from 'antd';
@@ -38,6 +38,8 @@ class AddTheme extends Component {
 
 		this.state = {
 			isEditTheme,
+			upstreamSelected: isEditTheme,
+			upstreamTheme: 'white',
 			themeKey,
 			theme: filteredTheme,
 			isSingleBase,
@@ -179,6 +181,24 @@ class AddTheme extends Component {
 		return Object.keys(systemThemes).includes(themeKey);
 	};
 
+	handleUpstreamTheme = ({ target: { value } }) => {
+		this.setState({
+			upstreamTheme: value,
+		});
+	};
+
+	next = () => {
+		const { upstreamTheme } = this.state;
+
+		if (upstreamTheme) {
+			const upstreamThemeObject = systemThemes[upstreamTheme];
+			this.setState({
+				theme: upstreamThemeObject,
+				upstreamSelected: true,
+			});
+		}
+	};
+
 	render() {
 		const { isOpen, onCloseDialog } = this.props;
 		const {
@@ -188,6 +208,8 @@ class AddTheme extends Component {
 			isSingleBase,
 			baseRatios,
 			// isDarken,
+			upstreamTheme,
+			upstreamSelected,
 		} = this.state;
 
 		return (
@@ -206,112 +228,186 @@ class AddTheme extends Component {
 						{`${isEditTheme ? 'Edit' : 'Add'} theme`}
 					</div>
 				</div>
-				<div className="my-4 d-flex align-center">
-					<div className="bold mr-4">Theme:</div>
-					<Input
-						disabled={isEditTheme}
-						type="text"
-						name="theme-key"
-						placeholder="Please enter a theme name"
-						className="operator-controls__input mr-2"
-						value={themeKey}
-						onChange={this.handleThemeKey}
-					/>
-					<Button
-						ghost
-						shape="circle"
-						size="small"
-						className="operator-controls__all-strings-settings-button"
-						disabled={!this.isSystemDefined()}
-						onClick={this.resetTheme}
-						icon={<UndoOutlined />}
-					/>
-				</div>
-				<div className="mb-5">
-					<Group onChange={this.handleBaseMode} value={isSingleBase}>
-						<Radio value={false}>
-							<Tooltip
-								overlayStyle={{ zIndex: 10001 }}
-								title="Edit multiple colors in the theme separately"
-							>
-								Use separated base
-							</Tooltip>
-						</Radio>
-						<Radio value={true}>
-							<Tooltip
-								overlayStyle={{ zIndex: 10001 }}
-								title="Easily edit the whole theme through a single base background color"
-							>
-								Use single base
-							</Tooltip>
-						</Radio>
-					</Group>
-					{/*{isSingleBase && (*/}
-					{/*<div className="pl-5">*/}
-					{/*<Group onChange={this.handleColorMode} value={isDarken}>*/}
-					{/*<Radio value={true}>Darken</Radio>*/}
-					{/*<Radio value={false}>Lighten</Radio>*/}
-					{/*</Group>*/}
-					{/*</div>*/}
-					{/*)}*/}
-				</div>
-				<div>
-					{Object.entries(nestedStructure)
-						.filter(
-							([clusterKey, clusterObj]) =>
-								!isSingleBase || clusterKey === 'base'
-						)
-						.map(([clusterKey, clusterObj]) => {
-							const renderCollapse = clusterKey === 'base' && isSingleBase;
-
-							return (
-								<div className="pb-4" key={clusterKey}>
-									<Divider orientation="left">
-										<span className="caps">
-											<BgColorsOutlined /> {clusterKey}
-										</span>
-									</Divider>
-									{renderCollapse ? (
-										<Collapse defaultActiveKey={['1']} bordered={false} ghost>
-											<Collapse.Panel showArrow={false} key="1" disabled={true}>
-												{Object.keys(clusterObj)
-													.filter(
-														(localColorKey) => localColorKey === 'background'
-													)
-													.map((localColorKey) => {
-														const colorKey = `${clusterKey}_${localColorKey}`;
-														const isCalculated = this.isCalculated(colorKey);
-														const colorValue = isCalculated
-															? baseRatios[colorKey]
-															: theme[colorKey];
+				{!upstreamSelected && (
+					<Fragment>
+						<div className="my-4">
+							Select the base color type. This can be directly edited later in
+							the separated base color settings.
+						</div>
+						<div className="mb-4">
+							<Group onChange={this.handleUpstreamTheme} value={upstreamTheme}>
+								<Radio value="white">Light based theme</Radio>
+								<Radio value="dark">Dark based theme</Radio>
+							</Group>
+						</div>
+					</Fragment>
+				)}
+				{upstreamSelected && (
+					<Fragment>
+						<div className="my-4 d-flex align-center">
+							<div className="bold mr-4">Theme:</div>
+							<Input
+								disabled={isEditTheme}
+								type="text"
+								name="theme-key"
+								placeholder="Please enter a theme name"
+								className="operator-controls__input mr-2"
+								value={themeKey}
+								onChange={this.handleThemeKey}
+							/>
+							<Button
+								ghost
+								shape="circle"
+								size="small"
+								className="operator-controls__all-strings-settings-button"
+								disabled={!this.isSystemDefined()}
+								onClick={this.resetTheme}
+								icon={<UndoOutlined />}
+							/>
+						</div>
+						<div className="mb-5">
+							<Group onChange={this.handleBaseMode} value={isSingleBase}>
+								<Radio value={false}>
+									<Tooltip
+										overlayStyle={{ zIndex: 10001 }}
+										title="Edit multiple colors in the theme separately"
+									>
+										Use separated base
+									</Tooltip>
+								</Radio>
+								<Radio value={true}>
+									<Tooltip
+										overlayStyle={{ zIndex: 10001 }}
+										title="Easily edit the whole theme through a single base background color"
+									>
+										Use single base
+									</Tooltip>
+								</Radio>
+							</Group>
+							{/*{isSingleBase && (*/}
+							{/*<div className="pl-5">*/}
+							{/*<Group onChange={this.handleColorMode} value={isDarken}>*/}
+							{/*<Radio value={true}>Darken</Radio>*/}
+							{/*<Radio value={false}>Lighten</Radio>*/}
+							{/*</Group>*/}
+							{/*</div>*/}
+							{/*)}*/}
+						</div>
+						<div>
+							{Object.entries(nestedStructure)
+								.filter(
+									([clusterKey, clusterObj]) =>
+										!isSingleBase || clusterKey === 'base'
+								)
+								.map(([clusterKey, clusterObj]) => {
+									const renderCollapse = clusterKey === 'base' && isSingleBase;
 
-														return (
-															<ColorInput
-																colorKey={colorKey}
-																isCalculated={isCalculated}
-																colorValue={colorValue}
-																pickerHandler={this.pickerHandler}
-																onReset={this.onReset}
-																validateColor={this.validateColor}
-																onChange={this.handleInputChange}
-															/>
-														);
-													})}
-											</Collapse.Panel>
-											<Collapse.Panel
-												showArrow={false}
-												header={
-													<span>
-														<CaretDownOutlined /> Modify theme breakdown
-													</span>
-												}
-												key="2"
-											>
-												{Object.keys(clusterObj)
-													.filter(
-														(localColorKey) => localColorKey !== 'background'
-													)
-													.map((localColorKey) => {
+									return (
+										<div className="pb-4" key={clusterKey}>
+											<Divider orientation="left">
+												<span className="caps">
+													<BgColorsOutlined /> {clusterKey}
+												</span>
+											</Divider>
+											{renderCollapse ? (
+												<Collapse
+													defaultActiveKey={['1']}
+													bordered={false}
+													ghost
+												>
+													<Collapse.Panel
+														showArrow={false}
+														key="1"
+														disabled={true}
+													>
+														{Object.keys(clusterObj)
+															.filter(
+																(localColorKey) =>
+																	localColorKey === 'background'
+															)
+															.map((localColorKey) => {
+																const colorKey = `${clusterKey}_${localColorKey}`;
+																const isCalculated = this.isCalculated(
+																	colorKey
+																);
+																const colorValue = isCalculated
+																	? baseRatios[colorKey]
+																	: theme[colorKey];
+
+																return (
+																	<ColorInput
+																		colorKey={colorKey}
+																		isCalculated={isCalculated}
+																		colorValue={colorValue}
+																		pickerHandler={this.pickerHandler}
+																		onReset={this.onReset}
+																		validateColor={this.validateColor}
+																		onChange={this.handleInputChange}
+																	/>
+																);
+															})}
+													</Collapse.Panel>
+													<Collapse.Panel
+														showArrow={false}
+														header={
+															<span>
+																<CaretDownOutlined /> Modify theme breakdown
+															</span>
+														}
+														key="2"
+													>
+														{Object.keys(clusterObj)
+															.filter(
+																(localColorKey) =>
+																	localColorKey !== 'background'
+															)
+															.map((localColorKey) => {
+																const colorKey = `${clusterKey}_${localColorKey}`;
+																const isCalculated = this.isCalculated(
+																	colorKey
+																);
+																const colorValue = isCalculated
+																	? baseRatios[colorKey]
+																	: theme[colorKey];
+
+																return (
+																	<ColorInput
+																		colorKey={colorKey}
+																		isCalculated={isCalculated}
+																		colorValue={colorValue}
+																		pickerHandler={this.pickerHandler}
+																		onReset={this.onReset}
+																		validateColor={this.validateColor}
+																		onChange={this.handleInputChange}
+																	/>
+																);
+															})}
+														{isSingleBase && (
+															<div className="pt-3">
+																<span>
+																	To edit more colors directly try switching to
+																	the
+																</span>
+																<Button
+																	type="link"
+																	value={false}
+																	className="operator-button_underline"
+																	onClick={() =>
+																		this.setState({
+																			isSingleBase: false,
+																		})
+																	}
+																>
+																	separated base color
+																</Button>
+																<span>configuration</span>
+															</div>
+														)}
+													</Collapse.Panel>
+												</Collapse>
+											) : (
+												<div className="pt-2">
+													{Object.keys(clusterObj).map((localColorKey) => {
 														const colorKey = `${clusterKey}_${localColorKey}`;
 														const isCalculated = this.isCalculated(colorKey);
 														const colorValue = isCalculated
@@ -330,66 +426,38 @@ class AddTheme extends Component {
 															/>
 														);
 													})}
-												{isSingleBase && (
-													<div className="pt-3">
-														<span>
-															To edit more colors directly try switching to the
-														</span>
-														<Button
-															type="link"
-															value={false}
-															className="operator-button_underline"
-															onClick={() =>
-																this.setState({
-																	isSingleBase: false,
-																})
-															}
-														>
-															separated base color
-														</Button>
-														<span>configuration</span>
-													</div>
-												)}
-											</Collapse.Panel>
-										</Collapse>
-									) : (
-										<div className="pt-2">
-											{Object.keys(clusterObj).map((localColorKey) => {
-												const colorKey = `${clusterKey}_${localColorKey}`;
-												const isCalculated = this.isCalculated(colorKey);
-												const colorValue = isCalculated
-													? baseRatios[colorKey]
-													: theme[colorKey];
-
-												return (
-													<ColorInput
-														colorKey={colorKey}
-														isCalculated={isCalculated}
-														colorValue={colorValue}
-														pickerHandler={this.pickerHandler}
-														onReset={this.onReset}
-														validateColor={this.validateColor}
-														onChange={this.handleInputChange}
-													/>
-												);
-											})}
+												</div>
+											)}
 										</div>
-									)}
-								</div>
-							);
-						})}
-				</div>
+									);
+								})}
+						</div>
+					</Fragment>
+				)}
 				<div className="pt-3">
-					<Button
-						block
-						type="primary"
-						size="large"
-						className="operator-controls__save-button"
-						disabled={this.isSaveDisabled()}
-						onClick={this.addTheme}
-					>
-						Save
-					</Button>
+					{upstreamSelected ? (
+						<Button
+							block
+							type="primary"
+							size="large"
+							className="operator-controls__save-button"
+							disabled={this.isSaveDisabled()}
+							onClick={this.addTheme}
+						>
+							Save
+						</Button>
+					) : (
+						<Button
+							block
+							type="primary"
+							size="large"
+							className="operator-controls__save-button"
+							disabled={!upstreamTheme}
+							onClick={this.next}
+						>
+							Next
+						</Button>
+					)}
 				</div>
 			</Modal>
 		);

From ec26139e8e0035cbf4bda994f52c97ded56232a5 Mon Sep 17 00:00:00 2001
From: Amir Hossein Salar <ah.salar@gmail.com>
Date: Tue, 26 Jan 2021 11:36:40 +0330
Subject: [PATCH 5/5] changes for theme breakdown

---
 web/src/config/colors/light.js | 2 +-
 web/src/utils/color.js         | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/web/src/config/colors/light.js b/web/src/config/colors/light.js
index 38f7fd13ca..0df99ef413 100644
--- a/web/src/config/colors/light.js
+++ b/web/src/config/colors/light.js
@@ -4,7 +4,7 @@ const options = { safe: true, delimiter: '_' };
 export const nestedColors = {
 	base: {
 		background: '#f8f8f8',
-		'top-bar-navigation': '#f3f3f3',
+		'top-bar-navigation': '#000000',
 		'secondary-navigation-bar': '#e9e9e9',
 		'wallet-sidebar-and-popup': '#f8f8f8',
 		footer: '#000000',
diff --git a/web/src/utils/color.js b/web/src/utils/color.js
index fdc8b7d23c..f6f7d12dd2 100644
--- a/web/src/utils/color.js
+++ b/web/src/utils/color.js
@@ -155,10 +155,10 @@ export const filterTheme = (theme) => {
 };
 
 export const CALCULATED_COLOR_RATIO_OBJECT = {
-	'base_top-bar-navigation': 0.7,
-	'base_secondary-navigation-bar': 0.5,
-	'base_wallet-sidebar-and-popup': 0.3,
-	base_footer: 0.6,
+	'base_top-bar-navigation': 1,
+	'base_secondary-navigation-bar': 0.1,
+	'base_wallet-sidebar-and-popup': 0,
+	base_footer: 1,
 };
 
 export const CALCULATED_COLOR_KEYS = Object.keys(CALCULATED_COLOR_RATIO_OBJECT);