From d3129d87d9f790b62a49fc671719d92a41fc96ce Mon Sep 17 00:00:00 2001
From: Bryan Helmkamp <bryan@brynary.com>
Date: Sat, 23 May 2026 16:30:34 -0400
Subject: [PATCH] Show integration logos on settings/integrations page

Vendor brand icons for GitHub, Slack, Microsoft Teams, Discord, Linear, and
Jira under apps/fabro-web/public/images/integrations/ and render each one in
the same light chip used on the providers page. Refactors the existing rows
into IntegrationRow so name + help sit alongside the logo.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../app/routes/settings-integrations.tsx      | 101 +++++++++++++++---
 .../public/images/integrations/discord.svg    |   6 ++
 .../public/images/integrations/github.svg     |   6 ++
 .../public/images/integrations/jira.svg       |  18 ++++
 .../public/images/integrations/linear.svg     |   7 ++
 .../images/integrations/microsoft-teams.svg   |  27 +++++
 .../public/images/integrations/slack.svg      |   9 ++
 7 files changed, 159 insertions(+), 15 deletions(-)
 create mode 100644 apps/fabro-web/public/images/integrations/discord.svg
 create mode 100644 apps/fabro-web/public/images/integrations/github.svg
 create mode 100644 apps/fabro-web/public/images/integrations/jira.svg
 create mode 100644 apps/fabro-web/public/images/integrations/linear.svg
 create mode 100644 apps/fabro-web/public/images/integrations/microsoft-teams.svg
 create mode 100644 apps/fabro-web/public/images/integrations/slack.svg

