feat(ui): add Branding component (#335)

* feat(ui): add branding component

add branding component

* fix(ui): restore old dark stying

restore old dard styling

* fix(ui): cr fix

code review fix

* fix(ui): cr fix

cr fix

packages/console/src/scss/_underscore.scss

@@ -2,7 +2,7 @@
   @return #{$factor * 4}#{$unit};
 }
 
-@mixin flex-colomn {
+@mixin flex-column {
   display: flex;
   flex-direction: column;
   align-items: center;

packages/ui/src/__mocks__/logto.tsx

@@ -0,0 +1,2 @@
+export const appLogo = 'https://avatars.githubusercontent.com/u/88327661?s=200&v=4';
+export const appHeadline = 'Build user identity in a modern way';

packages/ui/src/components/AppContent/index.module.scss

@@ -2,12 +2,12 @@
   position: absolute;
   inset: 0;
   background: var(--color-background);
-  color: var(--color-body);
+  color: var(--color-font-primary);
 }
 
 .universal {
+  /* ===== Legacy Styling ===== */
   /* Color */
-  --color-gradient: linear-gradient(12.07deg, #3c4ce3 8.81%, #717ce0 93.49%);
   --color-button-background: #3c4ce3;
   --color-button-background-disabled: #626fe8;
   --color-button-background-hover: #2234df;
@@ -22,10 +22,13 @@
 
   /* Transition */
   --transition-default-function: 0.2s ease-in-out;
-  --transition-default-control: background var(--transition-default-function), color var(--transition-default-function);
+  --transition-default-control:
+    background var(--transition-default-function),
+    color var(--transition-default-function);
 }
 
 .dark {
+  /* ===== Legacy Styling ===== */
   /* Color */
   --color-heading: #f3f6f9;
   --color-body: #dadae0;
@@ -42,22 +45,35 @@
 
 .light {
   /* Color */
+  --color-primary: #6139f6;
+  --color-gradient: linear-gradient(69.73deg, #492ef3 5.52%, #cf69ff 94.22%);
+  --color-background: #fdfdff;
+
+  /* Font Color */
+  --color-font-primary: #111;
+  --color-font-secondary: #444;
+  --color-font-tertiary: #777;
+
+  /* ===== Legacy Styling ===== */
+
   --color-heading: #333;
   --color-body: #555;
   --color-secondary: #888;
   --color-placeholder: #aaa;
   --color-control-background: #f5f8fa;
   --color-control-background-disabled: #eaeaea;
-  --color-background: #fdfdff;
 
   /* Shadow */
   --shadow-card: 2px 2px 24px rgb(187, 189, 191, 20%);
   --shadow-control: 1px 1px 2px rgb(221, 221, 221, 25%);
 }
 
-$font-family: 'PingFang SC', 'SF Pro Text', sans-serif;
+$font-family: 'PingFang SC', 'SF Pro Display', sans-serif;
 
 .mobile {
+  --font-subtitle-18-medium: 500 18px/21px #{$font-family};
+
+  /* ===== Legacy Styling ===== */
   --font-headline: 600 40px/56px #{$font-family};
   --font-heading-1: 600 28px/39px #{$font-family};
   --font-heading-2: 600 20px/28px #{$font-family};

packages/ui/src/components/BrandingHeader/index.module.scss

@@ -0,0 +1,23 @@
+@use '@/scss/underscore' as _;
+
+$logo-height: 60px;
+
+.container {
+  width: 100%;
+  @include _.flex-column;
+}
+
+.logo {
+  height: $logo-height;
+  width: auto;
+  @include _.image-align-center;
+
+  &:not(:last-child) {
+    margin-bottom: _.unit(2);
+  }
+}
+
+.headline {
+  font: var(--font-subtitle-18-medium);
+  color: var(--color-font-secondary);
+}

packages/ui/src/components/BrandingHeader/index.test.tsx

@@ -0,0 +1,16 @@
+import { render } from '@testing-library/react';
+import React from 'react';
+
+import { appLogo, appHeadline } from '@/__mocks__/logto';
+
+import BrandingHeader from '.';
+
+describe('BrandingHeader UI Component', () => {
+  test('render logo with context', () => {
+    const { queryByText, container } = render(
+      <BrandingHeader logo={appLogo} headline={appHeadline} />
+    );
+    expect(queryByText(appHeadline)).not.toBeNull();
+    expect(container.querySelector('img')).not.toBeNull();
+  });
+});

packages/ui/src/components/BrandingHeader/index.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+import * as styles from './index.module.scss';
+
+export type Props = {
+  logo: string;
+  headline?: string;
+};
+
+const BrandingHeader = ({ logo, headline }: Props) => {
+  return (
+    <div className={styles.container}>
+      <img className={styles.logo} alt="app logo" src={logo} />
+      {headline && <div className={styles.headline}>{headline}</div>}
+    </div>
+  );
+};
+
+export default BrandingHeader;

packages/ui/src/pages/Register/index.module.scss

@@ -1,16 +1,15 @@
 @use '@/scss/underscore' as _;
 
-
 .wrapper {
   position: relative;
   padding: _.unit(8);
   height: 100%;
-  @include _.flex-colomn;
+  @include _.flex-column;
 }
 
 .form {
   width: 100%;
-  @include _.flex-colomn;
+  @include _.flex-column;
 
   > * {
     margin-bottom: _.unit(1.5);

packages/ui/src/pages/SignIn/index.module.scss

@@ -1,23 +1,15 @@
 @use '@/scss/underscore' as _;
 
-
-@mixin flex-colomn {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-}
-
 .wrapper {
   position: relative;
   padding: _.unit(8);
   height: 100%;
-  @include flex-colomn;
+  @include _.flex-column;
 }
 
 .form {
   width: 100%;
-  @include flex-colomn;
+  @include _.flex-column;
 
   > * {
     margin-bottom: _.unit(1.5);

packages/ui/src/scss/_underscore.scss

@@ -2,9 +2,14 @@
   @return #{$factor * 4}#{$unit};
 }
 
-@mixin flex-colomn {
+@mixin flex-column {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
 }
+
+@mixin image-align-center {
+  object-fit: contain;
+  object-position: center;
+}