diff --git a/src/layouts/main/components/sidebar/GuestIndicator.scss b/src/layouts/main/components/sidebar/GuestIndicator.scss
index 48a2580..198c53d 100644
--- a/src/layouts/main/components/sidebar/GuestIndicator.scss
+++ b/src/layouts/main/components/sidebar/GuestIndicator.scss
@@ -10,4 +10,10 @@
color: $text-muted;
text-align: center;
font-size: 85%;
+
+ cursor: pointer;
+
+ &:hover {
+ background-color: $main-sidebar-top-hover-bg;
+ }
}
diff --git a/src/layouts/main/components/sidebar/GuestIndicator.tsx b/src/layouts/main/components/sidebar/GuestIndicator.tsx
index add9c81..9d95d98 100644
--- a/src/layouts/main/components/sidebar/GuestIndicator.tsx
+++ b/src/layouts/main/components/sidebar/GuestIndicator.tsx
@@ -2,6 +2,19 @@
import "./GuestIndicator.scss";
-export const GuestIndicator: React.FC = () => (
-
Browsing as guest
+import { bindActionCreators, Dispatch } from "redux";
+import { connect } from "react-redux";
+import { openLogin } from "@actions/WalletManagerActions";
+
+const mapDispatchToProps = (dispatch: Dispatch) =>
+ bindActionCreators({ openLogin }, dispatch);
+
+type Props = ReturnType;
+
+const GuestIndicatorComponent: React.FC = (props: Props) => (
+ // Allow clicking the guest indicator to open the master password dialog again
+ // eslint-disable-next-line react/prop-types
+ { props.openLogin(); }}>Browsing as guest
);
+
+export const GuestIndicator = connect(null, mapDispatchToProps)(GuestIndicatorComponent);
diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss
index 3f1337c..aa0bb0a 100644
--- a/src/scss/_variables.scss
+++ b/src/scss/_variables.scss
@@ -31,6 +31,7 @@
$main-sidebar-bg: $darker;
$main-sidebar-hover-bg: mix($darker, $darkest, 50%);
$main-sidebar-top-bg: $darkest;
+$main-sidebar-top-hover-bg: $main-sidebar-hover-bg;
/* -------------------------------------------------------------------------- */
/* MISC */
diff --git a/src/store/actions/WalletManagerActions.ts b/src/store/actions/WalletManagerActions.ts
index 9cca599..0f764a4 100644
--- a/src/store/actions/WalletManagerActions.ts
+++ b/src/store/actions/WalletManagerActions.ts
@@ -3,6 +3,7 @@
import * as constants from "../constants";
+export const openLogin = createAction(constants.OPEN_LOGIN)();
export const browseAsGuest = createAction(constants.BROWSE_AS_GUEST)();
export interface LoginPayload { password: string };
diff --git a/src/store/constants.ts b/src/store/constants.ts
index e33f180..1a6a321 100644
--- a/src/store/constants.ts
+++ b/src/store/constants.ts
@@ -2,5 +2,6 @@
// Wallet Manager
// -----------------------------------------------------------------------------
export const BROWSE_AS_GUEST = "BROWSE_AS_GUEST";
+export const OPEN_LOGIN = "OPEN_LOGIN";
export const LOGIN = "LOGIN";
export const SET_MASTER_PASSWORD = "SET_MASTER_PASSWORD";
diff --git a/src/store/reducers/WalletManagerReducer.ts b/src/store/reducers/WalletManagerReducer.ts
index 4311279..76ca714 100644
--- a/src/store/reducers/WalletManagerReducer.ts
+++ b/src/store/reducers/WalletManagerReducer.ts
@@ -1,4 +1,4 @@
-import { browseAsGuest, login, setMasterPassword } from "@actions/WalletManagerActions";
+import { browseAsGuest, openLogin, login, setMasterPassword } from "@actions/WalletManagerActions";
import { createReducer, ActionType } from "typesafe-actions";
export interface State {
@@ -47,6 +47,10 @@
isLoggedIn: true,
isGuest: true
}))
+ .handleAction(openLogin, (state: State) => ({
+ ...state,
+ isLoggedIn: false
+ }))
.handleAction(login, (state: State, action: ActionType) => ({
...state,
isLoggedIn: true,