Iamoskvin/style fixes (#303)

* onhover row effect * connect btn style * rewards page styles * fix card padding * fix connect wallet btn * fix logo margin * hide sidebar settings
jediswaplabs · May 27, 2024 · 35a849b · 35a849b
1 parent c549f9d
commit 35a849b
Show file tree

Hide file tree

Showing 6 changed files with 130 additions and 11 deletions.
diff --git a/src/assets/svg/coins.svg b/src/assets/svg/coins.svg
diff --git a/src/assets/svg/stars.svg b/src/assets/svg/stars.svg
diff --git a/src/components/Pools/index.tsx b/src/components/Pools/index.tsx
@@ -74,6 +74,10 @@ const DashGrid = styled.div<{ fade?: boolean; disbaleLinks?: boolean; focus?: bo
 
   opacity: ${({ fade }) => (fade ? '0.6' : '1')};
 
+  :hover {
+    background: rgba(255, 255, 255, 0.10);
+  }
+  
   > * {
     justify-content: flex-end;
 

diff --git a/src/components/WalletModal/index.tsx b/src/components/WalletModal/index.tsx
@@ -66,7 +66,7 @@ export default function WalletModal({ openSettings }: { openSettings: () => void
     <Wrapper data-testid="wallet-modal">
       <AutoRow justify="space-between" width="100%" marginBottom="24px">
         <ThemedText.SubHeader>Connect to a wallet</ThemedText.SubHeader>
-        <IconButton Icon={Settings} onClick={openSettings} data-testid="wallet-settings" />
+        {/* <IconButton Icon={Settings} onClick={openSettings} data-testid="wallet-settings" /> */}
       </AutoRow>
       {activationState.status === ActivationStatus.ERROR ? (
         <ConnectionErrorView />

diff --git a/src/pages/AddLiquidity/index.tsx b/src/pages/AddLiquidity/index.tsx
@@ -565,9 +565,9 @@ function AddLiquidity() {
 
   const Buttons = () =>
     !account ? (
-      <ButtonLight onClick={toggleWalletDrawer} $borderRadius="12px" padding="12px">
+      <ButtonPrimary onClick={toggleWalletDrawer} $borderRadius="12px" style={{padding: '12px', fontSize: '18px'}}>
         <Trans>Connect wallet</Trans>
-      </ButtonLight>
+      </ButtonPrimary>
     ) : (
       <AutoColumn gap="md">
         <ButtonError

diff --git a/src/pages/Rewards/index.tsx b/src/pages/Rewards/index.tsx
@@ -4,6 +4,8 @@ import { BodyWrapper } from '../AppBody'
 import styled, { ThemeContext, css, keyframes } from 'styled-components'
 import { AutoColumn } from 'components/Column'
 import StarkIcon from 'assets/svg/starknet.svg'
+import CoinsIcon from 'assets/svg/coins.svg'
+import StarsIcon from 'assets/svg/stars.svg'
 import WalletIcon from 'assets/wallets/Wallet.png'
 import { MouseoverTooltip, TooltipSize } from 'components/Tooltip'
 import './style.css'
@@ -40,7 +42,7 @@ const LiquidityWrapperCard = styled(DataCard)`
   overflow: hidden;
   border: none;
   border-radius: 8px;
-  padding: 18px;
+  // padding: 18px;
   border: 1px solid rgba(160, 160, 160, 0.4);
   background: rgba(255, 255, 255, 0.05);
 `
@@ -88,12 +90,12 @@ export const BaseButton = styled(RebassButton) <
 `
 
 const ClaimHeader = styled.div`
-  width: 386px;
+  // width: 386px;
   height: 52px;
   flex-shrink: 0;
   margin-top: 18px;
   padding: 0 32px;
-  background: linear-gradient(93deg, #38164b 1.17%, rgba(235, 0, 255, 0) 86.07%);
+  background: linear-gradient(93deg, rgba(252, 142, 81, 0.3) 1.17%, rgba(235, 0, 255, 0) 86.07%);
   color: white; /* White text color */
   display: flex;
   align-items: center; /* Vertically centers the content */
@@ -273,7 +275,7 @@ const PairName = styled.div`
   font-style: normal;
   font-weight: 700;
   line-height: 100%; /* 16px */
-  margin-bottom: 10px;
+  margin: 10px 0;
 `
 const APRWrapper = styled.div`
   display: flex;
@@ -434,6 +436,14 @@ const ConnectWalletWrapper = styled.div`
   flex-direction: column;
   align-items: center;
 `
+const Coins = styled.div`
+  position: absolute;
+  top: 32px;
+  right: 32px;
+  @media (max-width: ${({ theme }) => `${theme.breakpoint.md}px`}) {
+    display: none;
+  }
+`
 
 const WalletNotConnected = () => {
   const toggleWalletDrawer = useToggleAccountDrawer()
@@ -443,7 +453,7 @@ const WalletNotConnected = () => {
       <ConnectWalletText>Connect wallet to see your STRK rewards</ConnectWalletText>
       <ClaimButtonGradient
         onClick={toggleWalletDrawer}
-        style={{ marginTop: '20px' }}
+        style={{ marginTop: '20px', padding: '10px 36px' }}
       >
         <ClaimText>Connect Wallet</ClaimText>
       </ClaimButtonGradient>
@@ -744,7 +754,7 @@ export default function Rewards() {
           <div style={{ height: 450 }} />
         </LoadingRows>
       ) : (
-        <LiquidityWrapperCard style={{ marginBottom: 14 }}>
+        <LiquidityWrapperCard style={{ marginBottom: '14px', padding: '18px' }}>
           <RowContainer>
             <FirstColumn>
               <DefiSpringWrapper>
@@ -782,16 +792,23 @@ export default function Rewards() {
           <div style={{ height: 450 }} />
         </LoadingRows>
       ) : (
-        <LiquidityWrapperCard>
+        <LiquidityWrapperCard style={{ position: 'relative' }}>
+          {/* <Coins>
+            <img src={CoinsIcon}/>
+          </Coins> */}
           <RowBetween>
             <ClaimHeader>
               <ClaimHeaderText>Next claim available on May 31</ClaimHeaderText>
+              <img src={StarsIcon} style={{ marginLeft: '20px', marginBottom: '15px' }} />
             </ClaimHeader>
           </RowBetween>
-          <CardSection>
+          <CardSection style={{ padding: isMainnetSelected ? '32px': '0 32px 32px 32px'}}>
             {
               !chainId ? <WalletNotConnected /> : isSepoliaSelected ? <ConnectedToSepolia /> :
                 <AutoColumn>
+                  <Coins>
+                    <img src={CoinsIcon} />
+                  </Coins>
                   <RowBetween>
                     <StarkRewardsText>Your STRK Rewards</StarkRewardsText>
                   </RowBetween>