From ea1897c6fa8a934c2644e68fdead22f6cb3fde18 Mon Sep 17 00:00:00 2001
From: Susmitha Girumala <susmitha@hashicorp.com>
Date: Thu, 21 May 2020 12:34:44 -0400
Subject: [PATCH] =?UTF-8?q?chore:=20=F0=9F=A4=96=20Add=20styles=20to=20ui/?=
 =?UTF-8?q?core=20for=20projects=20overview=20&=20creation?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/core/app/components/form/project/index.hbs | 32 ++++----
 ui/core/app/routes/orgs/org/projects/new.js   |  1 -
 .../app/routes/orgs/org/projects/project.js   |  1 -
 ui/core/app/styles/app.scss                   | 73 +++++++++++++++++++
 ui/core/app/templates/application.hbs         |  4 +
 .../app/templates/orgs/org/projects/index.hbs | 24 +++---
 .../app/templates/orgs/org/projects/new.hbs   | 23 +++---
 .../components/form/project-test.js           |  1 -
 .../unit/routes/orgs/org/projects/new-test.js |  4 +-
 9 files changed, 123 insertions(+), 40 deletions(-)

diff --git a/ui/core/app/components/form/project/index.hbs b/ui/core/app/components/form/project/index.hbs
index 50c4e9249..e3279fd7d 100644
--- a/ui/core/app/components/form/project/index.hbs
+++ b/ui/core/app/components/form/project/index.hbs
@@ -1,4 +1,5 @@
 <form
+  ...attributes
   novalidate
   method="post"
   {{on "submit" @submit}}>
@@ -25,20 +26,21 @@
     readonly={{false}}
   />
 
-  <Rose::Button
-    @disabled={{@model.cannotSave}}
-    @submit={{true}}
-    @style="primary"
-  >
-    {{t 'actions.save'}}
-  </Rose::Button>
-
-  <Rose::Button
-    @disabled={{@model.cannotSave}}
-    @style="secondary"
-    {{on "click" @cancel}}
-  >
-    {{t 'actions.cancel'}}
-  </Rose::Button>
+  <section class="form-actions">
+    <Rose::Button
+      @disabled={{@model.cannotSave}}
+      @submit={{true}}
+      @style="primary"
+    >
+      {{t 'actions.save'}}
+    </Rose::Button>
 
+    <Rose::Button
+      @disabled={{@model.cannotSave}}
+      @style="secondary"
+      {{on "click" @cancel}}
+    >
+      {{t 'actions.cancel'}}
+    </Rose::Button>
+  </section>
 </form>
diff --git a/ui/core/app/routes/orgs/org/projects/new.js b/ui/core/app/routes/orgs/org/projects/new.js
index 23261b7ee..d8ffa28ae 100644
--- a/ui/core/app/routes/orgs/org/projects/new.js
+++ b/ui/core/app/routes/orgs/org/projects/new.js
@@ -42,5 +42,4 @@ export default class OrgsOrgProjectsNewRoute extends Route {
       throw e;
     }
   }
-
 }
diff --git a/ui/core/app/routes/orgs/org/projects/project.js b/ui/core/app/routes/orgs/org/projects/project.js
index e9cdf887a..5441e1aaa 100644
--- a/ui/core/app/routes/orgs/org/projects/project.js
+++ b/ui/core/app/routes/orgs/org/projects/project.js
@@ -69,5 +69,4 @@ export default class OrgsOrgProjectsProjectRoute extends Route {
       throw e;
     }
   }
-
 }
diff --git a/ui/core/app/styles/app.scss b/ui/core/app/styles/app.scss
index 72d055984..b99d6ced7 100644
--- a/ui/core/app/styles/app.scss
+++ b/ui/core/app/styles/app.scss
@@ -1 +1,74 @@
 @import 'rose';
+
+.projects-overview {
+  margin: 0 10px;
+
+  .projects {
+    display: flex;
+    padding: 20px 0;
+    flex-direction: row;
+    flex-wrap: wrap;
+
+    .project {
+      display: flex;
+      flex-direction: row;
+      flex: 0 0 33.33%;
+      margin-bottom: 10px;
+
+      a {
+        text-decoration: none;
+        text-transform: capitalize;
+        color: #000;
+        cursor: pointer;
+        padding: 20px 30px 20px 20px;
+        border: 1px solid #bac1cc;
+        margin-right: 10px;
+      }
+    }
+  }
+}
+
+.project-new-link {
+  cursor: pointer;
+  text-decoration: none;
+  padding: 10px;
+  color: #ffffff;
+  text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.25);
+  background: #1563ff;
+  border: 1px solid #082766;
+  box-sizing: border-box;
+  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+  border-radius: 2px;
+  position: absolute;
+  right: 10px;
+  top: 70px;
+  display: inline-block;
+}
+
+.project-new {
+  margin: 0 10px;
+  .breadcrumbs,
+  .breadcrumbs a {
+    color: #6f7682;
+    text-decoration: none;
+  }
+
+  .project-new-form {
+    .form-actions {
+      display: flex;
+      flex-direction: row;
+      position: relative;
+      float: right;
+
+      button {
+        margin-right: 10px;
+      }
+    }
+
+    input,
+    textarea {
+      box-sizing: border-box;
+      width: 100%;
+    }
+  }
+}
diff --git a/ui/core/app/templates/application.hbs b/ui/core/app/templates/application.hbs
index 71796d43c..221940351 100644
--- a/ui/core/app/templates/application.hbs
+++ b/ui/core/app/templates/application.hbs
@@ -1,5 +1,9 @@
 <HeadLayout />
 
