fix: update highlighted mention styling

This was a looooong time coming
skyra-project · Jul 7, 2020 · 98e4827 · 98e4827
1 parent 2e6007f
commit 98e4827
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 15 deletions.
diff --git a/packages/core/src/components/discord-mention/discord-mention.css b/packages/core/src/components/discord-mention/discord-mention.css
@@ -11,33 +11,47 @@
 	background-color: rgba(114, 137, 218, 0.7);
 }
 
-.discord-message .discord-message-body.discord-highlight-mention {
+.discord-message.discord-highlight-mention {
 	background-color: rgba(250, 166, 26, 0.1);
 	border-radius: 0 3px 3px 0;
 	margin-left: -3px;
 	padding-left: 3px;
 	padding-right: 5px;
+	position: relative;
+	background-color: rgba(250, 166, 26, 0.05);
 }
 
-.discord-message .discord-message-body.discord-message-body.discord-highlight-mention::before {
-	content: " ";
+.discord-light-theme .discord-message.discord-highlight-mention {
+	background-color: rgba(250, 166, 26, 0.1);
+}
+
+.discord-message.discord-highlight-mention:hover {
+	background-color: rgba(250, 166, 26, 0.08);
+}
+
+.discord-light-theme .discord-message.discord-highlight-mention:hover {
 	background-color: rgba(250, 166, 26, 0.2);
-	position: absolute;
+}
+
+.discord-message.discord-highlight-mention::before {
+	background-color: #faa61a;
+	content: ' ';
+	position: relative;
+	display: block;
 	top: 0;
-	left: -6px;
+	left: -0.25rem;
 	bottom: 0;
+	pointer-events: none;
 	width: 2px;
-	border-left: 4px solid #faa61a;
-	border-radius: 3px 0 0 3px;
 }
 
-.discord-message .discord-message-body.discord-highlight-mention .discord-mention:not(.discord-channel-mention) {
+.discord-message.discord-highlight-mention .discord-mention:not(.discord-channel-mention) {
 	background-color: unset !important;
 	padding: 0;
 	border-radius: 0;
 }
 
-.discord-message .discord-message-body.discord-highlight-mention .discord-mention:not(.discord-channel-mention):hover {
+.discord-message.discord-highlight-mention .discord-mention:not(.discord-channel-mention):hover {
 	color: #7289da;
 	text-decoration: underline;
 }
diff --git a/packages/core/src/components/discord-message/discord-message.css b/packages/core/src/components/discord-message/discord-message.css
@@ -2,8 +2,43 @@
 	color: #dcddde;
 	display: flex;
 	font-size: 0.9em;
-	padding: 1em 0.5em;
-	border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+	padding: 0px 0.5em;
+
+	position: relative;
+	word-wrap: break-word;
+	-webkit-user-select: text;
+	-moz-user-select: text;
+	-ms-user-select: text;
+	user-select: text;
+	-webkit-box-flex: 0;
+	-ms-flex: 0 0 auto;
+	flex: 0 0 auto;
+	padding-right: 16px;
+	min-height: 1.375rem;
+	padding-top: 0.125rem;
+	padding-bottom: 0.125rem;
+	padding-right: 48px !important;
+	margin-top: 1.0625rem;
+}
+
+.discord-message.discord-message-highlight {
+	background-color: rgba(250, 166, 26, 0.05);
+}
+
+.discord-message.discord-message-highlight:hover {
+	background-color: rgba(250, 166, 26, 0.08);
+}
+
+.discord-message.discord-message-highlight::before {
+	background-color: #faa61a;
+	content: '';
+	position: absolute;
+	display: block;
+	top: 0;
+	left: 0;
+	bottom: 0;
+	pointer-events: none;
+	width: 2px;
 }
 
 .discord-light-theme .discord-message {
@@ -34,8 +69,8 @@
 }
 
 .discord-message .discord-author-avatar {
-	margin-top: 1px;
 	margin-right: 16px;
+	margin-top: 1px;
 	min-width: 40px;
 }
 
@@ -95,7 +130,7 @@
 }
 
 .discord-message:hover {
-	background-color: rgba(4,4,5,0.07);
+	background-color: rgba(4, 4, 5, 0.07);
 }
 
 @import '../author-info/author-info.css';
diff --git a/packages/core/src/components/discord-message/discord-message.tsx b/packages/core/src/components/discord-message/discord-message.tsx
@@ -84,7 +84,7 @@ export class DiscordMessage implements ComponentWillLoad, ComponentInterface {
 		});
 
 		return (
-			<Host class="discord-message row">
+			<Host class={clsx('discord-message row', { 'discord-highlight-mention': highlightMention })}>
 				<div class="discord-author-avatar">
 					<img src={profile.avatar} alt={profile.author} />
 				</div>
@@ -100,7 +100,7 @@ export class DiscordMessage implements ComponentWillLoad, ComponentInterface {
 							<span class="discord-message-timestamp">{this.timestamp}</span>
 						</Fragment>
 					)}
-					<div class={clsx({ 'discord-highlight-mention': highlightMention }, 'discord-message-body')}>
+					<div class="discord-message-body">
 						{parent.compactMode && (
 							<Fragment>
 								<span class="discord-message-timestamp">{this.timestamp}</span>