Skip to content

Commit

Permalink
update common styled and reused components
Browse files Browse the repository at this point in the history
  • Loading branch information
@RamRamez
RamRamez committed Sep 22, 2024
1 parent 39068fd commit 19292ec
Show file tree
Hide file tree
Showing 6 changed files with 193 additions and 140 deletions.
57 changes: 39 additions & 18 deletions src/components/ToggleSwitch.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,17 +2,23 @@ import styled from 'styled-components';
import { brandColors, neutralColors, P, Flex } from '@giveth/ui-design-system';
import { FC } from 'react';

type TSizes = 'small' | 'medium';
type TTheme = 'default' | 'purple-gray';
export enum EToggleSwitchSizes {
SMALL = 'small',
MEDIUM = 'medium',
}
export enum EToggleSwitchThemes {
DEFAULT = 'default',
PURPLE_GRAY = 'purple-gray',
}

interface IToggleButton {
isOn: boolean;
toggleOnOff: (isOn: boolean) => void;
label: string;
disabled?: boolean;
className?: string;
size?: TSizes;
theme?: TTheme;
size?: EToggleSwitchSizes;
theme?: EToggleSwitchThemes;
}

const ToggleSwitch: FC<IToggleButton> = ({
Expand Down Expand Up @@ -50,50 +56,65 @@ const InputStyled = styled.input`
height: 0;
`;

const Bullet = styled.div<{ $isOn: boolean; size?: TSizes; theme?: TTheme }>`
const Bullet = styled.div<{
$isOn: boolean;
size?: EToggleSwitchSizes;
theme?: EToggleSwitchThemes;
}>`
position: absolute;
border-radius: 50%;
width: ${props => (props.size === 'small' ? '10px' : '14px')};
height: ${props => (props.size === 'small' ? '10px' : '14px')};
width: ${props =>
props.size === EToggleSwitchSizes.SMALL ? '10px' : '14px'};
height: ${props =>
props.size === EToggleSwitchSizes.SMALL ? '10px' : '14px'};
background-color: ${props =>
props.theme === 'purple-gray' ? 'white' : brandColors.pinky[200]};
props.theme === EToggleSwitchThemes.PURPLE_GRAY
? 'white'
: brandColors.pinky[200]};
border: 3px solid white;
left: ${({ $isOn, size }) =>
$isOn
? size === 'small'
? size === EToggleSwitchSizes.SMALL
? '12px'
: '15px'
: size === 'small'
: size === EToggleSwitchSizes.SMALL
? '2px'
: '1px'};
transition: left 0.2s ease-in-out;
top: ${props => (props.size === 'small' ? '2px' : '1px')};
top: ${props => (props.size === EToggleSwitchSizes.SMALL ? '2px' : '1px')};
`;

const Switch = styled.span<{ $isOn: boolean; size?: TSizes; theme?: TTheme }>`
const Switch = styled.span<{
$isOn: boolean;
size?: EToggleSwitchSizes;
theme?: EToggleSwitchThemes;
}>`
position: relative;
width: ${props => (props.size === 'small' ? '24px' : '30px')};
height: ${props => (props.size === 'small' ? '14px' : '16px')};
width: ${props =>
props.size === EToggleSwitchSizes.SMALL ? '24px' : '30px'};
height: ${props =>
props.size === EToggleSwitchSizes.SMALL ? '14px' : '16px'};
flex-shrink: 0;
padding-left: 1px;
padding-right: 1px;
border-radius: 50px;
cursor: pointer;
background-color: ${props =>
props.$isOn
? props.theme === 'purple-gray'
? props.theme === EToggleSwitchThemes.PURPLE_GRAY
? brandColors.giv[500]
: brandColors.pinky[500]
: props.theme === 'purple-gray'
: props.theme === EToggleSwitchThemes.PURPLE_GRAY
? neutralColors.gray[300]
: neutralColors.gray[700]};
transition: background-color 0.3s ease-in-out;
`;

const Caption = styled(P)<{ size?: TSizes }>`
const Caption = styled(P)<{ size?: EToggleSwitchSizes }>`
color: ${neutralColors.gray[800]};
font-weight: 500;
font-size: ${props => (props.size === 'small' ? '14px' : '16px')};
font-size: ${props =>
props.size === EToggleSwitchSizes.SMALL ? '14px' : '16px'};
`;

const Container = styled(Flex)<{ $disabled?: boolean }>`
Expand Down
56 changes: 12 additions & 44 deletions src/components/views/donate/OneTime/OneTimeDonationCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,23 +48,24 @@ import QFModal from './QFModal';
import EstimatedMatchingToast from '@/components/views/donate/OneTime/EstimatedMatchingToast';
import TotalDonation from './TotalDonation';
import {
BadgesBase,
GLinkStyled,
IconWrapper,
Input,
InputWrapper,
SelectTokenPlaceHolder,
SelectTokenWrapper,
} from '../Recurring/RecurringDonationCard';
} from '../common/common.styled';
import { TokenIcon } from '../TokenIcon/TokenIcon';
import { SelectTokenModal } from './SelectTokenModal/SelectTokenModal';
import { Spinner } from '@/components/Spinner';
import { useSolanaBalance } from '@/hooks/useSolanaBalance';
import { isWalletSanctioned } from '@/services/donation';
import SanctionModal from '@/components/modals/SanctionedModal';
import { useTokenPrice } from '@/hooks/useTokenPrice';
import { BadgesBase } from '@/components/views/donate/common/common.styled';
import EligibilityBadges from '@/components/views/donate/common/EligibilityBadges';
import ToggleSwitch from '@/components/ToggleSwitch';

