From 09954cbe2d513415aaec2bdd5c3bba81621f3f91 Mon Sep 17 00:00:00 2001
From: Randall Morey <randall@randallmorey.com>
Date: Wed, 25 Nov 2020 16:42:28 -0500
Subject: [PATCH] =?UTF-8?q?style:=20=F0=9F=92=84=20add=20header=20styling?=
 =?UTF-8?q?=20to=20branded=20card?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../controllers/scopes/scope/authenticate.js  |  6 ++
 ui/desktop/app/styles/app.scss                | 25 ++++++-
 .../templates/scopes/scope/authenticate.hbs   |  9 +++
 ui/desktop/public/brand-background.svg        | 72 +++++++++++++++++++
 ui/desktop/public/logo-app-full.svg           |  1 +
 5 files changed, 112 insertions(+), 1 deletion(-)
 create mode 100644 ui/desktop/public/brand-background.svg
 create mode 100644 ui/desktop/public/logo-app-full.svg

diff --git a/ui/desktop/app/controllers/scopes/scope/authenticate.js b/ui/desktop/app/controllers/scopes/scope/authenticate.js
index 25ebcd1df..93bb9beda 100644
--- a/ui/desktop/app/controllers/scopes/scope/authenticate.js
+++ b/ui/desktop/app/controllers/scopes/scope/authenticate.js
@@ -1,6 +1,12 @@
 import Controller from '@ember/controller';
