more minor improvements to embeded media

src/components/messaging/Embed.module.css

@@ -17,6 +17,7 @@ iframe {
 
 .embedImage {
 	cursor: pointer;
+	border-radius: 8px;
 }
 
 .website {
@@ -159,6 +160,7 @@ iframe {
 
 .embedThumbnail {
 	margin-left: 16px;
+	border-radius: 8px;
 }
 
 img.image {
@@ -170,3 +172,19 @@ img.image {
 a {
 	cursor: pointer;
 }
+
+.embedGifIcon {
+	position: absolute;
+	top: 5px;
+	left: 5px;
+}
+
+.embedGifIconBg {
+	position: absolute;
+	top: 8px;
+	left: 8px;
+	width: 18px;
+	height: 18px;
+	background: #000000;
+	border-radius: 4px;
+}

src/components/messaging/EmbedMedia.tsx

@@ -3,6 +3,7 @@
 
 import { APIEmbed, EmbedType } from "@spacebarchat/spacebar-api-types/v9";
 import { modalController } from "../../controllers/modals";
+import Icon from "../Icon";
 import styles from "./Embed.module.css";
 
 interface Props {
@@ -31,7 +32,7 @@ function EmbedMedia({ embed, width, height, thumbnail }: Props) {
 
 			return (
 				<iframe
-					style={{ borderRadius: "12px", width: "400px", height: "80px" }}
+					style={{ width: "400px", height: "80px", borderRadius: 12 }}
 					src={`https://open.spotify.com/embed/${type}/${id}`}
 					frameBorder="0"
 					allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
@@ -93,6 +94,7 @@ function EmbedMedia({ embed, width, height, thumbnail }: Props) {
 				const url = embed.video.url;
 
 				return (
+					<div>
 						<video
 							className={styles.embedImage}
 							style={{ width, height }}
@@ -109,6 +111,14 @@ function EmbedMedia({ embed, width, height, thumbnail }: Props) {
 								});
 							}}
 						/>
+
+						{embed.type === EmbedType.GIFV && (
+							<div>
+								<div className={styles.embedGifIconBg}></div>
+								<Icon icon="mdiFileGifBox" size={1} className={styles.embedGifIcon} />
+							</div>
+						)}
+					</div>
 				);
 			} else if (embed.image && !thumbnail) {
 				const url = embed.image.url;

src/components/messaging/MessageBase.tsx

@@ -16,8 +16,10 @@ export default styled.div<Props>`
 	overflow: none;
 	flex-direction: row;
 	${(props) => !props.header && "align-items: center;"}
-	${(props) => props.header && "margin-top: 20px;"}
+	${(props) => props.header && "margin-top: 10px;"}
 	${(props) => props.mention && "background-color: hsl(var(--warning-light-hsl)/0.1);"}
+	padding-top: 0.2rem;
+	padding-bottom: 0.2rem;
 
 	.message-details {
 		display: flex;