+<Rose::Header as |header|>
+  <header.brand />
+</Rose::Header>
+
 {{title (app-name)}}
 
 {{outlet}}
diff --git a/ui/core/app/templates/orgs/org/projects/index.hbs b/ui/core/app/templates/orgs/org/projects/index.hbs
index 67fb74a45..dd364442c 100644
--- a/ui/core/app/templates/orgs/org/projects/index.hbs
+++ b/ui/core/app/templates/orgs/org/projects/index.hbs
@@ -1,13 +1,15 @@
-<h2>{{t "resources.projects"}}</h2>
+<div class="projects-overview">
+  <h2>{{t "resources.projects"}}</h2>
 
-<LinkTo @route="orgs.org.projects.new">{{t "titles.new"}}</LinkTo>
+  <LinkTo @route="orgs.org.projects.new" class="project-new-link">{{t "titles.new"}}</LinkTo>
 
-<ul>
-  {{#each @model as |project|}}
-    <li>
-      <LinkTo @route="orgs.org.projects.project" @model={{project}}>
-        {{project.name}}
-      </LinkTo>
-    </li>
-  {{/each}}
-</ul>
+  <ul class="projects">
+    {{#each @model as |project|}}
+      <li class="project">
+        <LinkTo @route="orgs.org.projects.project" @model={{project}}>
+          {{project.name}}
+        </LinkTo>
+      </li>
+    {{/each}}
+  </ul>
+</div>
diff --git a/ui/core/app/templates/orgs/org/projects/new.hbs b/ui/core/app/templates/orgs/org/projects/new.hbs
index d848be793..8a101b818 100644
--- a/ui/core/app/templates/orgs/org/projects/new.hbs
+++ b/ui/core/app/templates/orgs/org/projects/new.hbs
@@ -1,11 +1,16 @@
-<LinkTo @route='orgs.org.projects'>{{t "resources.projects"}}</LinkTo>
->
-<LinkTo @route='orgs.org.projects.new'>{{t "titles.new"}}</LinkTo>
+<div class="project-new">
+  <div class="breadcrumbs">
+    <LinkTo @route='orgs.org.projects'>{{t "resources.projects"}}</LinkTo>
+    >
+    <LinkTo @route='orgs.org.projects.new'>{{t "titles.new"}}</LinkTo>
+  </div>
 
-<h2>{{t "titles.new"}}</h2>
+  <h2>{{t "titles.new"}}</h2>
 
-<Form::Project
-  @model={{@model}}
-  @submit={{route-action "save" @model}}
-  @cancel={{route-action "cancel" @model}}
-/>
+  <Form::Project
+    @model={{@model}}
+    @submit={{route-action "save" @model}}
+    @cancel={{route-action "cancel" @model}}
+    class="project-new-form"
+  />
+</div>
diff --git a/ui/core/tests/integration/components/form/project-test.js b/ui/core/tests/integration/components/form/project-test.js
index 9c4073d47..d4cb276ed 100644
--- a/ui/core/tests/integration/components/form/project-test.js
+++ b/ui/core/tests/integration/components/form/project-test.js
@@ -20,5 +20,4 @@ module('Integration | Component | form/project', function (hooks) {
 
     assert.ok(find('form'));
   });
-
 });
diff --git a/ui/core/tests/unit/routes/orgs/org/projects/new-test.js b/ui/core/tests/unit/routes/orgs/org/projects/new-test.js
index fe57f0d9e..f084da7bf 100644
--- a/ui/core/tests/unit/routes/orgs/org/projects/new-test.js
+++ b/ui/core/tests/unit/routes/orgs/org/projects/new-test.js
@@ -1,10 +1,10 @@
 import { module, test } from 'qunit';
 import { setupTest } from 'ember-qunit';
 
-module('Unit | Route | orgs/org/projects/new', function(hooks) {
+module('Unit | Route | orgs/org/projects/new', function (hooks) {
   setupTest(hooks);
 
-  test('it exists', function(assert) {
+  test('it exists', function (assert) {
     let route = this.owner.lookup('route:orgs/org/projects/new');
     assert.ok(route);
   });