From 4664b6ac1d71e4b755538af12e0cfbfd8804ad4f Mon Sep 17 00:00:00 2001
From: Philipinho <16838612+Philipinho@users.noreply.github.com>
Date: Sun, 22 Feb 2026 23:47:13 +0000
Subject: [PATCH] icons
---
.../src/components/icons/google-docs-icon.tsx | 28 +++++++++++
apps/client/src/components/icons/index.ts | 7 ++-
.../client/src/components/icons/jira-icon.tsx | 38 +++++++++++++++
.../src/components/icons/linear-icon.tsx | 21 ++++++++
.../integration-link-view.module.css | 8 +++-
.../integration-link-view.tsx | 48 +++++++++++--------
6 files changed, 126 insertions(+), 24 deletions(-)
create mode 100644 apps/client/src/components/icons/google-docs-icon.tsx
create mode 100644 apps/client/src/components/icons/jira-icon.tsx
create mode 100644 apps/client/src/components/icons/linear-icon.tsx
diff --git a/apps/client/src/components/icons/google-docs-icon.tsx b/apps/client/src/components/icons/google-docs-icon.tsx
new file mode 100644
index 000000000..e7e32c0c0
--- /dev/null
+++ b/apps/client/src/components/icons/google-docs-icon.tsx
@@ -0,0 +1,28 @@
+import { rem } from '@mantine/core';
+
+interface Props {
+ size?: number | string;
+}
+
+export function GoogleDocsIcon({ size }: Props) {
+ return (
+
+ );
+}
diff --git a/apps/client/src/components/icons/index.ts b/apps/client/src/components/icons/index.ts
index 0f5fd1ad7..3a5e45507 100644
--- a/apps/client/src/components/icons/index.ts
+++ b/apps/client/src/components/icons/index.ts
@@ -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";
diff --git a/apps/client/src/components/icons/jira-icon.tsx b/apps/client/src/components/icons/jira-icon.tsx
new file mode 100644
index 000000000..c7164c14e
--- /dev/null
+++ b/apps/client/src/components/icons/jira-icon.tsx
@@ -0,0 +1,38 @@
+import { rem } from '@mantine/core';
+
+interface Props {
+ size?: number | string;
+}
+
+export function JiraIcon({ size }: Props) {
+ return (
+
+ );
+}
diff --git a/apps/client/src/components/icons/linear-icon.tsx b/apps/client/src/components/icons/linear-icon.tsx
new file mode 100644
index 000000000..b44ecce7b
--- /dev/null
+++ b/apps/client/src/components/icons/linear-icon.tsx
@@ -0,0 +1,21 @@
+import { rem } from '@mantine/core';
+
+interface Props {
+ size?: number | string;
+}
+
+export function LinearIcon({ size }: Props) {
+ return (
+
+ );
+}
diff --git a/apps/client/src/features/editor/components/integration-link/integration-link-view.module.css b/apps/client/src/features/editor/components/integration-link/integration-link-view.module.css
index 5061c3df1..f841d4dff 100644
--- a/apps/client/src/features/editor/components/integration-link/integration-link-view.module.css
+++ b/apps/client/src/features/editor/components/integration-link/integration-link-view.module.css
@@ -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);
}
diff --git a/apps/client/src/features/editor/components/integration-link/integration-link-view.tsx b/apps/client/src/features/editor/components/integration-link/integration-link-view.tsx
index 8ae501086..80d7fc5a7 100644
--- a/apps/client/src/features/editor/components/integration-link/integration-link-view.tsx
+++ b/apps/client/src/features/editor/components/integration-link/integration-link-view.tsx
@@ -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 = {
- 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 ReactNode> = {
+ github: (size) => ,
+ gitlab: (size) => ,
+ figma: (size) => ,
+ linear: (size) => ,
+ jira: (size) => ,
+ google_docs: (size) => ,
};
function IntegrationLinkView(props: any) {
@@ -100,7 +107,7 @@ function IntegrationLinkView(props: any) {
);
}
- const iconUrl = providerIcons[provider] ?? undefined;
+ const renderIcon = providerIcons[provider];
return (
@@ -117,9 +124,9 @@ function IntegrationLinkView(props: any) {
>
{unfurlData.authorAvatarUrl ? (
-
- ) : iconUrl ? (
-
+
+ ) : renderIcon ? (
+ {renderIcon(28)}
) : null}
@@ -140,16 +147,17 @@ function IntegrationLinkView(props: any) {
{unfurlData.description && (
-
- {iconUrl && (
-
- )}
-
- {unfurlData.description}
-
-
+
+ {unfurlData.description}
+
)}
+
+ {renderIcon && (
+
+ {renderIcon(18)}
+
+ )}