Github integration (#6414)

Co-authored-by: Tom Moor <tom.moor@gmail.com>

app/components/HoverPreview/Components.tsx

@@ -2,6 +2,7 @@ import { transparentize } from "polished";
 import { Link } from "react-router-dom";
 import styled, { css } from "styled-components";
 import { s } from "@shared/styles";
+import { getTextColor } from "@shared/utils/color";
 import Text from "~/components/Text";
 
 export const CARD_MARGIN = 10;
@@ -28,10 +29,12 @@ export const Preview = styled(Link)`
   max-width: 375px;
 `;
 
-export const Title = styled.h2`
-  font-size: 1.25em;
-  margin: 0;
-  color: ${s("text")};
+export const Title = styled(Text).attrs({ as: "h2", size: "large" })`
+  margin-bottom: 4px;
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-start;
+  gap: 4px;
 `;
 
 export const Info = styled(StyledText).attrs(() => ({
@@ -46,6 +49,7 @@ export const Description = styled(StyledText)`
   margin-top: 0.5em;
   line-height: var(--line-height);
   max-height: calc(var(--line-height) * ${NUMBER_OF_LINES});
+  overflow: hidden;
 `;
 
 export const Thumbnail = styled.img`
@@ -54,6 +58,20 @@ export const Thumbnail = styled.img`
   background: ${s("menuBackground")};
 `;
 
+export const Label = styled(Text).attrs({ size: "xsmall", weight: "bold" })<{
+  color?: string;
+}>`
+  background-color: ${(props) =>
+    props.color ?? props.theme.secondaryBackground};
+  color: ${(props) =>
+    props.color ? getTextColor(props.color) : props.theme.text};
+  width: fit-content;
+  border-radius: 2em;
+  padding: 0 8px;
+  margin-right: 0.5em;
+  margin-top: 0.5em;
+`;
+
 export const CardContent = styled.div`
   overflow: hidden;
   user-select: none;