[#907] Makes logo smaller on mobile generic error

with @SweetVirginia

3 files changed, 21 insertions, 1 deletions

diff --git a/web-ui/src/login/app.js b/web-ui/src/login/app.js
index 7502c442..3c0fdf79 100644
--- a/web-ui/src/login/app.js
+++ b/web-ui/src/login/app.js
@@ -37,7 +37,11 @@ const rightPanel = (t, error) => {
 
 export const App = ({ t, authError, error }) => (
   <div className='login'>
-    <img className='logo' src='/public/images/logo-orange.svg' alt='Pixelated logo' />
+    <img
+      className={error ? 'logo small-logo' : 'logo'}
+      src='/public/images/logo-orange.svg'
+      alt='Pixelated logo'
+    />
     {rightPanel(t, error)}
     <form className='standard' id='login_form' action='/login' method='post'>
       {errorMessage(t, authError)}
diff --git a/web-ui/src/login/app.scss b/web-ui/src/login/app.scss
index 48add805..8fa07027 100644
--- a/web-ui/src/login/app.scss
+++ b/web-ui/src/login/app.scss
@@ -52,6 +52,11 @@
   margin-bottom: 2em;
 }
 
+.small-logo {
+  width: 50%;
+  margin-bottom: 1em;
+}
+
 @media only screen and (min-width : 500px) {
   #login_form {
     margin-top: 1em;
diff --git a/web-ui/test/unit/login/app.spec.js b/web-ui/test/unit/login/app.spec.js
index e329af0f..2036dfd7 100644
--- a/web-ui/test/unit/login/app.spec.js
+++ b/web-ui/test/unit/login/app.spec.js
@@ -40,4 +40,15 @@ describe('App', () => {
     expect(app.find(AuthError).length).toEqual(0);
     expect(app.find(GenericError).length).toEqual(0);
   });
+
+  it('adds small logo class when error', () => {
+    app = shallow(<App t={mockTranslations} error />);
+    expect(app.find('.logo').props().className).toEqual('logo small-logo');
+  });
+
+  it('does not add small logo class when no error', () => {
+    app = shallow(<App t={mockTranslations} />);
+    expect(app.find('.logo').props().className).toEqual('logo');
+  });
+
 });