icons

2026-08-20 15:01:37 +10:00 · 2026-02-22 23:47:13 +00:00
parent 602aaeb641
commit 4664b6ac1d
6 changed files with 126 additions and 24 deletions
@@ -0,0 +1,28 @@
+import { rem } from '@mantine/core';
+
+interface Props {
+  size?: number | string;
+}
+
+export function GoogleDocsIcon({ size }: Props) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 47 65"
+      style={{ width: rem(size), height: rem(size) }}
+    >
+      <path
+        fill="#4285F4"
+        d="M29.375 0H4.406C1.983 0 0 1.994 0 4.432v56.136C0 63.006 1.983 65 4.406 65h38.188C45.017 65 47 63.006 47 60.568v-42.84L36.719 10.34z"
+      />
+      <path
+        fill="#A1C2FA"
+        d="M29.375 0v13.295c0 2.449 1.972 4.432 4.406 4.432H47z"
+      />
+      <path
+        fill="#F1F1F1"
+        d="M11.75 47.273h23.5v-2.955h-23.5zm0 5.909h17.625v-2.955H11.75zm0-20.682v2.955h23.5V32.5zm0 8.864h23.5v-2.955h-23.5z"
+      />
+    </svg>
+  );
+}
@@ -1,10 +1,13 @@
 export { AirtableIcon } from "./airtable-icon.tsx";
 export { FigmaIcon } from "./figma-icon.tsx";
+export { GoogleDocsIcon } from "./google-docs-icon.tsx";
+export { GoogleDriveIcon } from "./google-drive-icon.tsx";
+export { GoogleSheetsIcon } from "./google-sheets-icon.tsx";
+export { JiraIcon } from "./jira-icon.tsx";
+export { LinearIcon } from "./linear-icon.tsx";
 export { TypeformIcon } from "./typeform-icon.tsx";
 export { VimeoIcon } from "./vimeo-icon.tsx";
 export { MiroIcon } from "./miro-icon.tsx";
-export { GoogleDriveIcon } from "./google-drive-icon.tsx";
-export { GoogleSheetsIcon } from "./google-sheets-icon.tsx";
 export { FramerIcon } from "./framer-icon.tsx";
 export { LoomIcon } from "./loom-icon.tsx";
 export { YoutubeIcon } from "./youtube-icon.tsx";
@@ -0,0 +1,38 @@
+import { rem } from '@mantine/core';
+
+interface Props {
+  size?: number | string;
+}
+
+export function JiraIcon({ size }: Props) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 512 512"
+      style={{ width: rem(size), height: rem(size) }}
+    >
+      <defs>
+        <linearGradient id="jira-a" x1="380.896" x2="279.145" y1="390.609" y2="282.574" gradientTransform="matrix(1 0 0 -1 0 514)" gradientUnits="userSpaceOnUse">
+          <stop offset=".176" stopColor="#0052cc" />
+          <stop offset="1" stopColor="#2684ff" />
+        </linearGradient>
+        <linearGradient id="jira-b" x1="265.965" x2="148.117" y1="270.661" y2="152.607" gradientTransform="matrix(1 0 0 -1 0 514)" gradientUnits="userSpaceOnUse">
+          <stop offset=".176" stopColor="#0052cc" />
+          <stop offset="1" stopColor="#2684ff" />
+        </linearGradient>
+      </defs>
+      <path
+        fill="#2684ff"
+        d="M490.6 7.4H243.9c0 59.6 49.9 108 111.2 108h45.6v42.2c0 59.6 49.9 108 111.2 108V28.1c.1-11.7-9.2-20.7-21.3-20.7"
+      />
+      <path
+        fill="url(#jira-a)"
+        d="M368.7 126.5H121.9c0 59.6 49.9 108 111.2 108h45.6v42.9c0 59.6 49.9 108 111.2 108V147.3c.2-11.1-9.1-20.8-21.2-20.8"
+      />
+      <path
+        fill="url(#jira-b)"
+        d="M246.7 246.3H0c0 59.6 49.9 108 111.2 108h45.6v42.2c0 59.6 49.9 108 111.2 108V267.1c.1-11.8-9.9-20.8-21.3-20.8"
+      />
+    </svg>
+  );
+}
@@ -0,0 +1,21 @@
+import { rem } from '@mantine/core';
+
+interface Props {
+  size?: number | string;
+}
+
+export function LinearIcon({ size }: Props) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 100 100"
+      style={{ width: rem(size), height: rem(size) }}
+    >
+      <path
+        fill="currentColor"
+        d="M1.22541 61.5228c-.2225-.9485.90748-1.5459 1.59638-.857L39.3342 97.1782c.6889.6889.0915 1.8189-.857 1.5964C20.0515 94.4522 5.54779 79.9485 1.22541 61.5228ZM.00189135 46.8891c-.01764375.2833.08887215.5599.28957165.7606L52.3503 99.7085c.2007.2007.4773.3075.7606.2896 2.3692-.1476 4.6938-.46 6.9624-.9259.7645-.157 1.0301-1.0963.4782-1.6481L2.57595 39.4485c-.55186-.5519-1.49117-.2863-1.648174.4782-.465915 2.2686-.77832 4.5932-.92588465 6.9624ZM4.21093 29.7054c-.16649.3738-.08169.8106.20765 1.1l64.77602 64.776c.2894.2894.7262.3742 1.1.2077 1.7861-.7956 3.5171-1.6927 5.1855-2.684.5521-.328.6373-1.0867.1832-1.5407L8.43566 24.3367c-.45409-.4541-1.21271-.3689-1.54074.1832-.99132 1.6684-1.88843 3.3994-2.68399 5.1855ZM12.6587 18.074c-.3701-.3701-.393-.9637-.0443-1.3541C21.7795 6.45931 35.1114 0 49.9519 0 77.5927 0 100 22.4073 100 50.0481c0 14.8405-6.4593 28.1724-16.7199 37.3375-.3903.3487-.984.3258-1.3542-.0443L12.6587 18.074Z"
+      />
+    </svg>
+  );
+}
@@ -1,10 +1,14 @@
 .card {
  max-width: 100%;
  cursor: pointer;
-  transition: border-color 150ms ease;
+  transition: background-color 150ms ease;
  margin: 4px 0;
 }

 .card:hover {
-  border-color: var(--mantine-color-blue-4);
+  background-color: var(--mantine-color-gray-0);
+}
+
+:global([data-mantine-color-scheme="dark"]) .card:hover {
+  background-color: var(--mantine-color-dark-5);
 }
