From 9f97a4ddd5c14e10926d99df2016ece587ed52b1 Mon Sep 17 00:00:00 2001
From: Stavros <steveiliop56@gmail.com>
Date: Fri, 12 Sep 2025 14:57:26 +0300
Subject: [PATCH] feat: add some default icons

---
 frontend/src/components/icons/microsoft.tsx | 18 ++++++++++++++++
 frontend/src/components/icons/pocket-id.tsx | 20 +++++++++++++++++
 frontend/src/components/icons/tailscale.tsx | 24 +++++++++++++++++++++
 frontend/src/pages/login-page.tsx           | 16 +++++++++++++-
 4 files changed, 77 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/components/icons/microsoft.tsx
 create mode 100644 frontend/src/components/icons/pocket-id.tsx
 create mode 100644 frontend/src/components/icons/tailscale.tsx

diff --git a/frontend/src/components/icons/microsoft.tsx b/frontend/src/components/icons/microsoft.tsx
new file mode 100644
index 0000000..58d470c
--- /dev/null
+++ b/frontend/src/components/icons/microsoft.tsx
@@ -0,0 +1,18 @@
+import type { SVGProps } from "react";
+
+export function MicrosoftIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="2em"
+      height="2em"
+      viewBox="0 0 256 256"
+      {...props}
+    >
+      <path fill="#f1511b" d="M121.666 121.666H0V0h121.666z"></path>
+      <path fill="#80cc28" d="M256 121.666H134.335V0H256z"></path>
+      <path fill="#00adef" d="M121.663 256.002H0V134.336h121.663z"></path>
+      <path fill="#fbbc09" d="M256 256.002H134.335V134.336H256z"></path>
+    </svg>
+  );
+}
diff --git a/frontend/src/components/icons/pocket-id.tsx b/frontend/src/components/icons/pocket-id.tsx
new file mode 100644
index 0000000..cd0d017
--- /dev/null
+++ b/frontend/src/components/icons/pocket-id.tsx
@@ -0,0 +1,20 @@
+import type { SVGProps } from "react";
+
+export function PocketIDIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      xmlSpace="preserve"
+      width={512}
+      height={512}
+      viewBox="0 0 512 512"
+      {...props}
+    >
+      <circle cx="256" cy="256" r="256" />
+      <path
+        d="M268.6 102.4c64.4 0 116.8 52.4 116.8 116.7 0 25.3-8 49.4-23 69.6-14.8 19.9-35 34.3-58.4 41.7l-6.5 2-15.5-76.2 4.3-2c14-6.7 23-21.1 23-36.6 0-22.4-18.2-40.6-40.6-40.6S228 195.2 228 217.6c0 15.5 9 29.8 23 36.6l4.2 2-25 153.4h-69.5V102.4z"
+        className="fill-white"
+      />
+    </svg>
+  );
+}
diff --git a/frontend/src/components/icons/tailscale.tsx b/frontend/src/components/icons/tailscale.tsx
new file mode 100644
index 0000000..3f7a15a
--- /dev/null
+++ b/frontend/src/components/icons/tailscale.tsx
@@ -0,0 +1,24 @@
+import type { SVGProps } from "react";
+
+export function TailscaleIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      xmlSpace="preserve"
+      width={512}
+      height={512}
+      viewBox="0 0 512 512"
+      {...props}
+    >
+      <path
+        className="opacity-80 fill-white"
+        d="M65.6 318.1c35.3 0 63.9-28.6 63.9-63.9s-28.6-63.9-63.9-63.9S1.8 219 1.8 254.2s28.6 63.9 63.8 63.9m191.6 0c35.3 0 63.9-28.6 63.9-63.9s-28.6-63.9-63.9-63.9-63.9 28.6-63.9 63.9 28.6 63.9 63.9 63.9m0 193.9c35.3 0 63.9-28.6 63.9-63.9s-28.6-63.9-63.9-63.9-63.9 28.6-63.9 63.9 28.6 63.9 63.9 63.9m189.2-193.9c35.3 0 63.9-28.6 63.9-63.9s-28.6-63.9-63.9-63.9-63.9 28.6-63.9 63.9 28.6 63.9 63.9 63.9"
+      />
+
+      <path
+        d="M65.6 127.7c35.3 0 63.9-28.6 63.9-63.9S100.9 0 65.6 0 1.8 28.6 1.8 63.9s28.6 63.8 63.8 63.8m0 384.3c35.3 0 63.9-28.6 63.9-63.9s-28.6-63.9-63.9-63.9-63.8 28.7-63.8 63.9S30.4 512 65.6 512m191.6-384.3c35.3 0 63.9-28.6 63.9-63.9S292.5 0 257.2 0s-63.9 28.6-63.9 63.9 28.6 63.8 63.9 63.8m189.2 0c35.3 0 63.9-28.6 63.9-63.9S481.6 0 446.4 0c-35.3 0-63.9 28.6-63.9 63.9s28.6 63.8 63.9 63.8m0 384.3c35.3 0 63.9-28.6 63.9-63.9s-28.6-63.9-63.9-63.9-63.9 28.6-63.9 63.9 28.6 63.9 63.9 63.9"
+        className="opacity-20 fill-white"
+      />
+    </svg>
+  );
+}
diff --git a/frontend/src/pages/login-page.tsx b/frontend/src/pages/login-page.tsx
index 9db1087..3354b2d 100644
--- a/frontend/src/pages/login-page.tsx
+++ b/frontend/src/pages/login-page.tsx
@@ -1,5 +1,10 @@
 import { LoginForm } from "@/components/auth/login-form";
+import { GithubIcon } from "@/components/icons/github";
+import { GoogleIcon } from "@/components/icons/google";
+import { MicrosoftIcon } from "@/components/icons/microsoft";
 import { OAuthIcon } from "@/components/icons/oauth";
+import { PocketIDIcon } from "@/components/icons/pocket-id";
+import { TailscaleIcon } from "@/components/icons/tailscale";
 import {
   Card,
   CardHeader,
@@ -20,6 +25,14 @@ import { useTranslation } from "react-i18next";
 import { Navigate, useLocation } from "react-router";
 import { toast } from "sonner";
 
+const iconMap: Record<string, React.ReactNode> = {
+  google: <GoogleIcon />,
+  github: <GithubIcon />,
+  tailscale: <TailscaleIcon />,
+  microsoft: <MicrosoftIcon />,
+  pocketid: <PocketIDIcon />,
+};
+
 export const LoginPage = () => {
   const { isLoggedIn } = useUserContext();
   const { providers, title, oauthAutoRedirect } = useAppContext();
@@ -141,8 +154,9 @@ export const LoginPage = () => {
           <div className="flex flex-col gap-2 items-center justify-center">
             {oauthProviders.map((provider) => (
               <OAuthButton
+                key={provider.id}
                 title={provider.name}
-                icon={<OAuthIcon />}
+                icon={iconMap[provider.id] ?? <OAuthIcon />}
                 className="w-full"
                 onClick={() => oauthMutation.mutate(provider.id)}
                 loading={