From 445d789344e14c3a327548fc0b68adb431c86cf2 Mon Sep 17 00:00:00 2001
From: Carlos Alcaide <me@calcaide.com>
Date: Wed, 16 Jun 2021 13:42:57 -0700
Subject: [PATCH] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20Update=20PR=20with=20sug?=
 =?UTF-8?q?gestions?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Apply forgoten padding and alignment styles for header.

BREAKING CHANGE: 🧨 - Refactor to use named block withint the card component.
---
 ui/desktop/app/components/card/index.hbs | 24 +++++++++++-------------
 ui/desktop/app/styles/app.scss           |  8 ++++++++
 2 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/ui/desktop/app/components/card/index.hbs b/ui/desktop/app/components/card/index.hbs
index d0d766aeb..07debfc77 100644
--- a/ui/desktop/app/components/card/index.hbs
+++ b/ui/desktop/app/components/card/index.hbs
@@ -1,17 +1,15 @@
 <section class='card'>
   <header class='card-header'>
-    <div>
-      {{#if @icon}}
-        <Rose::Icon @name={{@icon}} @size='medium' />
-      {{/if}}
-      {{@heading}}
-    </div>
-    {{yield (hash header=(component 'rose/anonymous'))}}
+    {{#if @heading}}
+      <div>
+        {{#if @icon}}
+          <Rose::Icon @name={{@icon}} @size='medium' />
+        {{/if}}
+        {{@heading}}
+      </div>
+    {{/if}}
+    {{yield to='header'}}
   </header>
-  {{yield
-    (hash
-      body=(component 'rose/anonymous' tagName='div' class='card-body')
-      footer=(component 'rose/anonymous' tagName='footer' class='card-footer')
-    )
-  }}
+  <div class='card-body'>{{yield to='body'}}</div>
+  <footer class='card-footer'>{{yield to='footer'}}</footer>
 </section>
\ No newline at end of file
diff --git a/ui/desktop/app/styles/app.scss b/ui/desktop/app/styles/app.scss
index de383ddd5..b829c2938 100644
--- a/ui/desktop/app/styles/app.scss
+++ b/ui/desktop/app/styles/app.scss
@@ -371,6 +371,14 @@
   .card-header {
     border-bottom: sizing.rems(xxxxs) solid var(--ui-gray-subtler-3);
     display: flex;
+    justify-content: flex-start;
+    padding: sizing.rems(s);
+
+    div {
+      display: flex;
+      flex-shrink: 1;
+      width: 100%;
+    }
   }
 
   .card-body {