diff --git a/components/ColorSchemeSelector.tsx b/components/ColorSchemeSelector.tsx new file mode 100644 index 0000000..305ace2 --- /dev/null +++ b/components/ColorSchemeSelector.tsx @@ -0,0 +1,21 @@ +import React from "react"; +import { useColorScheme } from "../v13_context/ColorSchemeContext"; + +const ColorSchemeSelector = () => { + const { setColorScheme } = useColorScheme(); + + return ( +
+

Pick a color scheme:

+ +
+ ); +}; + +export default ColorSchemeSelector; diff --git a/components/Header.tsx b/components/Header.tsx index fb8630d..3d64704 100644 --- a/components/Header.tsx +++ b/components/Header.tsx @@ -1,22 +1,23 @@ -import React, { useState } from 'react'; -import Link from 'next/link'; -import { useRouter } from 'next/router'; -import { FormattedMessage } from 'react-intl'; -import Drawer from './Drawer'; -import UserIcon from './UserIcon'; -import WalletProviderPopUp from './WalletProviderPopUp'; -import SideBarDrawer from './SideBarDrawer'; -import LogoTitle from './LogoTitle'; -import TuningProviderPopUp from './TuningProviderPopup'; -import { useBitcoin } from '../context/BitcoinContext'; +import React, { useState } from "react"; +import Link from "next/link"; +import { useRouter } from "next/router"; +import { FormattedMessage } from "react-intl"; +import Drawer from "./Drawer"; +import UserIcon from "./UserIcon"; +import WalletProviderPopUp from "./WalletProviderPopUp"; +import SideBarDrawer from "./SideBarDrawer"; +import { useColorScheme } from "../v13_context/ColorSchemeContext"; +import LogoTitle from "./LogoTitle"; +import TuningProviderPopUp from "./TuningProviderPopup"; +import { useBitcoin } from "../context/BitcoinContext"; function Header() { - const { - authenticated, avatar, authenticate, paymail, - } = useBitcoin(); + const { authenticated, avatar, authenticate, paymail } = useBitcoin(); const [isDrawerOpen, setIsDrawerOpen] = useState(false); const [walletPopupOpen, setWalletPopupOpen] = useState(false); const [tuningPopupOpen, setTuningPopupOpen] = useState(false); + const { colorScheme } = useColorScheme(); + console.log("colorScheme Header", colorScheme); const router = useRouter(); const openDrawer = (e: any) => { @@ -29,19 +30,38 @@ function Header() { authenticate(); }; return ( -
+
- -
+
- setIsDrawerOpen(false)}> + setIsDrawerOpen(false)} + >
@@ -135,17 +159,21 @@ function Header() { ) : ( - )}
@@ -167,15 +195,31 @@ function Header() {
- {router.pathname !== '/settings' && ( - diff --git a/components/PanelLayout.tsx b/components/PanelLayout.tsx index ad54713..5f0e94c 100644 --- a/components/PanelLayout.tsx +++ b/components/PanelLayout.tsx @@ -1,25 +1,29 @@ -import React from 'react' -import dynamic from 'next/dynamic' -const Header = dynamic(() => import('./Header'), { ssr: false}) -const SideBar = dynamic(() => import ('./SideBar'), { ssr: false }) +import React from "react"; +import dynamic from "next/dynamic"; +import { useColorScheme } from "../v13_context/ColorSchemeContext"; +const Header = dynamic(() => import("./Header"), { ssr: false }); +const SideBar = dynamic(() => import("./SideBar"), { ssr: false }); const PanelLayout = (props: { children: React.ReactNode }) => { + const { colorScheme } = useColorScheme(); + console.log("colorScheme PanelLayout:", colorScheme); + return ( -
-
-
-
-
-
- +
+
+
+
+
+
+
-
- {props.children} -
+
{props.children}
- ) -} + ); +}; -export default PanelLayout \ No newline at end of file +export default PanelLayout; diff --git a/components/SideBar.tsx b/components/SideBar.tsx index 8883546..9ae2600 100644 --- a/components/SideBar.tsx +++ b/components/SideBar.tsx @@ -1,93 +1,131 @@ -import React, { useContext, useState, useEffect } from 'react' -import Link from 'next/link'; +import React, { useContext, useState, useEffect } from "react"; +import Link from "next/link"; import { useTheme } from "next-themes"; -import UserIcon from './UserIcon'; -import Drawer from './Drawer'; -import WalletProviderPopUp from './WalletProviderPopUp'; -import { useRelay } from '../context/RelayContext'; -import LocaleSelect from './LocaleSelect'; +import UserIcon from "./UserIcon"; +import Drawer from "./Drawer"; +import WalletProviderPopUp from "./WalletProviderPopUp"; +import { useRelay } from "../context/RelayContext"; +import LocaleSelect from "./LocaleSelect"; +import ColorSchemeSelector from "./ColorSchemeSelector"; -import { FormattedMessage } from 'react-intl'; -import { useBitcoin } from '../context/BitcoinContext'; +import { FormattedMessage } from "react-intl"; +import { useBitcoin } from "../context/BitcoinContext"; -import { useSubdomain } from '../hooks/subdomain' +import { useSubdomain } from "../hooks/subdomain"; const SideBar = () => { - const { theme, setTheme } = useTheme() - const { authenticated, authenticate, paymail, avatar, userName } = useBitcoin() - const [loggedIn, setLoggedIn] = useState(false) - const [walletPopupOpen, setWalletPopupOpen] = useState(false); - const {subdomain} = useSubdomain(); + const { theme, setTheme } = useTheme(); + const { authenticated, authenticate, paymail, avatar, userName } = + useBitcoin(); + const [loggedIn, setLoggedIn] = useState(false); + const [walletPopupOpen, setWalletPopupOpen] = useState(false); + const { subdomain } = useSubdomain(); - const toggleTheme = () => { - if(theme==="dark"){ - setTheme("light") - } - if(theme==="light"){ - setTheme("dark") - } + const toggleTheme = () => { + if (theme === "dark") { + setTheme("light"); } - - const login = (e: any) => { - e.preventDefault(); - authenticate() + if (theme === "light") { + setTheme("dark"); } + }; + + const login = (e: any) => { + e.preventDefault(); + authenticate(); + }; - const chatPath = subdomain ? `/chat/${subdomain}` : `/chat/powco` - const meetPath = subdomain ? `/meet/${subdomain}` : `/meet/powco` - const livePath = subdomain ? `/live/${subdomain}` : `/live/powco` - const interestsPath = subdomain ? `/interests` : `/interests` - const videosPath = subdomain ? `/watch` : `/watch` - const calendarPath = subdomain ? `/events` : `/events` - const watchPath = subdomain ? `/watch/${subdomain}` : `/watch/powco` - const marketPath = subdomain ? `/market/${subdomain}` : `/market` - const walletPath = subdomain ? `/wallet/${subdomain}`: `/wallet` - const issuePath = subdomain ? `/issues/${subdomain}` : `/issues` + const chatPath = subdomain ? `/chat/${subdomain}` : `/chat/powco`; + const meetPath = subdomain ? `/meet/${subdomain}` : `/meet/powco`; + const livePath = subdomain ? `/live/${subdomain}` : `/live/powco`; + const interestsPath = subdomain ? `/interests` : `/interests`; + const videosPath = subdomain ? `/watch` : `/watch`; + const calendarPath = subdomain ? `/events` : `/events`; + const watchPath = subdomain ? `/watch/${subdomain}` : `/watch/powco`; + const marketPath = subdomain ? `/market/${subdomain}` : `/market`; + const walletPath = subdomain ? `/wallet/${subdomain}` : `/wallet`; + const issuePath = subdomain ? `/issues/${subdomain}` : `/issues`; return ( -
-
- {authenticated ? (<> - - +
+
+ {authenticated ? ( + <> + + -
- - {userName} - - - {paymail} - +
+ + {userName} + + + {paymail} +
-
-
- - - -
): - ( -
setWalletPopupOpen(true)} - className='hidden xl:flex ml-4 p-5 transition duration-500 transform hover:-translate-y-1 h-8 text-base leading-4 text-white font-semibold border-none rounded-md bg-gradient-to-tr from-primary-500 to-primary-600 justify-center items-center cursor-pointer relative'> - - - - - -
- ) - } -
-
- -
- - - -
-
- - {/* +
+
+ + + +
+ + ) : ( +
setWalletPopupOpen(true)} + className="hidden xl:flex ml-4 p-5 transition duration-500 transform hover:-translate-y-1 h-8 text-base leading-4 text-white font-semibold border-none rounded-md bg-gradient-to-tr from-primary-500 to-primary-600 justify-center items-center cursor-pointer relative" + > + + + + + + +
+ )} +
+
+ +
+ + + +
+ +
+
+ + {/*
@@ -95,63 +133,143 @@ const SideBar = () => {
Notifications
*/} - -
- - - -
Chat
-
- - {authenticated && -
- - - -
Wallet
-
- } - -
- - - - -
Meet
-
- - -
- - - -
Events
-
- - {/* + +
+ + + +
Chat
+
+ + {authenticated && ( + +
+ + + +
+ Wallet +
+
+ + )} + +
+ + + + +
Meet
+
+ + +
+ + + +
+ Events +
+
+ + {/*
Videos
*/} - -
- - - -
Vision
-
- - -
- - - -
Issues
-
- - {/* + +
+ + + +
+ Vision +
+
+ + +
+ + + +
+ Issues +
+
+ + {/*
@@ -159,7 +277,7 @@ const SideBar = () => {
Market
*/} - {/* + {/*
@@ -167,7 +285,7 @@ const SideBar = () => {
Discover
*/} - {/* + {/*
@@ -177,7 +295,7 @@ const SideBar = () => {
Academy
*/} - {/* + {/*
@@ -185,71 +303,129 @@ const SideBar = () => {
Features
*/} - {!subdomain && ( - -
- - - + {!subdomain && ( + +
+ + + +
+ Jobs +
+
+ + )} + {!subdomain && ( + +
+ + + -
Jobs
-
- - )} - {!subdomain && ( - -
- - - - -
F.A.Q.
-
- - )} - -
- - - - -
-
- -
- {authenticated && -
+
+ + )} + +
+ - {/* */} - Create Post - - } -
-
- - + + -
-
-
- - - - +
+
- +
+ +
+ {authenticated && ( + + + + )} +
+
+ + + +
+
+
+ + +
- {authenticated &&
- {/* + + +
+ {authenticated && ( +
+ {/*

{me.referralLinkByReferralLinkId.shortLinkUrl}

@@ -257,16 +433,17 @@ const SideBar = () => {
*/} -
} - setWalletPopupOpen(false)} - > - setWalletPopupOpen(false)} /> - +
+ )} + setWalletPopupOpen(false)} + > + setWalletPopupOpen(false)} /> +
- ) -} + ); +}; -export default SideBar +export default SideBar; diff --git a/components/ThreeColumnLayout.tsx b/components/ThreeColumnLayout.tsx index 550723c..f12372d 100644 --- a/components/ThreeColumnLayout.tsx +++ b/components/ThreeColumnLayout.tsx @@ -1,60 +1,77 @@ -import React from 'react' -import dynamic from 'next/dynamic' -import Link from 'next/link' -import { useRelay } from '../context/RelayContext' -import { useBitcoin } from '../context/BitcoinContext' -const Header = dynamic(() => import('./Header'), { ssr: false}) -const SideBar = dynamic(() => import ('./SideBar'), { ssr: false }) -const SidebarTuning = dynamic(() => import('./SidebarTuning'), { ssr: false }) -const SidebarTopics = dynamic(() => import('./SidebarTopics'), { ssr: false }) +import React, { useContext, useState, useEffect } from "react"; +import dynamic from "next/dynamic"; +import Link from "next/link"; +import { useRelay } from "../context/RelayContext"; +import { useBitcoin } from "../context/BitcoinContext"; +import { useColorScheme } from "../v13_context/ColorSchemeContext"; +import { ColorSchemeProvider } from "../v13_context/ColorSchemeContext"; +const Header = dynamic(() => import("./Header"), { ssr: false }); +const SideBar = dynamic(() => import("./SideBar"), { ssr: false }); +const SidebarTuning = dynamic(() => import("./SidebarTuning"), { ssr: false }); +const SidebarTopics = dynamic(() => import("./SidebarTopics"), { ssr: false }); -const ThreeColumnLayout = (props: { children: React.ReactNode, RightSidebar?: React.ReactNode }) => { - const { authenticated } = useBitcoin() +const ThreeColumnLayout = (props: { + children: React.ReactNode; + RightSidebar?: React.ReactNode; +}) => { + const { authenticated } = useBitcoin(); + const { colorScheme } = useColorScheme(); + console.log("colorScheme", colorScheme); const ToastTroubleShoot = () => { return (
-

Have trouble login in? Troubleshoot

+

+ Have trouble login in?{" "} + + Troubleshoot + +

- ) + ); }; return ( -
- {!authenticated && } -
-
-
-
-
- +
+ {!authenticated && } +
+
+
+
+
+
-
-
-
- {props.children} -
-
+
+
+
{props.children}
+
-
- {props.RightSidebar ? props.RightSidebar : ( - <> -
- -
-
- -
- - )} - +
+ {props.RightSidebar ? ( + props.RightSidebar + ) : ( + <> +
+ +
+
+ +
+ + )}
- ) -} + ); +}; -export default ThreeColumnLayout +export default ThreeColumnLayout; diff --git a/components/v13_ThreeColumnLayout.tsx b/components/v13_ThreeColumnLayout.tsx index 8971bbd..ea4924d 100644 --- a/components/v13_ThreeColumnLayout.tsx +++ b/components/v13_ThreeColumnLayout.tsx @@ -1,61 +1,81 @@ -'use client' -import React from 'react' -import dynamic from 'next/dynamic' -import Link from 'next/link' -import { useRelay } from '../context/RelayContext' -import { useBitcoin } from '../v13_context/BitcoinContext' -const Header = dynamic(() => import('./v13_Header'), { ssr: false}) -const SideBar = dynamic(() => import ('./v13_SideBar'), { ssr: false }) -const SidebarTuning = dynamic(() => import('./v13_SidebarTuning'), { ssr: false }) -const SidebarTopics = dynamic(() => import('./v13_SidebarTopics'), { ssr: false }) +"use client"; +import React, { useContext, useState } from "react"; +import dynamic from "next/dynamic"; +import Link from "next/link"; +import { useRelay } from "../context/RelayContext"; +import { useBitcoin } from "../v13_context/BitcoinContext"; +import { useColorScheme } from "../v13_context/ColorSchemeContext"; +const Header = dynamic(() => import("./v13_Header"), { ssr: false }); +const SideBar = dynamic(() => import("./v13_SideBar"), { ssr: false }); +const SidebarTuning = dynamic(() => import("./v13_SidebarTuning"), { + ssr: false, +}); +const SidebarTopics = dynamic(() => import("./v13_SidebarTopics"), { + ssr: false, +}); -const ThreeColumnLayout = (props: { children: React.ReactNode, RightSidebar?: React.ReactNode }) => { - const { authenticated } = useBitcoin() +const ThreeColumnLayout = (props: { + children: React.ReactNode; + RightSidebar?: React.ReactNode; +}) => { + const { authenticated } = useBitcoin(); + const { colorScheme } = useColorScheme(); + console.log("colorScheme v13", colorScheme); const ToastTroubleShoot = () => { return (
-

Have trouble login in? Troubleshoot

+

+ Have trouble login in?{" "} + + Troubleshoot + +

- ) + ); }; return ( -
- {!authenticated && } -
-
-
-
-
- +
+ {!authenticated && } +
+
+
+
+
+
-
-
-
- {props.children} -
-
+
+
+
{props.children}
+
-
- {props.RightSidebar ? props.RightSidebar : ( - <> -
- -
-
- -
- - )} - +
+ {props.RightSidebar ? ( + props.RightSidebar + ) : ( + <> +
+ +
+
+ +
+ + )}
- ) -} + ); +}; -export default ThreeColumnLayout +export default ThreeColumnLayout; diff --git a/pages/_app.tsx b/pages/_app.tsx index 21457ad..d94096f 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -1,31 +1,32 @@ /* eslint-disable react/jsx-props-no-spreading */ -import type { AppProps } from 'next/app'; -import Head from 'next/head'; -import Script from 'next/script'; -import { SensiletProvider } from '../context/SensiletContext' +import type { AppProps } from "next/app"; +import Head from "next/head"; +import Script from "next/script"; +import { SensiletProvider } from "../context/SensiletContext"; -import { GetServerSideProps } from 'next' +import { GetServerSideProps } from "next"; -import '../styles/globals.css'; -import { ThemeProvider } from 'next-themes'; -import { Toaster } from 'react-hot-toast'; -import { init } from '@socialgouv/matomo-next'; -import { useEffect } from 'react'; -import { config } from '../template_config'; -import { RelayProvider } from '../context/RelayContext'; -import { HandCashProvider } from '../context/HandCashContext'; -import { TuneProvider } from '../context/TuningContext'; -import Locales from '../context/LocalContext'; -import { BitcoinProvider } from '../context/BitcoinContext'; -import { TwetchProvider } from '../context/TwetchContext'; -import { LocalWalletProvider } from '../context/LocalWalletContext'; -import 'react-tooltip/dist/react-tooltip.css'; +import "../styles/globals.css"; +import { ThemeProvider } from "next-themes"; +import { Toaster } from "react-hot-toast"; +import { init } from "@socialgouv/matomo-next"; +import { useEffect } from "react"; +import { config } from "../template_config"; +import { RelayProvider } from "../context/RelayContext"; +import { HandCashProvider } from "../context/HandCashContext"; +import { TuneProvider } from "../context/TuningContext"; +import Locales from "../context/LocalContext"; +import { BitcoinProvider } from "../context/BitcoinContext"; +import { TwetchProvider } from "../context/TwetchContext"; +import { LocalWalletProvider } from "../context/LocalWalletContext"; +import { ColorSchemeProvider } from "../v13_context/ColorSchemeContext"; +import "react-tooltip/dist/react-tooltip.css"; -import { useSubdomain } from '../hooks/subdomain' +import { useSubdomain } from "../hooks/subdomain"; export default function App({ Component, pageProps }: AppProps) { //const { openGraphData = [] } = pageProps; - const { subdomain } = useSubdomain() + const { subdomain } = useSubdomain(); const openGraphData = [ { @@ -70,7 +71,7 @@ export default function App({ Component, pageProps }: AppProps) { content: "website", key: "website", }, - ] + ]; useEffect(() => { const MATOMO_URL = String(process.env.NEXT_PUBLIC_MATOMO_URL); @@ -92,30 +93,32 @@ export default function App({ Component, pageProps }: AppProps) { src="https://one.relayx.io/relayone.js" strategy="beforeInteractive" /> - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + ); } diff --git a/pages/settings.tsx b/pages/settings.tsx index e353cd5..18ac793 100644 --- a/pages/settings.tsx +++ b/pages/settings.tsx @@ -8,6 +8,7 @@ import { useRelay } from "../context/RelayContext"; import { useSensilet } from "../context/SensiletContext"; import { useHandCash } from "../context/HandCashContext"; import { useTwetch } from "../context/TwetchContext"; + import useWallet from "../hooks/useWallet"; import TuningPanel from "../components/TuningPanel"; @@ -18,12 +19,13 @@ import { useLocalWallet } from "../context/LocalWalletContext"; import WalletSelect from "../components/WalletSelect"; import { useTuning } from "../context/TuningContext"; +import ColorSchemeSelector from "../components/ColorSchemeSelector"; + function capitalizeFirstLetter(s: string) { - return s.charAt(0).toUpperCase() + s.slice(1); - + return s.charAt(0).toUpperCase() + s.slice(1); } const ConnectedWallet = () => { - const { wallet } = useBitcoin() + const { wallet } = useBitcoin(); switch (wallet) { case "relayx": return ( @@ -66,7 +68,7 @@ const ConnectedWallet = () => { />
- ) + ); case "twetch": return (
@@ -99,11 +101,14 @@ const ConnectedWallet = () => { />
- ) + ); case "handcash": return (
- +

Handcash

{ />
- ) + ); case "sensilet": return (
- +

Sensilet

-
+
{ />
- ) + ); case "local": return (
- - - + + + + +

Seed

@@ -169,29 +184,59 @@ const ConnectedWallet = () => { />
- ) + ); default: - return <> + return <>; } -} +}; export default function Settings() { const { theme, setTheme } = useTheme(); - const { logout, authenticated, setWallet, setWalletPopupOpen, walletPopupOpen } = useBitcoin(); + const { + logout, + authenticated, + setWallet, + setWalletPopupOpen, + walletPopupOpen, + } = useBitcoin(); const { signPosts, setSignPosts } = useTuning(); - const { web3, web3Account, sensiletLogout, sensiletAuthenticate, sensiletAuthenticated } = useSensilet() + const { + web3, + web3Account, + sensiletLogout, + sensiletAuthenticate, + sensiletAuthenticated, + } = useSensilet(); const [isDark, setIsDark] = useState(theme === "dark"); - const [sensiletChecked, setSensiletChecked] = useState(!!web3Account) - - const { handcashAuthenticated, handcashAuthenticate, handcashPaymail, handcashLogout } = useHandCash() - const { relayxWallet, relayxLogout, relayxAuthenticated } = useRelay() - const { localWalletLogout, localWallet, localWalletAuthenticated } = useLocalWallet() - const { twetchWallet, twetchLogout, twetchAuthenticated } = useTwetch() + const [sensiletChecked, setSensiletChecked] = useState(!!web3Account); + + const { + handcashAuthenticated, + handcashAuthenticate, + handcashPaymail, + handcashLogout, + } = useHandCash(); + const { relayxWallet, relayxLogout, relayxAuthenticated } = useRelay(); + const { localWalletLogout, localWallet, localWalletAuthenticated } = + useLocalWallet(); + const { twetchWallet, twetchLogout, twetchAuthenticated } = useTwetch(); const walletConnected = useMemo(() => { - const wallets = [relayxAuthenticated, twetchAuthenticated, handcashAuthenticated, sensiletAuthenticated, localWalletAuthenticated]; - return wallets.filter(wallet => wallet).length; - },[relayxAuthenticated, twetchAuthenticated, handcashAuthenticated, sensiletAuthenticated, localWalletAuthenticated]) - const wallet = useWallet() + const wallets = [ + relayxAuthenticated, + twetchAuthenticated, + handcashAuthenticated, + sensiletAuthenticated, + localWalletAuthenticated, + ]; + return wallets.filter((wallet) => wallet).length; + }, [ + relayxAuthenticated, + twetchAuthenticated, + handcashAuthenticated, + sensiletAuthenticated, + localWalletAuthenticated, + ]); + const wallet = useWallet(); useEffect(() => { if (theme === "dark") { @@ -203,16 +248,12 @@ export default function Settings() { }, [theme]); async function connectSensilet() { - - sensiletAuthenticate() - + sensiletAuthenticate(); } useEffect(() => { - - setSensiletChecked(!!web3Account) - - }, [web3Account]) + setSensiletChecked(!!web3Account); + }, [web3Account]); const toggleTheme = () => { if (theme === "dark") { @@ -223,53 +264,43 @@ export default function Settings() { } }; - const handleHandcashLogin = (e:any) => { + const handleHandcashLogin = (e: any) => { e.preventDefault(); - setWallet("handcash") - handcashAuthenticate() - } - - function handleLogout(walletName: string) { - - switch(walletName) { - - case 'relayx': - - relayxLogout() - - break; - - case 'handcash': - - handcashLogout() - - break; + setWallet("handcash"); + handcashAuthenticate(); + }; - case 'twetch': + function handleLogout(walletName: string) { + switch (walletName) { + case "relayx": + relayxLogout(); - twetchLogout() + break; - break; + case "handcash": + handcashLogout(); - case 'local': + break; - localWalletLogout() + case "twetch": + twetchLogout(); - break; + break; - case 'sensilet': + case "local": + localWalletLogout(); - sensiletLogout() + break; - break; + case "sensilet": + sensiletLogout(); + break; } if (wallet?.name === walletName) { - - setWallet(null) + setWallet(null); } - } return ( @@ -330,8 +361,16 @@ export default function Settings() { checked={isDark} onChange={toggleTheme} /> -
-
+
+
@@ -354,12 +393,21 @@ export default function Settings() { type="checkbox" className="sr-only" checked={signPosts} - onChange={()=>setSignPosts(!signPosts)} + onChange={() => setSignPosts(!signPosts)} /> -
-
+
+
+
@@ -384,34 +432,38 @@ export default function Settings() {

{/* */} - Select Wallet {walletConnected > 0 && `(${walletConnected} connected)`} + Select Wallet{" "} + {walletConnected > 0 && `(${walletConnected} connected)`}

{/* */} Chose the BitCoin wallet you want to interact this app with

-
-
- -
- +
+ +
{/* {handcashPaymail && ( @@ -537,12 +589,18 @@ export default function Settings() {
)} */} - {authenticated && } + {authenticated && ( + + )}
diff --git a/tailwind.config.js b/tailwind.config.js index 5bd3498..8eea6bd 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -12,18 +12,51 @@ module.exports = { transparent: "transparent", black: "#000", white: "#fff", - primary: { - 100: "#f3e5f5", - 200: "#e1bee7", - 300: "#ce93d8", - 400: "#ba68c8", - 500: "#ab47bc", - 600: "#8e24aa", - 700: "#7b1fa2", - 800: "#67169a", - 900: "#531182", - }, - // ... + 'primary-classic-100': '#f3e5f5', + 'primary-classic-200': '#e1bee7', + 'primary-classic-300': '#ce93d8', + 'primary-classic-400': '#ba68c8', + 'primary-classic-500': '#ab47bc', + 'primary-classic-600': '#8e24aa', + 'primary-classic-700': '#7b1fa2', + 'primary-classic-800': '#67169a', + 'primary-classic-900': '#531182', + 'primary-chrome-100': '#e8eaf6', + 'primary-chrome-200': '#c5cae9', + 'primary-chrome-300': '#9fa8da', + 'primary-chrome-400': '#7986cb', + 'primary-chrome-500': '#5c6bc0', + 'primary-chrome-600': '#3f51b5', + 'primary-chrome-700': '#3949ab', + 'primary-chrome-800': '#303f9f', + 'primary-chrome-900': '#283593', + 'primary-sunburst-100': '#fff3e0', + 'primary-sunburst-200': '#ffe0b2', + 'primary-sunburst-300': '#ffcc80', + 'primary-sunburst-400': '#ffb74d', + 'primary-sunburst-500': '#ffa726', + 'primary-sunburst-600': '#fb8c00', + 'primary-sunburst-700': '#f57c00', + 'primary-sunburst-800': '#ef6c00', + 'primary-sunburst-900': '#e65100', + 'primary-retro-100': '#ffebee', + 'primary-retro-200': '#ffcdd2', + 'primary-retro-300': '#ef9a9a', + 'primary-retro-400': '#e57373', + 'primary-retro-500': '#ef5350', + 'primary-retro-600': '#f44336', + 'primary-retro-700': '#e53935', + 'primary-retro-800': '#d32f2f', + 'primary-retro-900': '#c62828', + 'primary-greenscreen-100': '#e8f5e9', + 'primary-greenscreen-200': '#c8e6c9', + 'primary-greenscreen-300': '#a5d6a7', + 'primary-greenscreen-400': '#81c784', + 'primary-greenscreen-500': '#66bb6a', + 'primary-greenscreen-600': '#4caf50', + 'primary-greenscreen-700': '#43a047', + 'primary-greenscreen-800': '#388e3c', + 'primary-greenscreen-900': '#2e7d32', }, }, }, diff --git a/v13_context/AppContext.tsx b/v13_context/AppContext.tsx index e0c99a6..68ea0c0 100644 --- a/v13_context/AppContext.tsx +++ b/v13_context/AppContext.tsx @@ -1,48 +1,47 @@ -'use client' +"use client"; -import React from 'react' -import { ThemeProvider } from 'next-themes' -import { LocalWalletProvider } from '../v13_context/LocalWalletContext' -import { RelayProvider } from '../v13_context/RelayContext' -import { SensiletProvider } from '../v13_context/SensiletContext' -import { TwetchProvider } from '../v13_context/TwetchContext' -import { HandCashProvider } from '../v13_context/HandCashContext' -import { BitcoinProvider } from '../v13_context/BitcoinContext' -import { TuneProvider } from '../v13_context/TuningContext' -import Locales from '../v13_context/LocalContext' -import { Toaster } from 'react-hot-toast'; +import React from "react"; +import { ThemeProvider } from "next-themes"; +import { LocalWalletProvider } from "../v13_context/LocalWalletContext"; +import { RelayProvider } from "../v13_context/RelayContext"; +import { SensiletProvider } from "../v13_context/SensiletContext"; +import { TwetchProvider } from "../v13_context/TwetchContext"; +import { HandCashProvider } from "../v13_context/HandCashContext"; +import { BitcoinProvider } from "../v13_context/BitcoinContext"; +import { TuneProvider } from "../v13_context/TuningContext"; +import { ColorSchemeProvider } from "../v13_context/ColorSchemeContext"; +import Locales from "../v13_context/LocalContext"; +import { Toaster } from "react-hot-toast"; -const AppContext = ({ - children, - }: { - children: React.ReactNode - }) => { +const AppContext = ({ children }: { children: React.ReactNode }) => { return ( + - + - + - + - + {children} - + - + - + - + + - ) -} + ); +}; -export default AppContext \ No newline at end of file +export default AppContext; diff --git a/v13_context/ColorSchemeContext.tsx b/v13_context/ColorSchemeContext.tsx new file mode 100644 index 0000000..c276321 --- /dev/null +++ b/v13_context/ColorSchemeContext.tsx @@ -0,0 +1,35 @@ +// ColorSchemeContext.tsx +import React, { createContext, useContext, useState, ReactNode } from "react"; + +interface ColorSchemeContextProps { + colorScheme: string; + setColorScheme: React.Dispatch>; +} + +const ColorSchemeContext = createContext( + undefined +); + +export const useColorScheme = (): ColorSchemeContextProps => { + const context = useContext(ColorSchemeContext); + if (!context) { + throw new Error("useColorScheme must be used within a ColorSchemeProvider"); + } + return context; +}; + +interface ColorSchemeProviderProps { + children: ReactNode; +} + +export const ColorSchemeProvider: React.FC = ({ + children, +}) => { + const [colorScheme, setColorScheme] = useState("classic"); + + return ( + + {children} + + ); +};