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 18, 2024 · c83c26c · c83c26c
1 parent a0306a8
commit c83c26c
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;