Refactor component name to just card and change tests to accommodate the changes

ui/desktop/app/components/card/index.hbs

@@ -1,15 +1,15 @@
-<section class='credentials-card'>
+<section class='card'>
   {{yield
     (hash
       header=(component
-        'rose/anonymous' tagName='header' class='credentials-card-header'
+        'rose/anonymous' tagName='header' class='card-header'
       )
       body=(component
-        'rose/anonymous' tagName='div' class='credentials-card-body'
+        'rose/anonymous' tagName='div' class='card-body'
       )
       footer=(component
-        'rose/anonymous' tagName='footer' class='credentials-card-footer'
+        'rose/anonymous' tagName='footer' class='card-footer'
       )
     )
   }}
-</section>
+</section>

ui/desktop/app/styles/app.scss

@@ -346,7 +346,6 @@
 
   .rose-dialog-footer {
     align-items: center;
-    display: flex;
 
     div:nth-child(1) {
       display: flex;
@@ -360,35 +359,29 @@
       width: 50%;
     }
   }
-
-  // .credentials-card {
-  //   display: flex;
-  //   flex-direction: column;
-  //   margin-bottom: 12px;
-
-  //   &:last-child { margin-bottom: 0; }
-
-  //   .credentials-card-header {
-  //     display: flex;
-  //     flex-direction: row;
-
-  //     div {
-  //       display: flex;
-  //       width: 50%;
-
-  //       &:last-child {
-  //         justify-content: flex-end;
-  //       }
-  //     }
-  //     // border-bottom: 1px solid grey;
-  //   }
-
-  //   .credentials-card-body {
-  //     // background: yellow;
-  //   }
-
-  //   .credentials-card-footer {
-  //     // background: pink;
-  //   }
-  // }
+}
+
+// Card component (app/componetns/card)
+.card {
+  border: sizing.rems(xxxxs) solid var(--ui-gray-subtler-3);
+  display: flex;
+  flex-direction: column;
+  margin-bottom: sizing.rems(m);
+
+  .card-header {
+    border-bottom: sizing.rems(xxxxs) solid var(--ui-gray-subtler-3);
+    display: flex;
+  }
+
+  .card-body {
+    display: flex;
+    flex-direction: column;
+    padding: sizing.rems(s);
+  }
+
+  .card-footer {
+    border-top: sizing.rems(xxxxs) solid var(--ui-gray-subtler-3);
+    display: flex;
+    padding: sizing.rems(s);
+  }
 }

ui/desktop/tests/integration/components/card-test.js

@@ -8,7 +8,7 @@ module('Integration | Component | card', function (hooks) {
 
   test('it renders', async function (assert) {
     await render(hbs`<Card />`);
-    assert.ok(find('.credentials-card'));
+    assert.ok(find('.card'));
   });
 
   test('it renders with content', async function (assert) {
@@ -20,9 +20,9 @@ module('Integration | Component | card', function (hooks) {
       </Card>
     `);
 
-    assert.ok(find('.credentials-card'));
-    assert.ok(find('.credentials-card-header'));
-    assert.ok(find('.credentials-card-body'));
-    assert.ok(find('.credentials-card-footer'));
+    assert.ok(find('.card'));
+    assert.ok(find('.card-header'));
+    assert.ok(find('.card-body'));
+    assert.ok(find('.card-footer'));
   });
 });