further styling

This commit is contained in:
Matthew Russell 2022-02-28 14:57:12 -08:00
parent 0b3bf269b6
commit 77214d5427
5 changed files with 34 additions and 11 deletions

View File

@ -9,6 +9,8 @@ module.exports = {
...createGlobPatternsForDependencies(__dirname),
],
darkMode: 'class',
theme,
theme: {
extend: theme,
},
plugins: [],
};

View File

@ -44,7 +44,11 @@ export function VegaConnectDialog({
}, [selectedConnector, connectAndClose]);
return (
<Dialog open={dialogOpen} setOpen={setDialogOpen}>
<Dialog
open={dialogOpen}
setOpen={setDialogOpen}
title="Connect to your Vega Wallet"
>
{selectedConnector instanceof RestConnector ? (
<RestConnectorForm
connector={selectedConnector}
@ -53,13 +57,20 @@ export function VegaConnectDialog({
}}
/>
) : (
<div className="flex flex-col justify-center gap-4 items-start">
<ul className="flex flex-col justify-center gap-4 items-start">
{Object.entries(connectors).map(([key, connector]) => (
<button key={key} onClick={() => setSelectedConnector(connector)}>
{key} provider
</button>
<li key={key} className="mb-12 last:mb-0">
<button
key={key}
onClick={() => setSelectedConnector(connector)}
className="capitalize hover:text-vega-pink"
>
{key} provider
</button>
<p className="text-neutral-500">{connector.description}</p>
</li>
))}
</div>
</ul>
)}
</Dialog>
);

View File

@ -7,6 +7,9 @@ import {
import { LocalStorage } from '@vegaprotocol/storage';
export interface VegaConnector {
/** Description of how to use this connector */
description: string;
/** Connect to wallet and return keys */
connect(): Promise<VegaKey[] | null>;
@ -28,6 +31,7 @@ export class RestConnector implements VegaConnector {
static storageKey = 'vega_wallet';
apiConfig: Configuration;
service: DefaultApi;
description = 'Connects using REST to the Vega wallet desktop app';
constructor() {
const cfg = this.getConfig();
@ -118,6 +122,8 @@ export class RestConnector implements VegaConnector {
* Dummy injected connector that we may use when browser wallet is implemented
*/
export class InjectedConnector implements VegaConnector {
description = 'Connects using the Vega wallet browser extension';
async connect() {
return [
{

View File

@ -22,7 +22,7 @@ export function RestConnectorForm({
} = useForm<FormFields>({
// TODO: Remove default values
defaultValues: {
wallet: 'test',
wallet: 'matt',
passphrase: '123',
},
});
@ -64,7 +64,9 @@ export function RestConnectorForm({
/>
{errors.passphrase?.message && <div>{errors.passphrase.message}</div>}
</div>
<button type="submit">Connect</button>
<button type="submit" className="rounded-sm bg-pink text-white py-4 px-8">
Connect
</button>
</form>
);
}

View File

@ -5,14 +5,16 @@ interface DialogProps {
children: ReactNode;
open: boolean;
setOpen: (isOpen: boolean) => void;
title?: string;
}
export function Dialog({ children, open, setOpen }: DialogProps) {
export function Dialog({ children, open, setOpen, title }: DialogProps) {
return (
<DialogPrimitives.Root open={open} onOpenChange={(x) => setOpen(x)}>
<DialogPrimitives.Portal>
<DialogPrimitives.Overlay className="fixed inset-0 bg-black opacity-20" />
<DialogPrimitives.Content className="fixed w-[300px] bg-white top-40 p-12 left-[calc(50%-150px)]">
<DialogPrimitives.Content className="fixed w-[500px] bg-white top-40 p-28 left-[calc(50%-250px)]">
{title && <h1 className="text-h5 mb-12">{title}</h1>}
{children}
</DialogPrimitives.Content>
</DialogPrimitives.Portal>