admin/clients
1
0
Fork 0
mirror of https://github.com/bitwarden/clients.git synced 2026-02-05 08:33:49 +08:00
Code Issues Packages Projects Releases Wiki Activity

[PM-3388] AnonLayout Component (#6424)

Browse Source 
* setup anon-layout component

* add story with content

* simplify stories and add title input

* add responsiveness

* adjust border styling

* add logo

* add logo

* mock PlatformUtilsService

* more responsivness

* add secondary content

* add stories and clarifying comments

* add more to responsiveness

* Update libs/components/tailwind.config.js

Co-authored-by: Oscar Hinton <Hinton@users.noreply.github.com>

* Update libs/components/tailwind.config.base.js

Co-authored-by: Oscar Hinton <Hinton@users.noreply.github.com>

* Update libs/auth/src/components/anon-layout.stories.ts

Co-authored-by: Oscar Hinton <Hinton@users.noreply.github.com>

* refactor: use bit-icon instead of css file, add auth- prefix, adjust tailwind settings

* account for longer content

* allow for adding an icon above logo

* simplify stories by removing unnecessary styling

* delete duplicate logo and minify logo and icon

* remove componentWrapperDecorator

* change subTitle to subtitle

* use bitTypography

* add accessibility title and use tw class for fill color

* add <title> element to SVG

* typography update and minor styling updates for stories

* match breakpoint for logo and h1

* reduce spacing between sections

* move to new folder

* add closing tag

* make fields protected

* use svg directly

* refactor icons

* revert to allow for additional icons in the future

* decouple icon from component

---------

Co-authored-by: Oscar Hinton <Hinton@users.noreply.github.com>
This commit is contained in:
rr-bw
2024-03-06 09:32:50 -08:00
committed by GitHub
parent 5dcc035245
commit b3e4ecc568
6 changed files with 185 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
libs/auth/src/angular/anon-layout/anon-layout.component.html Normal file
View File

@@ -0,0 +1,26 @@
<main
class="tw-flex tw-min-h-screen tw-max-w-xl tw-w-full tw-mx-auto tw-flex-col tw-gap-9 tw-px-4 tw-pb-4 tw-pt-14 tw-text-main"
>
<div class="tw-text-center">
<div class="tw-px-8">
<div *ngIf="icon" class="tw-mb-8">
<bit-icon [icon]="icon"></bit-icon>
</div>
<bit-icon [icon]="logo" class="tw-mx-auto tw-block tw-max-w-72 sm:tw-max-w-xs"></bit-icon>
</div>
<h1 *ngIf="title" bitTypography="h3" class="tw-mt-8 sm:tw-text-2xl">
{{ title }}
</h1>
<p *ngIf="subtitle" bitTypography="body1">{{ subtitle }}</p>
</div>
<div class="tw-mb-auto tw-mx-auto tw-max-w-md tw-grid tw-gap-9">
<div class="tw-rounded-xl sm:tw-border sm:tw-border-solid sm:tw-border-secondary-300 sm:tw-p-8">
<ng-content></ng-content>
</div>
<ng-content select="[slot=secondary]"></ng-content>
</div>
<footer class="tw-text-center">
<div>&copy; {{ year }} Bitwarden Inc.</div>
<div>{{ version }}</div>
</footer>
</main>