fix input back color, select border color, donate button type

Giveth · Sep 21, 2024 · 606250d · 606250d
1 parent f1b63ed
commit 606250d
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 42 deletions.
diff --git a/src/components/input/BaseInput.tsx b/src/components/input/BaseInput.tsx
@@ -60,6 +60,7 @@ export const BaseInput = memo(
 BaseInput.displayName = 'BaseInput';
 
 const Input = styled.input`
+	background-color: inherit;
 	border: 0;
 	flex: 1;
 	font-size: 18px;

diff --git a/src/components/views/donate/OneTime/OneTimeDonationCard.tsx b/src/components/views/donate/OneTime/OneTimeDonationCard.tsx
@@ -10,6 +10,7 @@ import {
 	IconRefresh16,
 	IconWalletOutline24,
 	neutralColors,
+	OutlineButton,
 	semanticColors,
 } from '@giveth/ui-design-system';
 // @ts-ignore
@@ -439,6 +440,12 @@ const CryptoDonation: FC<{
 							isConnected && setShowSelectTokenModal(true)
 						}
 						disabled={!isConnected}
+						style={{
+							color:
+								selectedOneTimeToken || !isConnected
+									? 'inherit'
+									: brandColors.giv[500],
+						}}
 					>
 						{selectedOneTimeToken ? (
 							<Flex gap='8px' $alignItems='center'>
@@ -466,40 +473,46 @@ const CryptoDonation: FC<{
 						decimals={selectedOneTimeToken?.decimals}
 					/>
 				</InputWrapper>
-				<FlexStyled
-					gap='4px'
-					$alignItems='center'
-					disabled={!selectedOneTimeToken}
-				>
-					<GLinkStyled
-						size='Small'
-						onClick={() => setAmount(selectedTokenBalance - gasfee)}
+				{selectedOneTimeToken ? (
+					<FlexStyled
+						gap='4px'
+						$alignItems='center'
+						disabled={!selectedOneTimeToken}
 					>
-						{formatMessage({
-							id: 'label.available',
-						})}
-						:{' '}
-						{selectedOneTimeToken
-							? truncateToDecimalPlaces(
-									formatUnits(
-										selectedTokenBalance,
-										tokenDecimals,
-									),
-									tokenDecimals / 3,
-								)
-							: 0.0}
-					</GLinkStyled>
-					<IconWrapper onClick={() => !isRefetching && refetch()}>
-						{isRefetching ? (
-							<Spinner size={16} />
-						) : (
-							<IconRefresh16 />
+						<GLinkStyled
+							size='Small'
+							onClick={() =>
+								setAmount(selectedTokenBalance - gasfee)
+							}
+						>
+							{formatMessage({
+								id: 'label.available',
+							})}
+							:{' '}
+							{selectedOneTimeToken
+								? truncateToDecimalPlaces(
+										formatUnits(
+											selectedTokenBalance,
+											tokenDecimals,
+										),
+										tokenDecimals / 3,
+									)
+								: 0.0}
+						</GLinkStyled>
+						<IconWrapper onClick={() => !isRefetching && refetch()}>
+							{isRefetching ? (
+								<Spinner size={16} />
+							) : (
+								<IconRefresh16 />
+							)}
+						</IconWrapper>
+						{insufficientGasFee && (
+							<WarnError>{amountErrorText}</WarnError>
 						)}
-					</IconWrapper>
-					{insufficientGasFee && (
-						<WarnError>{amountErrorText}</WarnError>
-					)}
-				</FlexStyled>
+					</FlexStyled>
+				) : (
+					<div style={{ height: '21.5px' }} />
+				)}
 			</FlexStyled>
 			{hasActiveQFRound && !isOnQFEligibleNetworks && walletChainType && (
 				<DonateQFEligibleNetworks />
@@ -535,15 +548,21 @@ const CryptoDonation: FC<{
 					})}
 				/>
 			)}
-			{isConnected && (
-				<MainButton
-					id='Donate_Final'
-					label={formatMessage({ id: 'label.donate' })}
-					disabled={donationDisabled}
-					size='medium'
-					onClick={handleDonate}
-				/>
-			)}
+			{isConnected &&
+				(donationDisabled ? (
+					<OutlineButton
+						label={formatMessage({ id: 'label.donate' })}
+						disabled
+						size='medium'
+					/>
+				) : (
+					<MainButton
+						id='Donate_Final'
+						label={formatMessage({ id: 'label.donate' })}
+						size='medium'
+						onClick={handleDonate}
+					/>
+				))}
 			{!isConnected && (
 				<MainButton
 					label={formatMessage({

diff --git a/src/components/views/donate/Recurring/RecurringDonationCard.tsx b/src/components/views/donate/Recurring/RecurringDonationCard.tsx
@@ -831,7 +831,10 @@ export const InputWrapper = styled(Flex)`
 	align-items: center;
 `;
 
-export const Input = styled(AmountInput)`
+export const Input = styled(AmountInput)<{ disabled?: boolean }>`
+	background-color: ${props =>
+		props.disabled ? neutralColors.gray[300] : 'white'};
+	opacity: ${props => (props.disabled ? 0.4 : 1)};
 	width: 100%;
 	border-left: 2px solid ${neutralColors.gray[300]};
 	#amount-input {