From 6057d83eaeef89230f92d58252d770e1cc42de44 Mon Sep 17 00:00:00 2001
From: Roland <roland@learningselfreliance.com>
Date: Thu, 6 Apr 2023 11:16:45 -0600
Subject: [PATCH] Preseving contrast with light menu instead of always-inverted
 menu.

---
 app/src/components/Common.js | 5 ++---
 app/src/components/Nav.js    | 7 ++++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/app/src/components/Common.js b/app/src/components/Common.js
index 755ee423..d7b89253 100644
--- a/app/src/components/Common.js
+++ b/app/src/components/Common.js
@@ -1,5 +1,5 @@
 import React, {useContext, useEffect, useState} from "react";
-import {Card, Container, IconGroup, Input, Modal, Pagination, Icon as SIcon} from 'semantic-ui-react';
+import {Card, Container, IconGroup, Input, Modal, Pagination} from 'semantic-ui-react';
 import {Link, NavLink, useNavigate} from "react-router-dom";
 import Message from "semantic-ui-react/dist/commonjs/collections/Message";
 import {useDirectories, useDownloads, useHotspot, useSettings, useThrottle} from "../hooks/customHooks";
@@ -779,8 +779,7 @@ export function DarkModeToggle() {
         iconName = 'sun';
     }
 
-    return <SIcon
-        inverted
+    return <Icon
         name={iconName}
         onClick={cycleSavedTheme}
         style={{cursor: 'pointer'}}
diff --git a/app/src/components/Nav.js b/app/src/components/Nav.js
index 5f35ecc3..1e9795a5 100644
--- a/app/src/components/Nav.js
+++ b/app/src/components/Nav.js
@@ -53,11 +53,12 @@ function NavIcon(props) {
 }
 
 export function NavBar() {
-    const {status} = useContext(StatusContext);
+    const {status} = React.useContext(StatusContext);
     const wrol_mode = status ? status['wrol_mode'] : null;
     const wrolpiIcon = <img src='/icon.svg' height='32px' width='32px' alt='WROLPi Home Icon'/>;
     const name = NAME || wrolpiIcon;
     const topNavText = wrol_mode ? <>{name}&nbsp; <Icon name='lock'/></> : name;
+    const {i} = React.useContext(ThemeContext);
 
     const homeLink = <NavLink className='item' to='/' style={{paddingTop: 0, paddingBottom: 0}}>
         {topNavText}
@@ -69,7 +70,7 @@ export function NavBar() {
 
     return <>
         <Media at='mobile'>
-            <Menu attached='top' inverted color='violet'>
+            <Menu {...i} attached='top' color='violet'>
                 {homeLink}
                 <Menu.Menu position='right'>
                     {icons}
@@ -82,7 +83,7 @@ export function NavBar() {
             </Menu>
         </Media>
         <Media greaterThanOrEqual='tablet'>
-            <Menu attached='top' inverted color='violet'>
+            <Menu {...i} attached='top' color='violet'>
                 {homeLink}
                 {links.map(i => <MenuLink link={i} key={i.key}/>)}