diff --git a/assets/images/404.svg b/assets/images/404.svg new file mode 100644 index 0000000000..5b6531d19a --- /dev/null +++ b/assets/images/404.svg @@ -0,0 +1 @@ +gandalf-gopher \ No newline at end of file diff --git a/assets/images/500.svg b/assets/images/500.svg new file mode 100644 index 0000000000..a44987e7f6 --- /dev/null +++ b/assets/images/500.svg @@ -0,0 +1 @@ +500-gopher \ No newline at end of file diff --git a/frontend/components/FlashMessage/_styles.scss b/frontend/components/FlashMessage/_styles.scss index 6f854969b8..f16a6b6366 100644 --- a/frontend/components/FlashMessage/_styles.scss +++ b/frontend/components/FlashMessage/_styles.scss @@ -1,7 +1,11 @@ -.wrapper > div.flash-message { - height: 50px; - min-height: 50px; - max-height: 50px; +.wrapper { + > div { + &.flash-message { + height: 50px; + min-height: 50px; + max-height: 50px; + } + } } .flash-message { diff --git a/frontend/components/packs/EditPackFormWrapper/_styles.scss b/frontend/components/packs/EditPackFormWrapper/_styles.scss index 3aab71566b..f3177f73ed 100644 --- a/frontend/components/packs/EditPackFormWrapper/_styles.scss +++ b/frontend/components/packs/EditPackFormWrapper/_styles.scss @@ -19,7 +19,7 @@ &__description { font-size: 15px; font-weight: $normal; - line-height: 2.0; + line-height: 2; color: $text-medium; max-width: 800px; } diff --git a/frontend/components/side_panels/SiteNavHeader/_styles.scss b/frontend/components/side_panels/SiteNavHeader/_styles.scss index 723463fcf1..402710ec5a 100644 --- a/frontend/components/side_panels/SiteNavHeader/_styles.scss +++ b/frontend/components/side_panels/SiteNavHeader/_styles.scss @@ -177,14 +177,18 @@ &:first-child { border-bottom: solid 1px rgba(73, 143, 226, 0.4); - a:hover { - background-color: $link; + a { + &:hover { + background-color: $link; + } } } &:last-child { - a:hover { - background-color: #3c3655; + a { + &:hover { + background-color: #3c3655; + } } } } diff --git a/frontend/pages/Admin/UserManagementPage/_styles.scss b/frontend/pages/Admin/UserManagementPage/_styles.scss index cde95b73cb..f128e875c5 100644 --- a/frontend/pages/Admin/UserManagementPage/_styles.scss +++ b/frontend/pages/Admin/UserManagementPage/_styles.scss @@ -1,5 +1,4 @@ .user-management { - min-height: 100px; padding: 30px 30px 30px 0; min-height: 90vh; diff --git a/frontend/pages/Kolide404/Kolide404.jsx b/frontend/pages/Kolide404/Kolide404.jsx new file mode 100644 index 0000000000..b546e86a68 --- /dev/null +++ b/frontend/pages/Kolide404/Kolide404.jsx @@ -0,0 +1,33 @@ +import React, { Component } from 'react'; + +import kolideLogo from '../../../assets/images/kolide-logo-condensed.svg'; +import gopher from '../../../assets/images/404.svg'; + +const baseClass = 'kolide-404'; + +class Kolide404 extends Component { + + render () { + return ( +
+
+ + Kolide + +
+
+

I have no memory of this place...

+

Error 404

+

You seem to have lost your way.

+

Might we recommend going back on your browser or visiting the home page?

+
+ +

Need immediate assistance?
Contact support@kolide.co

+
+
+
+ ); + } +} + +export default Kolide404; diff --git a/frontend/pages/Kolide404/_styles.scss b/frontend/pages/Kolide404/_styles.scss new file mode 100644 index 0000000000..7f6ae911f0 --- /dev/null +++ b/frontend/pages/Kolide404/_styles.scss @@ -0,0 +1,53 @@ +.kolide-404 { + p { + color: #666; + } + + a { + color: #4a90e2; + text-decoration: none; + + &:hover { + text-decoration: underline; + } + } + + .primary-header { + height: 90px; + width: 100%; + box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.06); + + &__logo { + height: 48px; + width: 174px; + position: absolute; + top: 25px; + left: 40px; + } + } + + .gopher-container { + margin: -20px auto 0; + max-width: 340px; + + img { + height: 470px; + } + } + + main { + text-align: center; + + > h1 { + font-size: 56px; + max-width: 479px; + margin: 34px auto 0; + } + + > h2 { + font-size: 36px; + margin: 13px 0 30px; + } + } + +} diff --git a/frontend/pages/Kolide404/index.js b/frontend/pages/Kolide404/index.js new file mode 100644 index 0000000000..9b7a1f8af9 --- /dev/null +++ b/frontend/pages/Kolide404/index.js @@ -0,0 +1 @@ +export default from './Kolide404'; diff --git a/frontend/pages/Kolide500/Kolide500.jsx b/frontend/pages/Kolide500/Kolide500.jsx new file mode 100644 index 0000000000..5362d0f420 --- /dev/null +++ b/frontend/pages/Kolide500/Kolide500.jsx @@ -0,0 +1,33 @@ +import React, { Component } from 'react'; + +import kolideLogo from '../../../assets/images/kolide-logo-condensed.svg'; +import gopher from '../../../assets/images/500.svg'; + +const baseClass = 'kolide-500'; + +class Kolide404 extends Component { + + render () { + return ( +
+
+ + Kolide + +
+
+

Uh oh!

+

Error 500

+

Something went wrong on our end.

+

We have alerted the engineers and they are working on a solution.

+
+ +

Need immediate assistance? Contact support@kolide.co

+
+
+
+ ); + } +} + +export default Kolide404; diff --git a/frontend/pages/Kolide500/_styles.scss b/frontend/pages/Kolide500/_styles.scss new file mode 100644 index 0000000000..fdcaadbe3a --- /dev/null +++ b/frontend/pages/Kolide500/_styles.scss @@ -0,0 +1,53 @@ +.kolide-500 { + p { + color: #666; + } + + a { + color: #4a90e2; + text-decoration: none; + + &:hover { + text-decoration: underline; + } + } + + .primary-header { + height: 90px; + width: 100%; + box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.06); + + &__logo { + height: 48px; + width: 174px; + position: absolute; + top: 25px; + left: 40px; + } + } + + .gopher-container { + margin: 40px auto 0; + max-width: 800px; + text-align: center; + + img { + height: 340px; + } + } + + main { + text-align: center; + + > h1 { + font-size: 56px; + min-width: 479px; + margin: 34px auto 0; + } + + > h2 { + font-size: 36px; + margin: 13px 0 30px; + } + } +} diff --git a/frontend/pages/Kolide500/index.js b/frontend/pages/Kolide500/index.js new file mode 100644 index 0000000000..3479c8169b --- /dev/null +++ b/frontend/pages/Kolide500/index.js @@ -0,0 +1 @@ +export default from './Kolide500'; diff --git a/frontend/router/index.jsx b/frontend/router/index.jsx index e027cab06e..3756771268 100644 --- a/frontend/router/index.jsx +++ b/frontend/router/index.jsx @@ -1,5 +1,5 @@ import React from 'react'; -import { browserHistory, IndexRedirect, IndexRoute, Route, Router } from 'react-router'; +import { browserHistory, IndexRedirect, IndexRoute, Redirect, Route, Router } from 'react-router'; import { Provider } from 'react-redux'; import { syncHistoryWithStore } from 'react-router-redux'; @@ -21,6 +21,8 @@ import PackComposerPage from 'pages/packs/PackComposerPage'; import QueryPage from 'pages/queries/QueryPage'; import QueryPageWrapper from 'components/queries/QueryPageWrapper'; import RegistrationPage from 'pages/RegistrationPage'; +import Kolide404 from 'pages/Kolide404'; +import Kolide500 from 'pages/Kolide500'; import store from 'redux/store'; import UserSettingsPage from 'pages/UserSettingsPage'; @@ -68,6 +70,9 @@ const routes = ( + + + );