topcoder connect ui responsive updates

Author: suppermancool

src/assets/icons/coder-welcome.svg

@@ -13,14 +13,24 @@
     position: relative;
     padding-top: 55px;
     text-align: center;
-    min-height: 606px;
-    min-width: 768px;
-    width: 970px;
+    min-height: 706px;
+    @media screen and (max-width: $screen-sm - 1px) {
+      min-height: 780px;
+    }
     margin: 20px auto 0;
     background: #ffffff;
     .icon-coder-broken {
       margin: 6% 20%;
       float: left;
+      @media screen and (max-width: $screen-md - 1px) {
+        margin: 6% 10%;
+      }
+      @media screen and (max-width: $screen-sm - 1px) {
+        margin: 6% 5%;
+      }
+      @media screen and (max-width: 321px) {
+        margin: 6% 1%;
+      }
     }
     background-size: 307px 300px;
     a{
@@ -36,24 +46,52 @@
       letter-spacing: 0px;
       padding: 0 168px 25px 168px;
       line-height: inherit;
+      @media screen and (max-width: 1000px - 1px) {
+        padding: 0 100px 25px 100px;
+      }
+      @media screen and (max-width: $screen-md - 1px) {
+        padding: 0 28px 25px 28px;
+      }
+      @media screen and (max-width: $screen-sm - 1px) {
+        font-size: 30px;
+      }
     }
     p{
       text-align: left;
+      min-height: 120px;
       padding: 0 168px;
       @include roboto;
       font-size: $tc-label-lg;
       color: $tc-gray-70;
       letter-spacing: 0px;
       line-height: 23px;
+      @media screen and (max-width: 1000px - 1px) {
+        padding: 0 100px;
+      }
+      @media screen and (max-width: $screen-md - 1px) {
+        padding: 0 28px;
+      }
     }
     span{
       position: absolute;
       left: 49%;
-      top: 45%;
+      bottom: 25%;
       @include roboto-medium;
       font-size: 190px;
       color: $tc-orange-30;
       letter-spacing: 0px;
+      @media screen and (max-width: $screen-md - 1px) {
+        font-size: 150px;
+        bottom: 30%;
+      }
+      @media screen and (max-width: $screen-sm - 1px) {
+        font-size: 100px;
+        bottom: 45%;
+      }
+      @media screen and (max-width: 400px) {
+        font-size: 65px;
+        left: 63%;
+      }
     }
   }
 }

src/components/CoderBot/CoderBot.scss

@@ -5,7 +5,7 @@ const Maintenance = () => {
   return (
     <section className="content content-error">
       <div className="container">
-        <div className="page-error">
+        <div className="page-error-maintenance">
           <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>

src/components/Maintenance/Maintenance.jsx

@@ -8,15 +8,14 @@
     }
   }
 
-  .page-error {
+  .page-error-maintenance {
     border-radius:4px;
     position: relative;
     padding-top: 55px;
     text-align: center;
     min-height: 606px;
-    min-width: 768px;
-    width: 970px;
     margin: 20px auto 0;
+    background: #ffffff;
     /* background: $tc-white url('../../assets/icons/coder-broken.svg') no-repeat 18% 85%; */
     background-size: 307px 300px;
     a{
@@ -30,17 +29,25 @@
       @include roboto-medium;
       font-size: 48px;
       letter-spacing: 0px;
-      padding: 0 168px 25px 168px;
+      padding: 0 28px 25px 28px;
       line-height: inherit;
+      @media screen and (max-width: $screen-sm - 1px) {
+        font-size: 30px;
+      }
     }
     p{
-      text-align: left;
+      text-align: center;
       padding: 0 168px;
       @include roboto;
       font-size: $tc-label-lg;
       color: $tc-gray-70;
       letter-spacing: 0px;
       line-height: 23px;
+      padding: 0 28px 25px 28px;
+
+      @media screen and (max-width: $screen-md - 1px) {
+        text-align: justify;
+      }
     }
     span{
       position: absolute;

src/components/Maintenance/Maintenance.scss

@@ -47,7 +47,7 @@ class StatusFiltersMobile extends React.Component {
     return (
       <div>
         <div styleName={cn('handle', { 'is-open': isOpen })} onClick={this.toggle}>
-          <span>{currentSatusLabel}</span>
+          <div>{currentSatusLabel}</div>
           <IconCarretDown />
         </div>
         {isOpen && <ul styleName="list">

src/components/StatusFilters/StatusFiltersMobile.jsx

@@ -8,11 +8,11 @@
   display: flex;
   height: 10 * $base-unit;
   font-size: 15px;
-  justify-content: space-between;
   padding: 0 4 * $base-unit;
 
   > svg {
     width: 12px;
+    margin-left: 10px;
   }
 
   &.is-open > svg {

src/components/StatusFilters/StatusFiltersMobile.scss

@@ -87,6 +87,16 @@ export default class ProjectListNavHeader extends Component {
               )
             )}
           </MediaQuery>
+          <div className="primary-filter">
+            <div className="tc-switch clearfix">
+              <SwitchButton
+                onChange={ this.handleMyProjectsFilter }
+                label="My projects"
+                name="my-projects-only"
+                checked={this.props.criteria.memberOnly}
+              />
+            </div>
+          </div>
         </div>
         <div className="right-wrapper">
 

src/projects/list/components/Projects/ProjectListNavHeader.jsx

@@ -21,6 +21,15 @@
 
     .left-wrapper {
       flex: 1 1 auto;
+      .primary-filter {
+        position: absolute;
+        top: 60px;
+        right: 0;
+
+        @media screen and (min-width: $screen-sm) {
+          display: none;
+        }
+      }
     }
 
     .right-wrapper {
@@ -59,10 +68,6 @@
     .primary-filter {
       margin-right: 20px;
 
-      @media screen and (max-width: $screen-md - 1px) {
-        display: none;
-      }
-
       .tc-switch .label {
         white-space: nowrap;
       }

src/projects/list/components/Projects/ProjectListNavHeader.scss

@@ -1,9 +1,11 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import {Link} from 'react-router-dom'
 import './Walkthrough.scss'
 import IconShadow from '../../../../assets/icons/ground-shadow.svg'
 import IconRobot from '../../../../assets/icons/coder-welcome.svg'
 import IconTextImg from '../../../../assets/icons/pointer-new-project.svg'
+import BoldAdd from '../../../../assets/icons/ui-16px-1_bold-add.svg'
 
 
 
@@ -13,13 +15,22 @@ const Walkthrough = ({currentUser}) => (
     <IconTextImg className="text-img"/>
 
     <div className="bubble">
-      <IconRobot className="robot"/>
-      <IconShadow className="shadow"/>
+      <IconRobot className="robot robotleft"/>
       <div>
         <span className="arrow"/>
         <h3>010010010010100101001000100100101 <br/>Bzzt …I mean… Hello, {currentUser.firstName}!</h3>
         <p>Welcome to Connect! I’m Coder the Robot. I see you have no projects yet. To get you started, press the “New Project” icon and let’s build something.</p>
+        <Link to="/new-project">
+          <div className="new-project-button">
+            <div className="new-project-icon">
+              <BoldAdd className="icon-bold-add"/>
+            </div>
+            <div className="title">Create a new project</div>
+          </div>
+        </Link>
       </div>
+      <IconRobot className="robot"/>
+      <IconShadow className="shadow"/>
     </div>
   </div>
 )