examples(authz): style fixes

examples/authz/3rd-party-app/src/js/main.js

@@ -1,69 +0,0 @@
-import 'the-new-css-reset/css/reset.css';
-import '../styles/style.css';
-import QRCode from 'qrcode';
-
-globalThis.pubkyAuthWidgetState = {
-    open: false,
-    qr: false
-};
-
-render();
-
-function widget() {
-    return `
-    <div
-        id="widget"
-        class="${globalThis.pubkyAuthWidgetState.open ? "open" : ""}"
-    >
-      <button onclick="flip()">Pubky Auth</button>
-      <div id="widget-content">
-          <p>Scan or copy Pubky auth URL</p>
-          <div class="card"><canvas id="qr" height="300" width="300" style="height: 300px; width: 300px;"></canvas></div>
-          <a class="card url" href="pubky:auth?cb=https://demo.httprelay.io/link/rxfa6k2k5">
-            <p>pubky:auth?cb=https://demo.httprelay.io/link/rxfa6k2k5</p>
-            <svg width="14" height="16" viewBox="0 0 14 16" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="10" height="12" rx="2" fill="white"></rect><rect x="3" y="3" width="10" height="12" rx="2" fill="white" stroke="#3B3B3B"></rect></svg>
-          </a>
-      </div>
-    </div>
-  `;
-}
-
-globalThis.flip = () => {
-    globalThis.pubkyAuthWidgetState.open =
-        !globalThis.pubkyAuthWidgetState.open;
-
-
-    const widget = document.querySelector("#widget");
-    widget.classList = widget.classList.contains("open")
-        ? [...widget.classList].filter(n => n !== "open")
-        : [...widget.classList, "open"];
-
-    if (!globalThis.pubkyAuthWidgetState.qr) {
-        let qrURL = "pubky:auth?cb=https://demo.httprelay.io/link/rxfa6k2k5";
-
-        const canvas = document.getElementById("qr");
-        console.log({ qrURL, canvas })
-
-        QRCode.toCanvas(canvas, qrURL, {
-            margin: 2,
-            scale: 8,
-
-            color: {
-                light: '#fff',
-                dark: '#000',
-            },
-        });
-
-        globalThis.pubkyAuthWidgetState.qr = true
-    }
-};
-
-function render() {
-    document.querySelector('#app').innerHTML = `
-  <main>
-    <h1>Third Party app!</h1>
-    <p> You are NOT logged in.</p>
-  </main>
-  ${widget()}
-`;
-}

examples/authz/3rd-party-app/src/pubky-auth-widget.js