import DonateAnonymously from '@/components/views/donate/common/DonateAnonymously';

const CryptoDonation: FC<{
acceptedTokens: IProjectAcceptedToken[] | undefined;
Expand Down Expand Up @@ -579,25 +580,11 @@ const CryptoDonation: FC<{
onClick={() => dispatch(setShowWelcomeModal(true))}
/>
)}
<CheckBoxContainer>
<ToggleSwitch
isOn={anonymous}
toggleOnOff={setAnonymous}
size='small'
theme='purple-gray'
label={formatMessage({
id: 'label.make_it_anonymous',
})}
disabled={!isConnected || !selectedOneTimeToken}
/>
<DonateAnonymously
disabled={!isConnected || !selectedOneTimeToken}
>
{formatMessage({
id: 'component.tooltip.donate_anonymously',
})}
</DonateAnonymously>
</CheckBoxContainer>
<DonateAnonymously
anonymous={anonymous}
setAnonymous={setAnonymous}
selectedToken={selectedOneTimeToken}
/>
{showSelectTokenModal && (
<SelectTokenModal
setShowModal={setShowSelectTokenModal}
Expand All @@ -616,9 +603,10 @@ const DonationPrice = styled(SublineBold)<{ disabled?: boolean }>`
right: 16px;
border-radius: 4px;
background: ${neutralColors.gray[300]};
padding: 2px 8px;
color: ${neutralColors.gray[700]};
padding: 2px 8px !important;
color: ${neutralColors.gray[700]} !important;
opacity: ${props => (props.disabled ? 0.4 : 1)};
height: 22px;
`;

const FlexStyled = styled(Flex)<{ disabled: boolean }>`
Expand All @@ -632,11 +620,6 @@ const FlexStyled = styled(Flex)<{ disabled: boolean }>`
`}
`;

const DonateAnonymously = styled.div<{ disabled: boolean }>`
color: ${props =>
props.disabled ? neutralColors.gray[600] + ' !important' : 'inherit'};
`;

const ConnectWallet = styled(BadgesBase)`
margin: 12px 0 24px;
`;
Expand Down Expand Up @@ -671,19 +654,4 @@ const MainButton = styled(Button)`
text-transform: uppercase;
`;

export const CheckBoxContainer = styled.div`
margin-top: 24px;
border-radius: 8px;
border: 1px solid ${neutralColors.gray[300]};
padding: 16px;
> div:first-child {
margin-left: -14px;
}
> div:nth-child(2) {
color: ${neutralColors.gray[900]};
font-size: 12px;
margin-top: 9px;
}
`;

export default CryptoDonation;
4 changes: 2 additions & 2 deletions src/components/views/donate/OneTime/SelectTokenModal/QRCodeDonation/QRDonationCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,8 @@ import { formatUnits } from 'viem';
import {
InputWrapper,
SelectTokenWrapper,
} from '../../../Recurring/RecurringDonationCard';
BadgesBase,
} from '../../../common/common.styled';
import { TokenIconWithGIVBack } from '../../../TokenIcon/TokenIconWithGIVBack';
import { IProjectAcceptedToken } from '@/apollo/types/gqlTypes';
import { fetchPriceWithCoingeckoId } from '@/services/token';
Expand All @@ -39,7 +40,6 @@ import StorageLabel from '@/lib/localStorage';
import InlineToast, { EToastType } from '@/components/toasts/InlineToast';
import { useAppSelector } from '@/features/hooks';
import { useModalCallback } from '@/hooks/useModalCallback';
import { BadgesBase } from '@/components/views/donate/common/common.styled';
import { useGeneralWallet } from '@/providers/generalWalletProvider';
import EligibilityBadges from '@/components/views/donate/common/EligibilityBadges';
import EstimatedMatchingToast from '../../EstimatedMatchingToast';
Expand Down
93 changes: 19 additions & 74 deletions src/components/views/donate/Recurring/RecurringDonationCard.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,18 @@
import {
B,
brandColors,
Button,
Caption,
GLink,
Flex,
H6,
IconCaretDown16,
IconChevronRight16,
IconHelpFilled16,
IconPlus16,
IconRefresh16,
P,
brandColors,
neutralColors,
P,
semanticColors,
Flex,
} from '@giveth/ui-design-system';
import React, { useEffect, useMemo, useState } from 'react';
import styled from 'styled-components';
Expand Down Expand Up @@ -46,7 +45,6 @@ import config from '@/configuration';
import { WrongNetworkLayer } from '../WrongNetworkLayer';
import { ModifySuperTokenModal } from './ModifySuperToken/ModifySuperTokenModal';
import { limitFraction } from '@/helpers/number';
import { CheckBoxContainer } from '@/components/views/donate/OneTime/OneTimeDonationCard';
import AlloProtocolFirstDonationModal from './AlloProtocolFirstDonationModal';
import links from '@/lib/constants/links';
import Routes from '@/lib/constants/Routes';
Expand All @@ -55,7 +53,16 @@ import { useAppSelector } from '@/features/hooks';
import { findAnchorContractAddress } from '@/helpers/superfluid';
import GIVBackToast from '../GIVBackToast';
import { useGeneralWallet } from '@/providers/generalWalletProvider';
import ToggleSwitch from '@/components/ToggleSwitch';

import {
GLinkStyled,
IconWrapper,
Input,
InputWrapper,
SelectTokenPlaceHolder,
SelectTokenWrapper,
} from '@/components/views/donate/common/common.styled';
import DonateAnonymously from '@/components/views/donate/common/DonateAnonymously';

// These two functions are used to make the slider more user-friendly by mapping the slider's value to a new range.
/**
Expand Down Expand Up @@ -374,7 +381,7 @@ export const RecurringDonationCard = () => {
})}
</Caption>
<Flex gap='16px' $alignItems='center'>
<StyledSlider
<Slider
min={0}
max={100}
step={0.1}
Expand Down Expand Up @@ -730,23 +737,11 @@ export const RecurringDonationCard = () => {
alt='Superfluid logo'
/>
</Flex>
<CheckBoxContainer>
<ToggleSwitch
isOn={anonymous}
toggleOnOff={setAnonymous}
size='small'
theme='purple-gray'
label={formatMessage({
id: 'label.make_it_anonymous',
})}
disabled={!isConnected}
/>
<div>
{formatMessage({
id: 'component.tooltip.donate_anonymously',
})}
</div>
</CheckBoxContainer>
<DonateAnonymously
anonymous={anonymous}
setAnonymous={setAnonymous}
selectedToken={selectedRecurringToken}
/>
{showSelectTokenModal && (
<SelectTokenModal setShowModal={setShowSelectTokenModal} />
)}
Expand Down Expand Up @@ -815,42 +810,6 @@ const RecurringSection = styled(Flex)`
text-align: left;
`;

export const SelectTokenWrapper = styled(Flex)<{ disabled?: boolean }>`
cursor: ${({ disabled }) => (disabled ? 'default' : 'pointer')};
gap: 16px;
`;

export const SelectTokenPlaceHolder = styled(B)`
white-space: nowrap;
`;

export const InputWrapper = styled(Flex)`
border: 2px solid ${neutralColors.gray[300]};
border-radius: 8px;
& > * {
padding: 13px 16px;
}
align-items: center;
`;

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 {
border: none;
flex: 1;
font-family: Red Hat Text;
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 150%; /* 24px */
width: 100%;
}
`;

const RecurringMessage = styled(P)`
font-size: 12px;
font-style: normal;
Expand All @@ -859,20 +818,6 @@ const RecurringMessage = styled(P)`
color: #e6492d;
`;

export const IconWrapper = styled.div`
cursor: pointer;
color: ${brandColors.giv[500]};
`;

export const GLinkStyled = styled(GLink)`
&&:hover {
cursor: pointer;
text-decoration: underline;
}
`;

const StyledSlider = styled(Slider)``;

const InputSlider = styled(AmountInput)`
width: 27%;
border: 2px solid ${neutralColors.gray[300]};
Expand Down
Loading

0 comments on commit 19292ec

Please sign in to comment.