Discharge7443/fleet
1
0
Fork 0
Code Issues Pull Requests Actions 5 Packages Projects Releases Wiki Activity

Flatten login screen styles (#1912)

Browse Source
This commit is contained in:
Caleb Coy
2018-09-19 10:07:37 -04:00
committed by Zachary Wasserman
parent 55ca7bd351
commit 0bb9c409a0
14 changed files with 21 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/images/kolide-logo-text.svg
-1
View File
File diff suppressed because one or more lines are too long
Side by Side

Before

Width:  |  Height:  |  Size: 6.6 KiB

assets/images/kolide-logo-vertical.svg
+3
View File
@@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="160" height="141">
<path d="M77.445 1.744A5.96 5.96 0 0 1 83.197.203l24.394 6.537a5.96 5.96 0 0 1 4.21 4.21l15.996 59.696a5.961 5.961 0 0 1-1.541 5.755l-17.857 17.854a5.957 5.957 0 0 1-5.754 1.542L42.95 79.801a5.951 5.951 0 0 1-4.21-4.21l-6.537-24.394a5.953 5.953 0 0 1 1.542-5.751l43.7-43.702zM81.997 58l12 20h16l-15-24 15-22h-16l-10 16h-4V32h-22v4l8 4v38h14V62l-6-4h8zm-37.998 76.4c4.335 0 6.501-.733 6.501-2.2v-15.4c0-1.467-2.166-2.2-6.501-2.2-4.333.147-6.5.88-6.5 2.2v15.4c0 1.467 2.167 2.2 6.5 2.2zM31 114.6c0-4.4 4.332-6.6 12.999-6.6C52.667 108 57 110.2 57 114.6v19.8c0 4.4-4.333 6.6-13.001 6.6C35.332 141 31 138.8 31 134.4v-19.8zm38.666-4.4v22c0 1.467 2.222 2.2 6.666 2.2h4.446c1.48 0 2.222.733 2.222 2.2v2.2c0 1.468-.742 2.2-2.222 2.2h-4.446C67.444 141 63 138.8 63 134.4v-24.2c0-1.467.742-2.2 2.222-2.2h2.222c1.481 0 2.222.733 2.222 2.2M90.333 141c-1.555 0-2.333-.733-2.333-2.2v-28.6c0-1.467.778-2.2 2.333-2.2h2.334c1.554 0 2.333.733 2.333 2.2v28.6c0 1.467-.779 2.2-2.333 2.2h-2.334zM115 134.052c4.045 0 6.067-.715 6.067-2.147v-14.811c0-1.431-2.022-2.147-6.068-2.147h-4.044c-1.347 0-2.022.716-2.022 2.147v14.811c0 1.432.675 2.147 2.022 2.147H115zM102 110.2c0-1.468.722-2.2 2.167-2.2h10.832c8.668 0 13.001 2.2 13.001 6.6v19.8c0 4.4-4.333 6.6-13.001 6.6h-10.832c-1.445 0-2.167-.734-2.167-2.2v-28.6zm55.833 30.8H147c-8.666 0-12.999-2.2-12.999-6.6v-19.8c0-4.4 4.333-6.6 12.999-6.6h10.834c1.445 0 2.167.733 2.167 2.2v2.2c0 1.467-.722 2.2-2.167 2.2H147c-4.333 0-6.5.732-6.5 2.2v2.2c0 1.467.723 2.2 2.167 2.2H147c1.444 0 2.168.733 2.168 2.2v2.2c0 1.466-.724 2.2-2.168 2.2h-4.333c-1.444 0-2.166.734-2.166 2.2v2.2c0 1.467 2.166 2.2 6.499 2.2h10.834c1.445 0 2.167.734 2.167 2.2v2.2c0 1.467-.722 2.2-2.167 2.2m-130.602-5.445l-10.916-11.092 10.821-10.997.012-.011c.008-.01.011-.022.02-.031.983-1.027.979-2.054-.032-3.082l-1.536-1.54c-1.024-1.042-2.043-1.042-3.052 0l-11.07 11.248a3.826 3.826 0 0 1-2.728 1.149h-.094c-1.443 0-2.164-.733-2.164-2.2v-8.8c0-1.466-.722-2.199-2.165-2.199H2.164C.722 108 0 108.733 0 110.199v28.599c0 1.466.722 2.2 2.164 2.2h2.164c1.443 0 2.165-.734 2.165-2.2v-8.8c0-1.467.721-2.2 2.164-2.2h.144c1.023 0 1.998.408 2.72 1.14 2.1 2.128 6.626 6.72 9.21 9.34l1.911 1.941c1.025 1.041 2.05 1.041 3.075 0l1.515-1.561c1.024-1.042 1.024-2.076 0-3.103" fill="#b8c2e3" fill-rule="evenodd"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

frontend/components/AuthenticationFormWrapper/AuthenticationFormWrapper.jsx
+1 -1
View File
@@ -12,7 +12,7 @@ class AuthenticationFormWrapper extends Component {
return (
<div className={baseClass}>
<img alt="Kolide text logo" src="/assets/images/kolide-logo-text.svg" className={`${baseClass}__logo`} />
<img alt="Kolide Fleet" src="/assets/images/kolide-logo-vertical.svg" className={`${baseClass}__logo`} />
{children}
</div>
);
frontend/components/AuthenticationFormWrapper/_styles.scss
+2 -2
View File
@@ -6,8 +6,8 @@
padding: $base 0;
&__logo {
width: 286px;
height: 69px;
width: 160px;
height: 141px;
margin: 0 auto;
}
frontend/components/LoginRoutes/LoginRoutes.jsx
+2 -2
View File
@@ -1,7 +1,7 @@
import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';
import { hideBackgroundImage, showBackgroundImage } from 'redux/nodes/app/actions';
import { hideBackgroundImage } from 'redux/nodes/app/actions';
import { ssoSettings } from 'redux/nodes/auth/actions';
import LoginPage from 'pages/LoginPage';
import Footer from 'components/Footer';
@@ -22,7 +22,7 @@ export class LoginRoutes extends Component {
dispatch(ssoSettings())
.catch(() => false);
dispatch(showBackgroundImage);
dispatch(hideBackgroundImage);
}
componentWillUnmount () {
frontend/components/LoginRoutes/_styles.scss
+1
View File
@@ -5,4 +5,5 @@
@include justify-content(center);
position: relative;
min-height: calc(100vh - #{$footer-height});
background-color: $white;
}
frontend/components/buttons/Button/_styles.scss
+4 -8
View File
@@ -1,5 +1,5 @@
$gradient-start: #7166d9;
$gradient-end: #c86dd7;
$gradient-start: $brand-dark;
$gradient-end: $brand;
$inverse-hover: #fafbff;
$base-class: 'button';
@@ -37,6 +37,7 @@ $base-class: 'button';
text-decoration: none;
text-transform: uppercase;
letter-spacing: 1px;
border-radius: 0;
font-size: $medium;
font-family: 'Oxygen', $helvetica;
font-weight: $bold;
@@ -126,7 +127,7 @@ $base-class: 'button';
&--gradient {
background-color: transparent;
background-image: linear-gradient(134deg, $gradient-start 0%, $gradient-end 100%);
background-image: linear-gradient(134deg, $gradient-start 0%, $gradient-end 0%);
color: $white;
font-size: $large;
font-weight: $light;
@@ -134,11 +135,6 @@ $base-class: 'button';
padding: $medium;
width: 100%;
height: auto;
box-shadow: inset 0 -3px 0 0 rgba(0, 0, 0, 0.25), 0 -2px 3px 0 rgba(0, 0, 0, 0.15);
&:active {
box-shadow: 0 1px 0 #734893, 0 -2px 0 #d1d9e9;
}
}
&--unstyled {
frontend/components/forms/FormField/_styles.scss
+1 -1
View File
@@ -24,7 +24,7 @@
color: $accent-text;
code {
color: $brand-light;
color: $brand;
background-color: $accent-light;
padding: 2px;
font-family: 'SourceCodePro', $monospace;
frontend/components/forms/LoginForm/LoginForm.jsx
-2
View File
@@ -9,7 +9,6 @@ import InputFieldWithIcon from 'components/forms/fields/InputFieldWithIcon';
import paths from 'router/paths';
import validate from 'components/forms/LoginForm/validate';
import ssoSettingsInterface from 'interfaces/ssoSettings';
import avatar from '../../../../assets/images/avatar.svg';
const baseClass = 'login-form';
const formFields = ['username', 'password'];
@@ -80,7 +79,6 @@ class LoginForm extends Component {
return (
<form onSubmit={handleSubmit} className={loginFormClass}>
<div className={`${baseClass}__container`}>
<img alt="Avatar" src={avatar} />
{baseError && <div className="form__base-error">{baseError}</div>}
<InputFieldWithIcon
{...fields.username}
frontend/components/forms/LoginForm/_styles.scss
+3 -5
View File
@@ -1,7 +1,6 @@
.login-form {
@include transition(all 300ms ease-in);
@include transform(scale(1));
box-shadow: 0 5px 30px 0 rgba($black, 0.3);
margin-top: -260px;
opacity: 1;
width: 460px;
@@ -16,8 +15,8 @@
@include display(flex);
align-items: center;
background-color: $white;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border-top-left-radius: 0;
border-top-right-radius: 0;
box-sizing: border-box;
display: flex;
flex-direction: column;
@@ -28,8 +27,7 @@
}
&__submit-btn {
border-top-left-radius: 0;
border-top-right-radius: 0;
border-radius: 2px;
padding: $base;
width: 460px;
}
frontend/components/forms/LogoutForm/_styles.scss
-3
View File
@@ -1,6 +1,5 @@
.logout-form {
@include align-self(center);
box-shadow: 0 5px 30px 0 rgba($black, 0.3);
width: 460px;
&__container {
@@ -8,8 +7,6 @@
@include align-items(center);
@include flex-direction(column);
background-color: $white;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
box-sizing: border-box;
padding: 30px;
width: 460px;
frontend/components/forms/fields/InputField/_styles.scss
+1 -2
View File
@@ -1,7 +1,6 @@
.input-field {
@include transition(border 150ms ease-in-out, box-shadow 150ms ease-in-out);
line-height: 34px;
border-radius: 2px;
background-color: $white;
border: solid 1px $accent-medium;
font-size: 16px;
@@ -75,7 +74,7 @@
color: $accent-text;
code {
color: $brand-light;
color: $brand;
background-color: $accent-light;
padding: 2px;
font-family: 'SourceCodePro', $monospace;
frontend/components/forms/fields/InputFieldWithIcon/_styles.scss
+3 -3
View File
@@ -20,8 +20,8 @@
}
&__input {
border: 0;
border-bottom: 2px solid $brand-ultralight;
border: 2px;
border-bottom: 2px solid $brand;
padding: 0 30px 8px 0;
font-size: 20px;
text-indent: 1px;
@@ -72,7 +72,7 @@
color: $accent-text;
code {
color: $brand-light;
color: $brand;
background-color: $accent-light;
padding: 2px;
font-family: 'SourceCodePro', $monospace;
frontend/pages/LoginSuccessfulPage/_styles.scss
-1
View File
@@ -1,6 +1,5 @@
.login-success {
background-color: $white;
border-radius: 4px;
margin-top: 20px;
padding-bottom: $pad-base;
padding-left: $pad-base;