Merge pull request #426 from 1Hive/stepper-guide

Stepper guide
1Hive · Jul 12, 2023 · c9ebb59 · c9ebb59
2 parents 1a7fe53 + 5c262ca
commit c9ebb59
Show file tree

Hide file tree

Showing 28 changed files with 663 additions and 51 deletions.
diff --git a/packages/react-app/src/assets/ChallengeScreenshot.png b/packages/react-app/src/assets/ChallengeScreenshot.png
diff --git a/packages/react-app/src/assets/ClaimScreenshot.png b/packages/react-app/src/assets/ClaimScreenshot.png
diff --git a/packages/react-app/src/assets/CreateQuestScreenshot.png b/packages/react-app/src/assets/CreateQuestScreenshot.png
diff --git a/packages/react-app/src/assets/ListScreenshot.png b/packages/react-app/src/assets/ListScreenshot.png
diff --git a/packages/react-app/src/assets/PlayScreenshot.png b/packages/react-app/src/assets/PlayScreenshot.png
diff --git a/packages/react-app/src/assets/RecoverFundsScreenshot.png b/packages/react-app/src/assets/RecoverFundsScreenshot.png
diff --git a/packages/react-app/src/assets/ResolveScreenshot.png b/packages/react-app/src/assets/ResolveScreenshot.png
diff --git a/packages/react-app/src/assets/background-logo.png b/packages/react-app/src/assets/background-logo.png
diff --git a/packages/react-app/src/assets/background-logo.tsx b/packages/react-app/src/assets/background-logo.tsx
diff --git a/packages/react-app/src/assets/piggy.png b/packages/react-app/src/assets/piggy.png
diff --git a/packages/react-app/src/assets/piggy.tsx b/packages/react-app/src/assets/piggy.tsx
@@ -12,9 +12,10 @@ export default function Piggy() {
   return (
     <WrapperStyled>
       <svg
-        width="237"
-        height="202"
-        viewBox="0 0 237 202"
+        width="100%"
+        height="100%"
+        // height="202"
+        // viewBox="0 0 237 202"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
       >

diff --git a/packages/react-app/src/components/back-to-top.tsx b/packages/react-app/src/components/back-to-top.tsx
@@ -6,7 +6,8 @@ import { useEffect, useState } from 'react';
 const TopRightCornerStyled = styled.div`
   position: absolute;
   bottom: ${GUpx(2)};
-  right: ${GUpx(2)};
+  right: calc(50vw - 10px);
+  width: 40px;
 `;
 
 export function BackToTop() {

diff --git a/packages/react-app/src/components/claim.tsx b/packages/react-app/src/components/claim.tsx
@@ -74,7 +74,7 @@ export default function Claim({ claim, isLoading, challengeDeposit, questData }:
   const { walletAddress, walletConnected } = useWallet();
   const { transaction } = useTransactionContext();
   const [status, setStatus] = useState<ClaimStatus | undefined>(claim.state);
-  const { below } = useViewport();
+  const { below, width } = useViewport();
   const [waitForClose, setWaitForClose] = useState(false);
   const [actionButton, setActionButton] = useState<ReactNode>();
   const [challengeReason, setChallengeReason] = useState<string>();
@@ -92,6 +92,8 @@ export default function Claim({ claim, isLoading, challengeDeposit, questData }:
     );
   }, [claim.state, claimable]);
 
+  const isSmall = useMemo(() => below('medium'), [width]);
+
   const timer = useMemo(
     () =>
       !claimable &&
@@ -230,18 +232,18 @@ export default function Claim({ claim, isLoading, challengeDeposit, questData }:
           <div className="wide">
             <Outset>
               <ChildSpacer
-                size={below('medium') ? 0 : 16}
+                size={isSmall ? 0 : 16}
                 justify="start"
-                align={below('medium') ? 'start' : 'center'}
+                align={isSmall ? 'start' : 'center'}
                 buttonEnd
-                vertical={below('medium')}
+                vertical={isSmall}
               >
                 {status && (
                   <FieldInput label="Status" isLoading={isLoading || status === ClaimStatus.None}>
                     <StatusTag status={status} className="pl-0" />
                   </FieldInput>
                 )}
-                <AddressWrapperStyled isSmallScreen={below('medium')}>
+                <AddressWrapperStyled isSmallScreen={isSmall}>
                   <AddressFieldInput
                     id="playerAddress"
                     value={claim.playerAddress}

diff --git a/packages/react-app/src/components/main-view.tsx b/packages/react-app/src/components/main-view.tsx
@@ -11,6 +11,7 @@ import { Pages } from 'src/enums/pages.enum';
 import Header from './header';
 import Footer from './footer';
 import { BackToTop } from './back-to-top';
+import GuideModal from './modals/guide-modal';
 
 // #region StyledComponents
 
@@ -70,6 +71,7 @@ function MainView({ children }: Props) {
           {page ? children : <Skeleton /> /* TODO Put some spinner here */}
         </ContentWrapperStyled>
         <Footer />
+        <GuideModal />
       </ScrollViewStyled>
       <BackToTop />
     </Root.Provider>

diff --git a/packages/react-app/src/components/modals/challenge-modal.tsx b/packages/react-app/src/components/modals/challenge-modal.tsx
@@ -38,6 +38,11 @@ const FormStyled = styled(Form)`
 const OpenButtonStyled = styled(Button)`
   margin: ${GUpx(1)};
   width: fit-content;
+
+  &,
+  span {
+    color: #242424;
+  }
 `;
 
 const OpenButtonWrapperStyled = styled.div`
@@ -362,6 +367,7 @@ export default function ChallengeModal({
                 error={touched.reason && errors.reason}
                 onBlur={handleBlur}
                 wide
+                placeHolder="Explain with precision how this claim does not met the quest requirement..."
               />
             </Outset>
           </FormStyled>

diff --git a/packages/react-app/src/components/modals/execute-claim-modal.tsx b/packages/react-app/src/components/modals/execute-claim-modal.tsx
@@ -26,6 +26,11 @@ import ModalBase, { ModalCallback } from './modal-base';
 const OpenButtonStyled = styled(Button)`
   margin: ${GUpx(1)};
   width: fit-content;
+
+  &,
+  span {
+    color: #242424;
+  }
 `;
 
 const OpenButtonWrapperStyled = styled.div`

diff --git a/packages/react-app/src/components/modals/fund-modal.tsx b/packages/react-app/src/components/modals/fund-modal.tsx
@@ -26,6 +26,10 @@ const FormStyled = styled(Form)`
 const OpenButtonStyled = styled(Button)`
   margin: 0 ${GUpx(1)};
   width: fit-content;
+  &,
+  span {
+    color: #242424;
+  }
 `;
 
 type Props = {