refactor: Update PrimaryButton component to support custom text color

softstack · May 15, 2024 · 0c5495c · 0c5495c
1 parent 9114779
commit 0c5495c
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 10 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -302,16 +302,19 @@ function App() {
                             </div>
                         </div>
                     </div>
-                    <div className="flex flex-col gap-2 p-2 mb-2">
+                    <div className="flex flex-col gap-2 p-2 mb-4">
                         <PrimaryButton
                             title="Open my Wallet"
                             callback={openWallet}
                         />
-                        <PrimaryButton
-                            title="Disconnect"
-                            className="bg-red-200 border border-red-300 text-black"
-                            callback={handleDisconnect}
-                        />
+                        <div>
+                            <PrimaryButton
+                                title="Disconnect"
+                                className="bg-red-200 border border-red-300"
+                                textColor="customBlackText"
+                                callback={handleDisconnect}
+                            />
+                        </div>
                     </div>
                 </>
             )}

diff --git a/src/components/buttons/PrimaryButton.tsx b/src/components/buttons/PrimaryButton.tsx
@@ -3,13 +3,19 @@ import React from 'react';
 type Props = {
     title: string;
     className?: string;
+    textColor?: string;
     callback: () => void;
 };
 
-const PrimaryButton: React.FC<Props> = ({ title, className, callback }) => {
+const PrimaryButton: React.FC<Props> = ({
+    title,
+    className,
+    textColor = 'white',
+    callback,
+}) => {
     return (
         <div
-            className={`flex items-center justify-center bg-customBlueButton text-white py-3 px-5 rounded-xl border-customBlueButton text-base font-bold text-center ${className}`}
+            className={`flex items-center justify-center bg-customBlueButton h-12 text-${textColor} py-3 px-5 rounded-lg border-customBlueButton border-1 text-base font-semibold text-center ${className}`}
             onClick={callback}
         >
             <span>{title}</span>

diff --git a/src/components/connectOverlay/ConnectOverlay.tsx b/src/components/connectOverlay/ConnectOverlay.tsx
@@ -5,6 +5,7 @@ import { PulseLoader } from 'react-spinners';
 
 import NetworkBadge from './NetworkBadge';
 import WalletBadge from './WalletBadge';
+import PrimaryButton from '../buttons/PrimaryButton';
 
 import crossIcon from '../../assets/cross_icon.svg';
 import upCircleIcon from '../../assets/up_circle_icon.svg';
@@ -26,7 +27,6 @@ import { RootState, AppDispatch } from '../../redux/store';
 import { setConnectionState } from '../../redux/connectionSlice';
 
 import './ConnectOverlay.css';
-import PrimaryButton from '../buttons/PrimaryButton';
 
 type Props = {
     slideAnimation: string;

diff --git a/src/redux/connectionSlice.ts b/src/redux/connectionSlice.ts
@@ -3,7 +3,7 @@ import { createSlice, PayloadAction } from '@reduxjs/toolkit';
 import { ConnectionSliceState, ConnectionState } from '../types';
 
 const initialState: ConnectionSliceState = {
-    connectionState: 'disconnected',
+    connectionState: 'connected',
 };
 
 export const connectionSlice = createSlice({