From c30c6c2b362d81e3c694f5e5bd533b0ffdd6e0c7 Mon Sep 17 00:00:00 2001
From: Sebastian Kippe <sebastian@kip.pe>
Date: Thu, 23 May 2019 12:18:02 +0200
Subject: [PATCH] Refactor layout and button styles

* Add single-column layout for forms
* Add optional nav/buttons to section headers
---
 app/components/add-contribution/template.hbs |  1 -
 app/styles/_buttons.scss                     | 14 +++++-
 app/styles/_forms.scss                       |  4 +-
 app/styles/_layout.scss                      | 45 ++++++++++++++++++--
 app/templates/contributions/new.hbs          | 19 +++++----
 app/templates/index.hbs                      | 14 +++---
 6 files changed, 74 insertions(+), 23 deletions(-)

diff --git a/app/components/add-contribution/template.hbs b/app/components/add-contribution/template.hbs
index b5e7d20..831c498 100644
--- a/app/components/add-contribution/template.hbs
+++ b/app/components/add-contribution/template.hbs
@@ -52,7 +52,6 @@
     {{input type="submit"
             disabled=inProgress
             value=(if inProgress "Processing" "Save")}}
-    {{#link-to "index"}}Cancel{{/link-to}}
   </p>
 </form>
 
diff --git a/app/styles/_buttons.scss b/app/styles/_buttons.scss
index 8a6956a..41780e2 100644
--- a/app/styles/_buttons.scss
+++ b/app/styles/_buttons.scss
@@ -1,4 +1,4 @@
-button, input[type=submit] {
+button, input[type=submit], .button {
   display: inline-block;
   padding: 0.6rem 2rem;
   background-color: rgba(22, 21, 40, 0.6);
@@ -6,6 +6,7 @@ button, input[type=submit] {
   border-radius: 3px;
   color: $primary-color;
   font-weight: 500;
+  text-decoration: none;
   text-transform: uppercase;
   cursor: pointer;
   letter-spacing: 0.1em;
@@ -22,9 +23,20 @@ button, input[type=submit] {
   &.danger {
     color: $red;
     background-color: rgba(40, 21, 21, 0.6);
+    border-color: rgba(40, 21, 21, 1);
 
     &:hover {
       background-color: rgba(40, 21, 21, 0.8);
     }
   }
+
+  &.green {
+    color: $green;
+    background-color: rgba(21, 40, 21, 0.6);
+    border-color: rgba(21, 40, 21, 1);
+
+    &:hover {
+      background-color: rgba(21, 40, 21, 0.8);
+    }
+  }
 }
diff --git a/app/styles/_forms.scss b/app/styles/_forms.scss
index 5732e80..6a8debd 100644
--- a/app/styles/_forms.scss
+++ b/app/styles/_forms.scss
@@ -5,10 +5,10 @@ section#add-proposal {
   form {
 
     p {
-      margin-bottom: 1rem;
+      margin-bottom: 1.5rem;
 
       &.actions {
-        padding-top: 1rem;
+        padding-top: 1.5rem;
         text-align: center;
         a {
           color: $primary-color;
diff --git a/app/styles/_layout.scss b/app/styles/_layout.scss
index 2655bdc..98552e1 100644
--- a/app/styles/_layout.scss
+++ b/app/styles/_layout.scss
@@ -13,6 +13,21 @@ main {
       "stats"
       "contributions";
   }
+
+  &.center-column {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    section {
+      width: 600px;
+      max-width: 100%;
+
+      header {
+        text-align: center;
+      }
+    }
+  }
 }
 
 @media (min-width: 550px) {
@@ -39,11 +54,35 @@ main section {
   }
 
   header {
-    padding-bottom: 3rem;
-    text-align: center;
+    margin-bottom: 3rem;
+
+    &.with-nav {
+      display: grid;
+      grid-template-columns: auto 5rem;
+      grid-template-areas:
+        "title" "actions";
+
+      @include media-min(medium) {
+        grid-template-columns: auto 5rem 1.2rem;
+        grid-template-areas:
+          "title" "actions" "padding";
+      }
+    }
+
+    h2 {
+      display: inline-block;
+      // padding-left: 1.2rem;
+    }
+
+    nav {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: flex-end;
+    }
 
     @include media-max(small) {
-      padding-bottom: 2rem;
+      margin-bottom: 2rem;
     }
   }
 }
diff --git a/app/templates/contributions/new.hbs b/app/templates/contributions/new.hbs
index da594a1..c7b5ffb 100644
--- a/app/templates/contributions/new.hbs
+++ b/app/templates/contributions/new.hbs
@@ -1,10 +1,13 @@
-<section id="add-contribution">
-  <header>
-    <h2>Submit a contribution</h2>
-  </header>
+<main class="center-column">
 
-  <div class="content">
-    {{add-contribution contributors=sortedContributors save=(action "save")}}
-  </div>
-</section>
+  <section id="add-contribution">
+    <header>
+      <h2>Submit a contribution</h2>
+    </header>
 
+    <div class="content">
+      {{add-contribution contributors=sortedContributors save=(action "save")}}
+    </div>
+  </section>
+
+</main>
diff --git a/app/templates/index.hbs b/app/templates/index.hbs
index 726e927..4f8c82b 100644
--- a/app/templates/index.hbs
+++ b/app/templates/index.hbs
@@ -33,8 +33,13 @@
   <div id="contributions">
     {{#if contributionsUnconfirmed}}
       <section id="contributions-unconfirmed">
-        <header>
+        <header class="with-nav">
           <h2>Latest Contributions</h2>
+          {{#if kredits.hasAccounts}}
+            <nav>
+              {{link-to "add" "contributions.new" title="Submit a contribution" class="button small green"}}
+            </nav>
+          {{/if}}
         </header>
         <div class="content">
           {{!-- TODO: We need a better naming for kredits.hasAccounts --}}
@@ -53,13 +58,6 @@
         {{contribution-list contributions=contributionsConfirmedSorted
                             vetoContribution=(action "vetoContribution")}}
       </div>
-
-      {{!-- TODO: We need a better naming --}}
-      {{#if kredits.hasAccounts}}
-        <p class="actions">
-          {{#link-to "proposals.new"}}Create new proposal{{/link-to}}
-        </p>
-      {{/if}}
     </section>
   </div>