UI

apps/client/src/components/icons/github-icon.tsx

@@ -0,0 +1,22 @@
+import { rem } from '@mantine/core';
+
+interface Props {
+  size?: number | string;
+}
+
+export function GithubIcon({ size }: Props) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 512 512"
+      style={{ width: rem(size), height: rem(size) }}
+    >
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M256 6.3C114.6 6.3 0 120.9 0 262.3c0 113.3 73.3 209 175 242.9 12.8 2.2 17.6-5.4 17.6-12.2 0-6.1-.3-26.2-.3-47.7-64.3 11.8-81-15.7-86.1-30.1-2.9-7.4-15.4-30.1-26.2-36.2-9-4.8-21.8-16.6-.3-17 20.2-.3 34.6 18.6 39.4 26.2 23 38.7 59.8 27.8 74.6 21.1 2.2-16.6 9-27.8 16.3-34.2-57-6.4-116.5-28.5-116.5-126.4 0-27.8 9.9-50.9 26.2-68.8-2.6-6.4-11.5-32.6 2.6-67.8 0 0 21.4-6.7 70.4 26.2 20.5-5.8 42.2-8.6 64-8.6s43.5 2.9 64 8.6c49-33.3 70.4-26.2 70.4-26.2 14.1 35.2 5.1 61.4 2.6 67.8 16.3 17.9 26.2 40.6 26.2 68.8 0 98.2-59.8 120-116.8 126.4 9.3 8 17.3 23.4 17.3 47.4 0 34.2-.3 61.8-.3 70.4 0 6.7 4.8 14.7 17.6 12.2C438.7 471.3 512 375.3 512 262.3c0-141.4-114.6-256-256-256"
+      />
+    </svg>
+  );
+}

apps/client/src/components/icons/gitlab-icon.tsx

@@ -0,0 +1,32 @@
+import { rem } from '@mantine/core';
+
+interface Props {
+  size?: number | string;
+}
+
+export function GitlabIcon({ size }: Props) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="93.97 97.52 192.05 184.99"
+      style={{ width: rem(size), height: rem(size) }}
+    >
+      <path
+        fill="#e24329"
+        d="m282.83 170.73-.27-.69-26.14-68.22a6.8 6.8 0 0 0-2.69-3.24 7 7 0 0 0-8 .43 7 7 0 0 0-2.32 3.52l-17.65 54h-71.47l-17.65-54a6.86 6.86 0 0 0-2.32-3.53 7 7 0 0 0-8-.43 6.87 6.87 0 0 0-2.69 3.24L97.44 170l-.26.69a48.54 48.54 0 0 0 16.1 56.1l.09.07.24.17 39.82 29.82 19.7 14.91 12 9.06a8.07 8.07 0 0 0 9.76 0l12-9.06 19.7-14.91 40.06-30 .1-.08a48.56 48.56 0 0 0 16.08-56.04"
+      />
+      <path
+        fill="#fc6d26"
+        d="m282.83 170.73-.27-.69a88.3 88.3 0 0 0-35.15 15.8L190 229.25c19.55 14.79 36.57 27.64 36.57 27.64l40.06-30 .1-.08a48.56 48.56 0 0 0 16.1-56.08"
+      />
+      <path
+        fill="#fca326"
+        d="m153.43 256.89 19.7 14.91 12 9.06a8.07 8.07 0 0 0 9.76 0l12-9.06 19.7-14.91S209.55 244 190 229.25c-19.55 14.75-36.57 27.64-36.57 27.64"
+      />
+      <path
+        fill="#fc6d26"
+        d="M132.58 185.84A88.2 88.2 0 0 0 97.44 170l-.26.69a48.54 48.54 0 0 0 16.1 56.1l.09.07.24.17 39.82 29.82L190 229.21Z"
+      />
+    </svg>
+  );
+}

apps/client/src/components/icons/index.ts

@@ -1,5 +1,7 @@
 export { AirtableIcon } from "./airtable-icon.tsx";
 export { FigmaIcon } from "./figma-icon.tsx";
+export { GithubIcon } from "./github-icon.tsx";
+export { GitlabIcon } from "./gitlab-icon.tsx";
 export { GoogleDocsIcon } from "./google-docs-icon.tsx";
 export { GoogleDriveIcon } from "./google-drive-icon.tsx";
 export { GoogleSheetsIcon } from "./google-sheets-icon.tsx";

apps/client/src/components/icons/miro-icon.tsx

@@ -8,11 +8,20 @@ export function MiroIcon({ size }: Props) {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 24 24"
+      fill="none"
+      viewBox="3 2 395 395"
       style={{ width: rem(size), height: rem(size) }}
     >
       <path
-        d="M17.392 0H13.9L17 4.808 10.444 0H6.949l3.102 6.3L3.494 0H0l3.05 8.131L0 24h3.494L10.05 6.985 6.949 24h3.494L17 5.494 13.899 24h3.493L24 3.672 17.392 0z" />
+        fill="#FFDD33"
+        d="M3 100.754C3 46.2604 47.2435 2 101.754 2H299.246C353.756 2 398 46.2435 398 100.754V298.246C398 352.756 353.756 397 299.246 397H101.754C47.2435 397 3 352.756 3 298.246V100.754Z"
+      />
+      <path
+        fill="#1C1C1E"
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M265.573 77.3491H229.74L259.629 129.85L193.906 77.3491H158.072L190.934 141.468L122.238 77.3491H86.4041L122.238 159.031L86.4041 322.377H122.238L190.934 147.396L158.072 322.377H193.906L259.629 135.693L229.74 322.377H265.573L331.297 118.232L265.573 77.4335V77.3491Z"
+      />
     </svg>
   );
 }

apps/client/src/features/editor/components/integration-link/integration-link-view.tsx

@@ -10,12 +10,13 @@ import {
   Stack,
 } from "@mantine/core";
 import { useEffect, useCallback, memo, type ReactNode } from "react";
-import { IconBrandGithub, IconBrandGitlab } from "@tabler/icons-react";
 import {
   FigmaIcon,
-  LinearIcon,
-  JiraIcon,
+  GithubIcon,
+  GitlabIcon,
   GoogleDocsIcon,
+  JiraIcon,
+  LinearIcon,
 } from "@/components/icons";
 import { unfurlUrl } from "@/features/integration/services/integration-service";
 import classes from "./integration-link-view.module.css";
@@ -43,8 +44,8 @@ function toBadgeColor(raw?: string): string {
 }
 
 const providerIcons: Record<string, (size: number) => ReactNode> = {
-  github: (size) => <IconBrandGithub size={size} stroke={1.5} />,
-  gitlab: (size) => <IconBrandGitlab size={size} stroke={1.5} />,
+  github: (size) => <GithubIcon size={size} />,
+  gitlab: (size) => <GitlabIcon size={size} />,
   figma: (size) => <FigmaIcon size={size} />,
   linear: (size) => <LinearIcon size={size} />,
   jira: (size) => <JiraIcon size={size} />,