Skip to content

Commit

Permalink
Merge pull request #6 from softstack/darkmode
Browse files Browse the repository at this point in the history 
Implemented dark mode
  • Loading branch information
@daniel-vahn
daniel-vahn authored May 28, 2024
2 parents a5cd8c7 + af47a8b commit 7fc3dd5
Show file tree
Hide file tree
Showing 5 changed files with 51 additions and 19 deletions.
60 changes: 43 additions & 17 deletions src/components/connectOverlay/ConnectOverlay.tsx
View file
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
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
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
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
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,
},
});

0 comments on commit 7fc3dd5

Please sign in to comment.