From ee20eb582e2edaac5b4ce3a6a7de51cd35a4a154 Mon Sep 17 00:00:00 2001
From: Anike Arni <aarni@thoughtworks.com>
Date: Wed, 22 Feb 2017 15:21:18 -0300
Subject: [#907] Makes logo smaller on mobile generic error

with @SweetVirginia
---
 web-ui/src/login/app.js            |  6 +++++-
 web-ui/src/login/app.scss          |  5 +++++
 web-ui/test/unit/login/app.spec.js | 11 +++++++++++
 3 files changed, 21 insertions(+), 1 deletion(-)

(limited to 'web-ui')

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');
+  });
+
 });
-- 
cgit v1.2.3