Limit UI improvement 6

apps/cowswap-frontend/src/modules/advancedOrders/pure/Settings/index.tsx

@@ -1,24 +1,41 @@
-import { AdvancedOrdersSettingsState } from 'modules/advancedOrders/state/advancedOrdersSettingsAtom'
+import { useAtomValue, useSetAtom } from 'jotai'
+
+import {
+  limitOrdersSettingsAtom,
+  updateLimitOrdersSettingsAtom,
+} from 'modules/limitOrders/state/limitOrdersSettingsAtom'
+import { ORDERS_TABLE_SETTINGS } from 'modules/trade/const/common'
 import { SettingsBox, SettingsContainer, SettingsTitle } from 'modules/trade/pure/Settings'
 
+import { AdvancedOrdersSettingsState } from '../../state/advancedOrdersSettingsAtom'
+
 export interface SettingsProps {
   state: AdvancedOrdersSettingsState
   onStateChanged: (state: Partial<AdvancedOrdersSettingsState>) => void
 }
 
 export function Settings({ state, onStateChanged }: SettingsProps) {
   const { showRecipient } = state
+  const limitOrdersSettings = useAtomValue(limitOrdersSettingsAtom)
+  const updateLimitOrdersSettings = useSetAtom(updateLimitOrdersSettingsAtom)
 
   return (
     <SettingsContainer>
-      <SettingsTitle>Interface Settings</SettingsTitle>
+      <SettingsTitle>Advanced Order Settings</SettingsTitle>
 
       <SettingsBox
         title="Custom Recipient"
         tooltip="Allows you to choose a destination address for the swap other than the connected one."
         value={showRecipient}
         toggle={() => onStateChanged({ showRecipient: !showRecipient })}
       />
+
+      <SettingsBox
+        title={ORDERS_TABLE_SETTINGS.LEFT_ALIGNED.title}
+        tooltip={ORDERS_TABLE_SETTINGS.LEFT_ALIGNED.tooltip}
+        value={limitOrdersSettings.ordersTableOnLeft}
+        toggle={() => updateLimitOrdersSettings({ ordersTableOnLeft: !limitOrdersSettings.ordersTableOnLeft })}
+      />
     </SettingsContainer>
   )
 }

apps/cowswap-frontend/src/modules/limitOrders/pure/Settings/index.cosmos.tsx

