From a6c3bbdd0310cdcb417f8b7124b03a8754cd15fc Mon Sep 17 00:00:00 2001
From: Randall Morey <randall@randallmorey.com>
Date: Fri, 29 May 2020 16:53:29 -0400
Subject: [PATCH] =?UTF-8?q?chore:=20=F0=9F=A4=96=20improve=20sidebar=20app?=
 =?UTF-8?q?earance?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../rose/addon/styles/rose/components/layout/_index.scss | 4 +++-
 ui/core/app/styles/app.scss                              | 9 ++++++---
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/addons/rose/addon/styles/rose/components/layout/_index.scss b/addons/rose/addon/styles/rose/components/layout/_index.scss
index 958cc197d..909cdbc83 100644
--- a/addons/rose/addon/styles/rose/components/layout/_index.scss
+++ b/addons/rose/addon/styles/rose/components/layout/_index.scss
@@ -1,3 +1,4 @@
+@use '../../variables/sizing';
 @use '../../variables/media';
 
 .rose-layout-page {
@@ -6,7 +7,7 @@
     'header header header header'
     'sidebar main main main';
   // Define static grid column for sidebar
-  grid-template-columns: 12rem auto 1fr;
+  grid-template-columns: 16rem auto 1fr;
   grid-template-rows: auto 1fr;
   height: 100vh;
 }
@@ -21,6 +22,7 @@
 
 .rose-layout-sidebar {
   grid-area: sidebar;
+  border-right: sizing.rems(xxxxs) solid var(--ui-border-subtler-1);
 }
 
 @media (max-width: media.width(small)) {
diff --git a/ui/core/app/styles/app.scss b/ui/core/app/styles/app.scss
index d7fe5dd9a..a771edd48 100644
--- a/ui/core/app/styles/app.scss
+++ b/ui/core/app/styles/app.scss
@@ -1,8 +1,10 @@
+@use 'rose/variables/sizing';
+
 @import 'rose';
 
 .projects-overview {
-  margin: 0 10px;
-
+  margin: sizing.rems(l);
+  
   .projects {
     display: flex;
     padding: 20px 0;
@@ -19,7 +21,8 @@
 
 .project-overview,
 .project-new {
-  margin: 0 10px;
+  margin: sizing.rems(l);
+
   .breadcrumbs,
   .breadcrumbs a {
     color: #6f7682;