feat: style welcome page

pod-os · Feb 16, 2024 · c186c90 · c186c90
1 parent 551d8fe
commit c186c90
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 7 deletions.
diff --git 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
@@ -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<string>;
@@ -17,10 +18,15 @@ export class WelcomePage {
       <Host>
         <header>
           <h1>PodOS contacts</h1>
-          <pos-login></pos-login>
         </header>
         <main>
-          <button onClick={() => this.promptAndOpen()}>open address book</button>
+          <p>Sign in first to open private address books</p>
+          <div class="toolbar">
+            <pos-login></pos-login>
+            <button class="open" onClick={() => this.promptAndOpen()}>
+              open address book
+            </button>
+          </div>
         </main>
       </Host>
     );

diff --git a/contacts/src/index.html b/contacts/src/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
-    <title>Stencil Component Starter</title>
+    <title>PodOS Contacts</title>
 
     <script type="module" src="/build/contacts.esm.js"></script>
     <script nomodule src="/build/contacts.js"></script>