further styling

apps/trading/tailwind.config.js

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

libs/react-helpers/src/lib/vega-wallet/connect-dialog.tsx

@@ -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)}>
+            <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>
   );

libs/react-helpers/src/lib/vega-wallet/connectors.ts

@@ -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 [
       {

libs/react-helpers/src/lib/vega-wallet/rest-connector-form.tsx

@@ -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>
   );
 }

libs/ui-toolkit/src/components/dialog/index.tsx

@@ -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>