Disable settings button during login

2 files changed, 14 insertions, 8 deletions

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>
     );