refactor(web): center-connect-button-in-fund-input

Author: tractorss

web/src/pages/Cases/CaseDetails/Appeal/Classic/Fund.tsx

@@ -14,6 +14,7 @@ import { useSelectedOptionContext, useFundingContext, useCountdownContext } from
 const Container = styled.div`
   display: flex;
   flex-direction: column;
+  align-items: center;
   gap: 8px;
 `;
 
@@ -34,9 +35,12 @@ const StyledField = styled(Field)`
 
 const StyledButton = styled(Button)`
   margin: auto;
-  margin-top: 12px;
+  margin-top: 4px;
 `;
 
+const StyledLabel = styled.label`
+  align-self: flex-start;
+`;
 const useNeedFund = () => {
   const { loserSideCountdown } = useCountdownContext();
   const { fundedChoices, winningChoice } = useFundingContext();
@@ -95,36 +99,34 @@ const Fund: React.FC<IFund> = ({ amount, setAmount, setIsOpen }) => {
 
   return needFund ? (
     <Container>
-      <label>How much ETH do you want to contribute?</label>
-      <div>
-        <StyledField
-          type="number"
-          value={amount}
-          onChange={(e) => {
-            setAmount(e.target.value);
+      <StyledLabel>How much ETH do you want to contribute?</StyledLabel>
+      <StyledField
+        type="number"
+        value={amount}
+        onChange={(e) => {
+          setAmount(e.target.value);
+        }}
+        placeholder="Amount to fund"
+      />
+      <EnsureChain>
+        <StyledButton
+          disabled={isFundDisabled}
+          isLoading={isSending}
+          text={isDisconnected ? "Connect to Fund" : "Fund"}
+          onClick={() => {
+            if (fundAppeal) {
+              setIsSending(true);
+              wrapWithToast(async () => await fundAppeal().then((response) => response.hash), publicClient)
+                .then((res) => {
+                  res.status && setIsOpen(true);
+                })
+                .finally(() => {
+                  setIsSending(false);
+                });
+            }
           }}
-          placeholder="Amount to fund"
         />
-        <EnsureChain>
-          <StyledButton
-            disabled={isFundDisabled}
-            isLoading={isSending}
-            text={isDisconnected ? "Connect to Fund" : "Fund"}
-            onClick={() => {
-              if (fundAppeal) {
-                setIsSending(true);
-                wrapWithToast(async () => await fundAppeal().then((response) => response.hash), publicClient)
-                  .then((res) => {
-                    res.status && setIsOpen(true);
-                  })
-                  .finally(() => {
-                    setIsSending(false);
-                  });
-              }
-            }}
-          />
-        </EnsureChain>
-      </div>
+      </EnsureChain>
     </Container>
   ) : (
     <></>

web/src/pages/Cases/CaseDetails/Appeal/Classic/StageExplainer.tsx

@@ -40,26 +40,28 @@ interface IStageExplainer {
 }
 
 const StageOneExplanation: React.FC = () => (
-  <>
+  <div>
     {" "}
     <label>
       Losing options can only be funded <small>before</small> the deadline.
     </label>
     <label>
       If no losing option is <small>fully funded</small> in time, the jury decision is maintained.
     </label>
-  </>
+  </div>
 );
 
 const StageTwoExplanation: React.FC = () => {
   const { fundedChoices } = useFundingContext();
   const options = useOptionsContext();
   return (
-    <>
-      <label>Loser deadline has finalized, you can only fund the current winner.</label>
+    <div>
       <label>
-        The sum of funds must reach 100%. If it's not fully funded in time the option fully funded at stage 1 is
-        declared the winner of the case.{" "}
+        Loser deadline has <small>finalized</small>, you can only fund the current winner.
+      </label>
+      <label>
+        The sum of funds must reach 100%. If it's not fully funded in time the option fully funded at{" "}
+        <small>stage 1</small> is declared the winner of the case.{" "}
       </label>
       <label>
         {" "}
@@ -72,7 +74,7 @@ const StageTwoExplanation: React.FC = () => {
             : null}
         </small>
       </label>
-    </>
+    </div>
   );
 };
 
@@ -87,7 +89,7 @@ const StageExplainer: React.FC<IStageExplainer> = ({ countdown, stage }) => {
           </>
         ) : null}
       </CountdownLabel>
-      <div>{stage === 1 ? <StageOneExplanation /> : <StageTwoExplanation />}</div>
+      {stage === 1 ? <StageOneExplanation /> : <StageTwoExplanation />}
     </StyledBox>
   );
 };