ignore: share

packages/web/src/components/share.module.css

@@ -55,56 +55,21 @@
   }
 
   [data-section="title"] {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 3rem;
 
-    & > div {
-      flex: 0 0 auto;
-      display: flex;
-      flex-direction: column;
-      gap: 0.5rem;
-      align-items: flex-end;
+    h1 {
+      font-size: 1.75rem;
+      font-weight: 500;
+      line-height: 1.25;
+      letter-spacing: -0.05em;
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 2;
+      overflow: hidden;
 
-      [data-section="date"] {
-        span {
-          font-size: 0.875rem;
-          color: var(--sl-color-text-secondary);
-
-          &[data-placeholder] {
-            color: var(--sl-color-text-dimmed);
-          }
-        }
+      @media (max-width: 30rem) {
+        font-size: 1.25rem;
+        -webkit-line-clamp: 3;
       }
-
-      p[data-section="status"] {
-        flex: 0 0 auto;
-        display: flex;
-        gap: 0.375rem;
-        font-size: 0.75rem;
-
-        span:first-child {
-          color: var(--sl-color-divider);
-
-          &[data-status="connected"] {
-            color: var(--sl-color-green);
-          }
-          &[data-status="connecting"] {
-            color: var(--sl-color-orange);
-          }
-          &[data-status="disconnected"] {
-            color: var(--sl-color-divider);
-          }
-          &[data-status="reconnecting"] {
-            color: var(--sl-color-orange);
-          }
-          &[data-status="error"] {
-            color: var(--sl-color-red);
-          }
-        }
-      }
-
     }
   }
 
@@ -114,22 +79,6 @@
     gap: 0.375rem;
   }
 
-  h1 {
-    font-size: 1.75rem;
-    font-weight: 500;
-    line-height: 1.25;
-    letter-spacing: -0.05em;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 2;
-    overflow: hidden;
-
-    @media (max-width: 30rem) {
-      font-size: 1.25rem;
-      -webkit-line-clamp: 3;
-    }
-  }
-
   [data-section="stats"] {
     list-style-type: none;
     padding: 0;
@@ -169,6 +118,13 @@
       }
     }
   }
+
+  [data-section="time"] {
+    span {
+      color: var(--sl-color-text-dimmed);
+      font-size: 0.875rem;
+    }
+  }
 }
 
 .parts {
@@ -347,6 +303,44 @@
       }
     }
   }
+  [data-part-type="connection-status"] {
+    & > [data-section="decoration"] {
+      span:first-child {
+        flex: 0 0 auto;
+        display: block;
+        margin: 1px;
+        width: 16px;
+        height: 16px;
+        border-radius: 50%;
+        background-color: var(--sl-color-divider);
+
+        &[data-status="connected"] {
+          background-color: var(--sl-color-green);
+        }
+        &[data-status="connecting"] {
+          background-color: var(--sl-color-orange);
+        }
+        &[data-status="disconnected"] {
+          background-color: var(--sl-color-divider);
+        }
+        &[data-status="reconnecting"] {
+          background-color: var(--sl-color-orange);
+        }
+        &[data-status="error"] {
+          background-color: var(--sl-color-red);
+        }
+      }
+    }
+
+    & > [data-section="content"] {
+      span {
+        display: block;
+        line-height: 18px;
+        font-size: 0.875rem;
+        color: var(--sl-color-text-dimmed);
+      }
+    }
+  }
 }
 
 .message-text {