Fixed icons

Author: niemyjski

src/Exceptionless.Web/ClientApp/src/lib/assets/google.svg

@@ -0,0 +1,29 @@
+<script lang="ts">
+    import type { HTMLAttributes } from 'svelte/elements';
+
+    type MicrosoftIconProps = HTMLAttributes<SVGSVGElement> & {
+        class?: string;
+        fill?: string;
+        height?: number;
+        stroke?: string;
+        width?: number;
+    };
+
+    const { class: className = '', fill = 'currentColor', height = 24, stroke = '', width = 24, ...rest }: MicrosoftIconProps = $props();
+</script>
+
+<svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox={`0 0 ${width} ${height}`}
+    {width}
+    {height}
+    {fill}
+    {stroke}
+    class={className}
+    aria-label="Google icon"
+    {...rest}
+>
+    ><path
+        d="M21.35,11.1H12.18V13.83H18.69C18.36,17.64 15.19,19.27 12.19,19.27C8.36,19.27 5,16.25 5,12C5,7.9 8.2,4.73 12.2,4.73C15.29,4.73 17.1,6.7 17.1,6.7L19,4.72C19,4.72 16.56,2 12.1,2C6.42,2 2.03,6.8 2.03,12C2.03,17.05 6.16,22 12.25,22C17.6,22 21.5,18.33 21.5,12.91C21.5,11.76 21.35,11.1 21.35,11.1V11.1Z"
+    />
+</svg>

src/Exceptionless.Web/ClientApp/src/lib/assets/microsoft.svg

@@ -0,0 +1,27 @@
+<script lang="ts">
+    import type { HTMLAttributes } from 'svelte/elements';
+
+    type MicrosoftIconProps = HTMLAttributes<SVGSVGElement> & {
+        class?: string;
+        fill?: string;
+        height?: number;
+        stroke?: string;
+        width?: number;
+    };
+
+    const { class: className = '', fill = 'currentColor', height = 24, stroke = '', width = 24, ...rest }: MicrosoftIconProps = $props();
+</script>
+
+<svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox={`0 0 ${width} ${height}`}
+    {width}
+    {height}
+    {fill}
+    {stroke}
+    class={className}
+    aria-label="Microsoft icon"
+    {...rest}
+>
+    <path d="M2,3H11V12H2V3M11,22H2V13H11V22M21,3V12H12V3H21M21,22H12V13H21V22Z" />
+</svg>

src/Exceptionless.Web/ClientApp/src/lib/assets/slack.svg

@@ -0,0 +1,34 @@
+<script lang="ts">
+    import type { HTMLAttributes } from 'svelte/elements';
+
+    type MicrosoftIconProps = HTMLAttributes<SVGSVGElement> & {
+        class?: string;
+        fill?: string;
+        height?: number;
+        stroke?: string;
+        width?: number;
+    };
+
+    const { class: className = '', fill = 'none', height = 24, stroke = 'currentColor', width = 24, ...rest }: MicrosoftIconProps = $props();
+</script>
+
+<svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox={`0 0 ${width} ${height}`}
+    {width}
+    {height}
+    {fill}
+    {stroke}
+    class={className}
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-label="Slack icon"
+    {...rest}
+>
+    <rect width="3" height="8" x="13" y="2" rx="1.5" />
+    <path d="M19 8.5V10h1.5A1.5 1.5 0 1 0 19 8.5" />
+    <rect width="3" height="8" x="8" y="14" rx="1.5" /><path d="M5 15.5V14H3.5A1.5 1.5 0 1 0 5 15.5" /><rect width="8" height="3" x="14" y="13" rx="1.5" /><path
+        d="M15.5 19H14v1.5a1.5 1.5 0 1 0 1.5-1.5"
+    /><rect width="8" height="3" x="2" y="8" rx="1.5" /><path d="M8.5 5H10V3.5A1.5 1.5 0 1 0 8.5 5" />
+</svg>