+import { inject as service } from '@ember/service';
 
 export default class ScopesScopeAuthenticateController extends Controller {
+
+  // =services
+
+  @service origin;
+
   // =attributes
 
   /**
diff --git a/ui/desktop/app/styles/app.scss b/ui/desktop/app/styles/app.scss
index 4e8a8da94..a9bc0dbdc 100644
--- a/ui/desktop/app/styles/app.scss
+++ b/ui/desktop/app/styles/app.scss
@@ -218,12 +218,28 @@
     top: 0;
     left: 0;
     right: 0;
-    height: sizing.rems(l) * 3.5;
+    height: sizing.rems(l) * 3.25;
     background-color: var(--black);
+    background-image: url('/brand-background.svg');
+    background-repeat: no-repeat;
+    background-position: right;
     border-top-left-radius: sizing.rems(xxxs);
     border-top-right-radius: sizing.rems(xxxs);
   }
 
+  &::after {
+    position: absolute;
+    content: " ";
+    top: 0;
+    left: 0;
+    right: 0;
+    height: sizing.rems(l) * 3.25;
+    background-image: url('/logo-app-full.svg');
+    background-size: sizing.rems(l) * 7;
+    background-repeat: no-repeat;
+    background-position: (sizing.rems(l) * 2.5) 50%;
+  }
+
   .branded-card-title {
     margin-bottom: 0;
   }
@@ -244,3 +260,10 @@
     }
   }
 }
+
+@media (max-width: media.width(medium)) {
+  .branded-card {
+    width: auto;
+    max-width: 100%;
+  }
+}
diff --git a/ui/desktop/app/templates/scopes/scope/authenticate.hbs b/ui/desktop/app/templates/scopes/scope/authenticate.hbs
index 335c81b57..75417a407 100644
--- a/ui/desktop/app/templates/scopes/scope/authenticate.hbs
+++ b/ui/desktop/app/templates/scopes/scope/authenticate.hbs
@@ -1,4 +1,13 @@
 {{page-title (t "actions.authenticate")}}
+{{!-- 
+<Rose::Form::Input
+  @type="text"
+  @name=""
+  @value={{this.origin.rendererOrigin}}
+  @label={{t "form.origin.label"}}
+  @disabled={{true}}
+  />
+<Rose::Button @style="ghost">Change</Rose::Button> --}}
 
 <BrandedCard
   @title={{t 'actions.authenticate'}}
diff --git a/ui/desktop/public/brand-background.svg b/ui/desktop/public/brand-background.svg
new file mode 100644
index 000000000..050bb59e7
--- /dev/null
+++ b/ui/desktop/public/brand-background.svg
@@ -0,0 +1,72 @@
+<svg width="247" height="78" viewBox="0 0 247 78" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="247" height="78">
+<rect width="247" height="78" fill="#C4C4C4"/>
+</mask>
+<g mask="url(#mask0)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0.164856 -1.62486C-0.0422516 -1.26614 0.0806732 -0.807445 0.439392 -0.600347L143.553 82.0216C143.911 82.2287 144.37 82.1058 144.577 81.7471C144.784 81.3884 144.661 80.9297 144.303 80.7226L1.18936 -1.8994C0.830643 -2.1065 0.371948 -1.98358 0.164856 -1.62486Z" fill="url(#paint0_linear)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.074 -1.62492C15.8669 -1.26621 15.9898 -0.807512 16.3485 -0.600381L151.489 77.4354C151.848 77.6425 152.307 77.5197 152.514 77.161C152.721 76.8023 152.598 76.3436 152.24 76.1364L17.0986 -1.89937C16.7398 -2.1065 16.2811 -1.98362 16.074 -1.62492Z" fill="url(#paint1_linear)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M31.9481 -1.62477C31.7411 -1.26602 31.8641 -0.807346 32.2228 -0.600296L159.427 72.814C159.785 73.0211 160.244 72.8981 160.451 72.5393C160.658 72.1806 160.535 71.7219 160.177 71.5149L32.9726 -1.89945C32.6138 -2.1065 32.1552 -1.98352 31.9481 -1.62477Z" fill="url(#paint2_linear)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M47.8574 -1.62475C47.6504 -1.26599 47.7734 -0.807321 48.1321 -0.600283L167.399 68.2279C167.758 68.4349 168.216 68.3119 168.424 67.9531C168.631 67.5944 168.508 67.1357 168.149 66.9287L48.8819 -1.89947C48.5231 -2.1065 48.0644 -1.98351 47.8574 -1.62475Z" fill="url(#paint3_linear)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M63.7667 -1.62481C63.5596 -1.26607 63.6825 -0.807393 64.0413 -0.60032L175.336 63.6416C175.695 63.8487 176.153 63.7257 176.36 63.367C176.567 63.0083 176.444 62.5496 176.086 62.3425L64.7912 -1.89943C64.4324 -2.1065 63.9737 -1.98355 63.7667 -1.62481Z" fill="url(#paint4_linear)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M84.6327 0.695792C84.4256 1.05451 84.5484 1.5132 84.9072 1.72032L188.229 61.3761C188.588 61.5832 189.047 61.4603 189.254 61.1016C189.461 60.7429 189.338 60.2842 188.98 60.077L85.6572 0.421292C85.2985 0.214178 84.8398 0.337076 84.6327 0.695792Z" fill="url(#paint5_linear)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M159.152 -1.62479C158.945 -1.26604 159.068 -0.807367 159.427 -0.600307L231.001 40.7107C231.36 40.9177 231.818 40.7948 232.025 40.436C232.232 40.0773 232.11 39.6186 231.751 39.4116L160.177 -1.89944C159.818 -2.1065 159.359 -1.98354 159.152 -1.62479ZM143.278 -1.62493C143.071 -1.26623 143.194 -0.807523 143.552 -0.600387L215.091 40.7106C215.45 40.9177 215.909 40.7949 216.116 40.4362C216.323 40.0775 216.2 39.6188 215.842 39.4116L144.303 -1.89936C143.944 -2.1065 143.485 -1.98363 143.278 -1.62493Z" fill="#F1565C"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M175.061 -1.62493C174.854 -1.26623 174.977 -0.807524 175.336 -0.600387L246.875 40.7106C247.234 40.9177 247.692 40.7949 247.899 40.4362C248.106 40.0775 247.984 39.6188 247.625 39.4116L176.086 -1.89936C175.727 -2.1065 175.269 -1.98363 175.061 -1.62493Z" fill="#F1565C"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M232.025 39.6862C231.818 39.3274 231.36 39.2045 231.001 39.4115L159.427 80.7225C159.068 80.9296 158.945 81.3883 159.152 81.747C159.359 82.1058 159.818 82.2287 160.177 82.0217L231.751 40.7107C232.11 40.5036 232.232 40.0449 232.025 39.6862Z" fill="url(#paint6_linear)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M216.116 39.686C215.909 39.3273 215.45 39.2045 215.091 39.4116L143.553 80.7226C143.194 80.9297 143.071 81.3884 143.278 81.7471C143.485 82.1059 143.944 82.2287 144.303 82.0216L215.842 40.7106C216.2 40.5035 216.323 40.0447 216.116 39.686Z" fill="url(#paint7_linear)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M247.899 39.686C247.692 39.3273 247.234 39.2045 246.875 39.4116L175.336 80.7226C174.977 80.9297 174.854 81.3884 175.061 81.7471C175.269 82.1059 175.727 82.2287 176.086 82.0216L247.625 40.7106C247.984 40.5035 248.106 40.0447 247.899 39.686Z" fill="url(#paint8_linear)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M247.899 48.8583C247.692 48.4996 247.233 48.3769 246.875 48.5841L191.245 80.7227C190.886 80.9299 190.764 81.3886 190.971 81.7473C191.178 82.1059 191.637 82.2287 191.995 82.0215L247.625 49.8829C247.984 49.6757 248.106 49.217 247.899 48.8583Z" fill="url(#paint9_linear)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M247.899 58.0307C247.692 57.6721 247.233 57.5493 246.875 57.7565L207.119 80.7227C206.76 80.9299 206.638 81.3886 206.845 81.7473C207.052 82.1059 207.511 82.2287 207.869 82.0215L247.625 59.0553C247.984 58.8481 248.106 58.3894 247.899 58.0307Z" fill="url(#paint10_linear)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M222.754 -1.62469C222.547 -1.26591 222.67 -0.807252 223.029 -0.600248L246.875 13.1583C247.234 13.3653 247.692 13.2423 247.9 12.8835C248.107 12.5247 247.983 12.0661 247.625 11.8591L223.778 -1.8995C223.42 -2.10651 222.961 -1.98347 222.754 -1.62469ZM190.971 -1.62475C190.764 -1.26599 190.887 -0.807319 191.245 -0.600282L246.875 31.5031C247.234 31.7101 247.692 31.5871 247.899 31.2283C248.107 30.8696 247.984 30.4109 247.625 30.2039L191.995 -1.89947C191.636 -2.1065 191.178 -1.98351 190.971 -1.62475ZM206.88 -1.62485C206.673 -1.26613 206.796 -0.80744 207.155 -0.600344L246.875 22.3306C247.234 22.5377 247.692 22.4148 247.899 22.0561C248.107 21.6973 247.984 21.2386 247.625 21.0315L207.904 -1.89941C207.546 -2.1065 207.087 -1.98358 206.88 -1.62485Z" fill="#F1565C"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M247.899 67.2027C247.692 66.8442 247.233 66.7216 246.874 66.929L223.028 80.7229C222.669 80.9303 222.547 81.3891 222.754 81.7476C222.962 82.1062 223.421 82.2287 223.779 82.0213L247.625 68.2275C247.984 68.0201 248.106 67.5613 247.899 67.2027Z" fill="url(#paint11_linear)"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear" x1="144.179" y1="40.0474" x2="0.54483" y2="40.0474" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F1565C" stop-opacity="0"/>
+<stop offset="0.601279" stop-color="#F1565C"/>
+</linearGradient>
+<linearGradient id="paint1_linear" x1="152.129" y1="37.7521" x2="16.4447" y2="37.7521" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F1565C" stop-opacity="0"/>
+<stop offset="0.597199" stop-color="#F1565C"/>
+</linearGradient>
+<linearGradient id="paint2_linear" x1="160.078" y1="35.4568" x2="32.3459" y2="35.4568" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F1565C" stop-opacity="0"/>
+<stop offset="0.592611" stop-color="#F1565C"/>
+</linearGradient>
+<linearGradient id="paint3_linear" x1="168.028" y1="33.1615" x2="48.2463" y2="33.1615" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F1565C" stop-opacity="0"/>
+<stop offset="0.587415" stop-color="#F1565C"/>
+</linearGradient>
+<linearGradient id="paint4_linear" x1="175.978" y1="30.8662" x2="64.1465" y2="30.8662" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F1565C" stop-opacity="0"/>
+<stop offset="0.581479" stop-color="#F1565C"/>
+</linearGradient>
+<linearGradient id="paint5_linear" x1="188.884" y1="30.8916" x2="85.004" y2="30.8916" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F1565C" stop-opacity="0"/>
+<stop offset="0.574635" stop-color="#F1565C"/>
+</linearGradient>
+<linearGradient id="paint6_linear" x1="195.59" y1="81.6273" x2="195.59" y2="39.7836" gradientUnits="userSpaceOnUse">
+<stop offset="0.1119" stop-color="#CF4A4F"/>
+<stop offset="0.6877" stop-color="#F1565C"/>
+</linearGradient>
+<linearGradient id="paint7_linear" x1="179.69" y1="81.6268" x2="179.69" y2="39.7838" gradientUnits="userSpaceOnUse">
+<stop offset="0.1119" stop-color="#CF4A4F"/>
+<stop offset="0.6877" stop-color="#F1565C"/>
+</linearGradient>
+<linearGradient id="paint8_linear" x1="211.492" y1="81.6267" x2="211.492" y2="39.7836" gradientUnits="userSpaceOnUse">
+<stop offset="0.1119" stop-color="#CF4A4F"/>
+<stop offset="0.6877" stop-color="#F1565C"/>
+</linearGradient>
+<linearGradient id="paint9_linear" x1="219.441" y1="81.6273" x2="219.441" y2="48.9628" gradientUnits="userSpaceOnUse">
+<stop offset="0.1119" stop-color="#CF4A4F"/>
+<stop offset="0.6877" stop-color="#F1565C"/>
+</linearGradient>
+<linearGradient id="paint10_linear" x1="227.389" y1="81.6274" x2="227.389" y2="58.1437" gradientUnits="userSpaceOnUse">
+<stop offset="0.1119" stop-color="#CF4A4F"/>
+<stop offset="0.6877" stop-color="#F1565C"/>
+</linearGradient>
+<linearGradient id="paint11_linear" x1="235.337" y1="81.6273" x2="235.337" y2="67.3245" gradientUnits="userSpaceOnUse">
+<stop offset="0.1119" stop-color="#CF4A4F"/>
+<stop offset="0.6877" stop-color="#F1565C"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/ui/desktop/public/logo-app-full.svg b/ui/desktop/public/logo-app-full.svg
new file mode 100644
index 000000000..fd38d1aa7
--- /dev/null
+++ b/ui/desktop/public/logo-app-full.svg
@@ -0,0 +1 @@
+<svg id="LOGOS" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 377 132"><defs><style>.cls-1{fill:#fff;}.cls-2{fill:#f04e54;}</style></defs><path class="cls-1" d="M125.45,41.34V35.68h-5.18v5.66h-2.64V27.75h2.64v5.7h5.18v-5.7h2.64V41.34Zm12.32,0h-2.09l-.19-.67a5.69,5.69,0,0,1-3,.87c-1.87,0-2.66-1.23-2.66-2.92,0-2,.9-2.75,3-2.75h2.46v-1c0-1.09-.32-1.47-1.95-1.47a14.85,14.85,0,0,0-2.83.3l-.32-1.87a14,14,0,0,1,3.5-.46c3.21,0,4.15,1.08,4.15,3.54Zm-2.55-3.7h-1.89c-.84,0-1.07.22-1.07,1s.23,1,1,1a4.1,4.1,0,0,0,1.93-.51Zm7.91,3.9a12.53,12.53,0,0,1-3.52-.56L140,39.1a11.5,11.5,0,0,0,3,.43c1.13,0,1.3-.24,1.3-1s-.12-.9-1.78-1.29c-2.49-.58-2.79-1.18-2.79-3.08s.9-2.83,3.82-2.83a14.07,14.07,0,0,1,3.06.34l-.25,2a19,19,0,0,0-2.81-.28c-1.11,0-1.3.24-1.3.84,0,.79.06.85,1.44,1.19,2.85.73,3.13,1.09,3.13,3.1S146.21,41.54,143.13,41.54Zm11.7-.2V34.5c0-.53-.23-.79-.81-.79a7.22,7.22,0,0,0-2.67.83v6.8H148.8V27.56l2.55.38v4.34a9.38,9.38,0,0,1,3.73-.94c1.7,0,2.31,1.14,2.31,2.89v7.11Zm4.71-11.19v-2.4h2.55v2.4Zm0,11.19v-9.8h2.55v9.8Zm4.6-9.72c0-2.46,1.48-3.88,5-3.88a16.63,16.63,0,0,1,3.8.44l-.3,2.19a21.49,21.49,0,0,0-3.41-.34c-1.83,0-2.41.6-2.41,2v5.15c0,1.43.58,2,2.41,2a21.57,21.57,0,0,0,3.41-.35l.3,2.2a16.63,16.63,0,0,1-3.8.44c-3.48,0-5-1.43-5-3.88Zm14.41,9.92c-3.5,0-4.45-1.85-4.45-3.86V35.2c0-2,1-3.86,4.45-3.86S183,33.19,183,35.2v2.48C183,39.69,182.05,41.54,178.55,41.54Zm0-8.11c-1.37,0-1.89.58-1.89,1.69v2.64c0,1.1.52,1.69,1.89,1.69s1.88-.59,1.88-1.69V35.12C180.43,34,179.91,33.43,178.55,33.43Zm11.64.16A20.64,20.64,0,0,0,187.48,35v6.32h-2.55v-9.8h2.16l.16,1.09a11.23,11.23,0,0,1,2.69-1.29Zm10.22,4.49c0,2.17-1,3.46-3.38,3.46a14.74,14.74,0,0,1-2.72-.28v4l-2.56.38V31.54h2l.25.82a5.54,5.54,0,0,1,3.22-1c2.06,0,3.15,1.16,3.15,3.4Zm-6.1,1.11a11.85,11.85,0,0,0,2.26.26c.93,0,1.28-.43,1.28-1.31V34.68c0-.81-.31-1.25-1.26-1.25a3.66,3.66,0,0,0-2.28.89Z"/><path class="cls-1" d="M139.64,70.53c3.08-1.33,4.48-3.21,4.48-6.53V59.82c0-5.45-3.09-8.59-10.72-8.59H117.55V91.52h16.94c7.33,0,11-3.56,11-9.25V78C145.51,74,143.33,71.31,139.64,70.53Zm-14.46-13h7.32c2.78,0,4,1,4,3.27v3.57c0,2.36-1.08,3.75-4.06,3.75h-7.25ZM137.89,81.3c0,3-1.46,3.93-4.91,3.93h-7.8v-11h8.47c3,0,4.24,1.33,4.24,4.06Z"/><path class="cls-1" d="M161.54,61.45c-10.11,0-12.82,5.57-12.82,11.62v7.44c0,6,2.71,11.62,12.82,11.62s12.83-5.57,12.83-11.62V73.07C174.37,67,171.64,61.45,161.54,61.45ZM167,80.76c0,3.32-1.51,5.08-5.45,5.08s-5.44-1.76-5.44-5.08V72.83c0-3.33,1.51-5.08,5.44-5.08S167,69.5,167,72.83Z"/><path class="cls-1" d="M196.51,62.06V82.51c-2.66,1.39-5.87,2.48-7.68,2.48s-2.36-.78-2.36-2.36V62.06h-7.38V83.42c0,5.26,1.75,8.71,6.65,8.71A29.44,29.44,0,0,0,197.54,89l.72,2.48h5.64V62.06Z"/><path class="cls-1" d="M228.4,61.45a29.61,29.61,0,0,0-11.8,3.09l-.72-2.48h-5.64V91.52h7.39V71.08c2.66-1.39,5.87-2.48,7.68-2.48s2.36.78,2.36,2.35V91.52h7.38V70.17C235.05,64.9,233.3,61.45,228.4,61.45Z"/><path class="cls-1" d="M257.5,50V62.31a40.19,40.19,0,0,0-7.87-.86c-6.83,0-9.74,3.88-9.74,10.41v10c0,6.71,3.15,10.22,9.08,10.22A15.49,15.49,0,0,0,258.29,89l.72,2.48h5.87V49Zm0,33.16a10.43,10.43,0,0,1-6.59,2.66c-2.73,0-3.63-1.33-3.63-3.75V71.68c0-2.66,1-3.93,3.68-3.93a32.33,32.33,0,0,1,6.54.79Z"/><path class="cls-1" d="M280.8,61.45a38.34,38.34,0,0,0-10.11,1.4l.91,5.62a41.47,41.47,0,0,1,8.17-.9c4.71,0,5.62,1.15,5.62,4.42v3.08h-7.08c-6,0-8.59,2.3-8.59,8.29,0,5.08,2.3,8.77,7.68,8.77a16.18,16.18,0,0,0,8.78-2.6l.54,2h6.06V72.1C292.78,64.72,290.05,61.45,280.8,61.45Zm4.59,23.3a11.57,11.57,0,0,1-5.56,1.51c-2.3,0-3-.91-3-3,0-2.23.67-2.9,3.09-2.9h5.44Z"/><path class="cls-1" d="M313,61.45a33,33,0,0,0-7.74,3.88l-.48-3.27h-6.24V91.52h7.38v-19a57.85,57.85,0,0,1,7.81-4.3Z"/><path class="cls-1" d="M335.67,62.06,328.9,84.44l-6.72-22.38h-7.56l9.32,29.46h2.59l-3.68,11.92h7l3.93-11.92,9.43-29.46Z"/><polygon class="cls-2" points="44.94 102.47 44.94 97.64 54.96 97.64 54.96 94.67 50.1 94.67 50.1 89.82 73.03 89.82 62.38 71.38 73.03 52.93 49.53 52.93 49.53 78.51 36.88 78.51 36.88 40.29 80.4 40.29 87.67 52.87 76.98 71.38 87.88 90.26 80.84 102.47 44.94 102.47"/><rect class="cls-2" x="42.04" y="89.82" width="4.85" height="4.85"/><rect class="cls-2" x="36.88" y="97.61" width="4.85" height="4.85"/></svg>
\ No newline at end of file