feat: adjust padding in sidebar, colors for chart controls

apps/trading/components/sidebar/sidebar.tsx

@@ -117,39 +117,42 @@ export const SidebarContent = () => {
   const { view } = useSidebar();
   const params = useParams();
 
+  let content = null;
+
   if (view === 'order') {
     if (params.marketId) {
-      return <TradingViews.ticket.component marketId={params.marketId} />;
+      content = <TradingViews.ticket.component marketId={params.marketId} />;
     }
-
-    return <div>No marke selected</div>;
   }
 
   if (view === 'deposit') {
-    return <DepositContainer />;
+    content = <DepositContainer />;
   }
 
   if (view === 'withdraw') {
-    return <WithdrawFormContainer submit={() => alert('TODO')} />;
+    content = <WithdrawFormContainer submit={() => alert('TODO')} />;
   }
 
   if (view === 'transfer') {
-    return <TransferContainer />;
+    content = <TransferContainer />;
   }
 
   if (view === 'settings') {
-    return <Settings />;
+    content = <Settings />;
   }
 
   if (view === 'info') {
     if (params.marketId) {
-      return <MarketInfoAccordionContainer marketId={params.marketId} />;
+      content = <MarketInfoAccordionContainer marketId={params.marketId} />;
     }
-
-    return <div>No marke selected</div>;
   }
 
-  return null;
+  return (
+    <div>
+      <h2 className="capitalize mb-2">{view}</h2>
+      {content}
+    </div>
+  );
 };
 
 export const useSidebar = create<{

libs/candles-chart/src/lib/candles-chart.tsx

@@ -131,7 +131,7 @@ export const CandlesChartContainer = ({
 
   return (
     <div className="h-full flex flex-col">
-      <div className="px-4 py-2 flex flex-row flex-wrap gap-2">
+      <div className="px-4 py-2 flex flex-row flex-wrap gap-2 bg-vega-light-100 dark:bg-vega-dark-100">
         <DropdownMenu
           trigger={
             <DropdownMenuTrigger>

libs/deal-ticket/src/components/deal-ticket/deal-ticket.tsx

@@ -269,7 +269,6 @@ export const DealTicket = ({
     <TinyScroll className="h-full overflow-auto">
       <form
         onSubmit={isReadOnly ? undefined : handleSubmit(onSubmit)}
-        className="p-4"
         noValidate
       >
         <Controller

libs/deal-ticket/src/components/deal-ticket/type-selector.tsx

@@ -74,7 +74,7 @@ export const TypeSelector = ({
   };
 
   return (
-    <FormGroup label={t('Order type')} labelFor="order-type" compact={true}>
+    <FormGroup label={t('Type')} labelFor="order-type" compact={true}>
       <Toggle
         id="order-type"
         name="order-type"

libs/market-depth/src/lib/orderbook.tsx

@@ -101,7 +101,7 @@ export const Orderbook = ({
   }, [bids, resolution]);
 
   return (
-    <div className="h-full pl-1 text-xs grid grid-rows-[1fr_min-content]">
+    <div className="h-full text-xs grid grid-rows-[1fr_min-content]">
       <div>
         <ReactVirtualizedAutoSizer disableWidth>
           {({ height }) => {