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,