Merge remote-tracking branch 'kieran/main'

packages/app/src/index.css

@@ -15,6 +15,8 @@
   --live: #f83838;
   --heart: #ef4444;
   --zap: #ff710a;
+  --mention: #961ee1;
+  --repost: #1ecbe1;
   --gray-superlight: #eee;
   --bg-secondary: #2a2a2a;
   --gray-light: #999;
@@ -112,6 +114,21 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
 }
 
+a {
+  color: inherit;
+  line-height: 1.3em;
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+a.ext {
+  word-break: break-all;
+  white-space: initial;
+}
+
 #root {
   overflow-x: hidden;
 }
@@ -138,6 +155,10 @@ code {
   border: 1px solid var(--border-color);
 }
 
+.bb {
+  border-bottom: 1px solid var(--border-color);
+}
+
 .bg-primary {
   background: var(--primary-gradient);
 }
@@ -150,6 +171,10 @@ code {
   padding: 12px 16px;
 }
 
+.p4 {
+  padding: 4px;
+}
+
 .p24 {
   padding: 24px;
 }
@@ -489,21 +514,6 @@ input:disabled {
   max-width: -moz-available;
 }
 
-a {
-  color: inherit;
-  line-height: 1.3em;
-  text-decoration: none;
-}
-
-a:hover {
-  text-decoration: underline;
-}
-
-a.ext {
-  word-break: break-all;
-  white-space: initial;
-}
-
 div.form {
   display: grid;
   grid-auto-flow: row;
@@ -620,6 +630,38 @@ div.form-col {
   background-color: var(--success);
 }
 
+.bg-zap {
+  background-color: var(--zap);
+}
+
+.bg-heart {
+  background-color: var(--heart);
+}
+
+.bg-mention {
+  background-color: var(--mention);
+}
+
+.bg-repost {
+  background-color: var(--repost);
+}
+
+.text-zap {
+  color: var(--zap);
+}
+
+.text-heart {
+  color: var(--heart);
+}
+
+.text-mention {
+  color: var(--mention);
+}
+
+.text-repost {
+  color: var(--repost);
+}
+
 .tweet {
   display: flex;
   align-items: center;
@@ -665,11 +707,6 @@ div.form-col {
   font-weight: 600;
   font-size: 26px;
   line-height: 36px;
-  margin: 12px 0 0 0;
-}
-
-.main-content .h4 {
-  margin-bottom: 25px;
 }
 
 .main-content .profile-preview {