feat: adjust paddings, attach to dispute resolver page, add to onboarding miniguides

Author: kemuru

web/src/components/Popup/MiniGuides/Onboarding/index.tsx

@@ -5,10 +5,11 @@ import { useToggle } from "react-use";
 import Appeal from "../Appeal";
 import BinaryVoting from "../BinaryVoting";
 import JurorLevels from "../JurorLevels";
-import PageContentsTemplate from "../PageContentsTemplate";
 import RankedVoting from "../RankedVoting";
 import Staking from "../Staking";
+import DisputeResolver from "../DisputeResolver";
 
+import PageContentsTemplate from "../PageContentsTemplate";
 import HowItWorks from "./HowItWorks";
 import PnkLogoAndTitle from "./PnkLogoAndTitle";
 import WhatDoINeed from "./WhatDoINeed";
@@ -35,7 +36,14 @@ const leftPageContents = [
   {
     title: "Access the Mini Guides",
     paragraphs: [],
-    links: ["1. Staking", "2. Binary Voting", "3. Ranked Voting", "4. Appeal", "5. Juror Levels"],
+    links: [
+      "1. Staking",
+      "2. Binary Voting",
+      "3. Ranked Voting",
+      "4. Appeal",
+      "5. Juror Levels",
+      "6. Dispute Resolver",
+    ],
   },
 ];
 
@@ -51,20 +59,23 @@ const Onboarding: React.FC<IOnboarding> = ({ toggleMiniGuide }) => {
   const [isRankedVotingMiniGuideOpen, toggleRankedVotingMiniGuide] = useToggle(false);
   const [isAppealMiniGuideOpen, toggleAppealMiniGuide] = useToggle(false);
   const [isJurorLevelsMiniGuideOpen, toggleJurorLevelsMiniGuide] = useToggle(false);
+  const [isDisputeResolverMiniGuideOpen, toggleDisputeResolverMiniGuide] = useToggle(false);
 
   const isAnyMiniGuideOpen =
     isStakingMiniGuideOpen ||
     isBinaryVotingMiniGuideOpen ||
     isRankedVotingMiniGuideOpen ||
     isAppealMiniGuideOpen ||
-    isJurorLevelsMiniGuideOpen;
+    isJurorLevelsMiniGuideOpen ||
+    isDisputeResolverMiniGuideOpen;
 
   const canCloseOnboarding =
     !isStakingMiniGuideOpen &&
     !isBinaryVotingMiniGuideOpen &&
     !isRankedVotingMiniGuideOpen &&
     !isAppealMiniGuideOpen &&
-    !isJurorLevelsMiniGuideOpen;
+    !isJurorLevelsMiniGuideOpen &&
+    !isDisputeResolverMiniGuideOpen;
 
   const toggleSubMiniGuide = (guideName: string) => {
     if (guideName === "Staking") {
@@ -77,6 +88,8 @@ const Onboarding: React.FC<IOnboarding> = ({ toggleMiniGuide }) => {
       toggleAppealMiniGuide();
     } else if (guideName === "Juror Levels") {
       toggleJurorLevelsMiniGuide();
+    } else if (guideName === "Dispute Resolver") {
+      toggleDisputeResolverMiniGuide();
     }
   };
 
@@ -97,6 +110,7 @@ const Onboarding: React.FC<IOnboarding> = ({ toggleMiniGuide }) => {
       {isRankedVotingMiniGuideOpen && <RankedVoting toggleMiniGuide={toggleRankedVotingMiniGuide} />}
       {isAppealMiniGuideOpen && <Appeal toggleMiniGuide={toggleAppealMiniGuide} />}
       {isJurorLevelsMiniGuideOpen && <JurorLevels toggleMiniGuide={toggleJurorLevelsMiniGuide} />}
+      {isDisputeResolverMiniGuideOpen && <DisputeResolver toggleMiniGuide={toggleDisputeResolverMiniGuide} />}
     </>
   );
 };

web/src/pages/Resolver/Briefing/Title.tsx

@@ -16,6 +16,7 @@ const Container = styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;
+  padding-bottom: ${responsiveSize(70, 240)};
 `;
 
 const StyledField = styled(Field)`

web/src/pages/Resolver/Parameters/Category.tsx

@@ -16,6 +16,7 @@ const Container = styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;
+  padding-bottom: ${responsiveSize(70, 191)};
 `;
 
 const StyledField = styled(Field)`

web/src/pages/Resolver/Parameters/Court.tsx

@@ -19,6 +19,7 @@ const Container = styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;
+  padding-bottom: ${responsiveSize(70, 115)};
 `;
 
 const StyledDropdownCascader = styled(DropdownCascader)`

web/src/pages/Resolver/Parameters/Jurors.tsx

@@ -22,6 +22,7 @@ const Container = styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;
+  padding-bottom: ${responsiveSize(70, 79)};
 `;
 
 const StyledField = styled(Field)`

web/src/pages/Resolver/Policy/index.tsx

@@ -20,6 +20,7 @@ const Container = styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;
+  padding-bottom: ${responsiveSize(70, 82)};
 `;
 
 const StyledLabel = styled.label`

web/src/pages/Resolver/Timeline.tsx

@@ -1,23 +1,12 @@
 import React from "react";
-import styled, { css } from "styled-components";
+import styled from "styled-components";
 
 import { useLocation } from "react-router-dom";
 
 import { Steps } from "@kleros/ui-components-library";
 
-import { landscapeStyle } from "styles/landscapeStyle";
-
 const StyledSteps = styled(Steps)`
-  display: none;
-
-  ${landscapeStyle(
-    () => css`
-      display: flex;
-      position: absolute;
-      left: 2%;
-      height: 360px;
-    `
-  )}
+  height: 360px;
 `;
 
 const items = [

web/src/pages/Resolver/index.tsx

@@ -49,6 +49,20 @@ const StyledEnsureAuth = styled(EnsureAuth)`
   align-self: center;
 `;
 
+const HowItWorksAndTimeline = styled.div`
+  display: none;
+
+  ${landscapeStyle(
+    () => css`
+      display: flex;
+      flex-direction: column;
+      position: absolute;
+      left: 2%;
+      gap: 40px;
+    `
+  )}
+`;
+
 const MiddleContentContainer = styled.div`
   display: flex;
   justify-content: center;
@@ -82,12 +96,16 @@ const DisputeResolver: React.FC = () => {
         {isConnected ? (
           <StyledEnsureAuth>
             <MiddleContentContainer>
-              {isConnected && !isPreviewPage ? <Timeline /> : null}
-              <HowItWorks
-                isMiniGuideOpen={isDisputeResolverMiniGuideOpen}
-                toggleMiniGuide={toggleDisputeResolverMiniGuide}
-                MiniGuideComponent={Resolver}
-              />
+              {isConnected && !isPreviewPage ? (
+                <HowItWorksAndTimeline>
+                  <HowItWorks
+                    isMiniGuideOpen={isDisputeResolverMiniGuideOpen}
+                    toggleMiniGuide={toggleDisputeResolverMiniGuide}
+                    MiniGuideComponent={Resolver}
+                  />
+                  <Timeline />
+                </HowItWorksAndTimeline>
+              ) : null}
               <Routes>
                 <Route index element={<Navigate to="title" replace />} />
                 <Route path="/title/*" element={<Title />} />