From cc842247a77e7b6d44862138fa8eb73ea6f7beac Mon Sep 17 00:00:00 2001
From: Max Goodhart <c@chromakode.com>
Date: Sun, 6 Sep 2020 19:50:22 -0700
Subject: [PATCH] Technology is not neutral

---
 src/web/control.js | 47 ++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 47 insertions(+)

diff --git a/src/web/control.js b/src/web/control.js
index b53c79b..418a840 100644
--- a/src/web/control.js
+++ b/src/web/control.js
@@ -571,6 +571,7 @@ function App({ wsEndpoint, role }) {
               Show stream debug tools
             </label>
           )}
+          <Facts />
         </StyledDataContainer>
       </Stack>
       <Stack flex="1" scroll={true} minHeight={200}>
@@ -1117,6 +1118,52 @@ function AuthTokenLine({ id, role, name, onDelete }) {
   )
 }
 
+function Facts() {
+  return (
+    <StyledFacts>
+      <BLM>Black Lives Matter.</BLM>
+      <TRM>
+        Trans rights are <em>human rights.</em>
+      </TRM>
+      <TIN>Technology is not neutral.</TIN>
+    </StyledFacts>
+  )
+}
+
+const StyledFacts = styled.div`
+  display: flex;
+  margin: 4px 0;
+
+  & > * {
+    line-height: 26px;
+    margin-right: 0.5em;
+    padding: 0 6px;
+    flex-shrink: 0;
+  }
+`
+
+const BLM = styled.div`
+  background: black;
+  color: white;
+`
+
+const TRM = styled.div`
+  background: linear-gradient(
+    to bottom,
+    #55cdfc 12%,
+    #f7a8b8 12%,
+    #f7a8b8 88%,
+    #55cdfc 88%
+  );
+  color: white;
+  text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
+`
+
+const TIN = styled.div`
+  background: gray;
+  font-family: monospace;
+`
+
 function main() {
   const script = document.getElementById('main-script')
   render(