chore(trading): minor style changes 2 (#4698)

libs/orders/src/lib/components/order-list/order-edit-dialog.tsx

@@ -12,9 +12,10 @@ import {
   TradingFormGroup,
   TradingInput,
   TradingInputError,
-  Button,
   Dialog,
-  Icon,
+  VegaIcon,
+  VegaIconNames,
+  TradingButton,
 } from '@vegaprotocol/ui-toolkit';
 import { useForm } from 'react-hook-form';
 import type { Order } from '../order-data-provider';
@@ -37,7 +38,7 @@ export const OrderEditDialog = ({
   order,
   onSubmit,
 }: OrderEditDialogProps) => {
-  const headerClassName = 'text-lg font-bold text-black dark:text-white';
+  const headerClassName = 'text-xs font-bold text-black dark:text-white';
   const {
     register,
     formState: { errors },
@@ -57,13 +58,13 @@ export const OrderEditDialog = ({
       open={isOpen}
       onChange={onChange}
       title={t('Edit order')}
-      icon={<Icon name="edit" />}
+      icon={<VegaIcon name={VegaIconNames.EDIT} />}
     >
       <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
         {order.market && (
           <div className="md:col-span-2">
             <p className={headerClassName}>{t(`Market`)}</p>
-            <p>{t(`${order.market.tradableInstrument.instrument.name}`)}</p>
+            <p>{order.market.tradableInstrument.instrument.code}</p>
           </div>
         )}
         {order.type === Schema.OrderType.TYPE_LIMIT && order.market && (
@@ -149,9 +150,7 @@ export const OrderEditDialog = ({
             )}
           </TradingFormGroup>
         </div>
-        <Button variant="primary" size="md" type="submit">
-          {t('Update')}
-        </Button>
+        <TradingButton type="submit">{t('Update')}</TradingButton>
       </form>
     </Dialog>
   );

libs/orders/src/lib/components/order-list/order-list.tsx

@@ -271,8 +271,8 @@ export const OrderListTable = memo<
           {
             colId: 'amend',
             ...COL_DEFS.actions,
-            minWidth: showAllActions ? 90 : COL_DEFS.actions.minWidth,
-            maxWidth: showAllActions ? 90 : COL_DEFS.actions.minWidth,
+            minWidth: showAllActions ? 80 : COL_DEFS.actions.minWidth,
+            maxWidth: showAllActions ? 80 : COL_DEFS.actions.minWidth,
             cellRenderer: ({ data }: { data?: Order }) => {
               if (!data) return null;
 
@@ -284,6 +284,7 @@ export const OrderListTable = memo<
                         <ButtonLink
                           data-testid="edit"
                           onClick={() => onEdit(data)}
+                          title={t('Edit order')}
                         >
                           <VegaIcon name={VegaIconNames.EDIT} size={16} />
                         </ButtonLink>
@@ -291,6 +292,7 @@ export const OrderListTable = memo<
                       <ButtonLink
                         data-testid="cancel"
                         onClick={() => onCancel(data)}
+                        title={t('Cancel order')}
                       >
                         <VegaIcon name={VegaIconNames.CROSS} size={16} />
                       </ButtonLink>

libs/positions/src/lib/positions-table.tsx

@@ -463,6 +463,7 @@ export const PositionsTable = ({
                         <ButtonLink
                           data-testid="close-position"
                           onClick={() => data && onClose(data)}
+                          title={t('Close position')}
                         >
                           <VegaIcon name={VegaIconNames.CROSS} size={16} />
                         </ButtonLink>

libs/ui-toolkit/src/components/trading-select/select.tsx

@@ -2,7 +2,7 @@ import type { Ref, SelectHTMLAttributes } from 'react';
 import { useRef } from 'react';
 import { forwardRef } from 'react';
 import classNames from 'classnames';
-import { Icon, VegaIcon, VegaIconNames } from '..';
+import { VegaIcon, VegaIconNames } from '..';
 import { defaultSelectElement } from '../../utils/shared';
 import * as SelectPrimitive from '@radix-ui/react-select';
 
@@ -65,8 +65,8 @@ export const TradingRichSelect = forwardRef<
           ref={forwardedRef}
         >
           <SelectPrimitive.Value placeholder={placeholder} />
-          <SelectPrimitive.Icon className={classNames('absolute right-4')}>
-            <Icon name="chevron-down" />
+          <SelectPrimitive.Icon className={classNames('absolute right-2')}>
+            <VegaIcon name={VegaIconNames.CHEVRON_DOWN} />
           </SelectPrimitive.Icon>
         </SelectPrimitive.Trigger>
         <SelectPrimitive.Portal container={containerRef.current}>
@@ -85,11 +85,11 @@ export const TradingRichSelect = forwardRef<
             align={'center'}
           >
             <SelectPrimitive.ScrollUpButton className="absolute z-20 flex items-center justify-center w-full h-6 py-1 bg-gradient-to-t from-transparent to-neutral-50 dark:to-neutral-900">
-              <Icon name="chevron-up" />
+              <VegaIcon name={VegaIconNames.CHEVRON_UP} />
             </SelectPrimitive.ScrollUpButton>
             <SelectPrimitive.Viewport>{children}</SelectPrimitive.Viewport>
             <SelectPrimitive.ScrollDownButton className="absolute bottom-0 z-20 flex items-center justify-center w-full h-6 py-1 bg-gradient-to-b from-transparent to-neutral-50 dark:to-neutral-900">
-              <Icon name="chevron-down" />
+              <VegaIcon name={VegaIconNames.CHEVRON_DOWN} />
             </SelectPrimitive.ScrollDownButton>
           </SelectPrimitive.Content>
         </SelectPrimitive.Portal>
@@ -122,7 +122,7 @@ export const TradingOption = forwardRef<
   >
     <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
     <SelectPrimitive.ItemIndicator className="absolute right-4 top-[50%] translate-y-[-50%]">
-      <Icon name="tick" />
+      <VegaIcon name={VegaIconNames.TICK} />
     </SelectPrimitive.ItemIndicator>
   </SelectPrimitive.Item>
 ));