update input bg color and border radius

ui/rewards/CopyField.tsx

@@ -1,4 +1,4 @@
-import { FormControl, Input, InputGroup, InputRightElement, chakra } from '@chakra-ui/react';
+import { FormControl, Input, InputGroup, InputRightElement, chakra, useColorModeValue } from '@chakra-ui/react';
 import React from 'react';
 
 import CopyToClipboard from 'ui/shared/CopyToClipboard';
@@ -10,16 +10,29 @@ type Props = {
   className?: string;
 };
 
-const CopyField = ({ label, value, className }: Props) => (
-  <FormControl variant="floating" id={ label } className={ className }>
-    <InputGroup>
-      <Input readOnly fontWeight="500" value={ value } overflow="hidden" textOverflow="ellipsis" pr="40px !important"/>
-      <InputPlaceholder text={ label }/>
-      <InputRightElement w="40px" display="flex" justifyContent="flex-end" pr={ 2 }>
-        <CopyToClipboard text={ value }/>
-      </InputRightElement>
-    </InputGroup>
-  </FormControl>
-);
+const CopyField = ({ label, value, className }: Props) => {
+  const bgColor = ` ${ useColorModeValue('gray.200', 'blackAlpha.900') } !important`;
+  return (
+    <FormControl variant="floating" id={ label } className={ className }>
+      <InputGroup>
+        <Input
+          readOnly
+          fontWeight="500"
+          value={ value }
+          overflow="hidden"
+          textOverflow="ellipsis"
+          pr="40px !important"
+          bgColor={ bgColor }
+          borderColor={ bgColor }
+          borderRadius="12px !important"
+        />
+        <InputPlaceholder text={ label } bgColor={ bgColor }/>
+        <InputRightElement w="40px" display="flex" justifyContent="flex-end" pr={ 2 }>
+          <CopyToClipboard text={ value }/>
+        </InputRightElement>
+      </InputGroup>
+    </FormControl>
+  );
+};
 
 export default chakra(CopyField);

ui/rewards/steps/LoginStepContent.tsx

@@ -34,7 +34,7 @@ const LoginStepContent = ({ goNext }: { goNext: () => void }) => {
           </Flex>
           { isSwitchChecked && (
             <FormControl variant="floating" id="referral-code" mt={ 3 }>
-              <Input fontWeight="500"/>
+              <Input fontWeight="500" borderRadius="12px !important"/>
               <InputPlaceholder text="Code"/>
             </FormControl>
           ) }

ui/shared/InputPlaceholder.tsx

@@ -7,9 +7,10 @@ interface Props {
   icon?: React.ReactNode;
   error?: Partial<FieldError>;
   isFancy?: boolean;
+  className?: string;
 }
 
-const InputPlaceholder = ({ text, icon, error, isFancy }: Props) => {
+const InputPlaceholder = ({ text, icon, error, isFancy, className }: Props) => {
   let errorMessage = error?.message;
 
   if (!errorMessage && error?.type === 'pattern') {
@@ -22,6 +23,7 @@ const InputPlaceholder = ({ text, icon, error, isFancy }: Props) => {
       { ...(isFancy ? { 'data-fancy': true } : {}) }
       variant="floating"
       bgColor="deeppink"
+      className={ className }
     >
       { icon }
       <chakra.span>{ text }</chakra.span>
@@ -30,4 +32,4 @@ const InputPlaceholder = ({ text, icon, error, isFancy }: Props) => {
   );
 };
 
-export default React.memo(InputPlaceholder);
+export default React.memo(chakra(InputPlaceholder));