diff --git a/apps/fabro-web/app/routes/settings-integrations.tsx b/apps/fabro-web/app/routes/settings-integrations.tsx
index f9467cb60..49e3a4abc 100644
--- a/apps/fabro-web/app/routes/settings-integrations.tsx
+++ b/apps/fabro-web/app/routes/settings-integrations.tsx
@@ -1,3 +1,5 @@
+import { useState } from "react";
+import type { ReactNode } from "react";
 import type { ServerSettings } from "@qltysh/fabro-api-client";
 import { useServerSettings } from "../lib/queries";
 import {
@@ -46,12 +48,20 @@ export default function SettingsIntegrations() {
 function ProjectManagementPanel() {
   return (
     <Panel title="Project Management">
-      <Row title="Linear" help="Sync runs with Linear issues and projects.">
+      <IntegrationRow
+        slug="linear"
+        name="Linear"
+        help="Sync runs with Linear issues and projects."
+      >
         <span className="text-sm text-fg-muted">Coming Soon</span>
-      </Row>
-      <Row title="Jira" help="Sync runs with Jira issues and projects.">
+      </IntegrationRow>
+      <IntegrationRow
+        slug="jira"
+        name="Jira"
+        help="Sync runs with Jira issues and projects."
+      >
         <span className="text-sm text-fg-muted">Coming Soon</span>
-      </Row>
+      </IntegrationRow>
     </Panel>
   );
 }
@@ -60,7 +70,11 @@ function GithubPanel({ settings }: { settings: ServerSettings }) {
   const { github } = settings.server.integrations;
   return (
     <Panel title="Version Control">
-      <Row title="GitHub" help="App for repo access, checks, and PR automation.">
+      <IntegrationRow
+        slug="github"
+        name="GitHub"
+        help="App for repo access, checks, and PR automation."
+      >
         <IntegrationValue
           enabled={github.enabled}
           detail={
@@ -71,7 +85,7 @@ function GithubPanel({ settings }: { settings: ServerSettings }) {
                 : undefined
           }
         />
-      </Row>
+      </IntegrationRow>
     </Panel>
   );
 }
@@ -80,8 +94,9 @@ function SlackPanel({ settings }: { settings: ServerSettings }) {
   const { slack } = settings.server.integrations;
   return (
     <Panel title="Communication">
-      <Row
-        title="Slack"
+      <IntegrationRow
+        slug="slack"
+        name="Slack"
         help="Workspace app for run notifications and approvals."
       >
         <IntegrationValue
@@ -92,23 +107,79 @@ function SlackPanel({ settings }: { settings: ServerSettings }) {
               : undefined
           }
         />
-      </Row>
-      <Row
-        title="Microsoft Teams"
+      </IntegrationRow>
+      <IntegrationRow
+        slug="microsoft-teams"
+        name="Microsoft Teams"
         help="Channel app for run notifications and approvals."
       >
         <span className="text-sm text-fg-muted">Coming Soon</span>
-      </Row>
-      <Row
-        title="Discord"
+      </IntegrationRow>
+      <IntegrationRow
+        slug="discord"
+        name="Discord"
         help="Server app for run notifications and approvals."
       >
         <span className="text-sm text-fg-muted">Coming Soon</span>
-      </Row>
+      </IntegrationRow>
     </Panel>
   );
 }
 
+function IntegrationRow({
+  slug,
+  name,
+  help,
+  children,
+}: {
+  slug: string;
+  name: string;
+  help: string;
+  children: ReactNode;
+}) {
+  return (
+    <Row
+      title={
+        <span className="flex items-center gap-3">
+          <IntegrationLogo slug={slug} name={name} />
+          <span className="flex min-w-0 flex-col">
+            <span className="text-sm text-fg-2">{name}</span>
+            <span className="text-xs/5 text-fg-3">{help}</span>
+          </span>
+        </span>
+      }
+    >
+      {children}
+    </Row>
+  );
+}
+
+function IntegrationLogo({ slug, name }: { slug: string; name: string }) {
+  const [failed, setFailed] = useState(false);
+  const chip =
+    "grid size-10 shrink-0 place-items-center rounded-md bg-ice-50 ring-1 ring-line-strong";
+
+  if (failed) {
+    const initial = name.charAt(0).toUpperCase() || "?";
+    return (
+      <span className={`${chip} text-base font-medium text-page`}>
+        {initial}
+      </span>
+    );
+  }
+
+  return (
+    <span className={chip}>
+      <img
+        alt=""
+        src={`/images/integrations/${slug}.svg`}
+        onError={() => setFailed(true)}
+        className="size-7"
+      />
+    </span>
+  );
+}
+
 function IntegrationValue({
   enabled,
   detail,
diff --git a/apps/fabro-web/public/images/integrations/discord.svg b/apps/fabro-web/public/images/integrations/discord.svg
new file mode 100644
index 000000000..079b54bdd
--- /dev/null
+++ b/apps/fabro-web/public/images/integrations/discord.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="256px" height="199px" viewBox="0 0 256 199" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
+    <g>
+        <path d="M216.856339,16.5966031 C200.285002,8.84328665 182.566144,3.2084988 164.041564,0 C161.766523,4.11318106 159.108624,9.64549908 157.276099,14.0464379 C137.583995,11.0849896 118.072967,11.0849896 98.7430163,14.0464379 C96.9108417,9.64549908 94.1925838,4.11318106 91.8971895,0 C73.3526068,3.2084988 55.6133949,8.86399117 39.0420583,16.6376612 C5.61752293,67.146514 -3.4433191,116.400813 1.08711069,164.955721 C23.2560196,181.510915 44.7403634,191.567697 65.8621325,198.148576 C71.0772151,190.971126 75.7283628,183.341335 79.7352139,175.300261 C72.104019,172.400575 64.7949724,168.822202 57.8887866,164.667963 C59.7209612,163.310589 61.5131304,161.891452 63.2445898,160.431257 C105.36741,180.133187 151.134928,180.133187 192.754523,160.431257 C194.506336,161.891452 196.298154,163.310589 198.110326,164.667963 C191.183787,168.842556 183.854737,172.420929 176.223542,175.320965 C180.230393,183.341335 184.861538,190.991831 190.096624,198.16893 C211.238746,191.588051 232.743023,181.531619 254.911949,164.955721 C260.227747,108.668201 245.831087,59.8662432 216.856339,16.5966031 Z M85.4738752,135.09489 C72.8290281,135.09489 62.4592217,123.290155 62.4592217,108.914901 C62.4592217,94.5396472 72.607595,82.7145587 85.4738752,82.7145587 C98.3405064,82.7145587 108.709962,94.5189427 108.488529,108.914901 C108.508531,123.290155 98.3405064,135.09489 85.4738752,135.09489 Z M170.525237,135.09489 C157.88039,135.09489 147.510584,123.290155 147.510584,108.914901 C147.510584,94.5396472 157.658606,82.7145587 170.525237,82.7145587 C183.391518,82.7145587 193.761324,94.5189427 193.539891,108.914901 C193.539891,123.290155 183.391518,135.09489 170.525237,135.09489 Z" fill="#5865F2" fill-rule="nonzero"></path>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/apps/fabro-web/public/images/integrations/github.svg b/apps/fabro-web/public/images/integrations/github.svg
new file mode 100644
index 000000000..bf0cf2677
--- /dev/null
+++ b/apps/fabro-web/public/images/integrations/github.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="256px" height="250px" viewBox="0 0 256 250" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
+    <g>
+        <path d="M128.00106,0 C57.3172926,0 0,57.3066942 0,128.00106 C0,184.555281 36.6761997,232.535542 87.534937,249.460899 C93.9320223,250.645779 96.280588,246.684165 96.280588,243.303333 C96.280588,240.251045 96.1618878,230.167899 96.106777,219.472176 C60.4967585,227.215235 52.9826207,204.369712 52.9826207,204.369712 C47.1599584,189.574598 38.770408,185.640538 38.770408,185.640538 C27.1568785,177.696113 39.6458206,177.859325 39.6458206,177.859325 C52.4993419,178.762293 59.267365,191.04987 59.267365,191.04987 C70.6837675,210.618423 89.2115753,204.961093 96.5158685,201.690482 C97.6647155,193.417512 100.981959,187.77078 104.642583,184.574357 C76.211799,181.33766 46.324819,170.362144 46.324819,121.315702 C46.324819,107.340889 51.3250588,95.9223682 59.5132437,86.9583937 C58.1842268,83.7344152 53.8029229,70.715562 60.7532354,53.0843636 C60.7532354,53.0843636 71.5019501,49.6441813 95.9626412,66.2049595 C106.172967,63.368876 117.123047,61.9465949 128.00106,61.8978432 C138.879073,61.9465949 149.837632,63.368876 160.067033,66.2049595 C184.49805,49.6441813 195.231926,53.0843636 195.231926,53.0843636 C202.199197,70.715562 197.815773,83.7344152 196.486756,86.9583937 C204.694018,95.9223682 209.660343,107.340889 209.660343,121.315702 C209.660343,170.478725 179.716133,181.303747 151.213281,184.472614 C155.80443,188.444828 159.895342,196.234518 159.895342,208.176593 C159.895342,225.303317 159.746968,239.087361 159.746968,243.303333 C159.746968,246.709601 162.05102,250.70089 168.53925,249.443941 C219.370432,232.499507 256,184.536204 256,128.00106 C256,57.3066942 198.691187,0 128.00106,0 Z M47.9405593,182.340212 C47.6586465,182.976105 46.6581745,183.166873 45.7467277,182.730227 C44.8183235,182.312656 44.2968914,181.445722 44.5978808,180.80771 C44.8734344,180.152739 45.876026,179.97045 46.8023103,180.409216 C47.7328342,180.826786 48.2627451,181.702199 47.9405593,182.340212 Z M54.2367892,187.958254 C53.6263318,188.524199 52.4329723,188.261363 51.6232682,187.366874 C50.7860088,186.474504 50.6291553,185.281144 51.2480912,184.70672 C51.8776254,184.140775 53.0349512,184.405731 53.8743302,185.298101 C54.7115892,186.201069 54.8748019,187.38595 54.2367892,187.958254 Z M58.5562413,195.146347 C57.7719732,195.691096 56.4895886,195.180261 55.6968417,194.042013 C54.9125733,192.903764 54.9125733,191.538713 55.713799,190.991845 C56.5086651,190.444977 57.7719732,190.936735 58.5753181,192.066505 C59.3574669,193.22383 59.3574669,194.58888 58.5562413,195.146347 Z M65.8613592,203.471174 C65.1597571,204.244846 63.6654083,204.03712 62.5716717,202.981538 C61.4524999,201.94927 61.1409122,200.484596 61.8446341,199.710926 C62.5547146,198.935137 64.0575422,199.15346 65.1597571,200.200564 C66.2704506,201.230712 66.6095936,202.705984 65.8613592,203.471174 Z M75.3025151,206.281542 C74.9930474,207.284134 73.553809,207.739857 72.1039724,207.313809 C70.6562556,206.875043 69.7087748,205.700761 70.0012857,204.687571 C70.302275,203.678621 71.7478721,203.20382 73.2083069,203.659543 C74.6539041,204.09619 75.6035048,205.261994 75.3025151,206.281542 Z M86.046947,207.473627 C86.0829806,208.529209 84.8535871,209.404622 83.3316829,209.4237 C81.8013,209.457614 80.563428,208.603398 80.5464708,207.564772 C80.5464708,206.498591 81.7483088,205.631657 83.2786917,205.606221 C84.8005962,205.576546 86.046947,206.424403 86.046947,207.473627 Z M96.6021471,207.069023 C96.7844366,208.099171 95.7267341,209.156872 94.215428,209.438785 C92.7295577,209.710099 91.3539086,209.074206 91.1652603,208.052538 C90.9808515,206.996955 92.0576306,205.939253 93.5413813,205.66582 C95.054807,205.402984 96.4092596,206.021919 96.6021471,207.069023 Z" fill="#161614"></path>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/apps/fabro-web/public/images/integrations/jira.svg b/apps/fabro-web/public/images/integrations/jira.svg
new file mode 100644
index 000000000..29f29a398
--- /dev/null
+++ b/apps/fabro-web/public/images/integrations/jira.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="256px" height="256px" viewBox="0 0 256 256" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
+    <defs>
+        <linearGradient x1="98.0308675%" y1="0.160599572%" x2="58.8877062%" y2="40.7655246%" id="linearGradient-1">
+            <stop stop-color="#0052CC" offset="18%"></stop>
+            <stop stop-color="#2684FF" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="100.665247%" y1="0.45503212%" x2="55.4018095%" y2="44.7269807%" id="linearGradient-2">
+            <stop stop-color="#0052CC" offset="18%"></stop>
+            <stop stop-color="#2684FF" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g>
+				<path d="M244.657778,0 L121.706667,0 C121.706667,14.7201046 127.554205,28.837312 137.962891,39.2459977 C148.371577,49.6546835 162.488784,55.5022222 177.208889,55.5022222 L199.857778,55.5022222 L199.857778,77.3688889 C199.877391,107.994155 224.699178,132.815943 255.324444,132.835556 L255.324444,10.6666667 C255.324444,4.77562934 250.548815,3.60722001e-16 244.657778,0 Z" fill="#2684FF"></path>
+				<path d="M183.822222,61.2622222 L60.8711111,61.2622222 C60.8907238,91.8874888 85.7125112,116.709276 116.337778,116.728889 L138.986667,116.728889 L138.986667,138.666667 C139.025905,169.291923 163.863607,194.097803 194.488889,194.097778 L194.488889,71.9288889 C194.488889,66.0378516 189.71326,61.2622222 183.822222,61.2622222 Z" fill="url(#linearGradient-1)"></path>
+				<path d="M122.951111,122.488889 L0,122.488889 C3.75391362e-15,153.14192 24.8491913,177.991111 55.5022222,177.991111 L78.2222222,177.991111 L78.2222222,199.857778 C78.241767,230.45532 103.020285,255.265647 133.617778,255.324444 L133.617778,133.155556 C133.617778,127.264518 128.842148,122.488889 122.951111,122.488889 Z" fill="url(#linearGradient-2)"></path>
+		</g>
+</svg>
diff --git a/apps/fabro-web/public/images/integrations/linear.svg b/apps/fabro-web/public/images/integrations/linear.svg
new file mode 100644
index 000000000..3b8722467
--- /dev/null
+++ b/apps/fabro-web/public/images/integrations/linear.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="256px" height="255.999966px" viewBox="0 0 256 255.999966" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
+    <title>Linear</title>
+    <g>
+        <path d="M8.17351507,102.61269 L153.38731,247.826434 C155.506492,249.945871 154.484163,253.546047 151.537796,254.096394 C146.624112,255.014493 141.611832,255.651912 136.517857,255.991749 C135.430224,256.064224 134.367944,255.654216 133.5971,254.883372 L1.11657404,122.4029 C0.345783548,121.632056 -0.0643290124,120.569776 0.0082341699,119.482143 C0.348078154,114.388168 0.985591977,109.375888 1.9035369,104.462204 C2.45395044,101.515837 6.05412868,100.493508 8.17351507,102.61269 Z M4.08163806,161.409157 C3.11270474,157.795152 7.38226007,155.515399 10.0279718,158.161111 L97.8388892,245.972054 C100.484601,248.617766 98.2048481,252.887372 94.5908433,251.918311 C50.5602697,240.113381 15.8867212,205.43973 4.08163806,161.409157 Z M16.8085843,64.1644626 C18.0417047,62.028635 20.9559826,61.7013463 22.6999089,63.4453494 L192.554651,233.299989 C194.298654,235.043992 193.971621,237.958347 191.835537,239.191441 C188.24202,241.266062 184.538382,243.171405 180.73538,244.896457 C179.304068,245.545401 177.625881,245.218112 176.514687,244.106918 L11.8930308,79.4853127 C10.7818114,78.3741189 10.4544971,76.695932 11.1036452,75.2646202 C12.828595,71.4616177 14.7338864,67.7579799 16.8085843,64.1644626 Z M127.860072,0 C198.629979,0 256,57.3702771 256,128.139928 C256,165.709238 239.831733,199.502437 214.07401,222.940712 C212.587126,224.293659 210.305837,224.204026 208.884257,222.782702 L33.2172979,47.1157434 C31.7959738,45.6941631 31.7063407,43.4128738 33.0592877,41.9259895 C56.4975633,16.1681897 90.2907616,0 127.860072,0 Z" fill="#222326"></path>
+    </g>
+</svg>
diff --git a/apps/fabro-web/public/images/integrations/microsoft-teams.svg b/apps/fabro-web/public/images/integrations/microsoft-teams.svg
new file mode 100644
index 000000000..cae37a138
--- /dev/null
+++ b/apps/fabro-web/public/images/integrations/microsoft-teams.svg
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="256px" height="239px" viewBox="0 0 256 239" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
+    <title>Teams</title>
+    <defs>
+        <linearGradient x1="17.372046%" y1="-6.51032331%" x2="82.6280767%" y2="106.510437%" id="Teams-linearGradient-1">
+            <stop stop-color="#5A62C3" offset="0%"></stop>
+            <stop stop-color="#4D55BD" offset="50%"></stop>
+            <stop stop-color="#3940AB" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g>
+				<path d="M178.562984,89.3023389 L244.688409,89.3023389 C250.935667,89.3023389 256,94.3666717 256,100.61393 C256,100.61393 256,100.61393 256,100.61393 L256,160.8454 C256,183.805692 237.387095,202.418597 214.426804,202.418597 L214.426804,202.418597 L214.230281,202.418597 C191.269989,202.421813 172.654443,183.81155 172.651112,160.851258 C172.651112,160.849305 172.651112,160.847353 172.651112,160.845285 L172.651112,95.2142112 C172.651112,91.9491339 175.298022,89.3023389 178.562984,89.3023389 L178.562984,89.3023389 Z" fill="#5059C9"></path>
+				<circle fill="#5059C9" cx="223.255847" cy="50.6046204" r="26.7907017"></circle>
+				<circle fill="#7B83EB" cx="139.906959" cy="38.6977185" r="38.6977185"></circle>
+				<path d="M191.505908,89.3023389 L82.3545595,89.3023389 C76.1817292,89.4551005 71.2986428,94.5778961 71.4418711,100.750956 L71.4418711,169.448288 C70.5798595,206.492276 99.8873366,237.23307 136.930291,238.139647 C173.973246,237.23307 203.280608,206.492276 202.418711,169.448288 L202.418711,100.750956 C202.56171,94.5778961 197.678739,89.4551005 191.505908,89.3023389 Z" fill="#7B83EB"></path>
+				<path d="M142.883742,89.3023389 L142.883742,185.57026 C142.854109,189.98484 140.178944,193.950782 136.096765,195.631619 C134.797028,196.181446 133.400121,196.465146 131.988857,196.465146 L76.6809034,196.465146 C75.9069881,194.500494 75.1925694,192.535843 74.5971439,190.511695 C72.5131546,183.680267 71.4497964,176.578577 71.4417563,169.436343 L71.4417563,100.733038 C71.2986428,94.5698561 76.1736891,89.4551005 82.3366416,89.3023389 L142.883742,89.3023389 Z" fill="#000000" opacity="0.1"></path>
+				<path d="M136.930291,89.3023389 L136.930291,191.523711 C136.930291,192.934975 136.646591,194.331882 136.096765,195.631619 C134.415928,199.713798 130.449985,202.389078 126.035406,202.418597 L79.4790817,202.418597 C78.4669502,200.453945 77.5144302,198.489294 76.6809034,196.465146 C75.8473766,194.440998 75.1925694,192.535843 74.5971439,190.511695 C72.5131546,183.680382 71.4497964,176.578577 71.4417563,169.436343 L71.4417563,100.733038 C71.2986428,94.5698561 76.1736891,89.4551005 82.3366416,89.3023389 L136.930291,89.3023389 Z" fill="#000000" opacity="0.2"></path>
+				<path d="M136.930291,89.3023389 L136.930291,179.616809 C136.884922,185.615055 132.033652,190.466326 126.035406,190.511695 L74.5972587,190.511695 C72.5132695,183.680382 71.4499112,176.578577 71.4418711,169.436343 L71.4418711,100.733038 C71.2987577,94.5698561 76.173804,89.4551005 82.3367565,89.3023389 L136.930291,89.3023389 Z" fill="#000000" opacity="0.2"></path>
+				<path d="M130.976725,89.3023389 L130.976725,179.616809 C130.931356,185.615055 126.080086,190.466326 120.08184,190.511695 L74.5972587,190.511695 C72.5132695,183.680382 71.4499112,176.578577 71.4418711,169.436343 L71.4418711,100.733038 C71.2987577,94.5698561 76.173804,89.4551005 82.3367565,89.3023389 L130.976725,89.3023389 Z" fill="#000000" opacity="0.2"></path>
+				<path d="M142.883742,58.5228377 L142.883742,77.2763289 C141.871611,77.3358255 140.919091,77.395437 139.906959,77.395437 C138.894828,77.395437 137.942308,77.3359404 136.930176,77.2763289 C134.920615,77.1429784 132.927594,76.8241317 130.976725,76.3238089 C118.920852,73.4687758 108.960799,65.0138256 104.186024,53.5815182 C103.364442,51.6616615 102.726634,49.6681806 102.280869,47.6280672 L131.988742,47.6280672 C137.996406,47.6508092 142.860885,52.5151736 142.883742,58.5228377 Z" fill="#000000" opacity="0.1"></path>
+				<path d="M136.930291,64.4762887 L136.930291,77.2763289 C134.92073,77.1429784 132.927709,76.8241317 130.97684,76.3238089 C118.920967,73.4687758 108.960914,65.0138256 104.186139,53.5815182 L126.035406,53.5815182 C132.042955,53.6042602 136.907435,58.4687395 136.930291,64.4762887 Z" fill="#000000" opacity="0.2"></path>
+				<path d="M136.930291,64.4762887 L136.930291,77.2763289 C134.92073,77.1429784 132.927709,76.8241317 130.97684,76.3238089 C118.920967,73.4687758 108.960914,65.0138256 104.186139,53.5815182 L126.035406,53.5815182 C132.042955,53.6042602 136.907435,58.4687395 136.930291,64.4762887 Z" fill="#000000" opacity="0.2"></path>
+				<path d="M130.976725,64.4762887 L130.976725,76.3236941 C118.920852,73.468661 108.960799,65.0137108 104.186024,53.5814034 L120.08184,53.5814034 C126.089504,53.6042602 130.953869,58.4687395 130.976725,64.4762887 Z" fill="#000000" opacity="0.2"></path>
+				<path d="M10.9126884,53.5814034 L120.063922,53.5814034 C126.090883,53.5814034 130.976611,58.4672463 130.976611,64.4940918 L130.976611,173.645326 C130.976611,179.672286 126.090768,184.558014 120.063922,184.558014 L10.9126884,184.558014 C4.88572809,184.558014 0,179.672171 0,173.645326 L0,64.4940918 C0,58.4672463 4.88584295,53.5814034 10.9126884,53.5814034 Z" fill="url(#Teams-linearGradient-1)"></path>
+				<polygon fill="#FFFFFF" points="94.2080524 95.1248514 72.3884185 95.1248514 72.3884185 154.540713 58.4871168 154.540713 58.4871168 95.1248514 36.768788 95.1248514 36.768788 83.5989345 94.2080524 83.5989345"></polygon>
+    </g>
+</svg>
diff --git a/apps/fabro-web/public/images/integrations/slack.svg b/apps/fabro-web/public/images/integrations/slack.svg
new file mode 100644
index 000000000..98dc80b26
--- /dev/null
+++ b/apps/fabro-web/public/images/integrations/slack.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="256px" height="256px" viewBox="0 0 256 256" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
+		<g>
+				<path d="M53.8412698,161.320635 C53.8412698,176.152381 41.8539683,188.139683 27.0222222,188.139683 C12.1904762,188.139683 0.203174603,176.152381 0.203174603,161.320635 C0.203174603,146.488889 12.1904762,134.501587 27.0222222,134.501587 L53.8412698,134.501587 L53.8412698,161.320635 Z M67.2507937,161.320635 C67.2507937,146.488889 79.2380952,134.501587 94.0698413,134.501587 C108.901587,134.501587 120.888889,146.488889 120.888889,161.320635 L120.888889,228.368254 C120.888889,243.2 108.901587,255.187302 94.0698413,255.187302 C79.2380952,255.187302 67.2507937,243.2 67.2507937,228.368254 L67.2507937,161.320635 Z" fill="#E01E5A"></path>
+				<path d="M94.0698413,53.6380952 C79.2380952,53.6380952 67.2507937,41.6507937 67.2507937,26.8190476 C67.2507937,11.9873016 79.2380952,-7.10542736e-15 94.0698413,-7.10542736e-15 C108.901587,-7.10542736e-15 120.888889,11.9873016 120.888889,26.8190476 L120.888889,53.6380952 L94.0698413,53.6380952 Z M94.0698413,67.2507937 C108.901587,67.2507937 120.888889,79.2380952 120.888889,94.0698413 C120.888889,108.901587 108.901587,120.888889 94.0698413,120.888889 L26.8190476,120.888889 C11.9873016,120.888889 0,108.901587 0,94.0698413 C0,79.2380952 11.9873016,67.2507937 26.8190476,67.2507937 L94.0698413,67.2507937 Z" fill="#36C5F0"></path>
+				<path d="M201.549206,94.0698413 C201.549206,79.2380952 213.536508,67.2507937 228.368254,67.2507937 C243.2,67.2507937 255.187302,79.2380952 255.187302,94.0698413 C255.187302,108.901587 243.2,120.888889 228.368254,120.888889 L201.549206,120.888889 L201.549206,94.0698413 Z M188.139683,94.0698413 C188.139683,108.901587 176.152381,120.888889 161.320635,120.888889 C146.488889,120.888889 134.501587,108.901587 134.501587,94.0698413 L134.501587,26.8190476 C134.501587,11.9873016 146.488889,-1.42108547e-14 161.320635,-1.42108547e-14 C176.152381,-1.42108547e-14 188.139683,11.9873016 188.139683,26.8190476 L188.139683,94.0698413 Z" fill="#2EB67D"></path>
+				<path d="M161.320635,201.549206 C176.152381,201.549206 188.139683,213.536508 188.139683,228.368254 C188.139683,243.2 176.152381,255.187302 161.320635,255.187302 C146.488889,255.187302 134.501587,243.2 134.501587,228.368254 L134.501587,201.549206 L161.320635,201.549206 Z M161.320635,188.139683 C146.488889,188.139683 134.501587,176.152381 134.501587,161.320635 C134.501587,146.488889 146.488889,134.501587 161.320635,134.501587 L228.571429,134.501587 C243.403175,134.501587 255.390476,146.488889 255.390476,161.320635 C255.390476,176.152381 243.403175,188.139683 228.571429,188.139683 L161.320635,188.139683 Z" fill="#ECB22E"></path>
+		</g>
+</svg>