refactor(web): move-maintenance-button-to-top

Author: tractorss

web/src/pages/Courts/CourtDetails/StakePanel/index.tsx

@@ -11,8 +11,6 @@ import { landscapeStyle } from "styles/landscapeStyle";
 import Popup, { PopupType } from "components/Popup/index";
 import Tag from "components/Tag";
 
-import StakeMaintenanceButtons from "../StakeMaintenanceButton";
-
 import InputDisplay from "./InputDisplay";
 import JurorBalanceDisplay from "./JurorStakeDisplay";
 import { ActionType } from "./StakeWithdrawButton";
@@ -75,12 +73,6 @@ const ThreePnksIconContainer = styled.div`
   )};
 `;
 
-const StyledStakeMtnceButtons = styled(StakeMaintenanceButtons)`
-  position: absolute;
-  right: 0;
-  top: -4px;
-`;
-
 const StakePanel: React.FC<{ courtName: string; id: string }> = ({ courtName = "General Court", id }) => {
   const [amount, setAmount] = useState("");
   const [isSending, setIsSending] = useState<boolean>(false);
@@ -98,7 +90,6 @@ const StakePanel: React.FC<{ courtName: string; id: string }> = ({ courtName = "
   const isStaking = action === ActionType.stake;
   return (
     <Container>
-      <StyledStakeMtnceButtons />
       <LeftArea>
         <TagArea>
           <Tag text="Stake" active={isActive} onClick={() => handleClick(ActionType.stake)} />

web/src/pages/Courts/CourtDetails/StakeMaintenanceButton/ExecuteDelayedStakeButton.tsx renamed to web/src/pages/Courts/StakeMaintenanceButton/ExecuteDelayedStakeButton.tsx

@@ -37,12 +37,6 @@ const PopupContainer = styled.div`
   transform: translate(-100%, 100%);
 `;
 
-const StyledDottedMenu = styled(DottedMenuButton)`
-  .button-container {
-    background-color: ${({ theme }) => theme.whiteBackground};
-  }
-`;
-
 export enum Phases {
   staking,
   generating,
@@ -76,7 +70,7 @@ const StakeMaintenanceButtons: React.FC<IStakeMaintenanceButtons> = ({ className
           </PopupContainer>
         </>
       ) : null}
-      <StyledDottedMenu {...{ toggle }} displayRipple={false} />
+      <DottedMenuButton {...{ toggle }} displayRipple={false} />
     </Container>
   );
 };

web/src/pages/Courts/CourtDetails/StakeMaintenanceButton/PassPhaseButton.tsx renamed to web/src/pages/Courts/StakeMaintenanceButton/PassPhaseButton.tsx

@@ -1,4 +1,5 @@
 import React, { useMemo } from "react";
+import styled from "styled-components";
 
 import { useNavigate } from "react-router-dom";
 
@@ -8,20 +9,43 @@ import { isUndefined } from "utils/index";
 
 import { useCourtTree, rootCourtToItems } from "queries/useCourtTree";
 
+import { responsiveSize } from "styles/responsiveSize";
+
 import { StyledSkeleton } from "components/StyledSkeleton";
 
+import StakeMaintenanceButtons from "./StakeMaintenanceButton";
+
+const Container = styled.div`
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;
+
+const StyledDropdownCascader = styled(DropdownCascader)`
+  width: ${responsiveSize(200, 240)};
+  > button {
+    width: 100%;
+  }
+`;
+
 const TopSearch: React.FC = () => {
   const { data } = useCourtTree();
   const navigate = useNavigate();
   const items = useMemo(() => !isUndefined(data) && [rootCourtToItems(data.court)], [data]);
-  return items ? (
-    <DropdownCascader
-      items={items}
-      onSelect={(path: string | number) => navigate(path.toString())}
-      placeholder="Select Court"
-    />
-  ) : (
-    <StyledSkeleton width={240} height={42} />
+  return (
+    <Container>
+      {items ? (
+        <StyledDropdownCascader
+          items={items}
+          onSelect={(path: string | number) => navigate(path.toString())}
+          placeholder="Select Court"
+        />
+      ) : (
+        <StyledSkeleton width={240} height={42} />
+      )}
+      <StakeMaintenanceButtons />
+    </Container>
   );
 };