Merge branch 'disable-settings-during-login'

4 files changed, 17 insertions, 12 deletions

diff --git a/gui/src/renderer/components/ErrorBoundary.tsx b/gui/src/renderer/components/ErrorBoundary.tsx
index d9f2bf370e..e3fdfdd6f6 100644
--- a/gui/src/renderer/components/ErrorBoundary.tsx
+++ b/gui/src/renderer/components/ErrorBoundary.tsx
@@ -41,7 +41,7 @@ export default class ErrorBoundary extends React.Component<IProps, IState> {
           .split('%(email)s', 2);
       reachBackMessage.splice(1, 0, <Email>{supportEmail}</Email>);
 
-      return <ErrorView>{reachBackMessage}</ErrorView>;
+      return <ErrorView settingsUnavailable>{reachBackMessage}</ErrorView>;
     } else {
       return this.props.children;
     }
diff --git a/gui/src/renderer/components/ErrorView.tsx b/gui/src/renderer/components/ErrorView.tsx
index 069e646e50..b233b46ede 100644
--- a/gui/src/renderer/components/ErrorView.tsx
+++ b/gui/src/renderer/components/ErrorView.tsx
@@ -31,15 +31,14 @@ const Subtitle = styled.span({
 });
 
 interface ErrorViewProps {
+  settingsUnavailable?: boolean;
   children: React.ReactNode | React.ReactNode[];
 }
 
 export default function ErrorView(props: ErrorViewProps) {
   return (
     <Layout>
-      <Header>
-        <HeaderBarSettingsButton />
-      </Header>
+      <Header>{!props.settingsUnavailable && <HeaderBarSettingsButton />}</Header>
       <StyledContainer>
         <Logo height={106} width={106} source="logo-icon" />
         <Title height={18} source="logo-text" />
diff --git a/gui/src/renderer/components/HeaderBar.tsx b/gui/src/renderer/components/HeaderBar.tsx
index d9d17a4744..15ec961400 100644
--- a/gui/src/renderer/components/HeaderBar.tsx
+++ b/gui/src/renderer/components/HeaderBar.tsx
@@ -92,12 +92,18 @@ const HeaderBarSettingsButtonContainer = styled.button({
   border: 'none',
 });
 
-export function HeaderBarSettingsButton() {
+interface IHeaderBarSettingsButtonProps {
+  disabled?: boolean;
+}
+
+export function HeaderBarSettingsButton(props: IHeaderBarSettingsButtonProps) {
   const history = useHistory();
 
   const openSettings = useCallback(() => {
-    history.show(RoutePath.settings);
-  }, [history]);
+    if (!props.disabled) {
+      history.show(RoutePath.settings);
+    }
+  }, [history, props.disabled]);
 
   return (
     <HeaderBarSettingsButtonContainer
@@ -107,8 +113,8 @@ export function HeaderBarSettingsButton() {
         height={24}
         width={24}
         source="icon-settings"
-        tintColor={colors.white60}
-        tintHoverColor={colors.white80}
+        tintColor={props.disabled ? colors.white40 : colors.white60}
+        tintHoverColor={props.disabled ? colors.white40 : colors.white80}
       />
     </HeaderBarSettingsButtonContainer>
   );
diff --git a/gui/src/renderer/components/Login.tsx b/gui/src/renderer/components/Login.tsx
index bdeb6bdb4b..31afee88b0 100644
--- a/gui/src/renderer/components/Login.tsx
+++ b/gui/src/renderer/components/Login.tsx
@@ -89,13 +89,13 @@ export default class Login extends React.Component<IProps, IState> {
   }
 
   public render() {
-    const showFooter = this.allowInteraction();
+    const allowInteraction = this.allowInteraction();
 
     return (
       <Layout>
         <Header>
           <Brand />
-          <HeaderBarSettingsButton />
+          <HeaderBarSettingsButton disabled={!allowInteraction} />
         </Header>
         <Container>
           <StyledTopInfo>
@@ -108,7 +108,7 @@ export default class Login extends React.Component<IProps, IState> {
             {this.createLoginForm()}
           </StyledLoginForm>
 
-          <StyledFooter show={showFooter}>{this.createFooter()}</StyledFooter>
+          <StyledFooter show={allowInteraction}>{this.createFooter()}</StyledFooter>
         </Container>
       </Layout>
     );