Fix missing google logo + use svg for slack logo

Signed-off-by: Émile Ré <emile@getprobo.com>

apps/console/src/pages/iam/organizations/settings/_components/GoogleWorkspaceConnector.tsx

@@ -7,6 +7,7 @@ import {
   Dialog,
   DialogContent,
   DialogFooter,
+  Google,
   useDialogRef,
 } from "@probo/ui";
 import { graphql, useFragment } from "react-relay";
@@ -96,11 +97,7 @@ export function GoogleWorkspaceConnector(props: {
     return (
       <Card padded className="flex items-center gap-3">
         <div className="w-10 h-10 flex items-center justify-center bg-subtle rounded">
-          <img
-            src="/google-workspace.png"
-            alt="Google Workspace"
-            className="w-6 h-6"
-          />
+          <Google className="w-6 h-6" />
         </div>
         <div className="mr-auto">
           <h3 className="font-medium">{__("Google Workspace")}</h3>

apps/console/src/pages/organizations/compliance-page/overview/_components/CompliancePageSlackSection.tsx

@@ -1,6 +1,6 @@
 import { sprintf } from "@probo/helpers";
 import { useTranslate } from "@probo/i18n";
-import { Badge, Button, Card } from "@probo/ui";
+import { Badge, Button, Card, Slack } from "@probo/ui";
 import { useFragment } from "react-relay";
 import { graphql } from "relay-runtime";
 
@@ -43,8 +43,8 @@ export function CompliancePageSlackSection(props: { fragmentRef: CompliancePageS
               padded
               className="flex items-center gap-3"
             >
-              <div>
-                <img src="/slack.png" alt="" />
+              <div className="h-10 w-10 flex items-center justify-center bg-subtle rounded">
+                <Slack className="h-6 w-6" />
               </div>
               <div className="mr-auto">
                 <h3 className="text-base font-semibold">Slack</h3>
@@ -73,8 +73,8 @@ export function CompliancePageSlackSection(props: { fragmentRef: CompliancePageS
               padded
               className="flex items-center gap-3"
             >
-              <div>
-                <img src="/slack.png" alt="" />
+              <div className="h-10 w-10 flex items-center justify-center bg-subtle rounded">
+                <Slack className="h-6 w-6" />
               </div>
               <div className="mr-auto">
                 <h3 className="text-base font-semibold">Slack</h3>

packages/ui/src/Atoms/Vendors/Google.tsx

@@ -0,0 +1,31 @@
+import type { ComponentProps } from "react";
+
+export function Google(props: ComponentProps<"svg">) {
+  return (
+    <svg
+      width="800px"
+      height="800px"
+      viewBox="-3 0 262 262"
+      xmlns="http://www.w3.org/2000/svg"
+      preserveAspectRatio="xMidYMid"
+      {...props}
+    >
+      <path
+        d="M255.878 133.451c0-10.734-.871-18.567-2.756-26.69H130.55v48.448h71.947c-1.45 12.04-9.283 30.172-26.69 42.356l-.244 1.622 38.755 30.023 2.685.268c24.659-22.774 38.875-56.282 38.875-96.027"
+        fill="#4285F4"
+      />
+      <path
+        d="M130.55 261.1c35.248 0 64.839-11.605 86.453-31.622l-41.196-31.913c-11.024 7.688-25.82 13.055-45.257 13.055-34.523 0-63.824-22.773-74.269-54.25l-1.531.13-40.298 31.187-.527 1.465C35.393 231.798 79.49 261.1 130.55 261.1"
+        fill="#34A853"
+      />
+      <path
+        d="M56.281 156.37c-2.756-8.123-4.351-16.827-4.351-25.82 0-8.994 1.595-17.697 4.206-25.82l-.073-1.73L15.26 71.312l-1.335.635C5.077 89.644 0 109.517 0 130.55s5.077 40.905 13.925 58.602l42.356-32.782"
+        fill="#FBBC05"
+      />
+      <path
+        d="M130.55 50.479c24.514 0 41.05 10.589 50.479 19.438l36.844-35.974C195.245 12.91 165.798 0 130.55 0 79.49 0 35.393 29.301 13.925 71.947l42.211 32.783c10.59-31.477 39.891-54.251 74.414-54.251"
+        fill="#EB4335"
+      />
+    </svg>
+  );
+}

packages/ui/src/Atoms/Vendors/Slack.tsx

@@ -0,0 +1,14 @@
+import type { ComponentProps } from "react";
+
+export function Slack(props: ComponentProps<"svg">) {
+  return (
+    <svg enableBackground="new 0 0 2447.6 2452.5" viewBox="0 0 2447.6 2452.5" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <g clipRule="evenodd" fillRule="evenodd">
+        <path d="m897.4 0c-135.3.1-244.8 109.9-244.7 245.2-.1 135.3 109.5 245.1 244.8 245.2h244.8v-245.1c.1-135.3-109.5-245.1-244.9-245.3.1 0 .1 0 0 0m0 654h-652.6c-135.3.1-244.9 109.9-244.8 245.2-.2 135.3 109.4 245.1 244.7 245.3h652.7c135.3-.1 244.9-109.9 244.8-245.2.1-135.4-109.5-245.2-244.8-245.3z" fill="#36c5f0" />
+        <path d="m2447.6 899.2c.1-135.3-109.5-245.1-244.8-245.2-135.3.1-244.9 109.9-244.8 245.2v245.3h244.8c135.3-.1 244.9-109.9 244.8-245.3zm-652.7 0v-654c.1-135.2-109.4-245-244.7-245.2-135.3.1-244.9 109.9-244.8 245.2v654c-.2 135.3 109.4 245.1 244.7 245.3 135.3-.1 244.9-109.9 244.8-245.3z" fill="#2eb67d" />
+        <path d="m1550.1 2452.5c135.3-.1 244.9-109.9 244.8-245.2.1-135.3-109.5-245.1-244.8-245.2h-244.8v245.2c-.1 135.2 109.5 245 244.8 245.2zm0-654.1h652.7c135.3-.1 244.9-109.9 244.8-245.2.2-135.3-109.4-245.1-244.7-245.3h-652.7c-135.3.1-244.9 109.9-244.8 245.2-.1 135.4 109.4 245.2 244.7 245.3z" fill="#ecb22e" />
+        <path d="m0 1553.2c-.1 135.3 109.5 245.1 244.8 245.2 135.3-.1 244.9-109.9 244.8-245.2v-245.2h-244.8c-135.3.1-244.9 109.9-244.8 245.2zm652.7 0v654c-.2 135.3 109.4 245.1 244.7 245.3 135.3-.1 244.9-109.9 244.8-245.2v-653.9c.2-135.3-109.4-245.1-244.7-245.3-135.4 0-244.9 109.8-244.8 245.1 0 0 0 .1 0 0" fill="#e01e5a" />
+      </g>
+    </svg>
+  );
+}

packages/ui/src/Atoms/Vendors/index.ts

@@ -0,0 +1,2 @@
+export { Google } from "./Google";
+export { Slack } from "./Slack";

packages/ui/src/index.ts

@@ -45,6 +45,7 @@ export {
   Row,
   RowButton,
 } from "./Atoms/DataTable/DataTable";
+export * from "./Atoms/Vendors";
 
 // Molecules
 export {