style: 💄 initial centered welcome card styling

addons/core/translations/actions/en-us.yaml

@@ -5,6 +5,7 @@ remove: Remove
 discard: Discard
 dismiss: Dismiss
 save: Save
+submit: Submit
 manage: Manage
 confirm: Confirm
 ok: OK

addons/core/translations/en-us.yaml

@@ -5,14 +5,6 @@ auth:
     no-scopes: No scopes were found.  To authenticate, ask your administrator to create an scope and grant you access.
     choose-org: Choose a scope to authenticate.
     authenticating-with-org: "You are authenticating with {name}."
-origin:
-  titles:
-    welcome: Welcome to Boundary
-  descriptions:
-    welcome:
-      get-started: To get started, you'll need to
-      step-1: Enter your controller URL
-      step-2: Use your credentials to authenticate in
 titles:
   home: Home
   iam: IAM
@@ -28,8 +20,10 @@ titles:
   documentation: Documentation
   abandon-confirm: Discard unsaved changes?
   toggle-color-theme: Toggle Color Theme
+  welcome-to-boundary: Welcome to Boundary
 descriptions:
   empty-set: There are no items to display yet.  You may be able to add items or try back later.
+  origin-initialization: To get started, please enter your controller URL
 questions:
   delete-confirm: Are you sure you want to delete this resource?
   remove-confirm: Are you sure you want to remove this association?

addons/core/translations/form/en-us.yaml

@@ -47,5 +47,5 @@ grant_scope:
   label: Grant Scope
   help: Specify the scope to which this role applies.
 origin:
-  label: Origin
-  description: The server origin to which to connect (e.g. protocol://host)
+  label: Controller URL
+  description: The Boundary URL to which to connect (e.g. protocol://host:port)

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

@@ -0,0 +1,5 @@
+<div class="branded-card">
+  <h2 class="branded-card-title h1">{{@title}}</h2>
+  <p class="branded-card-description">{{@description}}</p>
+  {{yield}}
+</div>

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

@@ -0,0 +1,3 @@
+<div class="centered">
+  {{yield}}
+</div>

ui/desktop/app/styles/app.scss

@@ -199,7 +199,49 @@
 }
 
 .centered {
-  display: inline-block;
-  margin: auto;
-  transform: translate(0%, -20%);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-content: center;
+  margin: 0 auto;
+}
+
+.branded-card {
+  position: relative;
+  max-width: sizing.rems(l) * 16;
+  padding: (sizing.rems(l) * 4) (sizing.rems(l) * 3) (sizing.rems(l) * 2) (sizing.rems(l) * 3);
+  border: 1px solid var(--ui-border-subtler-1);
+  border-radius: sizing.rems(xxxs);
+
+  &::before {
+    position: absolute;
+    content: " ";
+    top: 0;
+    left: 0;
+    right: 0;
+    height: sizing.rems(l) * 3.5;
+    background-color: var(--black);
+    border-top-left-radius: sizing.rems(xxxs);
+    border-top-right-radius: sizing.rems(xxxs);
+  }
+
+  .branded-card-title {
+    margin-bottom: 0;
+  }
+
+  .branded-card-description {
+    margin-bottom: sizing.rems(xl);
+  }
+
+  .rose-form-actions {
+    .rose-button-primary {
+      display: block;
+      margin: 0;
+      width: 100%;
+
+      .rose-button-wrapper {
+        display: inline;
+      }
+    }
+  }
 }

ui/desktop/app/templates/origin.hbs

@@ -1,30 +1,25 @@
-<Rose::Layout::Centered class="centered">
-  <h2>{{t 'origin.titles.welcome'}}</h2>
-  <p>{{t 'origin.descriptions.welcome.get-started'}}</p>
-  <p>
-    <ol>
-      <li>{{t 'origin.descriptions.welcome.step-1'}}</li>
-      <li>{{t 'origin.descriptions.welcome.step-2'}}</li>
-    </ol>
-  </p>
+<Centered>
 
+<BrandedCard
+  @title={{t 'titles.welcome-to-boundary'}}
+  @description={{t 'descriptions.origin-initialization'}}
+>
   <Rose::Form
     class="full-width"
     @onSubmit={{route-action "setOrigin" this.origin}}
     @cancel={{false}}
     as |form|
   >
-
     <form.input
       @name="host"
       @type="text"
       @value={{this.origin}}
       @label={{t "form.origin.label"}}
       @helperText={{t "form.origin.description"}} />
-
     <form.actions
-      @submitText="Set Origin"
+      @submitText={{t "actions.submit"}}
       @showCancel={{false}} />
-
   </Rose::Form>
-</Rose::Layout::Centered>
+</BrandedCard>
+
+</Centered>

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

@@ -0,0 +1,26 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | branded-card', function(hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function(assert) {
+    // Set any properties with this.set('myProperty', 'value');
+    // Handle any actions with this.set('myAction', function(val) { ... });
+
+    await render(hbs`<BrandedCard />`);
+
+    assert.equal(this.element.textContent.trim(), '');
+
+    // Template block usage:
+    await render(hbs`
+      <BrandedCard>
+        template block text
+      </BrandedCard>
+    `);
+
+    assert.equal(this.element.textContent.trim(), 'template block text');
+  });
+});

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

@@ -0,0 +1,26 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | centered', function(hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function(assert) {
+    // Set any properties with this.set('myProperty', 'value');
+    // Handle any actions with this.set('myAction', function(val) { ... });
+
+    await render(hbs`<Centered />`);
+
+    assert.equal(this.element.textContent.trim(), '');
+
+    // Template block usage:
+    await render(hbs`
+      <Centered>
+        template block text
+      </Centered>
+    `);
+
+    assert.equal(this.element.textContent.trim(), 'template block text');
+  });
+});