commit 1fe684be362c1827f9ee9ee68dd6a45ac82afeab
parent 27a6b0f83b7b3106a0532cdbdb4c347b77a08d07
Author: mcol <mcol@posteo.net>
Date:   Wed,  8 Jul 2020 15:32:25 +0100

use window content to style context menus

Diffstat:
M
src/components/menu/index.js
 | 
8
++++----
M
src/components/optbox/index.js
 | 
2
+-
M
src/features/status_bars/menu.js
 | 
24
++++++++++++++----------

3 files changed, 19 insertions(+), 15 deletions(-)
diff --git a/src/components/menu/index.js b/src/components/menu/index.js
@@ -1,12 +1,12 @@
 import React, { useState } from 'react';
 import { useSelector } from 'react-redux';
 
-import { selectWindowContent } from 'features/window_content/slice';
+import { selectWindowContentCSS } from 'features/window_content/slice';
 import './index.css';
 
 
 export default function ContextMenu(props) {
-	const windowContent  = useSelector(selectWindowContent);
+	const style = useSelector(selectWindowContentCSS);
   const [state, toggle] = useState({enabled: false, x: 0, y:0});
 
 	const enable = (e) => {
@@ -25,12 +25,12 @@ export default function ContextMenu(props) {
 	return (
 		<div
 			className="context-menu"
-			style={{left: state.x, top: state.y}}
+			style={{left: state.x, top: state.y, ...style}}
 		>
 			<props.menu/>
 			<button
 				onClick={() => toggle({enabled: false, x: 0, y: 0})}
-				style={{color: windowContent.textColour}}
+				style={{color: style.color}}
 			>
 			Hide
 			</button>
diff --git a/src/components/optbox/index.js b/src/components/optbox/index.js
@@ -11,7 +11,7 @@ export default function OptBox(props) {
 	return (
 		<div
 			className={`optbox ${props.className}`}
-			style={{width: props.width, color:windowContent.textColour}}
+			style={{width: props.width, color: windowContent.textColour}}
 		>
 			<h3>{props.label}</h3>
 			{props.children}
diff --git a/src/features/status_bars/menu.js b/src/features/status_bars/menu.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { useSelector } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 
 import {
 	setColour,
@@ -8,19 +8,23 @@ import {
 } from './slice';
 import Colour from 'components/colour';
 import OptBox from 'components/optbox';
+import Switch from 'components/switch';
 
 
 export function Menu() {
-  const style = useSelector(selectStatusBars);
+  const statusBars = useSelector(selectStatusBars);
+  const dispatch = useDispatch();
 
 	return (
-		<OptBox width={190}>
-			<div>
-				Colour
-				<Colour value={style.backgroundColor} callback={setColour} />
-				Text
-				<Colour value={style.color} callback={setTextColour} />
-			</div>
-		</OptBox>
+		<div>
+			<OptBox width={190}>
+				<div>
+					Colour
+					<Colour value={statusBars.backgroundColor} callback={setColour} />
+					Text
+					<Colour value={statusBars.color} callback={setTextColour} />
+				</div>
+			</OptBox>
+		</div>
 	);
 };