@@ -9,7 +9,14 @@ import {
  Anchor,
  Stack,
 } from "@mantine/core";
-import { useEffect, useCallback, memo } from "react";
+import { useEffect, useCallback, memo, type ReactNode } from "react";
+import { IconBrandGithub, IconBrandGitlab } from "@tabler/icons-react";
+import {
+  FigmaIcon,
+  LinearIcon,
+  JiraIcon,
+  GoogleDocsIcon,
+} from "@/components/icons";
 import { unfurlUrl } from "@/features/integration/services/integration-service";
 import classes from "./integration-link-view.module.css";

@@ -35,13 +42,13 @@ function toBadgeColor(raw?: string): string {
  return raw;
 }

-const providerIcons: Record<string, string> = {
-  github: "https://github.githubassets.com/favicons/favicon-dark.svg",
-  gitlab: "https://gitlab.com/assets/favicon-72a2cad5025aa931d6ea56c3201d1f18e68a8571da3c2571592f63571e0c5571.png",
-  jira: "https://wac-cdn.atlassian.com/assets/img/favicons/atlassian/favicon.png",
-  linear: "https://linear.app/favicon.ico",
-  google_docs: "https://ssl.gstatic.com/docs/documents/images/kix-favicon7.ico",
-  figma: "https://static.figma.com/app/icon/1/favicon.png",
+const providerIcons: Record<string, (size: number) => ReactNode> = {
+  github: (size) => <IconBrandGithub size={size} stroke={1.5} />,
+  gitlab: (size) => <IconBrandGitlab size={size} stroke={1.5} />,
+  figma: (size) => <FigmaIcon size={size} />,
+  linear: (size) => <LinearIcon size={size} />,
+  jira: (size) => <JiraIcon size={size} />,
+  google_docs: (size) => <GoogleDocsIcon size={size} />,
 };

 function IntegrationLinkView(props: any) {
@@ -100,7 +107,7 @@ function IntegrationLinkView(props: any) {
    );
  }

-  const iconUrl = providerIcons[provider] ?? undefined;
+  const renderIcon = providerIcons[provider];

  return (
    <NodeViewWrapper data-drag-handle="">
@@ -117,9 +124,9 @@ function IntegrationLinkView(props: any) {
      >
        <Group gap="sm" wrap="nowrap">
          {unfurlData.authorAvatarUrl ? (
-            <Avatar src={unfurlData.authorAvatarUrl} size={28} radius="xl" />
-          ) : iconUrl ? (
-            <Avatar src={iconUrl} size={28} radius="sm" />
+            <Avatar src={unfurlData.authorAvatarUrl} size={28} radius="xl" style={{ flexShrink: 0 }} />
+          ) : renderIcon ? (
+            <div style={{ flexShrink: 0 }}>{renderIcon(28)}</div>
          ) : null}

          <Stack gap={2} style={{ flex: 1, minWidth: 0 }}>
@@ -140,16 +147,17 @@ function IntegrationLinkView(props: any) {
            </Group>

            {unfurlData.description && (
-              <Group gap={6} wrap="nowrap">
-                {iconUrl && (
-                  <Avatar src={iconUrl} size={14} radius="sm" style={{ flexShrink: 0 }} />
-                )}
-                <Text size="xs" c="dimmed" lineClamp={1}>
-                  {unfurlData.description}
-                </Text>
-              </Group>
+              <Text size="xs" c="dimmed" lineClamp={1}>
+                {unfurlData.description}
+              </Text>
            )}
          </Stack>
+
+          {renderIcon && (
+            <div style={{ flexShrink: 0, alignSelf: "center" }}>
+              {renderIcon(18)}
+            </div>
+          )}
        </Group>
      </Card>
    </NodeViewWrapper>