Style new functionality

Author: manosim

src/js/__tests__/components/__snapshots__/enterprise-login.js.snap

@@ -2,18 +2,26 @@
 
 exports[`components/enterprise-login.js renders correctly 1`] = `
 <div
-  className="container-fluid main-container settings"
+  className="container-fluid main-container login"
 >
-  <a
-    className="btn btn-lg btn-block enterprise"
-    href="/login"
-    onClick={[Function]}
+  <div
+    className="d-flex flex-row-reverse"
   >
-    <i
-      className="fa fa-angle-left"
-    />
-     Back
-  </a>
+    <a
+      className="btn btn-close"
+      href="/login"
+      onClick={[Function]}
+    >
+      <i
+        className="fa fa-close"
+      />
+    </a>
+  </div>
+  <div
+    className="desc"
+  >
+    Login to GitHub Enterprise.
+  </div>
   <form
     onSubmit={[Function]}
   >
@@ -87,7 +95,7 @@ exports[`components/enterprise-login.js renders correctly 1`] = `
       </div>
     </div>
     <button
-      className="btn btn-md"
+      className="btn btn-md btn-login mt-2"
       type="submit"
     >
       <i

src/js/__tests__/components/__snapshots__/login.js.snap

@@ -16,23 +16,23 @@ exports[`components/login.js should render itself & its children 1`] = `
     in your menu bar.
   </div>
   <button
-    className="btn btn-lg btn-block github"
+    className="btn btn-block btn-login"
     onClick={[Function]}
   >
     <i
-      className="fa fa-github"
+      className="fa fa-github mr-2"
     />
-     Log in to GitHub
+     Login to GitHub
   </button>
   <a
-    className="btn btn-lg btn-block enterprise"
+    className="btn btn-block btn-login mt-3"
     href="/enterpriselogin"
     onClick={[Function]}
   >
     <i
-      className="fa fa-github"
+      className="fa fa-github mr-2"
     />
-     Enterprise
+     Login to GitHub Enterprise
   </a>
 </div>
 `;

src/js/__tests__/components/login.js

