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

ColorSchemeContext + Selector component + implemented in ThreePanelLa… #218

Open
wants to merge 2 commits into
base: develop
Choose a base branch
from
Open

ColorSchemeContext + Selector component + implemented in ThreePanelLa… #218

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2fd9f71
ColorSchemeContext + Selector component + implemented in ThreePanelLa…
usselman Sep 16, 2023
d382fa2
Renaming and moving around schemes
usselman Sep 17, 2023
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
21 changes: 21 additions & 0 deletions components/ColorSchemeSelector.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import React from "react";
import { useColorScheme } from "../v13_context/ColorSchemeContext";

const ColorSchemeSelector = () => {
const { setColorScheme } = useColorScheme();

return (
<div>
<p>Pick a color scheme: </p>
<select onChange={(e) => setColorScheme(e.target.value)}>
<option value="classic">Classic</option>
<option value="chrome">Chrome</option>
<option value="sunburst">Sunburst</option>
<option value="retro">Retro</option>
<option value="greenscreen">Terminal</option>
</select>
</div>
);
};

export default ColorSchemeSelector;
124 changes: 85 additions & 39 deletions components/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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) => {
Expand All @@ -29,19 +30,38 @@ function Header() {
authenticate();
};
return (
<div className="fixed -top-16 left-0 z-50 w-screen backdrop-blur-md lg:bg-primary-200 lg:opacity-90 lg:dark:bg-primary-800/20 ">
<div
className={`fixed -top-16 left-0 z-50 w-screen backdrop-blur-md lg:bg-primary-${colorScheme}-200 lg:opacity-90 lg:dark:bg-primary-${colorScheme}-800/20 `}
>
<div className="h-16 bg-red-500 " />
<div className="relative flex h-[50px] items-center justify-between px-4 lg:h-16 lg:px-7">
<div className="flex w-24 items-center lg:hidden">
<button className="cursor-pointer" type="button" onClick={openDrawer} onKeyDown={openDrawer}>
{authenticated ? <UserIcon src={avatar!} size={36} />
: (
<svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
<path strokeLinecap="round" strokeLinejoin="round" d="M4 6h16M4 12h16M4 18h16" />
</svg>
)}
<button
className="cursor-pointer"
type="button"
onClick={openDrawer}
onKeyDown={openDrawer}
>
{authenticated ? (
<UserIcon src={avatar!} size={36} />
) : (
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
strokeWidth={2}
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M4 6h16M4 12h16M4 18h16"
/>
</svg>
)}
</button>
<div className='ml-4 h-8 w-8'/>
<div className="ml-4 h-8 w-8" />
<Link href="/search" className="h-8">
<div className="relative ml-4 flex h-8 w-8 cursor-pointer items-center justify-center">
<svg
Expand All @@ -67,7 +87,11 @@ function Header() {
</Link>
</div>
<div className="" id="price-womp" />
<Drawer selector="#drawerControler" isOpen={isDrawerOpen} onClose={() => setIsDrawerOpen(false)}>
<Drawer
selector="#drawerControler"
isOpen={isDrawerOpen}
onClose={() => setIsDrawerOpen(false)}
>
<SideBarDrawer />
</Drawer>
<div className="hidden grow items-center justify-end lg:flex">
Expand Down Expand Up @@ -135,17 +159,21 @@ function Header() {
</>
) : (
<button
onClick={()=>setWalletPopupOpen(true)}
onClick={() => setWalletPopupOpen(true)}
type="button"
onKeyDown={()=>setWalletPopupOpen(true)}
onKeyDown={() => setWalletPopupOpen(true)}
className="relative ml-4 flex h-8 w-fit cursor-pointer items-center justify-center rounded-md border-none bg-gradient-to-tr from-primary-500 to-primary-600 p-5 text-center text-base font-semibold leading-4 text-white transition duration-500 hover:-translate-y-1"
>
<svg viewBox="0 0 16 14" fill="#000" width="16" height="14">
<path d="M2.16197 13.2675H13.838C15.2698 13.2675 16 12.5445 16 11.1271V2.86576C16 1.45546 15.2698 0.732422 13.838 0.732422H2.16197C0.730201 0.732422 0 1.44831 0 2.86576V11.1271C0 12.5445 0.730201 13.2675 2.16197 13.2675ZM1.18121 2.9445C1.18121 2.25725 1.54631 1.91363 2.20492 1.91363H13.7951C14.4465 1.91363 14.8188 2.25725 14.8188 2.9445V3.9539H1.18121V2.9445ZM2.20492 12.0863C1.54631 12.0863 1.18121 11.7356 1.18121 11.0483V5.50737H14.8188V11.0483C14.8188 11.7356 14.4465 12.0863 13.7951 12.0863H2.20492Z" fill="white" />
<path
d="M2.16197 13.2675H13.838C15.2698 13.2675 16 12.5445 16 11.1271V2.86576C16 1.45546 15.2698 0.732422 13.838 0.732422H2.16197C0.730201 0.732422 0 1.44831 0 2.86576V11.1271C0 12.5445 0.730201 13.2675 2.16197 13.2675ZM1.18121 2.9445C1.18121 2.25725 1.54631 1.91363 2.20492 1.91363H13.7951C14.4465 1.91363 14.8188 2.25725 14.8188 2.9445V3.9539H1.18121V2.9445ZM2.20492 12.0863C1.54631 12.0863 1.18121 11.7356 1.18121 11.0483V5.50737H14.8188V11.0483C14.8188 11.7356 14.4465 12.0863 13.7951 12.0863H2.20492Z"
fill="white"
/>
</svg>
<span className="ml-4"><FormattedMessage id="Connect" /></span>
<span className="ml-4">
<FormattedMessage id="Connect" />
</span>
</button>

)}
</div>
<div className="flex w-24 items-center justify-end lg:hidden">
Expand All @@ -167,15 +195,31 @@ function Header() {
</svg>
</div>
</Link>
{router.pathname !== '/settings' && (
<button type="button" onClick={() => setTuningPopupOpen(true)} onKeyDown={() => setTuningPopupOpen(true)} className="relative ml-4 flex h-8 w-8 cursor-pointer items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="h-6 w-6 text-gray-700 dark:text-gray-300">
<path strokeLinecap="round" strokeLinejoin="round" d="M10.5 6h9.75M10.5 6a1.5 1.5 0 11-3 0m3 0a1.5 1.5 0 10-3 0M3.75 6H7.5m3 12h9.75m-9.75 0a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m-3.75 0H7.5m9-6h3.75m-3.75 0a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m-9.75 0h9.75" />
{router.pathname !== "/settings" && (
<button
type="button"
onClick={() => setTuningPopupOpen(true)}
onKeyDown={() => setTuningPopupOpen(true)}
className="relative ml-4 flex h-8 w-8 cursor-pointer items-center justify-center"
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth={1.5}
stroke="currentColor"
className="h-6 w-6 text-gray-700 dark:text-gray-300"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M10.5 6h9.75M10.5 6a1.5 1.5 0 11-3 0m3 0a1.5 1.5 0 10-3 0M3.75 6H7.5m3 12h9.75m-9.75 0a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m-3.75 0H7.5m9-6h3.75m-3.75 0a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m-9.75 0h9.75"
/>
</svg>
</button>
)}
{authenticated ? (null
/* <Link href="/notifications" className="h-8 mr-2">
{authenticated ? null : (
/* <Link href="/notifications" className="h-8 mr-2">
<div className="ml-4 h-8 w-8 flex justify-center items-center cursor-pointer relative">
<svg
xmlns="http://www.w3.org/2000/svg"
Expand All @@ -193,15 +237,17 @@ function Header() {
</svg>
</div>
</Link> */
) : (
<button
type="button"
onClick={()=>setWalletPopupOpen(true)}
onKeyDown={()=>setWalletPopupOpen(true)}
onClick={() => setWalletPopupOpen(true)}
onKeyDown={() => setWalletPopupOpen(true)}
className="relative ml-2 flex h-8 cursor-pointer items-center justify-center rounded-md border-none bg-gradient-to-tr from-primary-500 to-primary-600 px-3 text-base font-semibold leading-4 text-white transition duration-500 hover:-translate-y-1"
>
<svg viewBox="0 0 16 14" fill="#000" width="16" height="14">
<path d="M2.16197 13.2675H13.838C15.2698 13.2675 16 12.5445 16 11.1271V2.86576C16 1.45546 15.2698 0.732422 13.838 0.732422H2.16197C0.730201 0.732422 0 1.44831 0 2.86576V11.1271C0 12.5445 0.730201 13.2675 2.16197 13.2675ZM1.18121 2.9445C1.18121 2.25725 1.54631 1.91363 2.20492 1.91363H13.7951C14.4465 1.91363 14.8188 2.25725 14.8188 2.9445V3.9539H1.18121V2.9445ZM2.20492 12.0863C1.54631 12.0863 1.18121 11.7356 1.18121 11.0483V5.50737H14.8188V11.0483C14.8188 11.7356 14.4465 12.0863 13.7951 12.0863H2.20492Z" fill="white" />
<path
d="M2.16197 13.2675H13.838C15.2698 13.2675 16 12.5445 16 11.1271V2.86576C16 1.45546 15.2698 0.732422 13.838 0.732422H2.16197C0.730201 0.732422 0 1.44831 0 2.86576V11.1271C0 12.5445 0.730201 13.2675 2.16197 13.2675ZM1.18121 2.9445C1.18121 2.25725 1.54631 1.91363 2.20492 1.91363H13.7951C14.4465 1.91363 14.8188 2.25725 14.8188 2.9445V3.9539H1.18121V2.9445ZM2.20492 12.0863C1.54631 12.0863 1.18121 11.7356 1.18121 11.0483V5.50737H14.8188V11.0483C14.8188 11.7356 14.4465 12.0863 13.7951 12.0863H2.20492Z"
fill="white"
/>
</svg>
{/* <span className='ml-2'>Connect</span> */}
</button>
Expand Down
38 changes: 21 additions & 17 deletions components/PanelLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 (
<div className='bg-primary-300 dark:bg-primary-700/20 h-full'>
<Header/>
<div className='h-16'/>
<div className='grid grid-cols-12 sm:pr-5'>
<div className='hidden lg:block col-span-2 lg:w-full'>
<div className='w-20 xl:w-64 fixed top-16 h-[calc(100%-4rem)] z-50'>
<SideBar/>
<div
className={`bg-primary-${colorScheme}-300 dark:bg-primary-${colorScheme}-700/20 h-full`}
>
<Header />
<div className="h-16" />
<div className="grid grid-cols-12 sm:pr-5">
<div className="hidden lg:block col-span-2 lg:w-full">
<div className="w-20 xl:w-64 fixed top-16 h-[calc(100%-4rem)] z-50">
<SideBar />
</div>
</div>
<div className='col-span-12 lg:col-span-10'>
{props.children}
</div>
<div className="col-span-12 lg:col-span-10">{props.children}</div>
</div>
</div>
)
}
);
};

export default PanelLayout
export default PanelLayout;
Loading