fix: abstract divider, few style issues

Author: kemuru

web/src/components/DisputePreview/DisputeContext.tsx

@@ -13,6 +13,7 @@ import ReactMarkdown from "components/ReactMarkdown";
 import { StyledSkeleton } from "components/StyledSkeleton";
 
 import AliasDisplay from "./Alias";
+import { Divider } from "../Divider";
 
 const StyledH1 = styled.h1`
   margin: 0;
@@ -60,14 +61,6 @@ const AliasesContainer = styled.div`
   gap: ${responsiveSize(8, 20)};
 `;
 
-const Divider = styled.hr`
-  width: 100%;
-  display: flex;
-  border: none;
-  height: 1px;
-  background-color: ${({ theme }) => theme.stroke};
-  margin: 0;
-`;
 interface IDisputeContext {
   disputeDetails?: DisputeDetails;
   isRpcError?: boolean;

web/src/components/Divider.tsx

@@ -0,0 +1,10 @@
+import styled from "styled-components";
+
+export const Divider = styled.hr`
+  display: flex;
+  width: 100%;
+  border: none;
+  height: 1px;
+  background-color: ${({ theme }) => theme.stroke};
+  margin: 0;
+`;

web/src/components/Popup/Description/SwapSuccess.tsx

@@ -7,6 +7,7 @@ import PnkIcon from "svgs/tokens/pnk.svg";
 import { responsiveSize } from "styles/responsiveSize";
 
 import LightButton from "components/LightButton";
+import { Divider } from "components/Divider";
 import { Token } from "pages/GetPnk/Swap/TokenSelect";
 
 const Container = styled.div`
@@ -50,14 +51,10 @@ const StyledButton = styled(LightButton)`
   padding-top: 0px;
 `;
 
-const Divider = styled.hr`
-  width: 100%;
-  display: flex;
-  border: none;
-  height: 1px;
-  background-color: ${({ theme }) => theme.stroke};
+const StyledDivider = styled(Divider)`
   margin: ${responsiveSize(32, 64)} 0px 0px;
 `;
+
 interface ISwapSuccess {
   hash: string;
   amount: string;
@@ -83,7 +80,7 @@ const SwapSuccess: React.FC<ISwapSuccess> = ({ hash, amount, isClaim, from, to }
           Bridge from &nbsp;<small>Ethereum</small>&nbsp; to &nbsp;<small>Arbitrum</small>
         </Subtitle>
       )}
-      <Divider />
+      <StyledDivider />
       <StyledButton
         onClick={() => window.open(baseUrl, "_blank", "rel=noopener noreferrer")}
         text={"View transaction on Etherscan"}

web/src/components/Verdict/FinalDecision.tsx

@@ -23,6 +23,7 @@ import LightButton from "../LightButton";
 
 import AnswerDisplay from "./Answer";
 import VerdictBanner from "./VerdictBanner";
+import { Divider } from "../Divider";
 
 const Container = styled.div`
   width: 100%;
@@ -54,11 +55,7 @@ const StyledButton = styled(LightButton)`
   padding-top: 0px;
 `;
 
-const Divider = styled.hr`
-  display: flex;
-  border: none;
-  height: 1px;
-  background-color: ${({ theme }) => theme.stroke};
+const StyledDivider = styled(Divider)`
   margin: ${responsiveSize(16, 32)} 0px;
 `;
 
@@ -107,7 +104,7 @@ const FinalDecision: React.FC<IFinalDecision> = ({ arbitrable }) => {
           <AnswerDisplay {...{ answer, currentRuling }} />
         </JuryContainer>
       )}
-      <Divider />
+      <StyledDivider />
       {isLoading && !isDisconnected ? (
         <Skeleton width={250} height={20} />
       ) : (

web/src/pages/Cases/CaseDetails/Overview/index.tsx

@@ -17,6 +17,7 @@ import { DisputeContext } from "components/DisputePreview/DisputeContext";
 import { Policies } from "components/DisputePreview/Policies";
 import DisputeInfo from "components/DisputeView/DisputeInfo";
 import Verdict from "components/Verdict/index";
+import { Divider } from "components/Divider";
 
 const Container = styled.div`
   width: 100%;
@@ -27,15 +28,6 @@ const Container = styled.div`
   padding: ${responsiveSize(16, 32)};
 `;
 
