Replace buttons in the app with new ds component (#1739)

* chore: replace buttons in the app with new ds component * chore: add block prop to button * chore: move block styling for button to the end * chore: update spacing vars and search bar icon * chore: update color variables
push-protocol · Jul 27, 2024 · a753ffd · a753ffd
1 parent a424cf5
commit a753ffd
Show file tree

Hide file tree

Showing 42 changed files with 711 additions and 1,699 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -85,6 +85,16 @@ const GlobalStyle = createGlobalStyle`
  --s13: 52px;
  --s14: 56px;
  --s15: 60px;
+ --s16: 64px;
+ --s17: 68px;
+ --s18: 72px;
+ --s19: 76px;
+ --s20: 80px;
+ --s21: 84px;
+ --s22: 88px;
+ --s23: 92px;
+ --s24: 96px;
+ --s25: 100px;
  // TODO: Add more as needed
 
  /* deprecated */
@@ -475,30 +485,6 @@ const PushLogo = styled.div`
  padding-bottom: 20px;
 `;
 
-const ProviderButton = styled.button`
- flex: none;
- min-width: 179px;
- background: ${(props) => props.theme.default.bg};
- margin: 20px 15px;
- overflow: hidden;
- padding: 20px 5px;
- display: flex;
- align-items: center;
- justify-content: center;
- border-radius: 24px;
- display: flex;
- flex-direction: column;
-
- &:hover {
- cursor: pointer;
- background: rgba(207, 206, 255, 0.24);
- }
- &:active {
- cursor: pointer;
- background: rgba(207, 206, 255, 0.24);
- }
-`;
-
 const ProviderImage = styled.img`
  width: 73px;
  height: 69px;

diff --git a/src/blocks/button/Button.tsx b/src/blocks/button/Button.tsx
@@ -24,6 +24,8 @@ export type ButtonProps = {
  trailingIcon?: ReactNode;
  /* Sets the variant of the button */
  variant?: ButtonVariant;
+ /* Button takes the full width if enabled */
+ block?: boolean;
 } & TransformedHTMLAttributes<HTMLButtonElement>;
 
 const StyledButton = styled.button<ButtonProps & ModeProp>`
@@ -52,6 +54,9 @@ const StyledButton = styled.button<ButtonProps & ModeProp>`
  /* Circular CSS for rounded icon only buttons */
  ${({ circular, iconOnly }) => circular && iconOnly && `border-radius: var(--r10)`}
 
+ /* Prop specific CSS */
+ ${({ block }) => block && 'width: 100%;'}
+
  /* Custom CSS applied via styled component css prop */
  ${(props) => props.css || ''}
 `;

diff --git a/src/components/ChangeNetwork.tsx b/src/components/ChangeNetwork.tsx
@@ -9,10 +9,11 @@ import { useSelector } from 'react-redux';
 
 // Internal Components
 import useToast from 'hooks/useToast';
-import { Button, Item, Span } from '../primaries/SharedStyling';
+import { Item, Span } from '../primaries/SharedStyling';
 import { aliasChainIdsMapping, CORE_CHAIN_ID, networkName } from 'helpers/UtilityHelper';
 import { appConfig, CHAIN_DETAILS } from 'config/index.js';
 import { useAccount } from 'hooks';
+import { Box, Button, Text } from 'blocks';
 
 const ChangeNetwork = () => {
  const changeNetworkToast = useToast();
@@ -42,30 +43,20 @@ const ChangeNetwork = () => {
  verifying your Channel Alias.
  </Span>
 
- <Item
- width="12.2em"
- self="center"
- align="center"
- margin="100px auto 50px auto"
+ <Box
+ display="flex"
+ alignSelf="center"
+ alignItems="center"
+ margin="spacing-xxxl spacing-none spacing-xxl spacing-none"
  >
  <Button
- bg="#e20880"
- color="#fff"
- radius="15px"
- padding="20px 20px"
- onClick={() => switchChain(parseInt(aliasChainId))}
+ variant="primary"
+ onClick={() => switchChain(aliasChainId)}
+ size="large"
  >
- <Span
- color="#fff"
- weight="600"
- textTransform="none"
- line="22px"
- size="16px"
- >
- Change Network
- </Span>
+ <Text color="white">Change Network</Text>
  </Button>
- </Item>
+ </Box>
  </Item>
  );
 };

diff --git a/src/components/ChannelDetails.jsx b/src/components/ChannelDetails.jsx
@@ -10,8 +10,8 @@ import { useNavigate } from 'react-router-dom';
 import styled from 'styled-components';
 
 // Internal Compoonents
-import { Button, Item } from 'components/SharedStyling';
-import { ButtonV2, ImageV2, ItemHV2, ItemVV2, SpanV2 } from 'components/reusables/SharedStylingV2';
+import { Item } from 'components/SharedStyling';
+import { ImageV2, ItemHV2, ItemVV2, SpanV2 } from 'components/reusables/SharedStylingV2';
 import { useAccount, useDeviceWidthCheck } from 'hooks';
 import useModalBlur, { MODAL_POSITION } from 'hooks/useModalBlur';
 import useToast from 'hooks/useToast';
@@ -33,6 +33,7 @@ import { AppContext } from 'contexts/AppContext';
 import { convertAddressToAddrCaip } from 'helpers/CaipHelper';
 import { getDateFromTimestamp, nextDaysDateFromTimestamp, timeRemaining } from 'helpers/TimerHelper';
 import { CHANNEL_TYPE } from 'helpers/UtilityHelper';
+import { Button } from 'blocks';
 
 const DATE_FORMAT = 'DD MMM, YYYY';
 
@@ -275,21 +276,26 @@ export default function ChannelDetails({ isChannelExpired, setIsChannelExpired,
  padding="0 0 15px 0"
  alignSelf="center"
  display="flex"
+ gap="8px"
  >
- {!isChannelExpired && onCoreNetwork && <SubmitButton onClick={showEditChannel}>Edit Channel</SubmitButton>}
+ {!isChannelExpired && onCoreNetwork && (
+ <Button
+ onClick={showEditChannel}
+ size="small"
+ variant="outline"
+ >
+ Edit Channel
+ </Button>
+ )}
  {!isChannelExpired && <ChannelSettings />}
  {isChannelExpired && onCoreNetwork && (
- <DestroyChannelBtn
+ <Button
  onClick={destroyChannel}
- background="#E93636"
- color="#fff"
- height="36px"
- width="123px"
- borderRadius="8px"
- fontSize="14px"
+ size="small"
+ variant="danger"
  >
  Delete Channel
- </DestroyChannelBtn>
+ </Button>
  )}
  </ItemHV2>
  )}
@@ -398,11 +404,6 @@ const AdaptiveMobileItemVV2 = styled(ItemVV2)`
  }
 `;
 
-const DestroyChannelBtn = styled(ButtonV2)`
- height: ${(props) => props.height || '100%'};
- width: ${(props) => props.width || '100%'};
-`;
-
 const AdaptiveMobileItemHV2 = styled(ItemHV2)`
  @media (max-width: 767px) {
  justify-content: center;
@@ -607,21 +608,6 @@ const SectionDes = styled.div`
  }
 `;
 
-const SubmitButton = styled(Button)`
- width: fit-content;
- background: #d53a94;
- color: #fff;
- z-index: 0;
- font-family: 'FK Grotesk Neu';
- font-style: normal;
- font-weight: 500;
- font-size: 14px;
- line-height: 17px;
- margin-right: 9px;
- border-radius: 8px;
- padding: 10px 16px;
-`;
-
 const DelegateContainer = styled(Item)`
  flex: 5;
  min-width: 280px;

diff --git a/src/components/ChannelInfo.tsx b/src/components/ChannelInfo.tsx
@@ -9,7 +9,7 @@ import styled, { useTheme } from 'styled-components';
 import DateTimePicker from 'react-datetime-picker';
 
 // Internal Compoonents
-import { Button, Input, Item, Section, Span, TextField } from 'primaries/SharedStyling';
+import { Button as SharedButton, Input, Item, Section, Span, TextField } from 'primaries/SharedStyling';
 import '../modules/createChannel/createChannel.css';
 import { useDeviceWidthCheck } from 'hooks';
 import { ItemHV2 } from './reusables/SharedStylingV2';
@@ -19,6 +19,7 @@ import { device } from 'config/Globals';
 import NewTag from './NewTag';
 import ErrorMessage from './reusables/errorMessageLabel/errorMessageLabel';
 import { getIsNewTagVisible } from 'helpers/TimerHelper';
+import { Box, Button } from 'blocks';
 
 const coreChainId = appConfig.coreContractChain;
 
@@ -313,37 +314,25 @@ const ChannelInfo = ({
  </Item>
  {errorInfo?.url && <ErrorMessage message={errorInfo?.url} />}
 
- <Item
- width="12.2em"
- self="stretch"
- align="stretch"
- margin="70px auto 50px auto"
+ <Box
+ display="flex"
+ alignSelf="center"
+ margin="spacing-xxxl spacing-none spacing-xxl spacing-none"
  >
  <Button
- bg={disabled ? '#F4DCEA' : '#CF1C84'}
- color={disabled ? '#CF1C84' : '#fff'}
- // disabled={disabled}
- flex="1"
- radius="15px"
- padding="20px 10px"
+ variant="primary"
+ disabled={false}
+ size="large"
  onClick={() => {
  if (!isAllFilledAndValid()) return;
  setTxStatus(2);
  setChannelInfoDone(true);
  setStepFlow(1);
  }}
  >
- <Span
- color={disabled ? '#CF1C84' : '#fff'}
- weight="600"
- textTransform="none"
- line="22px"
- size="16px"
- >
- Next
- </Span>
+ Next
  </Button>
- </Item>
+ </Box>
  </MainContainer>
  </Section>
  );

diff --git a/src/components/ChannelSettings.jsx b/src/components/ChannelSettings.jsx
@@ -8,7 +8,6 @@ import styled, { useTheme } from 'styled-components';
 // Internal Compoonents
 import { ItemHV2, ItemVV2 } from 'components/reusables/SharedStylingV2';
 import ChannelSettingsDropdown from './ChannelSettingsDropdown';
-import { Button } from './SharedStyling';
 
 export default function ChannelSettings() {
  const DropdownRef = React.useRef(null);
@@ -70,21 +69,3 @@ const Settings = styled(AiOutlineEllipsis)`
  transition: 400ms;
  transform: ${(props) => (props.active ? 'rotateZ(90deg)' : 'none')};
 `;
-
-const SubmitButton = styled(Button)`
- width: 7rem;
- background: #cf1c84;
- color: #fff;
- z-index: 0;
- font-family: 'FK Grotesk Neu';
- font-style: normal;
- font-weight: 500;
- font-size: 14px;
- line-height: 17px;
- margin-right: 20px;
- border-radius: 8px;
- padding: 11px 10px;
- @media (min-width: 600px) and (max-width: 700px) {
- margin-right: 9px;
- }
-`;
diff --git a/src/components/FaucetInfo.tsx b/src/components/FaucetInfo.tsx
@@ -2,7 +2,7 @@
 import styled from 'styled-components';
 
 // Internal Components
-import { ButtonV2, ImageV2, SpanV2 } from './reusables/SharedStylingV2';
+import { ImageV2, SpanV2 } from './reusables/SharedStylingV2';
 import swapIcon from '../assets/icons/swapIcon.svg';
 import { useAccount } from 'hooks';
 
@@ -13,6 +13,7 @@ import { useEffect, useState } from 'react';
 import { getHasEnoughPushToken } from 'helpers';
 import useModalBlur, { MODAL_POSITION } from 'hooks/useModalBlur';
 import { UniswapWidgetModal } from './UniswapWidget';
+import { Button } from 'blocks';
 
 type FaucetInfoType = {
  onMintPushToken: (noOfTokens: number) => Promise<void>;
@@ -63,15 +64,19 @@ const FaucetInfo = ({ onMintPushToken, noOfPushTokensToCheck, containerProps }:
  : 'Follow these steps to ensure you have enough Testnet Push to proceed.'}
  </InfoText>
  {isProd ? (
- <SwapTokensButton onClick={showUniswapWidgetModal}>
- <ImageV2
- width="12px"
- height="12px"
- margin="0 0.5rem 0 0"
- src={swapIcon}
- />
- <ButtonLabel>Swap Tokens for PUSH</ButtonLabel>
- </SwapTokensButton>
+ <Button
+ leadingIcon={
+ <ImageV2
+ width="12px"
+ height="12px"
+ margin="0 0.5rem 0 0"
+ src={swapIcon}
+ />
+ }
+ size="extraSmall"
+ >
+ Swap Tokens for PUSH
+ </Button>
  ) : (
  <ItemBody>
  <AnchorLink
@@ -160,28 +165,6 @@ const ItemBody = styled.div`
  flex-direction: row;
 `;
 
-const SwapTokensButton = styled(ButtonV2)`
- display: flex;
- flex-direction: row;
- box-sizing: border-box;
- background-color: #d53a94;
- width: fit-content;
- min-width: fit-content;
- max-width: fit-content;
- padding: 8px 12px;
- border-radius: 31px;
- margin-right: 1.2rem;
- @media ${device.laptop} {
- margin-right: 0.6rem;
- }
-`;
-
-const ButtonLabel = styled(SpanV2)`
- color: white;
- font-size: 14px;
- font-weight: 500;
-`;
-
 const AnchorLink = styled.a`
  cursor: pointer;
  display: flex;