From d508c73fee9e47f71842a5bb6260541d2c6a240c Mon Sep 17 00:00:00 2001
From: Levente Orban <orban.levi.94@gmail.com>
Date: Thu, 7 Nov 2024 14:15:45 +0100
Subject: [PATCH] fix(crux-ui): add some contrast 3rd party login options
 (#1010)

---
 web/crux-ui/public/oidc/github.svg   | 11 ++++++++++-
 web/crux-ui/src/pages/auth/login.tsx |  4 ++--
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/web/crux-ui/public/oidc/github.svg b/web/crux-ui/public/oidc/github.svg
index 77f4678d9..9a58dbdf9 100644
--- a/web/crux-ui/public/oidc/github.svg
+++ b/web/crux-ui/public/oidc/github.svg
@@ -1 +1,10 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M24 24H0V0h24z" fill="#fff" opacity="0"/><path d="M12 1A10.89 10.89 0 0 0 1 11.77 10.79 10.79 0 0 0 8.52 22c.55.1.75-.23.75-.52v-1.83c-3.06.65-3.71-1.44-3.71-1.44a2.86 2.86 0 0 0-1.22-1.58c-1-.66.08-.65.08-.65a2.31 2.31 0 0 1 1.68 1.11 2.37 2.37 0 0 0 3.2.89 2.33 2.33 0 0 1 .7-1.44c-2.44-.27-5-1.19-5-5.32a4.15 4.15 0 0 1 1.11-2.91 3.78 3.78 0 0 1 .11-2.84s.93-.29 3 1.1a10.68 10.68 0 0 1 5.5 0c2.1-1.39 3-1.1 3-1.1a3.78 3.78 0 0 1 .11 2.84A4.15 4.15 0 0 1 19 11.2c0 4.14-2.58 5.05-5 5.32a2.5 2.5 0 0 1 .75 2v2.95s.2.63.75.52A10.8 10.8 0 0 0 23 11.77 10.89 10.89 0 0 0 12 1" fill="#231f20"/></svg>
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1931_11900)">
+<path d="M12 1.00056C9.11346 0.971231 6.33338 2.08917 4.27073 4.10869C2.20809 6.1282 1.03166 8.88405 1 11.7706C1.01112 14.0517 1.74494 16.2707 3.09606 18.1087C4.44718 19.9467 6.34607 21.3093 8.52 22.0006C9.07 22.1006 9.27 21.7706 9.27 21.4806V19.6506C6.21 20.3006 5.56 18.2106 5.56 18.2106C5.3563 17.5545 4.92323 16.9936 4.34 16.6306C3.34 15.9706 4.42 15.9806 4.42 15.9806C4.76565 16.0268 5.09635 16.1506 5.38731 16.3429C5.67826 16.5351 5.92192 16.7907 6.1 17.0906C6.41033 17.6287 6.91953 18.0235 7.51801 18.1899C8.11649 18.3564 8.75639 18.2812 9.3 17.9806C9.35591 17.4329 9.60389 16.9228 10 16.5406C7.56 16.2706 5 15.3506 5 11.2206C4.97818 10.1432 5.37624 9.09967 6.11 8.31056C5.77583 7.38563 5.81529 6.36688 6.22 5.47056C6.22 5.47056 7.15 5.18056 9.22 6.57056C11.0219 6.0904 12.9181 6.0904 14.72 6.57056C16.82 5.18056 17.72 5.47056 17.72 5.47056C18.1247 6.36688 18.1642 7.38563 17.83 8.31056C18.5808 9.08521 19.0004 10.1218 19 11.2006C19 15.3406 16.42 16.2506 14 16.5206C14.265 16.7778 14.4697 17.0906 14.5994 17.4364C14.729 17.7822 14.7805 18.1525 14.75 18.5206V21.4706C14.75 21.4706 14.95 22.1006 15.5 21.9906C17.6678 21.295 19.5603 19.9321 20.9072 18.0967C22.2541 16.2613 22.9866 14.0471 23 11.7706C22.9683 8.88405 21.7919 6.1282 19.7293 4.10869C17.6666 2.08917 14.8865 0.971231 12 1.00056Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_1931_11900">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/web/crux-ui/src/pages/auth/login.tsx b/web/crux-ui/src/pages/auth/login.tsx
index d25822eb2..07172a9ba 100644
--- a/web/crux-ui/src/pages/auth/login.tsx
+++ b/web/crux-ui/src/pages/auth/login.tsx
@@ -189,9 +189,9 @@ const LoginPage = (props: LoginPageProps) => {
 
           {oidcEnabled(oidc) && (
             <div className="flex flex-col gap-2 items-center mx-auto mt-2">
-              <span className="text-light my-2">{t('orLogInWith')}</span>
+              <span className="mt-2 mb-4">{t('orLogInWith')}</span>
 
-              <div className="flex flex-row gap-8">
+              <div className="flex flex-row gap-4">
                 {oidc.gitlab && (
                   <DyoIcon src="/oidc/gitlab.svg" size="lg" alt="Gitlab" onClick={() => loginWithOidc('gitlab')} />
                 )}