src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/icons/GoogleIcon.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+    import type { HTMLAttributes } from 'svelte/elements';
+
+    type MicrosoftIconProps = HTMLAttributes<SVGSVGElement> & {
+        class?: string;
+        fill?: string;
+        height?: number;
+        stroke?: string;
+        width?: number;
+    };
+
+    const { class: className = '', fill = 'currentColor', height = 16, stroke = '', width = 16, ...rest }: MicrosoftIconProps = $props();
+</script>
+
+<svg xmlns="http://www.w3.org/2000/svg" viewBox={`0 0 ${width} ${height}`} {width} {height} {fill} {stroke} class={className} aria-label="X icon" {...rest}>
+    <path
+        d="M12.6.75h2.454l-5.36 6.142L16 15.25h-4.937l-3.867-5.07-4.425 5.07H.316l5.733-6.57L0 .75h5.063l3.495 4.633L12.601.75Zm-.86 13.028h1.36L4.323 2.145H2.865z"
+    />
+</svg>

src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/icons/MicrosoftIcon.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
+    import XIcon from '$comp/icons/XIcon.svelte';
     import { A } from '$comp/typography';
     import { getAboutQuery } from '$features/status/api.svelte';
     import Facebook from '@lucide/svelte/icons/facebook';
     import GitHub from '@lucide/svelte/icons/github';
     import Web from '@lucide/svelte/icons/globe';
-    import Twitter from '@lucide/svelte/icons/twitter';
 
     const currentYear = new Date().getFullYear();
 
@@ -44,10 +44,10 @@
         <A aria-label="Exceptionless Facebook Website" href="https://www.facebook.com/exceptionless/" target="_blank" variant="navigation">
             <Facebook class="size-5" />
         </A>
-        <A aria-label="Exceptionless Twitter Website" href="https://x.com/Exceptionless" target="_blank" variant="navigation">
-            <Twitter class="size-5" />
+        <A aria-label="Exceptionless X Website" href="https://x.com/Exceptionless" target="_blank" variant="navigation">
+            <XIcon class="size-5" />
         </A>
-        <A aria-label="Exceptionless GitHub Website" href="https://github.com/exceptionless" target="_blank" variant="navigation">
+        <A aria-label="Exceptionless GitHub Repository" href="https://github.com/exceptionless" target="_blank" variant="navigation">
             <GitHub class="size-5" />
         </A>
         <A aria-label="Exceptionless Website" href="https://exceptionless.com/" target="_blank" variant="navigation">

src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/icons/SlackIcon.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
     import ErrorMessage from '$comp/error-message.svelte';
     import PasswordInput from '$comp/form/password-input.svelte';
+    import GoogleIcon from '$comp/icons/GoogleIcon.svelte';
+    import MicrosoftIcon from '$comp/icons/MicrosoftIcon.svelte';
     import Loading from '$comp/loading.svelte';
     import { H3, Muted } from '$comp/typography';
     import { Button } from '$comp/ui/button';
@@ -17,8 +19,6 @@
         microsoftClientId
     } from '$features/auth/index.svelte';
     import { User } from '$features/users/models';
-    import Google from '$lib/assets/google.svg';
-    import Microsoft from '$lib/assets/microsoft.svg';
     import { useFetchClientStatus } from '$shared/api/api.svelte';
     import { ProblemDetails, useFetchClient } from '@exceptionless/fetchclient';
     import Facebook from '@lucide/svelte/icons/facebook';