@@ -107,7 +107,7 @@ describe('components/login.js', () => {
 
     expect(wrapper).toBeDefined();
 
-    wrapper.find('.github').simulate('click');
+    wrapper.find('button').simulate('click');
 
     expect(BrowserWindow().loadURL).toHaveBeenCalledTimes(1);
     expect(BrowserWindow().loadURL).toHaveBeenCalledWith(expectedUrl);
@@ -140,7 +140,7 @@ describe('components/login.js', () => {
 
     expect(wrapper).toBeDefined();
 
-    wrapper.find('.github').simulate('click');
+    wrapper.find('button').simulate('click');
 
     expect(BrowserWindow().loadURL).toHaveBeenCalledTimes(1);
     expect(BrowserWindow().loadURL).toHaveBeenCalledWith(expectedUrl);
@@ -168,7 +168,7 @@ describe('components/login.js', () => {
 
     expect(wrapper).toBeDefined();
 
-    wrapper.find('.github').simulate('click');
+    wrapper.find('button').simulate('click');
 
     expect(BrowserWindow().loadURL).toHaveBeenCalledTimes(1);
     expect(props.dispatch).not.toHaveBeenCalled();

src/js/__tests__/components/sidebar.js

@@ -68,8 +68,11 @@ describe('components/Sidebar.js', () => {
     expect(wrapper).toBeDefined();
     expect(wrapper.find('.fa-refresh').length).toBe(1);
     expect(wrapper.find('.fa-cog').length).toBe(1);
-    expect(wrapper.find('.badge-primary').first().text()).toBe(`GitHub ${notifications.size}`);
-    expect(wrapper.find('.badge-primary').last().text()).toBe(`gitify ${notifications.size}`);
+
+    expect(wrapper.find('.badge-account').first().children().first().text()).toBe('GitHub');
+    expect(wrapper.find('.badge-account').first().children().last().text()).toBe(`${notifications.size}`);
+    expect(wrapper.find('.badge-account').last().children().first().text()).toBe('gitify');
+    expect(wrapper.find('.badge-account').last().children().last().text()).toBe(`${notifications.size}`);
   });
 
   it('should clear the interval when unmounting', () => {

src/js/components/enterprise-login.js

@@ -59,14 +59,14 @@ export class EnterpriseLogin extends React.Component {
 
   render() {
     return (
-      <div className="container-fluid main-container settings">
-        <Link
-          to="/login"
-          className="btn btn-lg btn-block enterprise"
-          replace
-        >
-          <i className="fa fa-angle-left" /> Back
-        </Link>
+      <div className="container-fluid main-container login">
+        <div className="d-flex flex-row-reverse">
+          <Link to="/login" className="btn btn-close" replace>
+            <i className="fa fa-close" />
+          </Link>
+        </div>
+
+        <div className="desc">Login to GitHub Enterprise.</div>
 
         <form onSubmit={this.props.handleSubmit(this.handleSubmit)}>
           <Field
@@ -87,7 +87,7 @@ export class EnterpriseLogin extends React.Component {
             label="Client Secret"
             placeholder="ABC123DEF456" />
 
-          <button className="btn btn-md" type="submit">
+          <button className="btn btn-md btn-login mt-2" type="submit">
             <i className="fa fa-github" /> Login to GitHub Enterprise
           </button>
         </form>
@@ -104,10 +104,11 @@ export function mapStateToProps(state) {
 
 export default connect(mapStateToProps, null)(reduxForm({
   form: 'loginEnterprise',
-  initialValues: {
-    hostname: 'github.example.com',
-    clientId: '1231231231',
-    clientSecret: 'ABC123ABCDABC123ABCDABC123ABCDABC123ABCD',
-  },
+  // Use for development
+  // initialValues: {
+  //   hostname: 'github.example.com',
+  //   clientId: '1231231231',
+  //   clientSecret: 'ABC123ABCDABC123ABCDABC123ABCDABC123ABCD',
+  // },
   validate,
 })(EnterpriseLogin));

src/js/components/login.js

@@ -25,16 +25,16 @@ export class LoginPage extends React.Component {
         <img className="img-responsive logo" src="images/gitify-logo-outline-dark.png" />
         <div className="desc">GitHub Notifications<br />in your menu bar.</div>
         <button
-          className="btn btn-lg btn-block github"
+          className="btn btn-block btn-login"
           onClick={() => authGithub(undefined, this.props.dispatch)}
         >
-          <i className="fa fa-github" /> Log in to GitHub
+          <i className="fa fa-github mr-2" /> Login to GitHub
         </button>
 
         <Link
           to="/enterpriselogin"
-          className="btn btn-lg btn-block enterprise">
-          <i className="fa fa-github" /> Enterprise
+          className="btn btn-block btn-login mt-3">
+          <i className="fa fa-github mr-2" /> Login to GitHub Enterprise
         </Link>
       </div>
     );

src/js/components/sidebar.js

@@ -45,8 +45,9 @@ export class Sidebar extends React.Component {
       .get('notifications', List()).size;
 
     return (
-      <div className="badge badge-primary text-uppercase" title={defaultHostname}>
-        GitHub {notificationsCount}
+      <div className="badge-account" title={defaultHostname}>
+        <div className="mr-auto name">GitHub</div>
+        <div>{notificationsCount === 0 ? <span className="octicon octicon-check" /> : notificationsCount}</div>
       </div>
     );
   }
@@ -60,8 +61,13 @@ export class Sidebar extends React.Component {
         .get('notifications', List()).size;
 
       return (
-        <div className="badge badge-primary text-uppercase" key={idx} title={account.get('hostname')}>
-          {accountDomain} {notificationsCount}
+        <div
+          key={idx}
+          title={account.get('hostname')}
+          className="badge-account"
+          >
+          <div className="mr-auto name">{accountDomain}</div>
+          <div>{notificationsCount === 0 ? <span className="octicon octicon-check" /> : notificationsCount}</div>
         </div>
       );
     });
@@ -85,7 +91,7 @@ export class Sidebar extends React.Component {
         )}
 
         {isEitherLoggedIn && (
-          <ul className="nav nav-inline mb-1">
+          <ul className="nav nav-inline mb-2">
             <li className="nav-item text-white">
               <i
                 title="Refresh"
@@ -106,7 +112,11 @@ export class Sidebar extends React.Component {
         {this._renderEnterpriseAccounts()}
 
         <div className="footer">
-          {!!isEitherLoggedIn && <Link to="/enterpriselogin" className="btn btn-block">Add</Link>}
+          {!!isEitherLoggedIn &&
+            <Link
+              to="/enterpriselogin"
+              className="btn btn-block btn-sm btn-outline-secondary btn-add">Add <br />Enterprise</Link>
+          }
 
           {!hasStarred && (
             <button className="btn btn-block btn-sm btn-outline-secondary btn-star" onClick={this.openBrowser}>

src/scss/app.scss

@@ -274,12 +274,41 @@ input {
     }
   }
 
+  .badge-account {
+    display: flex;
+    flex-direction: row;
+    justify-content: end;
+
+    margin: .75rem -.75rem;
+    background-color: $gray-darker;
+    padding: .5rem;
+    text-transform: uppercase;
+    line-height: 1;
+    color: $light-gray;
+    font-size: 75%;
+    font-weight: bold;
+
+    .name {
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .octicon {
+      font-size: 12px;
+    }
+  }
+
   .footer {
     position: absolute;
     right: .75rem;
     bottom: 1rem;
     left: .75rem;
 
+    .btn-add {
+      font-size: 75%;
+    }
+
+    .btn-add,
     .btn-star {
       -webkit-app-region: no-drag;
 
@@ -342,7 +371,6 @@ input {
   padding-top: 20px;
   width: 100%;
   height: 100%;
-  color: $white;
 
   .logo {
     display: block;
@@ -351,18 +379,21 @@ input {
   }
 
   .desc {
-    margin-bottom: 25px;
+    margin: 1rem 0 2rem;
     text-align: center;
     line-height: 22px;
     color: $gray-dark;
     font-size: 20px;
   }
 
-  .login-btn {
-    padding: 5px 0;
+  .btn-close {
+    margin-bottom: 1rem;
+    padding: 0;
+    color: $gray-dark;
+    font-size: 2rem;
   }
 
-  .btn {
+  .btn-login {
     @include button-variant($white, $gray, $gray);
     padding: .55rem 1.25rem;
   }