From c186c9085dd45e47a7dc04102427ad35b2d94258 Mon Sep 17 00:00:00 2001 From: Angelo Veltens Date: Fri, 16 Feb 2024 21:40:01 +0100 Subject: [PATCH] feat: style welcome page --- .../components/welcome-page/welcome-page.css | 34 ++++++++++++++++--- .../components/welcome-page/welcome-page.tsx | 10 ++++-- contacts/src/index.html | 2 +- 3 files changed, 39 insertions(+), 7 deletions(-) diff --git a/contacts/src/components/welcome-page/welcome-page.css b/contacts/src/components/welcome-page/welcome-page.css index e7eadd3..6ab04c9 100644 --- a/contacts/src/components/welcome-page/welcome-page.css +++ b/contacts/src/components/welcome-page/welcome-page.css @@ -4,7 +4,6 @@ grid-template-areas: "header" "main" - "menu" } header { @@ -13,14 +12,41 @@ header { grid-area: header; align-items: center; justify-content: space-between; + padding: var(--size-10); } -nav { - grid-area: menu; -} main { grid-area: main; + margin: var(--size-10); + background-color: white; + border-radius: var(--radius-xl); + padding: var(--size-4) +} + +button.open { + color: white; + font-size: var(--scale-1); + border-radius: var(--radius-lg); + font-weight: var(--weight-bold); + padding: var(--size-4); + background-color: var(--color-blue-700); + border: 1px solid var(--color-blue-500); + box-shadow: var(--shadow-md); +} + + +button.open:hover { + cursor: pointer; + filter: brightness(110%); } +.toolbar { + display: flex; + justify-items: center; + align-content: center; + gap: var(--size-4); +} + + diff --git a/contacts/src/components/welcome-page/welcome-page.tsx b/contacts/src/components/welcome-page/welcome-page.tsx index fc7d21a..509867b 100644 --- a/contacts/src/components/welcome-page/welcome-page.tsx +++ b/contacts/src/components/welcome-page/welcome-page.tsx @@ -3,6 +3,7 @@ import { Component, Event, EventEmitter, h, Host } from '@stencil/core'; @Component({ tag: 'pos-contacts-welcome-page', styleUrl: './welcome-page.css', + shadow: true, }) export class WelcomePage { @Event({ eventName: 'pod-os-contacts:open-address-book' }) openAddressBook: EventEmitter; @@ -17,10 +18,15 @@ export class WelcomePage {

PodOS contacts

-
- +

Sign in first to open private address books

+
+ + +
); diff --git a/contacts/src/index.html b/contacts/src/index.html index a6a1fed..4bd0176 100644 --- a/contacts/src/index.html +++ b/contacts/src/index.html @@ -3,7 +3,7 @@ - Stencil Component Starter + PodOS Contacts