@@ -115,7 +115,7 @@
             {#if !microsoftClientId}
                 <li class="pb-4">
                     <div class="flex items-center space-x-4">
-                        <img alt="Microsoft" src={Microsoft} />
+                        <MicrosoftIcon class="size-4" />
                         <div class="min-w-0 flex-1 font-semibold">Microsoft account</div>
                         <div class="inline-flex items-center">
                             {#if true}
@@ -132,7 +132,7 @@
             {#if !googleClientId}
                 <li class="py-4">
                     <div class="flex items-center space-x-4">
-                        <img alt="Google" src={Google} />
+                        <GoogleIcon class="size-4" />
                         <div class="min-w-0 flex-1 font-semibold">Google account</div>
                         <div class="inline-flex items-center">
                             {#if false}
@@ -149,7 +149,7 @@
             {#if !facebookClientId}
                 <li class="py-4">
                     <div class="flex items-center space-x-4">
-                        <Facebook />
+                        <Facebook class="size-4" />
                         <div class="min-w-0 flex-1 font-semibold">Facebook account</div>
                         <div class="inline-flex items-center">
                             {#if false}
@@ -166,7 +166,7 @@
             {#if !gitHubClientId}
                 <li class="py-4">
                     <div class="flex items-center space-x-4">
-                        <GitHub />
+                        <GitHub class="size-4" />
                         <div class="min-w-0 flex-1 font-semibold">GitHub account</div>
                         <div class="inline-flex items-center">
                             {#if true}

src/Exceptionless.Web/ClientApp/src/lib/features/shared/components/icons/XIcon.svelte

@@ -2,6 +2,7 @@
     import type { NotificationSettings } from '$features/projects/models';
 
     import { page } from '$app/state';
+    import SlackIcon from '$comp/icons/SlackIcon.svelte';
     import { H3, H4, Muted } from '$comp/typography';
     import { Button } from '$comp/ui/button';
     import { Separator } from '$comp/ui/separator';
@@ -24,7 +25,6 @@
     import { getTableOptions } from '$features/webhooks/components/table/options.svelte';
     import WebhooksDataTable from '$features/webhooks/components/table/webhooks-data-table.svelte';
     import { NewWebhook, Webhook } from '$features/webhooks/models';
-    import Slack from '$lib/assets/slack.svg'; // TOOD: Fix the slack icon to be an svg component
     import Plus from '@lucide/svelte/icons/plus';
     import Zapier from '@lucide/svelte/icons/zap';
     import { createTable } from '@tanstack/svelte-table';
@@ -194,9 +194,9 @@
             {#if hasSlackIntegration}
                 <NotificationSettingsForm settings={slackNotificationSettingsQuery.data} save={updateSlackNotificationSettings} />
 
-                <Button onclick={() => (showRemoveSlackDialog = true)}><img class="text- mr-2 size-4" alt="Slack" src={Slack} /> Remove Slack</Button>
+                <Button onclick={() => (showRemoveSlackDialog = true)}><SlackIcon class="mr-2 size-4" /> Remove Slack</Button>
             {:else}
-                <Button onclick={addSlack}><img class="text- mr-2 size-4" alt="Slack" src={Slack} /> Connect Slack</Button>
+                <Button onclick={addSlack}><SlackIcon class="mr-2 size-4" /> Connect Slack</Button>
             {/if}
         </section>
     {/if}

src/Exceptionless.Web/ClientApp/src/routes/(app)/(components)/layouts/footer.svelte

@@ -2,6 +2,8 @@
     import { goto } from '$app/navigation';
     import { page } from '$app/state';
     import ErrorMessage from '$comp/error-message.svelte';
+    import GoogleIcon from '$comp/icons/GoogleIcon.svelte';
+    import MicrosoftIcon from '$comp/icons/MicrosoftIcon.svelte';
     import Loading from '$comp/loading.svelte';
     import Logo from '$comp/logo.svelte';
     import { A, Muted, P } from '$comp/typography';
@@ -23,8 +25,6 @@
         microsoftClientId
     } from '$features/auth/index.svelte';
     import { Login } from '$features/auth/models';
-    import Google from '$lib/assets/google.svg';
-    import Microsoft from '$lib/assets/microsoft.svg';
     import { applyServerSideErrors } from '$shared/validation';
     import Facebook from '@lucide/svelte/icons/facebook';
     import GitHub from '@lucide/svelte/icons/github';
@@ -117,22 +117,22 @@
             <div class="auto-cols-2 grid grid-flow-col grid-rows-2 gap-4">
                 {#if microsoftClientId}
                     <Button aria-label="Login with Microsoft" onclick={() => liveLogin(redirectUrl)}>
-                        <img alt="Microsoft" src={Microsoft} /> Microsoft
+                        <MicrosoftIcon class="size-4" /> Microsoft
                     </Button>
                 {/if}
                 {#if googleClientId}
                     <Button aria-label="Login with Google" onclick={() => googleLogin(redirectUrl)}>
-                        <img alt="Google" src={Google} /> Google
+                        <GoogleIcon class="size-4" /> Google
                     </Button>
                 {/if}
                 {#if facebookClientId}
                     <Button aria-label="Login with Facebook" onclick={() => facebookLogin(redirectUrl)}>
-                        <Facebook /> Facebook
+                        <Facebook class="size-4" /> Facebook
                     </Button>
                 {/if}
                 {#if gitHubClientId}
                     <Button aria-label="Login with GitHub" onclick={() => githubLogin(redirectUrl)}>
-                        <GitHub /> GitHub
+                        <GitHub class="size-4" /> GitHub
                     </Button>
                 {/if}
             </div>