chore: navbar color change, hero color updates, margin touches

Author: kemuru

web/src/assets/svgs/hero/hero-darkmode-desktop.svg

@@ -64,10 +64,11 @@ interface IDisputeContext {
 
 export const DisputeContext: React.FC<IDisputeContext> = ({ disputeDetails, isRpcError = false }) => {
   const errMsg = isRpcError ? RPC_ERROR : INVALID_DISPUTE_DATA_ERROR;
+
   return (
     <>
       <StyledH1>{isUndefined(disputeDetails) ? <StyledSkeleton /> : (disputeDetails?.title ?? errMsg)}</StyledH1>
-      {!isUndefined(disputeDetails) ? (
+      {disputeDetails?.question?.trim() || disputeDetails?.description?.trim() ? (
         <QuestionAndDescriptionWrapper>
           {disputeDetails?.question?.trim() ? (
             <ReactMarkdownWrapper>

web/src/assets/svgs/hero/hero-darkmode-mobile.svg

@@ -14,7 +14,7 @@ import DisputeView from "components/DisputeView";
 import { SkeletonDisputeCard } from "components/StyledSkeleton";
 
 const Container = styled.div`
-  margin-top: ${responsiveSize(48, 80)};
+  margin-top: ${responsiveSize(24, 48)};
 `;
 
 const Title = styled.h1`

web/src/components/DisputePreview/DisputeContext.tsx

@@ -14,7 +14,7 @@ import { ExternalLink } from "components/ExternalLink";
 const Container = styled.div`
   height: 122px;
   width: 100%;
-  background-color: ${({ theme }) => theme.primaryPurple};
+  background-color: ${({ theme }) => (theme.name === "dark" ? theme.lightBlue : theme.primaryPurple)};
   display: flex;
   flex-direction: column;
   justify-content: center;

web/src/components/FavoriteCases.tsx

@@ -9,7 +9,7 @@ const Container = styled.div`
   z-index: 10;
   top: 0;
   width: 100%;
-  background-color: ${({ theme }) => theme.primaryPurple};
+  background-color: ${({ theme }) => (theme.name === "dark" ? theme.lightBlue : theme.primaryPurple)};
 
   display: flex;
   flex-wrap: wrap;

web/src/layout/Footer/index.tsx

@@ -32,7 +32,7 @@ const Container = styled.div`
 `;
 
 const StyledCasesDisplay = styled(CasesDisplay)`
-  margin-top: ${responsiveSize(32, 48)};
+  margin-top: ${responsiveSize(24, 48)};
 
   .title {
     margin-bottom: ${responsiveSize(12, 24)};