From 5ba51ada917c4dde4a9d842ab69fa17e6bf7b278 Mon Sep 17 00:00:00 2001
From: Morgan Ney <morganney@gmail.com>
Date: Fri, 15 Dec 2023 21:18:54 -0600
Subject: [PATCH] fix: sign out color dark mode.

---
 packages/ui/src/components/profile.tsx | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/packages/ui/src/components/profile.tsx b/packages/ui/src/components/profile.tsx
index 4a7588f..dbf6fad 100644
--- a/packages/ui/src/components/profile.tsx
+++ b/packages/ui/src/components/profile.tsx
@@ -3,7 +3,7 @@ import { useCallback, useState } from 'react'
 import { toast } from '@busmap/components/toast'
 import { Button } from '@busmap/components/button'
 import { SignOut } from '@busmap/components/icons/signOut'
-import { PB80T } from '@busmap/components/colors'
+import { PB80T, PB20T, PB90T } from '@busmap/components/colors'
 
 import { logout } from '@core/api/authn.js'
 import { useGlobals } from '@core/globals.js'
@@ -13,17 +13,23 @@ import { useTheme } from '@module/settings/contexts/theme.js'
 import { Page } from './page.js'
 
 import type { FC } from 'react'
+import type { Mode } from '@module/settings/types.js'
 
-const SignOutBtn = styled.button`
+const SignOutBtn = styled.button<{ $mode: Mode }>`
   cursor: pointer;
   background: none;
   font-weight: bold;
   border: none;
-  margin: 0;
+  margin: 0 0 0 auto;
   padding: 0;
   display: flex;
   align-items: center;
   gap: 8px;
+  color: ${({ $mode }) => ($mode === 'light' ? PB20T : PB90T)};
+
+  span:last-child {
+    color: ${({ $mode }) => ($mode === 'light' ? PB20T : PB90T)};
+  }
 `
 const ProviderBlock = styled.div`
   display: flex;
@@ -142,7 +148,7 @@ const Profile: FC = () => {
         </ProviderBlock>
       </div>
       <div>
-        <SignOutBtn disabled={loading} onClick={onClickSignOut}>
+        <SignOutBtn $mode={mode} disabled={loading} onClick={onClickSignOut}>
           <span>Sign out</span>
           <SignOut size="small" />
         </SignOutBtn>