refactor: color int to css function (#18)

Author: JohnyTheCarrot

src/Content/Embed/index.tsx

@@ -2,7 +2,7 @@ import GifVEmbed from "./GifVEmbed";
 import ImageEmbed from "./ImageEmbed";
 import VideoAttachment from "../Attachment/VideoAttachment";
 import * as Styles from "./style";
-import numberToRgb from "../../utils/numberToRgb";
+import { colorIntToRgba } from "../../utils/colorIntToCss";
 import moment from "moment";
 import { LinkMarkdown, parseEmbedTitle } from "../../markdown/render";
 import useSize from "./useSize";
@@ -32,7 +32,7 @@ function Embed({ embed, images }: EmbedProps) {
 
   const embedColor =
     embed.color !== 0 && embed.color !== undefined
-      ? numberToRgb(embed.color)
+      ? colorIntToRgba(embed.color)
       : undefined;
 
   const { width: widthImage, height: heightImage } = useSize(

src/markdown/render/elements/mentions/roleMention.tsx

@@ -3,6 +3,7 @@ import * as React from "react";
 import type { Snowflake } from "discord-api-types/v10";
 import { useConfig } from "../../../../core/ConfigContext";
 import SimpleMarkdown from "simple-markdown";
+import { colorIntToRgba } from "../../../../utils/colorIntToCss";
 
 interface RoleMentionProps {
   roleId: Snowflake;
@@ -17,16 +18,12 @@ function RoleMention({ roleId }: RoleMentionProps) {
     return <>@deleted-role</>;
   }
 
-  const red = (role.color & 0xff_00_00) >> 16;
-  const green = (role.color & 0x00_ff_00) >> 8;
-  const blue = role.color & 0x00_00_ff;
-
   return (
     <Styles.Mention
       css={{
-        color: `rgb(${red}, ${green}, ${blue})`,
-        "--mention-color": `rgba(${red}, ${green}, ${blue}, 0.1)`,
-        "--mention-color-hover": `rgba(${red}, ${green}, ${blue}, 0.3)`,
+        color: colorIntToRgba(role.color),
+        "--mention-color": colorIntToRgba(role.color, 0.1),
+        "--mention-color-hover": colorIntToRgba(role.color, 0.3),
       }}
       onClick={() => roleMentionOnClick?.(role)}
       canBeClicked={roleMentionOnClick !== undefined}

src/utils/colorIntToCss.ts

@@ -0,0 +1,10 @@
+export function colorIntToRgba(
+  color: number,
+  alpha = 1
+): `rgba(${number}, ${number}, ${number}, ${number})` {
+  const r = (color >> 16) & 0xff;
+  const g = (color >> 8) & 0xff;
+  const b = color & 0xff;
+
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}