Merge branch 'hotfix/maint-page' into dev

Author: Parth Shah

src/components/Layout/Layout.jsx

@@ -2,8 +2,9 @@ import _ from 'lodash'
 import React from 'react'
 import TopBarContainer from '../TopBar/TopBarContainer'
 import Footer from '../Footer/Footer'
-import { DOMAIN } from '../../config/constants'
+import { DOMAIN, MAINTENANCE_MODE } from '../../config/constants'
 import Alert from 'react-s-alert'
+import Maintenance from '../Maintenance/Maintenance'
 
 require('./Layout.scss')
 
@@ -23,6 +24,8 @@ const Layout = (props) => {
   }
   if (isLoadingUser) {
     return (<div />)
+  } else if (MAINTENANCE_MODE) {
+    return (<Maintenance />)
   } else {
     return (
       <div>

src/components/Maintenance/Maintenance.jsx

@@ -0,0 +1,17 @@
+import React, {PropTypes} from 'react'
+import './Maintenance.scss'
+
+const Maintenance = () => {
+  return (
+    <section className="content content-error">
+      <div className="container">
+        <div className="page-error">
+          <h3>Welcome to Topcoder Connect</h3>
+          <p>We are temporarily down for maintenance. We will be back shortly, after Coder is done with all the amazing optimizations.</p>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default Maintenance

src/components/Maintenance/Maintenance.scss

@@ -0,0 +1,53 @@
+@import 'tc-includes';
+
+.content.content-error {
+  .container {
+    width: 1220px;
+    background: $tc-gray-neutral-dark;
+  }
+}
+
+.page-error {
+  border-radius:4px;
+  position: relative;
+  padding-top: 55px;
+  text-align: center;
+  min-height: 606px;
+  min-width: 768px;
+  width: 970px;
+  margin: 20px auto 0;
+  background: $tc-white url('../../assets/images/coder-broken.svg') no-repeat 18% 85%;
+  background-size: 307px 300px;
+  a{
+    color: $tc-dark-blue;
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+  h3{
+    color: $tc-gray-70;
+    @include roboto-medium;
+    font-size: 48px;
+    letter-spacing: 0px;
+    padding: 0 168px 25px 168px;
+    line-height: inherit;
+  }
+  p{
+    text-align: left;
+    padding: 0 168px;
+    @include roboto;
+    font-size: $tc-label-lg;
+    color: $tc-gray-70;
+    letter-spacing: 0px;
+    line-height: 23px;
+  }
+  span{
+    position: absolute;
+    left: 49%;
+    top: 45%;
+    @include roboto-medium;
+    font-size: 190px;
+    color: $tc-orange-30;
+    letter-spacing: 0px;
+  }
+}

src/config/constants.js

@@ -215,3 +215,6 @@ export const PROJECT_MAX_COLORS = 5
 export const AUTOCOMPLETE_TRIGGER_LENGTH = 3
 
 export const HEAP_ANALYTICS_APP_ID = process.env.HEAP_ANALYTICS_APP_ID || '4153837120'
+
+// Toggle this flag to enable/disable maintenance mode
+export const MAINTENANCE_MODE = false