feat: limit UI upgrade 3 (#5283)

* feat: meditating cow bg color * feat: full amount on trimmed amounts --------- Co-authored-by: Leandro <[email protected]>
cowprotocol · Jan 16, 2025 · 653f42f · 653f42f
1 parent 0e6646d
commit 653f42f
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 4 deletions.
diff --git a/apps/cowswap-frontend/src/legacy/components/NumericalInput/index.tsx b/apps/cowswap-frontend/src/legacy/components/NumericalInput/index.tsx
@@ -64,6 +64,7 @@ export const Input = React.memo(function InnerInput({
   placeholder,
   prependSymbol,
   onFocus,
+  pattern: _pattern,
   ...rest
 }: {
   value: string | number
@@ -73,10 +74,20 @@ export const Input = React.memo(function InnerInput({
   fontSize?: string
   align?: 'right' | 'left'
   prependSymbol?: string | undefined
+  pattern?: string
 } & Omit<React.HTMLProps<HTMLInputElement>, 'ref' | 'onChange' | 'as'>) {
   // Keep the input strictly as a string
   const stringValue = typeof value === 'string' ? value : String(value)
 
+  const titleRef = React.useCallback(
+    (node: HTMLInputElement | null) => {
+      if (node) {
+        node.title = node.scrollWidth > node.clientWidth ? stringValue : ''
+      }
+    },
+    [stringValue],
+  )
+
   const enforcer = (nextUserInput: string) => {
     // Always allow empty input
     if (nextUserInput === '') {
@@ -118,6 +129,7 @@ export const Input = React.memo(function InnerInput({
       )}
       <StyledInput
         {...rest}
+        ref={titleRef}
         value={stringValue}
         readOnly={readOnly}
         onFocus={(event) => {
@@ -142,8 +154,6 @@ export const Input = React.memo(function InnerInput({
         autoCorrect="off"
         // Keep type="text" to preserve trailing decimals
         type="text"
-        // Remove pattern to prevent browser validation interference
-        pattern=""
         placeholder={placeholder || '0'}
         // minLength to 0 so empty strings are always valid
         minLength={0}

diff --git a/apps/cowswap-frontend/src/modules/ordersTable/pure/OrdersTableContainer/index.tsx b/apps/cowswap-frontend/src/modules/ordersTable/pure/OrdersTableContainer/index.tsx
@@ -55,8 +55,7 @@ const Content = styled.div`
       position: absolute;
       top: 0;
       left: 0;
-      background: var(${UI.COLOR_PRIMARY});
-      opacity: 0.16;
+      background: var(${UI.COLOR_PAPER_DARKER});
       width: var(--size);
       height: var(--size);
       border-radius: var(--size);