@@ -65,6 +65,16 @@ export class PubkyAuthWidget extends LitElement {
 
   static get styles() {
     return css`
+      * {
+        box-sizing: border-box;
+      }
+
+      :host {
+        --full-width: 22rem;
+        --full-height: 31rem;
+        --header-height: 3rem; 
+      }
+
       button {
         background: none;
         border: none;
@@ -79,7 +89,6 @@ export class PubkyAuthWidget extends LitElement {
       /** End reset */
 
       #widget {
-        font-size: 10px;
         color: white;
 
         position: fixed;
@@ -97,8 +106,8 @@ export class PubkyAuthWidget extends LitElement {
         -webkit-backdrop-filter: blur(8px);
         backdrop-filter: blur(8px);
 
-        width: 10em;
-        height: 4em;
+        width: 7rem;
+        height: var(--header-height);
 
         will-change: height,width;
         transition-property: height, width;
@@ -107,42 +116,54 @@ export class PubkyAuthWidget extends LitElement {
       }
 
       #widget.open{
-        width: 35em;
-        height: 47em;
+        width: var(--full-width);
+        height: var(--full-height);
       }
 
       .header {
         width: 100%;
-        padding: 1em;
+        height: var(--header-height);
+        display: flex;
+        justify-content: center;
+        align-items: center;
       }
 
       #widget-content{
-        padding: 1.6em
+        width: var(--full-width);
+        padding: 0 1rem
       }
 
       #widget p {
-        font-size: 1.4em;
-        line-height: 1em;
+        font-size: .87rem;
+        line-height: 1rem;
         text-align: center;
         color: #fff;
         opacity: .3;
+
+        /* Fix flash wrap in open animation */
+        text-wrap: nowrap;
       }
 
       #qr {
-        width: 30em !important;
-        height: 30em !important;
+        width: 18em !important;
+        height: 18em !important;
       }
 
       .card {
         background: #3b3b3b;
         border-radius: 5px;
-        padding: 1em;
-        margin-top: 1em;
+        padding: 1rem;
+        margin-top: 1rem;
         display: flex;
         justify-content: center;
         align-items: center;
       }
 
+      .card.url {
+        padding: .625rem;
+        justify-content: space-between;
+      }
+
       .url p {
         display: flex;
         align-items: center;
@@ -158,6 +179,7 @@ export class PubkyAuthWidget extends LitElement {
         height: 1px;
         background-color: #3b3b3b;
         flex: 1 1;
+        margin-bottom: 1rem;
       }
     `
   }

examples/authz/3rd-party-app/src/styles/style.css

@@ -1,134 +0,0 @@
-:root {
-  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
-    Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-  color: white;
-
-  background: radial-gradient(
-      circle,
-      transparent 20%,
-      #151718 20%,
-      #151718 80%,
-      transparent 80%,
-      transparent
-    ),
-    radial-gradient(
-        circle,
-        transparent 20%,
-        #151718 20%,
-        #151718 80%,
-        transparent 80%,
-        transparent
-      )
-      25px 25px,
-    linear-gradient(#202020 1px, transparent 2px) 0 -1px,
-    linear-gradient(90deg, #202020 1px, #151718 2px) -1px 0;
-  background-size: 50px 50px, 50px 50px, 25px 25px, 25px 25px;
-}
-
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 20rem;
-  min-height: 100vh;
-  font-family: var(--font-family);
-}
-
-h1 {
-  font-weight: bold;
-  font-size: 3.2rem;
-  line-height: 1.1;
-}
-
-button {
-  cursor: pointer
-}
-
-#app {
-  max-width: 80rem;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-#widget {
-  position: fixed;
-  top: 1rem;
-  right: 1rem;
-
-  background-color:red;
-
-  z-index: 99999;
-  overflow: hidden;
-  background: rgba(43, 43, 43, .7372549019607844);
-  border: 1px solid #3c3c3c;
-  box-shadow: 0 10px 34px -10px rgba(236, 243, 222, .05);
-  border-radius: 8px;
-  padding: 1rem;
-  -webkit-backdrop-filter: blur(8px);
-  backdrop-filter: blur(8px);
-
-  width: 8rem;
-  height: 3.31rem;
-
-  will-change: height,width;
-  transition-property: height, width;
-  transition-duration: 200ms;
-  transition-timing-function: ease-in;
-}
-
-#widget.open{
-  width: 22rem;
-  height: 30.3rem;
-}
-
-
-#widget #widget-content{
-  display: none
-}
-
-#widget.open #widget-content{
-  display: block
-}
-
-#widget p {
-  font-size: 0.8rem;
-  line-height: 1.6rem;
-  text-align: center;
-  color: #fff;
-  opacity: .3;
-}
-
-.card {
-  background: #3b3b3b;
-  border-radius: 5px;
-  padding: .625rem;
-  margin-top: 1rem;
-  display: flex;
-  justify-content: space-between;
-}
-
-.url p {
-  display: flex;
-  align-items: center;
-
-  line-height: 1!important;
-  width: 90%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  text-wrap: nowrap;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: var(--color-dark);
-    background-color: var(--color-light);
-  }
-  .author:hover {
-    color: var(--color-primary-hover);
-  }
-  button,
-  .gitRepo {
-    background-color: var(--color-button-light);
-  }
-}