Merge pull request stakwork#850 from MahtabBukhari/Quick-changes-to-h

Quick changes to /h
jordan-ae · Jan 2, 2025 · 7b7a2c5 · 7b7a2c5
2 parents ab1e340 + 0a24011
commit 7b7a2c5
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 22 deletions.
diff --git a/src/components/BountyComponents/BountySteps.tsx b/src/components/BountyComponents/BountySteps.tsx
@@ -27,6 +27,17 @@ const StepText = styled.span`
   font-weight: 500;
 `;
 
+const StepLink = styled.a`
+  color: ${colors.light.text1};
+  font-weight: 500;
+  text-decoration: none;
+  color: ${colors.light.blue1};
+  &:hover {
+    color: ${colors.light.blue2};
+    text-decoration: none;
+  }
+`;
+
 const StepTitle = styled.h6`
   font-size: 20px;
   font-family: 'Barlow';
@@ -37,14 +48,16 @@ const StepTitle = styled.h6`
 
 interface Step {
   text: string;
+  link?: string;
 }
 
 const steps: Step[] = [
   {
     text: 'Sign up for a Sphinx by clicking the Get Sphinx button!'
   },
   {
-    text: 'Check out the open bounties, by clicking bounties!'
+    text: 'Check out the',
+    link: 'https://community.sphinx.chat/bounties'
   },
   {
     text: 'Reach out to the bounty provider by clicking "I can help!"'
@@ -53,7 +66,7 @@ const steps: Step[] = [
     text: 'Introduce yourself and get assigned'
   },
   {
-    text: 'Compelte the work and get paid directly to your Sphinx Wallet!'
+    text: 'Complete the work and get paid directly to your Sphinx Wallet!'
   }
 ];
 
@@ -63,7 +76,19 @@ export const BountySteps: React.FC = () => (
     {steps.map((step: Step, index: number) => (
       <StepItem key={index}>
         <StepLabel>{`Step ${index + 1}:`}</StepLabel>
-        <StepText>{step.text}</StepText>
+        <StepText>
+          {step.link ? (
+            <>
+              {step.text}{' '}
+              <StepLink href={step.link} target="_blank" rel="noopener noreferrer">
+                open bounties, by clicking bounties
+              </StepLink>
+              !
+            </>
+          ) : (
+            step.text
+          )}
+        </StepText>
       </StepItem>
     ))}
   </StepsContainer>

diff --git a/src/components/common/TopEarners/index.tsx b/src/components/common/TopEarners/index.tsx
@@ -68,6 +68,31 @@ const ErrorContainer = styled.div`
   color: ${colors.light.red1};
 `;
 
+const ViewBountiesButton = styled.button`
+  margin-top: 60px;
+  padding: 12px 24px;
+  font-size: 16px;
+  font-weight: bold;
+  color: white;
+  background-color: ${colors.light.blue1};
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: background-color 0.3s;
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+
+  &:hover {
+    background-color: ${colors.light.blue2};
+  }
+
+  &:focus {
+    outline: none;
+    box-shadow: 0 0 0 2px ${colors.light.blue2};
+  }
+`;
+
 const TopEarners = observer(({ limit = 5, className, style, onError }: TopEarnersProps) => {
   const { leaderboard } = useStores();
   const [error, setError] = useState<Error | null>(null);
@@ -86,6 +111,10 @@ const TopEarners = observer(({ limit = 5, className, style, onError }: TopEarner
     fetchData();
   }, [leaderboard, onError]);
 
+  const handleViewBountiesClick = () => {
+    window.open('https://community.sphinx.chat/bounties', '_blank');
+  };
+
   if (error) {
     return (
       <ErrorContainer>
@@ -111,6 +140,7 @@ const TopEarners = observer(({ limit = 5, className, style, onError }: TopEarner
             <LeaerboardItem position={index + 1} key={item.owner_pubkey} {...item} />
           ))}
       </div>
+      <ViewBountiesButton onClick={handleViewBountiesClick}>View Open Bounties</ViewBountiesButton>
     </Container>
   );
 });

diff --git a/src/pages/BountiesLandingPage/index.tsx b/src/pages/BountiesLandingPage/index.tsx
@@ -3,8 +3,6 @@ import React from 'react';
 import styled from 'styled-components';
 import { useIsMobile } from '../../hooks';
 import { colors } from '../../config/colors';
-import { BountiesHeader, HeaderWrap, Leftheader } from '../tickets/style.ts';
-import { BountyHeaderContent } from '../tickets/workspace/workspaceHeader/WorkspaceHeaderStyles.tsx';
 import TopEarners from '../../components/common/TopEarners/index.tsx';
 import { BountyComponents } from '../../components/BountyComponents';
 
@@ -14,24 +12,29 @@ const BountiesLandingPage: React.FC = () => {
   const color = colors['light'];
 
   const Body = styled.div<{ isMobile: boolean }>`
-    flex: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
     height: ${(p: { isMobile: boolean }) =>
       p.isMobile ? 'calc(100% - 105px)' : 'calc(100vh - 60px)'};
     background: ${(p: { isMobile: boolean }) => (p.isMobile ? undefined : color.grayish.G950)};
     width: 100%;
     overflow-x: hidden;
     overflow-y: auto;
-    display: flex;
-    flex-direction: column;
   `;
 
   const ContentWrapper = styled.div`
     max-width: 1400px;
-    min-height: 650px;
-    margin: 30px auto;
     width: 100%;
-    padding: 40px 40px 40px 30px;
+    padding: 40px;
     background: white;
+    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
+    border-radius: 8px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
   `;
 
   const ContentGrid = styled.div`
@@ -77,25 +80,16 @@ const BountiesLandingPage: React.FC = () => {
     }
 
     p {
-      font-family: Barlow;
       margin-bottom: 16px;
+      font-weight: 500;
       line-height: 1.6;
       word-wrap: break-word;
-      max-width: 550px;
-      color: ${color.text2};
-      font-size: 15px;
+      max-width: 560px;
     }
   `;
 
   return (
     <Body isMobile={isMobile}>
-      <HeaderWrap>
-        <BountiesHeader>
-          <Leftheader>
-            <BountyHeaderContent>Bounties</BountyHeaderContent>
-          </Leftheader>
-        </BountiesHeader>
-      </HeaderWrap>
       <ContentWrapper>
         <ContentGrid>
           <Column>