diff options
| -rw-r--r-- | src/client/views/topbar/TopBar.tsx | 18 |
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> ); } |