@@ -9,6 +9,7 @@ const defaultProps: SettingsProps = {
     limitPricePosition: 'between',
     limitPriceLocked: false,
     columnLayout: 'DEFAULT',
+    ordersTableOnLeft: false,
   },
   onStateChanged(state) {
     console.log('Settings state changed: ', state)

apps/cowswap-frontend/src/modules/limitOrders/pure/Settings/index.tsx

@@ -5,6 +5,7 @@ import { HelpTooltip } from '@cowprotocol/ui'
 
 import styled from 'styled-components/macro'
 
+import { ORDERS_TABLE_SETTINGS } from 'modules/trade/const/common'
 import { SettingsBox, SettingsContainer, SettingsTitle } from 'modules/trade/pure/Settings'
 
 import { LimitOrdersSettingsState } from '../../state/limitOrdersSettingsAtom'
@@ -116,7 +117,8 @@ const COLUMN_LAYOUT_LABELS = {
 }
 
 export function Settings({ state, onStateChanged }: SettingsProps) {
-  const { showRecipient, partialFillsEnabled, limitPricePosition, limitPriceLocked, columnLayout } = state
+  const { showRecipient, partialFillsEnabled, limitPricePosition, limitPriceLocked, columnLayout, ordersTableOnLeft } =
+    state
   const [isOpen, setIsOpen] = useState(false)
   const [isColumnLayoutOpen, setIsColumnLayoutOpen] = useState(false)
 
@@ -180,6 +182,13 @@ export function Settings({ state, onStateChanged }: SettingsProps) {
         toggle={() => onStateChanged({ limitPriceLocked: !limitPriceLocked })}
       />
 
+      <SettingsBox
+        title={ORDERS_TABLE_SETTINGS.LEFT_ALIGNED.title}
+        tooltip={ORDERS_TABLE_SETTINGS.LEFT_ALIGNED.tooltip}
+        value={ordersTableOnLeft}
+        toggle={() => onStateChanged({ ordersTableOnLeft: !ordersTableOnLeft })}
+      />
+
       <SettingsRow>
         <SettingsLabel>
           Limit Price Position

apps/cowswap-frontend/src/modules/limitOrders/state/limitOrdersSettingsAtom.ts

@@ -22,6 +22,7 @@ export interface LimitOrdersSettingsState {
   readonly limitPricePosition: 'top' | 'between' | 'bottom'
   readonly limitPriceLocked: boolean
   readonly columnLayout: ColumnLayoutType
+  readonly ordersTableOnLeft: boolean
 }
 
 export const defaultLimitOrdersSettings: LimitOrdersSettingsState = {
@@ -32,6 +33,7 @@ export const defaultLimitOrdersSettings: LimitOrdersSettingsState = {
   limitPricePosition: 'top',
   limitPriceLocked: true,
   columnLayout: 'DEFAULT',
+  ordersTableOnLeft: false,
 }
 
 // regular

apps/cowswap-frontend/src/modules/ordersTable/containers/OrdersTableWidget/index.tsx

@@ -30,7 +30,7 @@ import { useOrdersTableTokenApprove } from './hooks/useOrdersTableTokenApprove'
 import { useValidatePageUrlParams } from './hooks/useValidatePageUrlParams'
 
 import { BalancesAndAllowances } from '../../../tokens'
-import { OPEN_TAB, ORDERS_TABLE_TABS } from '../../const/tabs'
+import { OPEN_TAB, ORDERS_TABLE_TABS, ALL_ORDERS_TAB } from '../../const/tabs'
 import { OrdersTableContainer } from '../../pure/OrdersTableContainer'
 import { ColumnLayout, LAYOUT_MAP } from '../../pure/OrdersTableContainer/tableHeaders'
 import { OrderActions } from '../../pure/OrdersTableContainer/types'
@@ -61,7 +61,9 @@ const SearchIcon = styled(Search)`
 const SearchInput = styled.input`
   width: 100%;
   padding: 8px 12px 8px 36px;
-  border: 1px solid var(${UI.COLOR_PAPER_DARKER});
+  border: 1px solid var(${UI.COLOR_TEXT_OPACITY_10});
+  background: var(${UI.COLOR_PAPER});
+  color: var(${UI.COLOR_TEXT});
   border-radius: 8px;
   font-size: 13px;
   font-weight: 500;
@@ -72,7 +74,7 @@ const SearchInput = styled.input`
 
   &:focus {
     outline: none;
-    border-color: var(${UI.COLOR_TEXT});
+    border-color: var(${UI.COLOR_TEXT_OPACITY_50});
   }
 `
 
@@ -151,7 +153,7 @@ export function OrdersTableWidget({
     const params = parseOrdersTableUrl(location.search)
 
     return {
-      currentTabId: params.tabId || OPEN_TAB.id,
+      currentTabId: params.tabId || ALL_ORDERS_TAB.id,
       currentPageNumber: params.pageNumber || 1,
     }
   }, [location.search])

apps/cowswap-frontend/src/modules/ordersTable/pure/OrdersTableContainer/OrderRow/styled.tsx

@@ -184,6 +184,8 @@ export const ProgressBarWrapper = styled.div`
   font-size: 12px;
   font-weight: 500;
   height: 100%;
+  width: 100%;
+  max-width: 190px;
   display: flex;
   text-align: left;
   background: transparent;

apps/cowswap-frontend/src/modules/ordersTable/pure/ReceiptModal/FilledField.tsx

@@ -23,10 +23,10 @@ export function FilledField({ order }: Props) {
     <styledEl.Value>
       <styledEl.InlineWrapper>
         <ProgressBarWrapper>
+          <ProgressBar value={filledPercentDisplay}></ProgressBar>
           <b>
             <PercentDisplay percent={filledPercentDisplay} />
           </b>
-          <ProgressBar value={filledPercentDisplay}></ProgressBar>
         </ProgressBarWrapper>
       </styledEl.InlineWrapper>
 

apps/cowswap-frontend/src/modules/ordersTable/pure/ReceiptModal/styled.ts

@@ -193,7 +193,8 @@ export const LightButton = styled.button`
   padding: 6px 14px;
   border-radius: var(${UI.BORDER_RADIUS_NORMAL});
   background-color: var(${UI.COLOR_PAPER_DARKER});
-  transition: border var(${UI.ANIMATION_DURATION}) ease-in-out,
+  transition:
+    border var(${UI.ANIMATION_DURATION}) ease-in-out,
     background-color var(${UI.ANIMATION_DURATION}) ease-in-out;
   cursor: pointer;
   color: inherit;

apps/cowswap-frontend/src/modules/trade/const/common.ts

@@ -8,3 +8,11 @@ export const TradeTypeToUiOrderType: Record<TradeType, UiOrderType> = {
   [TradeType.ADVANCED_ORDERS]: UiOrderType.TWAP,
   [TradeType.YIELD]: UiOrderType.YIELD,
 }
+
+export const ORDERS_TABLE_SETTINGS = {
+  LEFT_ALIGNED: {
+    title: 'Desktop: Left-Aligned Orders Table',
+    tooltip:
+      'When enabled, the orders table will be displayed on the left side on desktop screens. On mobile, the orders table will always be stacked below.',
+  },
+} as const

apps/cowswap-frontend/src/modules/trade/pure/TradePageLayout/index.tsx

@@ -3,24 +3,34 @@ import { Media, UI } from '@cowprotocol/ui'
 import styled from 'styled-components/macro'
 import { WIDGET_MAX_WIDTH } from 'theme'
 
-export const PageWrapper = styled.div<{ isUnlocked: boolean }>`
+const DEFAULT_MAX_WIDTH = '1500px'
+
+export const PageWrapper = styled.div<{ isUnlocked: boolean; secondaryOnLeft?: boolean; maxWidth?: string }>`
   width: 100%;
   display: grid;
-  max-width: 1500px;
+  max-width: ${({ maxWidth = DEFAULT_MAX_WIDTH }) => maxWidth};
   margin: 0 auto;
-  grid-template-columns: ${({ isUnlocked }) => (isUnlocked ? WIDGET_MAX_WIDTH.swap : '')} 1fr;
-  grid-template-rows: max-content;
-  grid-column-gap: 20px;
+  grid-template-columns: 1fr;
+  grid-template-rows: auto auto;
+  grid-template-areas: 'primary' 'secondary';
+  gap: 20px;
 
-  ${Media.upToLarge()} {
-    display: flex;
-    flex-flow: column wrap;
+  ${Media.LargeAndUp()} {
+    grid-template-columns: ${({ isUnlocked, secondaryOnLeft }) =>
+      isUnlocked
+        ? secondaryOnLeft
+          ? '1fr minmax(auto, ' + WIDGET_MAX_WIDTH.swap.replace('px', '') + 'px)'
+          : 'minmax(auto, ' + WIDGET_MAX_WIDTH.swap.replace('px', '') + 'px) 1fr'
+        : '1fr'};
+    grid-template-rows: 1fr;
+    grid-template-areas: ${({ secondaryOnLeft }) => (secondaryOnLeft ? '"secondary primary"' : '"primary secondary"')};
   }
 
   > div:last-child {
     display: ${({ isUnlocked }) => (isUnlocked ? '' : 'none')};
   }
 `
+
 // Form + banner
 export const PrimaryWrapper = styled.div`
   display: flex;
@@ -30,6 +40,7 @@ export const PrimaryWrapper = styled.div`
   max-width: ${WIDGET_MAX_WIDTH.swap};
   margin: 0 auto;
   color: inherit;
+  grid-area: primary;
 `
 
 // Graph + orders table
@@ -48,9 +59,10 @@ export const SecondaryWrapper = styled.div`
   min-height: 200px;
   width: 100%;
   margin: 0 0 76px;
+  grid-area: secondary;
 
   ${Media.upToLargeAlt()} {
     flex-flow: column wrap;
-    margin: 56px 0;
+    margin: 0 0 20px;
   }
 `

apps/cowswap-frontend/src/pages/AdvancedOrders/index.tsx

@@ -7,6 +7,7 @@ import {
   SetupAdvancedOrderAmountsFromUrlUpdater,
 } from 'modules/advancedOrders'
 import { useInjectedWidgetParams } from 'modules/injectedWidget'
+import { limitOrdersSettingsAtom } from 'modules/limitOrders/state/limitOrdersSettingsAtom'
 import { OrdersTableWidget, TabOrderTypes } from 'modules/ordersTable'
 import * as styledEl from 'modules/trade/pure/TradePageLayout'
 import {
@@ -20,9 +21,11 @@ import {
 } from 'modules/twap'
 import { TwapFormState } from 'modules/twap/pure/PrimaryActionButton/getTwapFormState'
 
+const ADVANCED_ORDERS_MAX_WIDTH = '1800px'
 
 export default function AdvancedOrdersPage() {
   const { isUnlocked } = useAtomValue(advancedOrdersAtom)
+  const { ordersTableOnLeft } = useAtomValue(limitOrdersSettingsAtom)
 
   const allEmulatedOrders = useAllEmulatedOrders()
 
@@ -40,7 +43,11 @@ export default function AdvancedOrdersPage() {
     <>
       <FillAdvancedOrdersDerivedStateUpdater slippage={twapSlippage} />
       <SetupAdvancedOrderAmountsFromUrlUpdater />
-      <styledEl.PageWrapper isUnlocked={isUnlocked}>
+      <styledEl.PageWrapper
+        isUnlocked={isUnlocked}
+        maxWidth={ADVANCED_ORDERS_MAX_WIDTH}
+        secondaryOnLeft={ordersTableOnLeft}
+      >
         <styledEl.PrimaryWrapper>
           <AdvancedOrdersWidget
             updaters={<TwapUpdaters />}

apps/cowswap-frontend/src/pages/LimitOrders/RegularLimitOrders.tsx

@@ -1,22 +1,26 @@
+import { useAtomValue } from 'jotai'
+
 import { UiOrderType } from '@cowprotocol/types'
 import { useWalletInfo } from '@cowprotocol/wallet'
 
 import { useOrders } from 'legacy/state/orders/hooks'
 
 import { useInjectedWidgetParams } from 'modules/injectedWidget'
-import { LimitOrdersWidget, useIsWidgetUnlocked } from 'modules/limitOrders'
+import { LimitOrdersWidget, useIsWidgetUnlocked, limitOrdersSettingsAtom } from 'modules/limitOrders'
 import { OrdersTableWidget, TabOrderTypes } from 'modules/ordersTable'
 import * as styledEl from 'modules/trade/pure/TradePageLayout'
 
+const LIMIT_ORDERS_MAX_WIDTH = '1800px'
 
 export function RegularLimitOrders() {
   const isUnlocked = useIsWidgetUnlocked()
   const { chainId, account } = useWalletInfo()
   const allLimitOrders = useOrders(chainId, account, UiOrderType.LIMIT)
   const { hideOrdersTable } = useInjectedWidgetParams()
+  const { ordersTableOnLeft } = useAtomValue(limitOrdersSettingsAtom)
 
   return (
-    <styledEl.PageWrapper isUnlocked={isUnlocked}>
+    <styledEl.PageWrapper isUnlocked={isUnlocked} secondaryOnLeft={ordersTableOnLeft} maxWidth={LIMIT_ORDERS_MAX_WIDTH}>
       <styledEl.PrimaryWrapper>
         <LimitOrdersWidget />
       </styledEl.PrimaryWrapper>