From b62f83ace4bd563a0e9b82dd7519d937513b2fd2 Mon Sep 17 00:00:00 2001
From: Robert Long <robert@robertlong.me>
Date: Thu, 3 Dec 2020 19:04:27 -0800
Subject: [PATCH] Fix ChatSidebar font size and link styling

---
 src/react-components/room/ChatSidebar.scss    | 20 +++++++++++++++++--
 .../room/ChatSidebar.stories.js               |  9 +++++++++
 src/react-components/styles/theme.scss        |  3 +--
 3 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/src/react-components/room/ChatSidebar.scss b/src/react-components/room/ChatSidebar.scss
index 7f9546a73d..f659f47139 100644
--- a/src/react-components/room/ChatSidebar.scss
+++ b/src/react-components/room/ChatSidebar.scss
@@ -29,7 +29,7 @@
 
 :local(.message-group-label) {
   color: theme.$darkgrey;
-  font-size: theme.$font-size-2xs;
+  font-size: theme.$font-size-xs;
   display: flex;
   margin: 2px;
 }
@@ -46,12 +46,16 @@
   padding: 10px 16px;
   max-width: 80%;
   width: max-content;
-  font-size: theme.$font-size-sm;
+  font-size: theme.$font-size-md;
 
   img, video {
     max-height: 240px;
     border-radius: 18px;
   }
+
+  a {
+    text-decoration: underline;
+  }
 }
 
 :local(.media) {
@@ -91,6 +95,18 @@
     background-color: theme.$blue;
     color: theme.$white;
     align-self: flex-end;
+
+    a {
+      color: theme.$white;
+
+      &:hover {
+        color: theme.$white-hover;
+      }
+
+      &:active {
+        color: theme.$white-pressed;
+      }
+    }
   }
 }
 
diff --git a/src/react-components/room/ChatSidebar.stories.js b/src/react-components/room/ChatSidebar.stories.js
index 6358b4f458..ec9b3fcf7b 100644
--- a/src/react-components/room/ChatSidebar.stories.js
+++ b/src/react-components/room/ChatSidebar.stories.js
@@ -62,6 +62,15 @@ export const Base = () => (
             timestamp={Date.now()}
             messages={[{ type: "chat", body: '`console.log("Hello World")`' }]}
           />
+          <ChatMessageGroup
+            sent
+            sender="Robert"
+            timestamp={Date.now()}
+            messages={[
+              { type: "chat", body: "https://mozilla.org" },
+              { type: "chat", body: "Test message with url. https://hubs.mozilla.com" }
+            ]}
+          />
         </ChatMessageList>
         <ChatInput
           afterInput={
diff --git a/src/react-components/styles/theme.scss b/src/react-components/styles/theme.scss
index 7d0945582c..c3fbc62193 100644
--- a/src/react-components/styles/theme.scss
+++ b/src/react-components/styles/theme.scss
@@ -55,10 +55,9 @@ $recessed-bg: #f9f9f9;
 
 $yellow: #FFC000;
 
-$font-size-2xs: 8px;
 $font-size-xs: 10px;
 $font-size-sm: 12px;
-$font-size-md: 16px;
+$font-size-md: 14px;
 $font-size-lg: 20px;
 $font-size-xl: 24px;