From 7852d3ea5c86a6e8efea2e2cebb0db54f6cf8cdd Mon Sep 17 00:00:00 2001
From: Susmitha Girumala <susmitha@hashicorp.com>
Date: Thu, 28 May 2020 19:48:03 -0400
Subject: [PATCH] =?UTF-8?q?refactor:=20=F0=9F=92=A1=20Update=20dimensions?=
 =?UTF-8?q?=20for=20card=20link=20rose=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../styles/rose/components/card/_link.scss    | 22 ++++++++++++++++---
 .../templates/components/rose/card/link.hbs   |  1 -
 ui/core/app/styles/app.scss                   |  2 +-
 3 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/addons/rose/addon/styles/rose/components/card/_link.scss b/addons/rose/addon/styles/rose/components/card/_link.scss
index 7aca920b9..807bdb587 100644
--- a/addons/rose/addon/styles/rose/components/card/_link.scss
+++ b/addons/rose/addon/styles/rose/components/card/_link.scss
@@ -6,13 +6,21 @@
   border: 1px solid var(--ui-gray-subtler-2);
   border-radius: sizing.rems(xxxs);
   color: var(--ui-gray);
-  padding: sizing.rems(s);
-  display: inline-grid;
+  display: inline-flex;
+  flex-direction: column;
 
   a {
     text-decoration: none;
     margin: 0;
     padding: 0;
+    display: flex;
+    justify-content: space-between;
+    flex-direction: column;
+    height: 100%;
+    padding: sizing.rems(s);
+    // TODO: Figure out better method of defining card dimensions
+    min-height: sizing.rems(m) * 6; //6 rems
+    max-width: sizing.rems(m) * 12; //12 rems
 
     &:focus {
       outline: none;
@@ -21,8 +29,12 @@
 
   &:hover {
     border-color: var(--ui-gray);
+    background-color: var(--ui-gray-subtler-5);
   }
 
+  &:active {
+    background-color: var(--ui-gray-subtler-4);
+  }
   &:focus-within {
     border-color: var(--info);
   }
@@ -35,10 +47,14 @@
 
   .rose-card-link-subtitle {
     color: var(--ui-gray);
+    margin: 0;
   }
 
   .rose-card-link-description {
-    margin: 0;
+    margin: auto 0 0;
     color: var(--ui-gray);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 }
diff --git a/addons/rose/addon/templates/components/rose/card/link.hbs b/addons/rose/addon/templates/components/rose/card/link.hbs
index 9749f4e9a..7f003a4a6 100644
--- a/addons/rose/addon/templates/components/rose/card/link.hbs
+++ b/addons/rose/addon/templates/components/rose/card/link.hbs
@@ -4,7 +4,6 @@
     @route={{if @route @route "index"}}
     @model={{@model}}
   >
-
     {{#if @title}}
       <h2 class="rose-card-link-title">{{@title}}</h2>
     {{/if}}
diff --git a/ui/core/app/styles/app.scss b/ui/core/app/styles/app.scss
index 5e8a9197d..4b6c7f9a3 100644
--- a/ui/core/app/styles/app.scss
+++ b/ui/core/app/styles/app.scss
@@ -12,7 +12,7 @@
     .project {
       display: flex;
       flex-direction: row;
-      padding: 10px;
+      padding: 10px 10px 10px 0;
     }
   }
 }