styles

1 files changed, 73 insertions, 6 deletions

diff --git a/app/packages/web/src/components/share.module.css b/app/packages/web/src/components/share.module.css
index 1e8f5c9b0..bf0e03bb2 100644
--- a/app/packages/web/src/components/share.module.css
+++ b/app/packages/web/src/components/share.module.css
@@ -1,22 +1,89 @@
+.root {
+  line-height: 1;
+}
+
 .header {
   display: flex;
-  align-items: center;
-  justify-content: space-between;
+  flex-direction: column;
+  gap: 0.75rem;
+
+  [data-section="title"] {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  [data-section="row"] {
+    display: flex;
+    flex-direction: column;
+    gap: 0.375rem;
+  }
 
   h1 {
-    font-size: 1.125rem;
+    font-size: 1.75rem;
     font-weight: 500;
   }
   p {
     display: flex;
+    gap: 0.375rem;
+    font-size: 0.75rem;
+
+    span:first-child {
+      color: var(--sl-color-gray-5);
+
+      &[data-status="connected"] { color: var(--sl-color-green); }
+      &[data-status="connecting"] { color: var(--sl-color-orange); }
+      &[data-status="disconnected"] { color: var(--sl-color-gray-5); }
+      &[data-status="reconnecting"] { color: var(--sl-color-orange); }
+      &[data-status="error"] { color: var(--sl-color-red); }
+    }
+    span:last-child {
+      color: var(--sl-color-text-dimmed);
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+    }
+  }
+}
+
+.stats {
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  gap: 1rem;
+
+  li {
+    display: flex;
+    align-items: center;
     gap: 0.5rem;
     font-size: 0.875rem;
 
     span:first-child {
-      &.connected { color: var(--sl-color-green); }
-      &.connecting { color: var(--sl-color-orange); }
-      &.disconnected { color: var(--sl-color-hairline); }
+      color: var(--sl-color-text-dimmed);
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+    }
+    span:last-child {
+      &[data-placeholder] {
+        color: var(--sl-color-text-dimmed);
+      }
     }
   }
 }
 
+.context {
+  button {
+    appearance: none;
+    background: none;
+    border: none;
+    padding: 0;
+    margin: 0;
+    font-size: 0.875rem;
+    color: var(--sl-color-text-dimmed);
+    cursor: pointer;
+
+    &:hover {
+      color: var(--sl-color-primary);
+    }
+  }
+}