Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Implemented dark mode #6

Merged
merged 1 commit into from
May 28, 2024
Merged

Implemented dark mode #6

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
60 changes: 43 additions & 17 deletions src/components/connectOverlay/ConnectOverlay.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useState } from 'react';
import React, { useEffect, useState } from 'react';
import axios from 'axios';
import WebApp from '@twa-dev/sdk';
import { PulseLoader } from 'react-spinners';
Expand Down Expand Up @@ -43,11 +43,22 @@ const ConnectOverlay: React.FC<Props> = ({
close,
onConnect,
}) => {
// Redux
const connectionState = useSelector(
(state: RootState) => state.connection.connectionState
);
const dispatch = useDispatch<AppDispatch>();

// Dark Mode
const [darkMode, setDarkMode] = useState<boolean>(
WebApp.colorScheme === 'dark'
);
useEffect(() => {
setDarkMode(WebApp.colorScheme === 'dark');
document.documentElement.classList.toggle('dark', darkMode);
localStorage.setItem('theme', darkMode ? 'dark' : 'light');
}, [WebApp.colorScheme]);

const [networksExpanded, setNetworksExpanded] = useState(true);
const [ethereumWalletsExpanded, setEthereumWalletsExpanded] =
useState(false);
Expand Down Expand Up @@ -202,30 +213,39 @@ const ConnectOverlay: React.FC<Props> = ({
};

return (
<div className={`connect-overlay ${slideAnimation}`}>
<div
className={`connect-overlay ${slideAnimation}`}
style={
darkMode
? {
backgroundColor: '#262233',
}
: {}
}
>
<div className="flex justify-between text-left py-3 px-4">
{connectionState === 'connecting' && (
<p className="m-0 text-lg font-bold text-customBlackText">
<p className="m-0 text-lg font-bold text-customBlackText dark:text-customDarkModeTextColor">
Connecting
</p>
)}
{connectionState === 'disconnected' && (
<p className="m-0 text-lg font-bold text-customBlackText">
<p className="m-0 text-lg font-bold text-customBlackText dark:text-customDarkModeTextColor">
Connect Wallet
</p>
)}
{connectionState === 'connected' && (
<p className="m-0 text-lg font-bold text-customBlackText">
<p className="m-0 text-lg font-bold text-customBlackText dark:text-customDarkModeTextColor">
Account Details
</p>
)}
{connectionState === 'error' && (
<p className="m-0 text-lg font-bold text-customBlackText">
<p className="m-0 text-lg font-bold text-customBlackText dark:text-customDarkModeTextColor">
Connection Error
</p>
)}
{connectionState === 'retrying' && (
<p className="m-0 text-lg font-bold text-customBlackText">
<p className="m-0 text-lg font-bold text-customBlackText dark:text-customDarkModeTextColor">
Retrying
</p>
)}
Expand All @@ -243,10 +263,12 @@ const ConnectOverlay: React.FC<Props> = ({
<PulseLoader size={12} margin={5} color="#2D2D2D" />
</div>
<div>
<p className="text-lg m-4 mt-2">Connecting Wallet</p>
<p className="text-lg m-4 mt-2 dark:text-customDarkModeTextColor">
Connecting Wallet
</p>
</div>
<div>
<p className="m-4 mb-8 px-10">
<p className="m-4 mb-8 px-10 dark:text-customDarkModeTextColor">
Please connect your Wallet & approve transaction
</p>
</div>
Expand All @@ -255,7 +277,7 @@ const ConnectOverlay: React.FC<Props> = ({
{connectionState === 'disconnected' && (
<>
<div className="flex py-4 px-5 justify-between">
<p className="m-0 text-customBlackText text-base font-medium">
<p className="m-0 text-customBlackText text-base font-medium dark:text-customDarkModeTextColor">
Choose Network
</p>
<img
Expand Down Expand Up @@ -291,7 +313,7 @@ const ConnectOverlay: React.FC<Props> = ({
</div>
)}
<div className="flex py-4 px-5 justify-between">
<p className="m-0 text-customBlackText text-base font-medium">
<p className="m-0 text-customBlackText text-base font-medium dark:text-customDarkModeTextColor">
Select Wallet
</p>
<img
Expand Down Expand Up @@ -348,15 +370,19 @@ const ConnectOverlay: React.FC<Props> = ({
alt=""
/>
</div>
{account && <p>{truncateText(account, 8, 8)}</p>}
{account && (
<p className="dark:text-customDarkModeTextColor">
{truncateText(account, 8, 8)}
</p>
)}
</div>
<div className="flex justify-between my-2 mx-1 p-2 mr-4 gap-4">
<div
className="flex align-middle justify-start items-center gap-2"
onClick={copyAccountToClipboard}
>
<img src={copyIcon} alt="" />
<p className="text-xs text-customGrayAccountDetails font-normal">
<p className="text-xs text-customGrayAccountDetails font-normal dark:text-customDarkModeTextColor">
Copy Address
</p>
</div>
Expand All @@ -365,15 +391,15 @@ const ConnectOverlay: React.FC<Props> = ({
onClick={viewOnExplorer}
>
<img src={documentIcon} alt="" />
<p className="text-xs text-customGrayAccountDetails font-normal">
<p className="text-xs text-customGrayAccountDetails font-normal dark:text-customDarkModeTextColor">
View on explorer
</p>
</div>
</div>
</div>
<div className="flex justify-between">
<div className="flex align-middle items-center">
<p className="text-xs">
<p className="text-xs dark:text-customDarkModeTextColor">
Connected with{' '}
{window.localStorage.getItem('walletProvider')}
</p>
Expand All @@ -393,11 +419,11 @@ const ConnectOverlay: React.FC<Props> = ({
<img src={dangerIcon} alt="" />
</div>
<div>
<p className="text-lg font-normal">
<p className="text-lg font-normal dark:text-customDarkModeTextColor">
An Unwanted Error Occurred
</p>
</div>
<div className="flex flex-col mb-4">
<div className="flex flex-col mb-4 dark:text-customDarkModeTextColor">
<p>Wallet not connected.</p>
<p>Please try again</p>
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/components/connectOverlay/NetworkBadge.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ const NetworkBadge: React.FC<Props> = ({
style={{ backgroundColor: selected ? backgroundColor : '' }}
>
<img className="w-11 h-11" src={icon} alt="" />
<p>{network}</p>
<p className="dark:text-customDarkModeTextColor">{network}</p>
</div>
);
};
Expand Down
2 changes: 1 addition & 1 deletion src/components/connectOverlay/WalletBadge.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ const WalletBadge: React.FC<Props> = ({
style={{ backgroundColor: selected ? backgroundColor : '' }}
>
<img className="w-9 h-9" src={icon} alt="" />
<p>{walletName}</p>
<p className="dark:text-customDarkModeTextColor">{walletName}</p>
</div>
);
};
Expand Down
3 changes: 3 additions & 0 deletions tailwind.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
/** @type {import('tailwindcss').Config} */
export default {
darkMode: 'class',
content: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
theme: {
extend: {
Expand All @@ -18,6 +19,8 @@ export default {
customBlueSelected: '#B9C1F4',
customGrayLine: '#c6c6c6',
customGrayAccountDetails: '#616161',
customDarkModeBackground: '#262233',
customDarkModeTextColor: '#DEDEDE',
},
gridTemplateColumns: {
'custom-1-3-1': '1fr 3fr 1fr',
Expand Down
3 changes: 3 additions & 0 deletions vite.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,4 +9,7 @@ export default defineConfig({
outDir: './docs',
},
base: './',
server: {
port: 5174,
},
});
Loading