feat: add extra myprofile link in navbar, add extra mycases link in cases page, fix tiny padding iss

Author: kemuru

web/src/components/CasesDisplay/index.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import styled from "styled-components";
 
 import { useLocation } from "react-router-dom";
+import { useAccount } from "wagmi";
 
 import ArrowIcon from "svgs/icons/arrow.svg";
 
@@ -29,6 +30,12 @@ const StyledLabel = styled.label`
   font-size: ${responsiveSize(14, 16)};
 `;
 
+const LinksContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  gap: 16px;
+`;
+
 interface ICasesDisplay extends ICasesGrid {
   numberDisputes?: number;
   numberClosedDisputes?: number;
@@ -48,15 +55,25 @@ const CasesDisplay: React.FC<ICasesDisplay> = ({
   totalPages,
 }) => {
   const location = useLocation();
+  const { isConnected, address } = useAccount();
+  const profileLink = isConnected && address ? `/profile/1/desc/all?address=${address}` : null;
+
   return (
     <div {...{ className }}>
       <TitleContainer className="title">
         <StyledTitle>{title}</StyledTitle>
-        {location.pathname.startsWith("/cases/display/1/desc/all") ? (
-          <StyledArrowLink to={"/resolver"}>
-            Create a case <ArrowIcon />
-          </StyledArrowLink>
-        ) : null}
+        <LinksContainer>
+          {location.pathname.startsWith("/cases/display") && profileLink ? (
+            <StyledArrowLink to={profileLink}>
+              My Cases <ArrowIcon />
+            </StyledArrowLink>
+          ) : null}
+          {location.pathname.startsWith("/cases/display") ? (
+            <StyledArrowLink to={"/resolver"}>
+              Create a case <ArrowIcon />
+            </StyledArrowLink>
+          ) : null}
+        </LinksContainer>
       </TitleContainer>
       <Search />
       <StatsAndFilters totalDisputes={numberDisputes || 0} closedDisputes={numberClosedDisputes || 0} />

web/src/layout/Header/navbar/Explore.tsx

@@ -1,8 +1,9 @@
-import React from "react";
+import React, { useMemo } from "react";
 import styled, { css } from "styled-components";
 import { landscapeStyle } from "styles/landscapeStyle";
 
 import { Link, useLocation } from "react-router-dom";
+import { useAccount } from "wagmi";
 
 import { useOpenContext } from "../MobileHeader";
 
@@ -50,35 +51,41 @@ const StyledLink = styled(Link)<{ isActive: boolean; isMobileNavbar?: boolean }>
   )};
 `;
 
-const links = [
-  { to: "/", text: "Home" },
-  { to: "/cases/display/1/desc/all", text: "Cases" },
-  { to: "/courts", text: "Courts" },
-  { to: "/jurors/1/desc/all", text: "Jurors" },
-  { to: "/get-pnk", text: "Get PNK" },
-];
-
 interface IExplore {
   isMobileNavbar?: boolean;
 }
 
 const Explore: React.FC<IExplore> = ({ isMobileNavbar }) => {
   const location = useLocation();
   const { toggleIsOpen } = useOpenContext();
+  const { isConnected, address } = useAccount();
+
+  const navLinks = useMemo(() => {
+    const base = [
+      { to: "/", text: "Home" },
+      { to: "/cases/display/1/desc/all", text: "Cases" },
+      { to: "/courts", text: "Courts" },
+      { to: "/jurors/1/desc/all", text: "Jurors" },
+      { to: "/get-pnk", text: "Get PNK" },
+    ];
+    if (isConnected && address) {
+      base.push({ to: `/profile/1/desc/all?address=${address}`, text: "My Profile" });
+    }
+    return base;
+  }, [isConnected, address]);
 
   return (
     <Container>
       <Title>Explore</Title>
-      {links.map(({ to, text }) => (
-        <StyledLink
-          key={text}
-          onClick={toggleIsOpen}
-          isActive={to === "/" ? location.pathname === "/" : location.pathname.split("/")[1] === to.split("/")[1]}
-          {...{ to, isMobileNavbar }}
-        >
-          {text}
-        </StyledLink>
-      ))}
+      {navLinks.map(({ to, text }) => {
+        const pathBase = to.split("?")[0];
+        const isActive = pathBase === "/" ? location.pathname === "/" : location.pathname.startsWith(pathBase);
+        return (
+          <StyledLink key={text} onClick={toggleIsOpen} isActive={isActive} {...{ to, isMobileNavbar }}>
+            {text}
+          </StyledLink>
+        );
+      })}
     </Container>
   );
 };

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

@@ -16,7 +16,7 @@ import { landscapeStyle } from "styles/landscapeStyle";
 import StatsContent from "./StatsContent";
 
 const Container = styled.div`
-  padding: 12px 24px;
+  padding: 0 24px 12px 24px;
 `;
 
 const Header = styled.h3`