From d6b51f3053a7b5bc2c0070b97e10652d65f85475 Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Tue, 11 Apr 2023 22:41:05 -0400
Subject: [PATCH] fix: Tweak mention style in comments to be more visible

---
 app/scenes/Document/components/CommentThreadItem.tsx | 5 +++++
 server/models/decorators/Deprecated.ts               | 4 ++--
 shared/editor/components/Styles.ts                   | 4 ++--
 3 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/app/scenes/Document/components/CommentThreadItem.tsx b/app/scenes/Document/components/CommentThreadItem.tsx
index 88751c7b7..e88f788e2 100644
--- a/app/scenes/Document/components/CommentThreadItem.tsx
+++ b/app/scenes/Document/components/CommentThreadItem.tsx
@@ -1,6 +1,7 @@
 import { differenceInMilliseconds, formatDistanceToNow } from "date-fns";
 import { toJS } from "mobx";
 import { observer } from "mobx-react";
+import { darken } from "polished";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import styled, { css } from "styled-components";
@@ -197,6 +198,10 @@ const StyledCommentEditor = styled(CommentEditor)`
       margin: 2px;
       margin-bottom: 8px;
     `}
+
+  .mention {
+    background: ${(props) => darken(0.05, props.theme.mentionBackground)};
+  }
 `;
 
 const AvatarSpacer = styled(Flex)`
diff --git a/server/models/decorators/Deprecated.ts b/server/models/decorators/Deprecated.ts
index 68f6c64f3..b4a899549 100644
--- a/server/models/decorators/Deprecated.ts
+++ b/server/models/decorators/Deprecated.ts
@@ -1,12 +1,12 @@
 /* eslint-disable @typescript-eslint/ban-types */
-import Logger from "@server/logging/Logger";
 
 const Deprecated = (message?: string) => (
   target: Object,
   propertyKey: string
 ) => {
   if (process.env[propertyKey]) {
-    Logger.warn(
+    // eslint-disable-next-line no-console
+    console.warn(
       `The environment variable ${propertyKey} is deprecated and will be removed in a future release. ${message}`
     );
   }
diff --git a/shared/editor/components/Styles.ts b/shared/editor/components/Styles.ts
index 63e083187..fdcfd4e50 100644
--- a/shared/editor/components/Styles.ts
+++ b/shared/editor/components/Styles.ts
@@ -117,13 +117,13 @@ width: 100%;
 
 .mention {
   background: ${props.theme.mentionBackground};
-  border-radius: 12px;
+  border-radius: 8px;
   padding-bottom: 2px;
   padding-top: 1px;
   padding-left: 4px;
   padding-right: 4px;
   font-weight: 500;
-  font-size: 14px;
+  font-size: 0.9em;
 }
 
 > div {