remove input custom styles

ui/pages/RewardsDashboard.tsx

@@ -4,8 +4,8 @@ import React, { useEffect } from 'react';
 
 import { useRewardsContext } from 'lib/contexts/rewards';
 import { apos } from 'lib/html-entities';
-import CopyField from 'ui/rewards/CopyField';
 import DailyRewardClaimButton from 'ui/rewards/DailyRewardClaimButton';
+import ReadOnlyInputWithCopy from 'ui/rewards/ReadOnlyInputWithCopy';
 import RewardsDashboardCard from 'ui/rewards/RewardsDashboardCard';
 import RewardsDashboardCardValue from 'ui/rewards/RewardsDashboardCardValue';
 import LinkExternal from 'ui/shared/links/LinkExternal';
@@ -104,13 +104,13 @@ const RewardsDashboard = () => {
             py={{ base: 4, md: 0 }}
             flexDirection={{ base: 'column', md: 'row' }}
           >
-            <CopyField
+            <ReadOnlyInputWithCopy
               label="Referral link"
               value={ `https://eth.blockscout.com?ref=${ referralsQuery.data?.code }` }
               isLoading={ referralsQuery.isPending }
               flex={ 2 }
             />
-            <CopyField
+            <ReadOnlyInputWithCopy
               label="Referral code"
               value={ referralsQuery.data?.code || '' }
               isLoading={ referralsQuery.isPending }

ui/rewards/CopyField.tsx

-import { FormControl, Input, InputGroup, InputRightElement, Skeleton, chakra, useColorModeValue } from '@chakra-ui/react';
-import React from 'react';
-
-import CopyToClipboard from 'ui/shared/CopyToClipboard';
-import InputPlaceholder from 'ui/shared/InputPlaceholder';
-
-type Props = {
-  label: string;
-  value: string;
-  className?: string;
-  isLoading?: boolean;
-};
-
-const CopyField = ({ label, value, className, isLoading }: Props) => {
-  const bgColor = ` ${ useColorModeValue('gray.200', 'blackAlpha.900') } !important`;
-  return (
-    <FormControl variant="floating" id={ label } className={ className }>
-      <Skeleton isLoaded={ !isLoading }>
-        <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>
-      </Skeleton>
-    </FormControl>
-  );
-};
-
-export default chakra(CopyField);

ui/rewards/ReadOnlyInputWithCopy.tsx

+import { FormControl, Input, InputGroup, InputRightElement, Skeleton, chakra } from '@chakra-ui/react';
+import React from 'react';
+
+import CopyToClipboard from 'ui/shared/CopyToClipboard';
+import InputPlaceholder from 'ui/shared/InputPlaceholder';
+
+type Props = {
+  label: string;
+  value: string;
+  className?: string;
+  isLoading?: boolean;
+};
+
+const ReadOnlyInputWithCopy = ({ label, value, className, isLoading }: Props) => (
+  <FormControl variant="floating" id={ label } className={ className }>
+    <Skeleton isLoaded={ !isLoading }>
+      <InputGroup>
+        <Input
+          readOnly
+          fontWeight="500"
+          value={ value }
+          overflow="hidden"
+          textOverflow="ellipsis"
+          sx={{
+            '&:not(:placeholder-shown)': {
+              pr: '40px',
+            },
+          }}
+        />
+        <InputPlaceholder text={ label }/>
+        <InputRightElement w="40px" display="flex" justifyContent="flex-end" pr={ 2 }>
+          <CopyToClipboard text={ value }/>
+        </InputRightElement>
+      </InputGroup>
+    </Skeleton>
+  </FormControl>
+);
+
+export default chakra(ReadOnlyInputWithCopy);

ui/rewards/steps/CongratsStepContent.tsx

@@ -10,7 +10,7 @@ import meritsIcon from 'icons/merits_colored.svg';
 import { useRewardsContext } from 'lib/contexts/rewards';
 import IconSvg from 'ui/shared/IconSvg';
 
-import CopyField from '../CopyField';
+import ReadOnlyInputWithCopy from '../ReadOnlyInputWithCopy';
 
 type Props = {
   isReferral: boolean;
@@ -84,7 +84,7 @@ const CongratsStepContent = ({ isReferral }: Props) => {
           </Skeleton>
           { ' ' }bonus on all merits earned by your referrals
         </Text>
-        <CopyField
+        <ReadOnlyInputWithCopy
           label="Referral link"
           value={ refLink }
           isLoading={ referralsQuery.isLoading }

ui/rewards/steps/LoginStepContent.tsx

@@ -107,7 +107,6 @@ const LoginStepContent = ({ goNext, closeModal }: Props) => {
             <FormControl variant="floating" id="referral-code" mt={ 3 }>
               <Input
                 fontWeight="500"
-                borderRadius="12px !important"
                 value={ refCode }
                 onChange={ handleRefCodeChange }
                 isInvalid={ refCodeError }

ui/shared/InputPlaceholder.tsx

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