fix(web): add Gmail connector logo (#1428)

Co-authored-by: Vorflux AI <249966464+vorflux[bot]@users.noreply.github.com>

.github/workflows/claude-code-review.yml

@@ -38,6 +38,7 @@ jobs:
         uses: anthropics/claude-code-action@v1
         with:
           claude_code_oauth_token: ${{ secrets.CLAUDE_CODE_OAUTH_TOKEN }}
+          allowed_bots: "vorflux[bot]"
 
           # Enable progress tracking
           track_progress: true

apps/web/components/brain-connector-icons.tsx

@@ -1,5 +1,5 @@
 import { cn } from "@lib/utils"
-import { Granola, Notion } from "@ui/assets/icons"
+import { Gmail, Granola, Notion } from "@ui/assets/icons"
 import { dmSans125ClassName } from "@/lib/fonts"
 
 export function SlackMark({ className }: { className?: string }) {
@@ -99,6 +99,8 @@ export function brainConnectorIcon(
 	className = "size-[18px]",
 ): React.ReactNode {
 	switch (slug) {
+		case "gmail":
+			return <Gmail className={className} />
 		case "github":
 			return <GithubMark className={cn(className, "text-[#FAFAFA]")} />
 		case "linear":

apps/web/components/brain-home/widgets.tsx

@@ -2,7 +2,7 @@
 
 import { cn } from "@lib/utils"
 import { dmSans125ClassName } from "@/lib/fonts"
-import { GoogleDrive, Notion } from "@ui/assets/icons"
+import { Gmail, GoogleDrive, Notion } from "@ui/assets/icons"
 import {
 	AlertCircle,
 	ArrowRight,
@@ -34,38 +34,6 @@ import {
 	type Stat,
 } from "./data"
 
-function GmailIcon({ className }: { className?: string }) {
-	return (
-		<svg
-			className={className}
-			viewBox="0 0 256 193"
-			xmlns="http://www.w3.org/2000/svg"
-			aria-hidden="true"
-		>
-			<path
-				d="M58.182 192.05V93.14L27.507 65.077 0 49.504v125.091c0 9.658 7.825 17.455 17.455 17.455z"
-				fill="#4285F4"
-			/>
-			<path
-				d="M197.818 192.05h40.727c9.659 0 17.455-7.826 17.455-17.455V49.505l-31.156 17.837-27.026 25.798z"
-				fill="#34A853"
-			/>
-			<path
-				d="m58.182 93.14-4.174-38.647 4.174-36.989L128 69.868l69.818-52.364 4.668 33.95-4.668 41.685L128 145.504z"
-				fill="#EA4335"
-			/>
-			<path
-				d="M197.818 17.504V93.14L256 49.504V26.231c0-21.585-24.64-33.89-41.89-20.945z"
-				fill="#FBBC04"
-			/>
-			<path
-				d="m0 49.504 26.759 20.07L58.182 93.14V17.504L41.89 5.286C24.61-7.66 0 4.646 0 26.23z"
-				fill="#C5221F"
-			/>
-		</svg>
-	)
-}
-
 export const modalCardStyle = {
 	boxShadow:
 		"0 2.842px 14.211px 0 rgba(0, 0, 0, 0.25), 0.711px 0.711px 0.711px 0 rgba(255, 255, 255, 0.10) inset",
@@ -495,7 +463,7 @@ export function Quotation({ children }: { children: React.ReactNode }) {
 function connectedSourceIcon(key: ConnectedSource["iconKey"]) {
 	if (key === "drive") return <GoogleDrive className="size-4" />
 	if (key === "notion") return <Notion className="size-4" />
-	if (key === "gmail") return <GmailIcon className="size-4" />
+	if (key === "gmail") return <Gmail className="size-4" />
 	if (key === "github") return <Github className="size-4 text-[#fafafa]" />
 	return <FileText className="size-4 text-[#8B8B8B]" />
 }

apps/web/components/onboarding-brain/step-sources.tsx

@@ -6,7 +6,7 @@ import { useQueryState } from "nuqs"
 import Image from "next/image"
 import { Button } from "@ui/components/button"
 import { Dialog, DialogClose, DialogContent } from "@ui/components/dialog"
-import { GoogleDrive, Granola, Notion, OneDrive } from "@ui/assets/icons"
+import { Gmail, GoogleDrive, Granola, Notion, OneDrive } from "@ui/assets/icons"
 import {
 	Select,
 	SelectContent,
@@ -61,37 +61,6 @@ function GrokIcon({ className }: { className?: string }) {
 	)
 }
 
-function GmailIcon({ className }: { className?: string }) {
-	return (
-		<svg
-			className={className}
-			viewBox="0 0 256 193"
-			xmlns="http://www.w3.org/2000/svg"
-			aria-hidden="true"
-		>
-			<path
-				d="M58.182 192.05V93.14L27.507 65.077 0 49.504v125.091c0 9.658 7.825 17.455 17.455 17.455z"
-				fill="#4285F4"
-			/>
-			<path
-				d="M197.818 192.05h40.727c9.659 0 17.455-7.826 17.455-17.455V49.505l-31.156 17.837-27.026 25.798z"
-				fill="#34A853"
-			/>
-			<path
-				d="m58.182 93.14-4.174-38.647 4.174-36.989L128 69.868l69.818-52.364 4.668 33.95-4.668 41.685L128 145.504z"
-				fill="#EA4335"
-			/>
-			<path
-				d="M197.818 17.504V93.14L256 49.504V26.231c0-21.585-24.64-33.89-41.89-20.945z"
-				fill="#FBBC04"
-			/>
-			<path
-				d="m0 49.504 26.759 20.07L58.182 93.14V17.504L41.89 5.286C24.61-7.66 0 4.646 0 26.23z"
-				fill="#C5221F"
-			/>
-		</svg>
-	)
-}
 import { cn } from "@lib/utils"
 import {
 	PLAN_DISPLAY_NAMES,
@@ -1198,7 +1167,7 @@ function MoreSourcesGrid({
 			<SourceCard
 				title="Gmail"
 				blurb="Inbox threads, decisions, customer conversations."
-				icon={<GmailIcon className="size-6" />}
+				icon={<Gmail className="size-6" />}
 				state={values.connected.gmail ?? "idle"}
 				ctaLabel="Connect"
 				locked={isLocked("max")}

packages/ui/assets/icons.tsx

@@ -58,6 +58,36 @@ export const GoogleDrive = ({ className }: { className?: string }) => (
 	</svg>
 )
 
+export const Gmail = ({ className }: { className?: string }) => (
+	<svg
+		className={className}
+		viewBox="0 0 256 193"
+		xmlns="http://www.w3.org/2000/svg"
+		aria-hidden="true"
+	>
+		<path
+			d="M58.182 192.05V93.14L27.507 65.077 0 49.504v125.091c0 9.658 7.825 17.455 17.455 17.455z"
+			fill="#4285F4"
+		/>
+		<path
+			d="M197.818 192.05h40.727c9.659 0 17.455-7.826 17.455-17.455V49.505l-31.156 17.837-27.026 25.798z"
+			fill="#34A853"
+		/>
+		<path
+			d="m58.182 93.14-4.174-38.647 4.174-36.989L128 69.868l69.818-52.364 4.668 33.95-4.668 41.685L128 145.504z"
+			fill="#EA4335"
+		/>
+		<path
+			d="M197.818 17.504V93.14L256 49.504V26.231c0-21.585-24.64-33.89-41.89-20.945z"
+			fill="#FBBC04"
+		/>
+		<path
+			d="m0 49.504 26.759 20.07L58.182 93.14V17.504L41.89 5.286C24.61-7.66 0 4.646 0 26.23z"
+			fill="#C5221F"
+		/>
+	</svg>
+)
+
 export const Notion = ({ className }: { className?: string }) => (
 	<svg
 		className={className}