Create panel styling progress

src/assets/stylesheets/hub-create.scss

@@ -50,7 +50,7 @@
 }
 
 .create-panel__form__name--expanded {
-  padding-top: 300px;
+  padding-top: 415px;
 }
 
 @media (max-width: 768px) {
@@ -96,3 +96,35 @@
   cursor: pointer;
   bottom: 0;
 }
+
+.create-panel__form__environment {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  width: 700px;
+  height: 100%;
+  box-sizing: border-box;
+  border-radius: 14px;
+  border: 3px solid white;
+  border-radius: 14px;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+@media (max-width: 768px) {
+  .create-panel__form__environment {
+    width: 100%;
+  }
+}
+
+.create-panel__form__environment__picker {
+  width: 100%;
+  height: 390px;
+  border-bottom: 3px solid white;
+  overflow: hidden;
+}
+
+
+.create-panel__form__environment__picker__image {
+  width: 100%;
+}

src/assets/stylesheets/index.scss

@@ -125,7 +125,7 @@ body {
   //  background-color: blue;
   flex: 10;
   text-shadow: 0px 0px 2px rgba(32, 32, 32, 1.0);
-  min-height: 400px;
+  min-height: 700px;
   display: flex;
   flex-direction: column;
 }
@@ -133,14 +133,21 @@ body {
 @media (max-width: 768px) {
   .hero-content {
     padding: 1em 1.5em 1em 1.5em;
+    justify-content: space-around;
   }
 }
 
 .hero-content__container {
-  flex: 10;
   padding-top: 2vw;
   padding-left: 2.1em;
   padding-right: 2.1em;
+  flex: 10;
+}
+
+@media (max-width: 768px) {
+  .hero-content__container {
+    flex: 0 0 auto;
+  }
 }
 
 .hero-content__container__title {
@@ -189,6 +196,7 @@ body {
 @media (max-width: 768px) {
   .hero-content__create {
     padding: 0.5em;
+    align-self: center;
   }
 }
 

src/react-components/hub-create-panel.js

@@ -17,8 +17,8 @@ class HubCreatePanel extends Component {
 
     this.state = {
       name: generateHubName(),
-      environmentBundleIndex: Math.floor(Math.random() * props.environments[0].length),
-      expanded: false
+      environmentIndex: Math.floor(Math.random() * props.environments.length),
+      expanded: true
     };
   }
 
@@ -57,6 +57,9 @@ class HubCreatePanel extends Component {
       </option>
     ));
 
+    const environment = this.props.environments[this.state.environmentIndex];
+    const environmentImageSrcSet = environment.meta.images.find(i => i.type === "preview-thumbnail").srcset;
+
     const formNameClassNames = classNames("create-panel__form__name", {
       "create-panel__form__name--expanded": this.state.expanded
     });
@@ -108,6 +111,13 @@ class HubCreatePanel extends Component {
               pattern={HUB_NAME_PATTERN}
               title={formatMessage({ id: "home.create_name.validation_warning" })}
             />
+            {this.state.expanded && (
+              <div className="create-panel__form__environment">
+                <div className="create-panel__form__environment__picker">
+                  <img className="create-panel__form__environment__picker__image" srcSet={environmentImageSrcSet} />
+                </div>
+              </div>
+            )}
           </div>
         </div>
       </form>