feat: more hover effects, style impros

kleros · Dec 2, 2024 · f745bf5 · f745bf5
1 parent 53e4bc4
commit f745bf5
Show file tree

Hide file tree

Showing 15 changed files with 168 additions and 131 deletions.
diff --git a/web/src/components/DisputePreview/Policies.tsx b/web/src/components/DisputePreview/Policies.tsx
@@ -41,12 +41,6 @@ const StyledP = styled.p`
   )};
 `;
 
-const StyledA = styled.a`
-  display: flex;
-  align-items: center;
-  gap: 4px;
-`;
-
 const StyledPolicyIcon = styled(PolicyIcon)`
   width: 16px;
   fill: ${({ theme }) => theme.primaryBlue};
@@ -67,6 +61,12 @@ const LinkContainer = styled.div`
 const StyledLink = styled(Link)`
   display: flex;
   gap: 4px;
+
+  &:hover {
+    svg {
+      fill: ${({ theme }) => theme.secondaryBlue};
+    }
+  }
 `;
 
 type Attachment = {
@@ -85,10 +85,10 @@ export const Policies: React.FC<IPolicies> = ({ disputePolicyURI, courtId, attac
       <StyledP>Make sure you read and understand the Policies</StyledP>
       <LinkContainer>
         {!isUndefined(attachment) && !isUndefined(attachment.uri) ? (
-          <StyledA href={getIpfsUrl(attachment.uri)} target="_blank" rel="noreferrer">
+          <StyledLink to={getIpfsUrl(attachment.uri)} target="_blank" rel="noreferrer">
             <StyledPaperclipIcon />
             {attachment.label ?? "Attachment"}
-          </StyledA>
+          </StyledLink>
         ) : null}
         {isUndefined(disputePolicyURI) ? null : (
           <StyledLink to={`policy/attachment/?url=${getIpfsUrl(disputePolicyURI)}`}>
@@ -97,10 +97,10 @@ export const Policies: React.FC<IPolicies> = ({ disputePolicyURI, courtId, attac
           </StyledLink>
         )}
         {isUndefined(courtId) ? null : (
-          <StyledA href={`#/courts/${courtId}/purpose?section=description`}>
+          <StyledLink to={`/courts/${courtId}/purpose?section=description`}>
             <StyledPolicyIcon />
             Court Policy
-          </StyledA>
+          </StyledLink>
         )}
       </LinkContainer>
     </ShadeArea>

diff --git a/web/src/components/EvidenceCard.tsx b/web/src/components/EvidenceCard.tsx
@@ -54,7 +54,7 @@ const BottomShade = styled.div`
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  gap: 16px;
+  justify-content: space-between;
   padding: 12px ${responsiveSize(8, 24)};
   > * {
     flex-basis: 1;
@@ -81,55 +81,81 @@ const AccountContainer = styled.div`
   }
 `;
 
-const DesktopText = styled.span`
-  display: none;
+const LeftContent = styled.div`
+  display: block;
+
+  & > *:not(:last-child) {
+    margin-bottom: 8px;
+  }
+
   ${landscapeStyle(
     () => css`
-      display: inline;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: center;
+      gap: 0 12px;
+
+      & > *:not(:last-child) {
+        margin-bottom: 0;
+      }
     `
   )}
 `;
 
+const HoverStyle = css`
+  :hover {
+    text-decoration: underline;
+    color: ${({ theme }) => theme.secondaryBlue};
+    cursor: pointer;
+  }
+`;
+
+const Address = styled.p`
+  ${HoverStyle}
+  margin: 0;
+`;
+
 const Timestamp = styled.label`
   color: ${({ theme }) => theme.secondaryText};
+  ${HoverStyle}
 `;
 
-const MobileText = styled.span`
+const DesktopText = styled.span`
+  display: none;
   ${landscapeStyle(
     () => css`
-      display: none;
+      display: inline;
     `
   )}
 `;
 
-const StyledLink = styled(Link)`
-  height: fit-content;
-  display: flex;
-  margin-left: auto;
-  gap: ${responsiveSize(5, 6)};
+const MobileText = styled.span`
   ${landscapeStyle(
     () => css`
-      > svg {
-        width: 16px;
-        fill: ${({ theme }) => theme.primaryBlue};
-      }
+      display: none;
     `
   )}
 `;
 
-const StyledA = styled.a`
-  :hover {
-    text-decoration: underline;
-    p {
-      color: ${({ theme }) => theme.primaryBlue};
-    }
-    label {
-      cursor: pointer;
-      color: ${({ theme }) => theme.primaryBlue};
-    }
+const StyledLink = styled(Link)`
+  display: flex;
+  gap: ${responsiveSize(5, 6)};
+  > svg {
+    width: 16px;
+    fill: ${({ theme }) => theme.primaryBlue};
+  }
+
+  :hover svg {
+    transition: fill 0.1s;
+    fill: ${({ theme }) => theme.secondaryBlue};
   }
 `;
 
+const FileLinkContainer = styled.div`
+  margin-left: auto;
+`;
+
 const AttachedFileText: React.FC = () => (
   <>
     <DesktopText>View attached file</DesktopText>
@@ -175,20 +201,24 @@ const EvidenceCard: React.FC<IEvidenceCard> = ({
         )}
       </TextContainer>
       <BottomShade>
-        <AccountContainer>
-          <Identicon size="24" string={sender} />
-          <StyledA href={addressExplorerLink} rel="noopener noreferrer" target="_blank">
-            <p>{shortenAddress(sender)}</p>
-          </StyledA>
-        </AccountContainer>
-        <StyledA href={transactionExplorerLink} rel="noopener noreferrer" target="_blank">
-          <Timestamp>{formatDate(Number(timestamp), true)}</Timestamp>
-        </StyledA>
-        {fileURI && fileURI !== "-" ? (
-          <StyledLink to={`attachment/?url=${getIpfsUrl(fileURI)}`}>
-            <AttachmentIcon />
-            <AttachedFileText />
+        <LeftContent>
+          <AccountContainer>
+            <Identicon size="24" string={sender} />
+            <StyledLink to={addressExplorerLink} rel="noopener noreferrer" target="_blank">
+              <Address>{shortenAddress(sender)}</Address>
+            </StyledLink>
+          </AccountContainer>
+          <StyledLink to={transactionExplorerLink} rel="noopener noreferrer" target="_blank">
+            <Timestamp>{formatDate(Number(timestamp), true)}</Timestamp>
           </StyledLink>
+        </LeftContent>
+        {fileURI && fileURI !== "-" ? (
+          <FileLinkContainer>
+            <StyledLink to={`attachment/?url=${getIpfsUrl(fileURI)}`}>
+              <AttachmentIcon />
+              <AttachedFileText />
+            </StyledLink>
+          </FileLinkContainer>
         ) : null}
       </BottomShade>
     </StyledCard>

diff --git a/web/src/components/HowItWorks.tsx b/web/src/components/HowItWorks.tsx
@@ -6,29 +6,26 @@ import BookOpenIcon from "svgs/icons/book-open.svg";
 const Container = styled.div`
   display: flex;
   align-items: center;
+  font-size: 14px;
+  font-weight: 400;
   gap: 8px;
+  cursor: pointer;
   color: ${({ theme }) => theme.primaryBlue};
+  transition: color 0.1s;
 
-  &,
-  & * {
-    cursor: pointer;
+  svg path {
+    fill: ${({ theme }) => theme.primaryBlue};
+    transition: fill 0.1s;
   }
 
   &:hover {
-    text-decoration: underline;
-  }
-
-  svg {
-    path {
-      fill: ${({ theme }) => theme.primaryBlue};
+    color: ${({ theme }) => theme.secondaryBlue};
+    svg path {
+      fill: ${({ theme }) => theme.secondaryBlue};
     }
   }
 `;
 
-const StyledLabel = styled.label`
-  color: ${({ theme }) => theme.primaryBlue};
-`;
-
 interface IHowItWorks {
   isMiniGuideOpen: boolean;
   toggleMiniGuide: () => void;
@@ -40,7 +37,7 @@ const HowItWorks: React.FC<IHowItWorks> = ({ isMiniGuideOpen, toggleMiniGuide, M
     <>
       <Container onClick={toggleMiniGuide}>
         <BookOpenIcon />
-        <StyledLabel> How it works </StyledLabel>
+        How it works
       </Container>
       {isMiniGuideOpen && <MiniGuideComponent toggleMiniGuide={toggleMiniGuide} />}
     </>

diff --git a/web/src/components/ScrollTop.tsx b/web/src/components/ScrollTop.tsx
@@ -1,14 +1,33 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useRef } from "react";
+import { useLocation, useNavigate } from "react-router-dom";
 
 import { useScrollTop } from "hooks/useScrollTop";
 
 const ScrollTop: React.FC = () => {
   const scrollTop = useScrollTop();
+  const { search, pathname } = useLocation();
+  const navigate = useNavigate();
+  const hasScrolled = useRef(false);
 
   useEffect(() => {
+    if (hasScrolled.current) return;
+    const params = new URLSearchParams(search);
+    const section = params.get("section");
+
+    if (section) {
+      const targetElement = document.getElementById(section);
+      if (targetElement) {
+        targetElement.scrollIntoView({ behavior: "smooth" });
+        hasScrolled.current = true;
+        navigate(pathname, { replace: true });
+        return;
+      }
+    }
+
     scrollTop();
   }, []);
 
-  return <></>;
+  return null;
 };
+
 export default ScrollTop;
diff --git a/web/src/consts/community-elements.tsx b/web/src/consts/community-elements.tsx
@@ -1,4 +1,3 @@
-import React from "react";
 import styled, { css } from "styled-components";
 
 import FrenchFlagIcon from "svgs/icons/french-flag.svg";
@@ -8,13 +7,6 @@ import TelegramIcon from "svgs/socialmedia/telegram.svg";
 
 import { IElement } from "../pages/Home/Community/Element";
 
-const StyledLabel = styled.label`
-  color: ${({ theme }) => theme.primaryBlue};
-  :hover {
-    cursor: pointer;
-  }
-`;
-
 const fillWithSecondaryPurple = css`
   fill: ${({ theme }) => theme.secondaryPurple};
 `;
@@ -34,39 +26,24 @@ const StyledTelegramIcon = styled(TelegramIcon)`
 export const section: IElement[] = [
   {
     Icon: StyledPNKIcon,
-    urls: [
-      {
-        node: <StyledLabel>Kleros Forum</StyledLabel>,
-        link: "https://forum.kleros.io/",
-      },
-    ],
+    title: "Kleros Forum",
+    link: "https://forum.kleros.io/",
   },
+
   {
     Icon: SnapshotIcon,
-    urls: [
-      {
-        node: <StyledLabel>Vote on proposals</StyledLabel>,
-        link: "https://snapshot.org/#/kleros.eth/",
-      },
-    ],
+    title: "Vote on proposals",
+    link: "https://snapshot.org/#/kleros.eth/",
   },
   {
     Icon: StyledTelegramIcon,
+    title: "Community Calls",
+    link: "https://t.me/kleros",
     primaryText: "Wednesday, 18h UTC",
-    urls: [
-      {
-        node: <StyledLabel>Community Calls</StyledLabel>,
-        link: "https://t.me/kleros",
-      },
-    ],
   },
   {
     Icon: FrenchFlagIcon,
-    urls: [
-      {
-        node: <StyledLabel>Join the Coopérative</StyledLabel>,
-        link: "https://kleros.io/coop/",
-      },
-    ],
+    title: "Join the Coopérative",
+    link: "https://kleros.io/coop/",
   },
 ];
diff --git a/web/src/layout/Header/navbar/Product.tsx b/web/src/layout/Header/navbar/Product.tsx
@@ -13,8 +13,7 @@ const Container = styled.a`
   border-radius: 3px;
   :hover {
     transform: scale(1.05);
-    transition: 350ms;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition: 0.1s;
   }
   gap: 8px;
   width: ${responsiveSize(100, 130)};

diff --git a/web/src/pages/Cases/AttachmentDisplay/Header.tsx b/web/src/pages/Cases/AttachmentDisplay/Header.tsx
@@ -53,6 +53,14 @@ const StyledButton = styled(Button)`
   :focus,
   :hover {
     background-color: transparent;
+    .button-svg {
+      path {
+        fill: ${({ theme }) => theme.secondaryBlue};
+      }
+    }
+    .button-text {
+      color: ${({ theme }) => theme.secondaryBlue};
+    }
   }
 `;
 

diff --git a/web/src/pages/Cases/AttachmentDisplay/index.tsx b/web/src/pages/Cases/AttachmentDisplay/index.tsx
@@ -30,6 +30,14 @@ const NewTabInfo = styled.a`
   display: flex;
   gap: 8px;
   align-items: center;
+
+  :hover {
+    text-decoration: underline;
+    svg path {
+      transition: fill 0.1s;
+      fill: ${({ theme }) => theme.secondaryBlue};
+    }
+  }
 `;
 
 const StyledNewTabIcon = styled(NewTabIcon)`