fixed explore button

1 files changed, 14 insertions, 4 deletions

diff --git a/src/client/views/topbar/TopBar.tsx b/src/client/views/topbar/TopBar.tsx
index 68446d4e7..5b097e639 100644
--- a/src/client/views/topbar/TopBar.tsx
+++ b/src/client/views/topbar/TopBar.tsx
@@ -1,5 +1,5 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Button, IconButton, isDark, Size, Type } from 'browndash-components';
+import { Button, IconButton, isDark, Size, Toggle, Type } from 'browndash-components';
 import { action, computed, observable, reaction } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
@@ -37,10 +37,10 @@ export class TopBar extends React.Component {
     };
 
     @computed get color() {
-        return StrCast(Doc.UserDoc().userColor, Colors.LIGHT_GRAY);
+        return SettingsManager.userColor;
     }
     @computed get variantColor() {
-        return StrCast(Doc.UserDoc().userVariantColor, Colors.MEDIUM_BLUE);
+        return SettingsManager.userVariantColor;
     }
     @computed get backgroundColor() {
         return PingManager.Instance.IsBeating ? SettingsManager.userBackgroundColor : Colors.MEDIUM_GRAY;
@@ -76,7 +76,17 @@ export class TopBar extends React.Component {
                         <span style={{ color: isDark(this.backgroundColor) ? Colors.LIGHT_BLUE : Colors.MEDIUM_BLUE, fontWeight: 500 }}>dash</span>
                     </div>
                 )}
-                {Doc.ActiveDashboard && <Button text="Explore" tooltip="Browsing mode for directly navigating to documents" size={Size.SMALL} color={this.color} onClick={action(() => (DocumentView.ExploreMode = !DocumentView.ExploreMode))} />}
+                {Doc.ActiveDashboard && (
+                    <Button
+                        text="Explore"
+                        type={Type.TERT}
+                        tooltip="Browsing mode for directly navigating to documents"
+                        size={Size.SMALL}
+                        color={DocumentView.ExploreMode ? this.variantColor : this.color}
+                        background={DocumentView.ExploreMode ? this.color : 'transparent'}
+                        onClick={action(() => (DocumentView.ExploreMode = !DocumentView.ExploreMode))}
+                    />
+                )}
             </div>
         );
     }