diff --git a/ui/assets/images/auth-bg.svg b/ui/assets/images/auth-bg.svg new file mode 100644 index 0000000000..52b77f17ae --- /dev/null +++ b/ui/assets/images/auth-bg.svg @@ -0,0 +1,2213 @@ + + + + + + + + + + diff --git a/ui/assets/images/auth-logo.svg b/ui/assets/images/auth-logo.svg new file mode 100644 index 0000000000..f2ac1bfb5c --- /dev/null +++ b/ui/assets/images/auth-logo.svg @@ -0,0 +1,21 @@ + + + + + + + + + + diff --git a/ui/src/auth/Login.js b/ui/src/auth/Login.js index aaa0b8e857..8ce2f72f52 100644 --- a/ui/src/auth/Login.js +++ b/ui/src/auth/Login.js @@ -4,7 +4,16 @@ import {withRouter} from 'react-router'; const Login = React.createClass({ render() { return ( - Click me to log in +
+
+
+

Chronograf

+

v1.1 / Time-Series Data Visualization

+ Login with GitHub +
+

Made by InfluxData

+
+
); }, }); diff --git a/ui/src/style/enterprise_style/_enterprise-custom.scss b/ui/src/style/enterprise_style/_enterprise-custom.scss index fb17822f1c..52ee45a8c8 100644 --- a/ui/src/style/enterprise_style/_enterprise-custom.scss +++ b/ui/src/style/enterprise_style/_enterprise-custom.scss @@ -10,7 +10,8 @@ body { position: absolute; align-items: stretch; /* Ensures sidebar and page-wrapper go full-height */ - overflow: auto; /* plz halp alex I need this 4 the signup pages */ + overflow: hidden; + background-color: $g0-obsidian; } /* @@ -19,6 +20,11 @@ body { */ body > #react-root { width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + .container { margin-top: 60px; } diff --git a/ui/src/style/enterprise_style/application.scss b/ui/src/style/enterprise_style/application.scss index f90a83d8fb..e54de474c4 100644 --- a/ui/src/style/enterprise_style/application.scss +++ b/ui/src/style/enterprise_style/application.scss @@ -13,6 +13,7 @@ @import 'modals'; @import 'enterprise-custom'; @import 'dygraph-override'; +@import 'auth-page'; @import 'hosts'; @import 'kapacitor'; @import 'influx-tooltips'; diff --git a/ui/src/style/enterprise_style/auth-page.scss b/ui/src/style/enterprise_style/auth-page.scss new file mode 100644 index 0000000000..b6c78c6680 --- /dev/null +++ b/ui/src/style/enterprise_style/auth-page.scss @@ -0,0 +1,83 @@ +/* + Styles for Authorization Page + ---------------------------------------------- +*/ +.auth-page { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + overflow: auto; + @include custom-scrollbar($g3-castle, $c-pool); + @include gradient-v($g3-castle, $g0-obsidian); + padding: $sidebar-width; +} +.auth-image { + background-image: url(assets/images/auth-bg.svg); + background-size: cover; + background-position: center center; + background-repeat: no-repeat; + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; + z-index: 2; +} +.auth-box { + z-index: 90; + position: absolute; + top: 43%; + left: 50%; + transform: translate(-50%,-50%); + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + + h1 { + color: $g20-white; + font-weight: 200; + font-size: 52px; + letter-spacing: -2px; + } + p { + color: $g11-sidewalk; + } + + .btn { + margin-top: ($sidebar-width / 2); + margin-bottom: $sidebar-width; + + > .icon { + font-size: 20px; + margin-right: 8px; + } + } +} +.auth-logo { + background-image: url(assets/images/auth-logo.svg); + background-size: 100% 100%; + background-position: center center; + background-repeat: no-repeat; + width: 100px; + height: 100px; +} +.auth-credits { + z-index: 90; + position: absolute; + bottom: ($sidebar-width / 4); + left: 50%; + transform: translateX(-50%); + font-size: 12px; + color: $g11-sidewalk; + + .icon { + display: inline-block; + vertical-align: middle; + position: relative; + top: -1px; + margin-right: 1px; + } +} \ No newline at end of file