use compoments from ui-toolkit, minor style changes

apps/trading/components/icons/vega.tsx

@@ -1,12 +1,14 @@
+import classNames from 'classnames';
+
 export function Vega({ className }: { className?: string }) {
+  const svgClasses = classNames(className, 'fill-current', 'w-[76px] h-[16px]');
   return (
     <svg
       width="86"
       height="19"
       viewBox="0 0 86 19"
       fill="none"
-      xmlns="http://www.w3.org/2000/svg"
+      className={svgClasses}
-      className={className}
     >
       <path d="M8.05624 16.4619L13.3478 0.0158333H16.0045L9.45138 18.9881H6.58031L0 0.0158333H2.70328L8.05624 16.4619ZM27.1835 10.3067V16.8372H37.5787V18.9873H24.6884V0.0150417H37.3503V2.16442H27.1835V8.16288H36.2395V10.3067H27.1835ZM47.5793 2.31167H49.8165V16.716H47.5793V2.31167V2.31167ZM58.7676 0V2.31167H49.8157V0H58.7683H58.7676ZM49.8157 19V16.716H58.7683V19H49.8157ZM61.0055 16.716H58.7683V12.1481H54.2924V9.86021H61.0055V16.716ZM61.0055 2.31167V4.59483H58.7683V2.31167H61.0055V2.31167ZM86 18.9873H83.3946L82.0251 15.1668H72.6801L71.3106 18.9873H68.7635L75.9769 0.0150417H78.7936L86 18.9873V18.9873ZM77.3138 2.299L73.4694 13.0213H81.239L77.3674 2.29821H77.313L77.3138 2.299Z" />
     </svg>

apps/trading/pages/markets/grid-tabs.tsx

@@ -1,12 +1,10 @@
 import * as Tabs from '@radix-ui/react-tabs';
 import classNames from 'classnames';
 import { useRouter } from 'next/router';
-import { chdir } from 'process';
 import {
   Children,
   isValidElement,
   ReactNode,
-  useCallback,
   useEffect,
   useState,
 } from 'react';

apps/trading/pages/markets/trade-grid.tsx

@@ -13,7 +13,7 @@ export const TradeGrid = ({ market }: TradeGridProps) => {
   const wrapperClasses = classNames(
     'h-full max-h-full',
     'grid gap-[1px] grid-cols-[1fr_325px_325px] grid-rows-[min-content_1fr_200px]',
-    'bg-neutral-200',
+    'bg-black-10',
     'text-ui'
   );
   return (

apps/trading/pages/styles.css

@@ -5,5 +5,5 @@
 html,
 body,
 #__next {
-  height: 100%;
+  @apply h-full;
 }

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

@@ -1,3 +1,4 @@
+import { Button, Input, InputError } from '@vegaprotocol/ui-toolkit';
 import { useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { RestConnector } from '.';
@@ -50,38 +51,41 @@ export function RestConnectorForm({
   return (
     <form onSubmit={handleSubmit(onSubmit)}>
       <div className="mb-12">
-        <input
+        <Input
           className="w-full px-12 py-4 border-black border"
           {...register('wallet', { required: 'Required' })}
           type="text"
           placeholder="Wallet"
         />
         {errors.wallet?.message && (
-          <div className="mt-4 text-sm text-intent-danger">
+          <InputError
+            intent="danger"
+            className="mt-4 text-sm text-intent-danger"
+          >
             {errors.wallet.message}
-          </div>
+          </InputError>
         )}
       </div>
       <div className="mb-12">
-        <input
+        <Input
           className="w-full px-12 py-4 border-black border"
           {...register('passphrase', { required: 'Required' })}
           type="password"
           placeholder="Passphrase"
         />
         {errors.passphrase?.message && (
-          <div className="mt-4 text-sm text-intent-danger">
+          <InputError
+            intent="danger"
+            className="mt-4 text-sm text-intent-danger"
+          >
             {errors.passphrase.message}
-          </div>
+          </InputError>
         )}
       </div>
       {error && <div className="mb-12 text-intent-danger">{error.message}</div>}
-      <button
+      <Button variant="primary" type="submit">
-        type="submit"
-        className="rounded-sm bg-pink text-white py-4 px-12"
-      >
         Connect
-      </button>
+      </Button>
     </form>
   );
 }