fix(web): styling-of-payment-input-and-token-selector

Author: Harman-singh-waraich

web/src/pages/NewTransaction/Terms/Payment/GeneralTransaction/TokenAndAmount/AmountField.tsx

@@ -3,7 +3,7 @@ import styled from "styled-components";
 import { Field } from "@kleros/ui-components-library";
 
 const StyledField = styled(Field)`
-  width: 132px;
+  width: 186px;
   input[type="number"]::-webkit-inner-spin-button,
   input[type="number"]::-webkit-outer-spin-button {
     -webkit-appearance: none;
@@ -15,6 +15,7 @@ const StyledField = styled(Field)`
 
   input {
     font-size: 16px;
+    padding-right: ${({ variant }) => (variant ? "40px" : "16px")};
   }
 `;
 

web/src/pages/NewTransaction/Terms/Payment/GeneralTransaction/TokenAndAmount/TokenSelector/TokenListModal.tsx

@@ -1,16 +1,23 @@
 import React, { useRef, useState } from "react";
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 import { useClickAway } from "react-use";
 import { Searchbar } from "@kleros/ui-components-library";
 import { useNewTransactionContext } from "context/NewTransactionContext";
 import { Overlay } from "components/Overlay";
 import TokenItem from "./TokenItem";
 import { StyledModal } from "pages/MyTransactions/Modal/StyledModal";
 import { useFilteredTokens } from "hooks/useFilteredTokens";
+import { landscapeStyle } from "styles/landscapeStyle";
+import { responsiveSize } from "styles/responsiveSize";
 
 const ReStyledModal = styled(StyledModal)`
   display: flex;
-  width: 500px;
+  width: ${responsiveSize(320, 500)};
+  ${landscapeStyle(
+    () => css`
+      width: 500px;
+    `
+  )}
 `;
 
 const StyledSearchbar = styled(Searchbar)`

web/src/pages/NewTransaction/Terms/Payment/GeneralTransaction/TokenAndAmount/index.tsx

@@ -16,12 +16,6 @@ const Container = styled.div`
   gap: 24px;
   margin-bottom: ${responsiveSize(16, 0)};
   flex-wrap: wrap;
-
-  ${landscapeStyle(
-    () => css`
-      margin-left: 24px;
-    `
-  )}
 `;
 
 const TokenSelectorAndMaxBalance = styled.div`