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>