LaconicNetwork/vega-frontend-monorepo
3
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

Add theme switcher component

Browse Source
This commit is contained in:
Bartłomiej Głownia 2022-03-09 09:57:59 +01:00 committed by Matthew Russell
parent 5cf4cafe22
commit e8a795461d
7 changed files with 77 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/trading/pages/_app.page.tsx
View File

@ -13,7 +13,7 @@ function VegaTradingApp({ Component, pageProps }: AppProps) {
<Head>
<title>Welcome to trading!</title>
</Head>
<div className="h-full grid grid-rows-[min-content,_1fr]">
<div className="h-full grid grid-rows-[min-content,_1fr] dark:bg-black dark:text-white-60 bg-white text-black-60">
<Navbar />
<main>
<Component {...pageProps} />

1
libs/tailwindcss-config/src/theme.js
View File

@ -32,6 +32,7 @@ module.exports = {
95: 'rgba(0, 0, 0, 0.95)',
100: 'rgba(0, 0, 0, 1)',
},
blue: '#1DA2FB',
coral: '#FF6057',
vega: {
yellow: '#EDFF22',

1
libs/ui-toolkit/src/components/theme-switcher/index.tsx Normal file
View File

@ -0,0 +1 @@
export * from './theme-switcher';

16
libs/ui-toolkit/src/components/theme-switcher/theme-switcher.spec.tsx Normal file
View File

@ -0,0 +1,16 @@
import { render } from '@testing-library/react';
import { ThemeSwitcher } from './theme-switcher';
describe('ThemeSwitcher', () => {
it('should render successfully', () => {
const { baseElement } = render(
<ThemeSwitcher
onToggle={() => {
return;
}}
/>
);
expect(baseElement).toBeTruthy();
});
});

14
libs/ui-toolkit/src/components/theme-switcher/theme-switcher.stories.tsx Normal file
View File

@ -0,0 +1,14 @@
import { Story, Meta } from '@storybook/react';
import { ThemeSwitcher } from './theme-switcher';
export default {
component: ThemeSwitcher,
title: 'ThemeSwitcher',
} as Meta;
const Template: Story = (args) => (
<ThemeSwitcher onToggle={() => document.body.classList.toggle('dark')} />
);
export const Default = Template.bind({});
Default.args = {};

43
libs/ui-toolkit/src/components/theme-switcher/theme-switcher.tsx Normal file
View File

@ -0,0 +1,43 @@
export const ThemeSwitcher = ({ onToggle }: { onToggle: () => void }) => (
<button type="button" onClick={() => onToggle()}>
<span className="dark:hidden">
<svg
viewBox="0 0 24 24"
fill="none"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
className="w-24 h-24"
>
<path
d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
className="fill-blue/60 stroke-blue-500"
></path>
<path
d="M12 4v1M17.66 6.344l-.828.828M20.005 12.004h-1M17.66 17.664l-.828-.828M12 20.01V19M6.34 17.664l.835-.836M3.995 12.004h1.01M6 6l.835.836"
className="stroke-blue"
></path>
</svg>
</span>
<span className="hidden dark:inline">
<svg viewBox="0 0 24 24" fill="none" className="w-24 h-24">
<path
fillRule="evenodd"
clipRule="evenodd"
d="M17.715 15.15A6.5 6.5 0 0 1 9 6.035C6.106 6.922 4 9.645 4 12.867c0 3.94 3.153 7.136 7.042 7.136 3.101 0 5.734-2.032 6.673-4.853Z"
className="fill-blue/20"
></path>
<path
d="m17.715 15.15.95.316a1 1 0 0 0-1.445-1.185l.495.869ZM9 6.035l.846.534a1 1 0 0 0-1.14-1.49L9 6.035Zm8.221 8.246a5.47 5.47 0 0 1-2.72.718v2a7.47 7.47 0 0 0 3.71-.98l-.99-1.738Zm-2.72.718A5.5 5.5 0 0 1 9 9.5H7a7.5 7.5 0 0 0 7.5 7.5v-2ZM9 9.5c0-1.079.31-2.082.845-2.93L8.153 5.5A7.47 7.47 0 0 0 7 9.5h2Zm-4 3.368C5 10.089 6.815 7.75 9.292 6.99L8.706 5.08C5.397 6.094 3 9.201 3 12.867h2Zm6.042 6.136C7.718 19.003 5 16.268 5 12.867H3c0 4.48 3.588 8.136 8.042 8.136v-2Zm5.725-4.17c-.81 2.433-3.074 4.17-5.725 4.17v2c3.552 0 6.553-2.327 7.622-5.537l-1.897-.632Z"
className="fill-blue"
></path>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M17 3a1 1 0 0 1 1 1 2 2 0 0 0 2 2 1 1 0 1 1 0 2 2 2 0 0 0-2 2 1 1 0 1 1-2 0 2 2 0 0 0-2-2 1 1 0 1 1 0-2 2 2 0 0 0 2-2 1 1 0 0 1 1-1Z"
className="fill-blue"
></path>
</svg>
</span>
</button>
);

1
libs/ui-toolkit/src/index.ts
View File

@ -9,3 +9,4 @@ export { Input } from './components/input';
export { InputError } from './components/input-error';
export { Select } from './components/select';
export { TextArea } from './components/text-area';
export { ThemeSwitcher } from './components/theme-switcher';