-const Divider = styled.hr`
-  width: 100%;
-  display: flex;
-  border: none;
-  height: 1px;
-  background-color: ${({ theme }) => theme.stroke};
-  margin: 0;
-`;
-
 interface IOverview {
   arbitrable?: `0x${string}`;
   courtID?: string;

web/src/pages/Courts/CourtDetails/Info.tsx

@@ -6,7 +6,6 @@ const Container = styled.div`
   display: flex;
   align-items: flex-start;
   gap: 8px;
-  padding-top: 4px;
 `;
 
 const StyledSpan = styled.span`

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

@@ -27,6 +27,7 @@ import Header from "./Header";
 import QuantityToSimulate from "./QuantityToSimulate";
 import Info from "../../Info";
 import WithHelpTooltip from "components/WithHelpTooltip";
+import { Divider } from "components/Divider";
 
 const Container = styled.div`
   display: flex;
@@ -62,10 +63,7 @@ const IconWrapper = styled.div`
   }
 `;
 
-const Divider = styled.hr`
-  display: flex;
-  border: none;
-  height: 1px;
+const StyledDivider = styled(Divider)`
   background-color: ${({ theme }) => theme.mediumBlue};
   margin: 12px 0 8px 0;
 `;
@@ -108,6 +106,10 @@ const StyledArrowRightIcon = styled(ArrowRightIcon)<{ isStaking: boolean }>`
   fill: ${({ theme, isStaking }) => (isStaking ? theme.success : theme.warning)};
 `;
 
+const InfoContainer = styled.div`
+  padding-top: 4px;
+`;
+
 function beautifyStatNumber(value: number): string {
   const absValue = Math.abs(value);
 
@@ -268,7 +270,7 @@ const SimulatorPopup: React.FC<ISimulatorPopup> = ({ amountToStake, isStaking })
   return (
     <Container>
       <Header />
-      <Divider />
+      <StyledDivider />
       <QuantityToSimulate {...{ jurorCurrentEffectiveStake, jurorCurrentSpecificStake, isStaking, amountToStake }} />
       <ItemsContainer>
         {simulatorItems.map((item, index) => (
@@ -298,8 +300,10 @@ const SimulatorPopup: React.FC<ISimulatorPopup> = ({ amountToStake, isStaking })
           </SimulatorItem>
         ))}
       </ItemsContainer>
-      <Divider />
-      <Info />
+      <StyledDivider />
+      <InfoContainer>
+        <Info />
+      </InfoContainer>
     </Container>
   );
 };

web/src/pages/Courts/CourtDetails/Stats.tsx

@@ -41,10 +41,12 @@ const StyledAccordion = styled(Accordion)`
     justify-content: unset;
     background-color: ${({ theme }) => theme.whiteBackground} !important;
     border: 1px solid ${({ theme }) => theme.stroke} !important;
-    color: ${({ theme }) => theme.primaryText} !important;
     > svg {
       fill: ${({ theme }) => theme.primaryText} !important;
     }
+    > p {
+      color: ${({ theme }) => theme.primaryText};
+    }
   }
   //adds padding to body container
   > * > div > div {

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

@@ -20,6 +20,7 @@ import HowItWorks from "components/HowItWorks";
 import LatestCases from "components/LatestCases";
 import Staking from "components/Popup/MiniGuides/Staking";
 import { StyledSkeleton } from "components/StyledSkeleton";
+import { Divider } from "components/Divider";
 
 import Description from "./Description";
 import StakePanel from "./StakePanel";
@@ -77,14 +78,6 @@ const StyledBreadcrumb = styled(Breadcrumb)`
   }
 `;
 
-const Divider = styled.hr`
-  width: 100%;
-  border: none;
-  height: 1px;
-  background-color: ${({ theme }) => theme.stroke};
-  margin: 0;
-`;
-
 const CourtDetails: React.FC = () => {
   const { id } = useParams();
   const { data: policy } = useCourtPolicy(id);

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

@@ -13,6 +13,7 @@ import { responsiveSize } from "styles/responsiveSize";
 import { DisputeContext } from "components/DisputePreview/DisputeContext";
 import { Policies } from "components/DisputePreview/Policies";
 import DisputeInfo from "components/DisputeView/DisputeInfo";
+import { Divider } from "components/Divider";
 
 import NavigationButtons from "../NavigationButtons";
 
@@ -39,15 +40,6 @@ const PreviewContainer = styled.div`
   padding: ${responsiveSize(16, 32)};
 `;
 
-const Divider = styled.hr`
-  width: 100%;
-  display: flex;
-  border: none;
-  height: 1px;
-  background-color: ${({ theme }) => theme.stroke};
-  margin: 0;
-`;
-
 const Header = styled.h2`
   margin-bottom: 32px;
   width: 84vw;