feat: more hover effects, mobile paddings, max width landscape size

kleros · Jan 13, 2025 · db74a9c · db74a9c
1 parent 3b6b045
commit db74a9c
Show file tree

Hide file tree

Showing 13 changed files with 129 additions and 61 deletions.
diff --git a/web/src/components/InformationCards/RegistryInformationCard/Policies.tsx b/web/src/components/InformationCards/RegistryInformationCard/Policies.tsx
@@ -1,13 +1,17 @@
 import React from "react";
 import styled, { css } from "styled-components";
+
 import { landscapeStyle } from "styles/landscapeStyle";
+import { hoverShortTransitionTiming } from "styles/commonStyles";
+import { responsiveSize } from "styles/responsiveSize";
+
 import Skeleton from "react-loading-skeleton";
+
 import PolicyIcon from "svgs/icons/policy.svg";
-import { responsiveSize } from "styles/responsiveSize";
 import { getIpfsUrl } from "utils/getIpfsUrl";
-import { useRegistryDetailsQuery } from "queries/useRegistryDetailsQuery";
 import { MAIN_CURATE_ADDRESS } from "src/consts";
-import { Link } from "react-router-dom";
+import { useRegistryDetailsQuery } from "queries/useRegistryDetailsQuery";
+import { InternalLink } from "components/InternalLink";
 
 const ShadeArea = styled.div`
   display: flex;
@@ -38,12 +42,6 @@ const StyledP = styled.p`
   )};
 `;
 
-const StyledA = styled(Link)`
-  display: flex;
-  align-items: center;
-  gap: 4px;
-`;
-
 const StyledPolicyIcon = styled(PolicyIcon)`
   width: 16px;
   fill: ${({ theme }) => theme.primaryBlue};
@@ -55,6 +53,19 @@ const LinkContainer = styled.div`
   flex-wrap: wrap;
 `;
 
+const StyledInternalLink = styled(InternalLink)`
+  ${hoverShortTransitionTiming}
+  display: flex;
+  gap: 4px;
+  align-items: center;
+
+  &:hover {
+    svg {
+      fill: ${({ theme }) => theme.secondaryBlue};
+    }
+  }
+`;
+
 interface IPolicies {
   policyURI: string;
   isItem?: boolean;
@@ -70,20 +81,20 @@ export const Policies: React.FC<IPolicies> = ({ policyURI, isItem }) => {
         {!isItem ? (
           <>
             {parentRegistryDetails ? (
-              <StyledA to={`/attachment/?url=${getIpfsUrl(parentRegistryDetails.registry.policyURI ?? "")}`}>
+              <StyledInternalLink to={`/attachment/?url=${getIpfsUrl(parentRegistryDetails.registry.policyURI ?? "")}`}>
                 <StyledPolicyIcon />
                 Curation Policy
-              </StyledA>
+              </StyledInternalLink>
             ) : (
               <Skeleton width={116} />
             )}
           </>
         ) : null}
         {policyURI ? (
-          <StyledA to={`/attachment/?url=${getIpfsUrl(policyURI)}`}>
+          <StyledInternalLink to={`/attachment/?url=${getIpfsUrl(policyURI)}`}>
             <StyledPolicyIcon />
             List Policy
-          </StyledA>
+          </StyledInternalLink>
         ) : (
           <Skeleton width={80} />
         )}

diff --git a/web/src/components/RegistriesDisplay/RegistriesGrid.tsx b/web/src/components/RegistriesDisplay/RegistriesGrid.tsx
@@ -13,7 +13,7 @@ import RegistryCard from "components/RegistryCard";
 import { mapFromSubgraphStatus } from "../RegistryCard/StatusBanner";
 
 const GridContainer = styled.div`
-  --gap: 24px;
+  --gap: 16px;
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(min(100%, max(274px, (100% - var(--gap) * 2)/3)), 1fr));
   align-items: center;

diff --git a/web/src/components/Search.tsx b/web/src/components/Search.tsx
@@ -55,6 +55,14 @@ const StyledPlusIcon = styled(PlusIcon)`
   }
 `;
 
+const StyledDropdownSelect = styled(DropdownSelect)`
+  [class*="button__Container"] {
+    [class*="base-item__Item"] {
+      border-left: 1px solid transparent;
+    }
+  }
+`;
+
 const Search: React.FC<{ isList?: Boolean }> = ({ isList }) => {
   const { page, order, filter, id } = useParams();
   const location = useListRootPath();
@@ -92,7 +100,7 @@ const Search: React.FC<{ isList?: Boolean }> = ({ isList }) => {
           onChange={(e) => setSearch(e.target.value)}
         />
       </SearchBarContainer>
-      <DropdownSelect
+      <StyledDropdownSelect
         items={[
           { text: "All Status", dot: "grey", value: JSON.stringify({}) },
           { text: "Active", dot: "orange", value: JSON.stringify(List_filters.Active) },

diff --git a/web/src/components/StatsAndFilters/Filters.tsx b/web/src/components/StatsAndFilters/Filters.tsx
@@ -1,13 +1,16 @@
 import React from "react";
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 import { useNavigate, useParams, useSearchParams } from "react-router-dom";
-import { useWindowSize } from "react-use";
+
+import { hoverShortTransitionTiming } from "styles/commonStyles";
+
 import { DropdownSelect } from "@kleros/ui-components-library";
+
 import { useIsListView } from "context/IsListViewProvider";
 import ListIcon from "svgs/icons/list.svg";
 import GridIcon from "svgs/icons/grid.svg";
-import { BREAKPOINT_LANDSCAPE } from "styles/landscapeStyle";
 import { useItemRootPath, useListRootPath } from "utils/uri";
+import useIsDesktop from "hooks/useIsDesktop";
 
 const Container = styled.div`
   display: flex;
@@ -16,33 +19,38 @@ const Container = styled.div`
   width: fit-content;
 `;
 
-const StyledGridIcon = styled(GridIcon)`
-  cursor: pointer;
-  transition: filter 0.2s ease;
-  fill: ${({ theme }) => theme.primaryBlue};
-  width: 16px;
-  height: 16px;
-  overflow: hidden;
-`;
-
 const IconsContainer = styled.div`
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 4px;
 `;
 
-const StyledListIcon = styled(ListIcon)`
+const BaseIconStyles = css`
+  ${hoverShortTransitionTiming}
   cursor: pointer;
-  transition: filter 0.2s ease;
   fill: ${({ theme }) => theme.primaryBlue};
   width: 16px;
   height: 16px;
   overflow: hidden;
+
+  :hover {
+    fill: ${({ theme }) => theme.secondaryBlue};
+  }
+`;
+
+const StyledGridIcon = styled(GridIcon)`
+  ${BaseIconStyles}
 `;
+
+const StyledListIcon = styled(ListIcon)`
+  ${BaseIconStyles}
+`;
+
 export interface IFilters {
   isListFilter?: boolean;
 }
+
 const Filters: React.FC<IFilters> = ({ isListFilter = false }) => {
   const { order, filter } = useParams();
   const navigate = useNavigate();
@@ -57,31 +65,29 @@ const Filters: React.FC<IFilters> = ({ isListFilter = false }) => {
     );
   };
 
-  const { width } = useWindowSize();
   const { isListView, setIsListView } = useIsListView();
-  const screenIsBig = width > BREAKPOINT_LANDSCAPE;
+  const isDesktop = useIsDesktop();
 
   return (
     <Container>
       <DropdownSelect
         smallButton
         simpleButton
-        alignRight
         items={[
           { value: "desc", text: "Newest" },
           { value: "asc", text: "Oldest" },
         ]}
         defaultValue={order}
         callback={handleOrderChange}
       />
-      {screenIsBig && isListFilter ? (
+      {isDesktop && isListFilter ? (
         <IconsContainer>
           {isListView ? (
             <StyledGridIcon onClick={() => setIsListView(false)} />
           ) : (
             <StyledListIcon
               onClick={() => {
-                if (screenIsBig) {
+                if (isDesktop) {
                   setIsListView(true);
                 }
               }}

diff --git a/web/src/pages/AllLists/index.tsx b/web/src/pages/AllLists/index.tsx
@@ -1,7 +1,13 @@
 import React from "react";
-import styled from "styled-components";
+import styled, { css } from "styled-components";
+
+import { MAX_WIDTH_LANDSCAPE, landscapeStyle } from "styles/landscapeStyle";
+import { responsiveSize } from "styles/responsiveSize";
+
 import { Route, Routes } from "react-router-dom";
+
 import { RegistryDetailsProvider } from "context/RegistryDetailsContext";
+
 import RegistriesFetcher from "./RegistriesFetcher";
 import RegistryDetails from "./RegistryDetails";
 import ItemDisplay from "./ItemDisplay";
@@ -10,11 +16,15 @@ import Breadcrumb from "./StyledBreadcrumb";
 const Container = styled.div`
   width: 100%;
   background-color: ${({ theme }) => theme.lightBackground};
-  padding: calc(24px + (136 - 24) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
-  padding-top: calc(32px + (80 - 32) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
-  padding-bottom: calc(76px + (96 - 76) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
-  max-width: 1780px;
+  padding: 32px 16px 40px;
+  max-width: ${MAX_WIDTH_LANDSCAPE};
   margin: 0 auto;
+
+  ${landscapeStyle(
+    () => css`
+      padding: 48px ${responsiveSize(0, 132)} 60px;
+    `
+  )}
 `;
 
 export const ConnectWalletContainer = styled.div`

diff --git a/web/src/pages/AttachmentDisplay/Header.tsx b/web/src/pages/AttachmentDisplay/Header.tsx
@@ -27,14 +27,14 @@ const TitleContainer = styled.div`
 
 const Title = styled.h1`
   margin: 0px;
-  font-size: ${responsiveSize(16, 24)};
+  font-size: ${responsiveSize(20, 24)};
 `;
 
 const StyledPaperClip = styled(PaperClip)`
   width: ${responsiveSize(16, 24)};
   height: ${responsiveSize(16, 24)};
   path {
-    fill: ${({ theme }) => theme.primaryPurple};
+    fill: ${({ theme }) => theme.secondaryPurple}B0;
   }
 `;
 
@@ -53,19 +53,31 @@ const StyledButton = styled(Button)`
   :focus,
   :hover {
     background-color: transparent;
+    .button-svg {
+      path {
+        fill: ${({ theme }) => theme.secondaryBlue};
+      }
+    }
+    .button-text {
+      color: ${({ theme }) => theme.secondaryBlue};
+    }
   }
 `;
 
 const Header: React.FC = () => {
   const navigate = useNavigate();
 
+  const handleReturn = () => {
+    navigate(-1);
+  };
+
   return (
     <Container>
       <TitleContainer>
         <StyledPaperClip />
         <Title>Attachment File</Title>{" "}
       </TitleContainer>
-      <StyledButton text="Return" Icon={Arrow} onClick={() => navigate(-1)} />
+      <StyledButton text="Return" Icon={Arrow} onClick={handleReturn} />
     </Container>
   );
 };

diff --git a/web/src/pages/AttachmentDisplay/index.tsx b/web/src/pages/AttachmentDisplay/index.tsx
@@ -1,12 +1,14 @@
 import React, { lazy, Suspense } from "react";
 import styled from "styled-components";
 
+import { MAX_WIDTH_LANDSCAPE } from "styles/landscapeStyle";
+
 import { useSearchParams } from "react-router-dom";
 
 import NewTabIcon from "svgs/icons/new-tab.svg";
 
 import Loader from "components/Loader";
-
+import { ExternalLink } from "components/ExternalLink";
 import Header from "./Header";
 
 const FileViewer = lazy(() => import("components/FileViewer"));
@@ -17,7 +19,7 @@ const Container = styled.div`
   padding: calc(24px + (136 - 24) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
   padding-top: calc(32px + (80 - 32) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
   padding-bottom: calc(76px + (96 - 76) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
-  max-width: 1780px;
+  max-width: ${MAX_WIDTH_LANDSCAPE};
   margin: 0 auto;
 `;
 
@@ -34,11 +36,11 @@ const LoaderContainer = styled.div`
   justify-content: center;
 `;
 
-const NewTabInfo = styled.a`
-  align-self: flex-end;
+const StyledExternalLink = styled(ExternalLink)`
   display: flex;
-  gap: 8px;
   align-items: center;
+  align-self: flex-end;
+  gap: 8px;
 `;
 
 const StyledNewTabIcon = styled(NewTabIcon)`
@@ -57,9 +59,9 @@ const AttachmentDisplay: React.FC = () => {
         <Header />
         {url ? (
           <>
-            <NewTabInfo href={url} rel="noreferrer" target="_blank">
+            <StyledExternalLink to={url} rel="noreferrer" target="_blank">
               Open in new tab <StyledNewTabIcon />
-            </NewTabInfo>
+            </StyledExternalLink>
             <Suspense
               fallback={
                 <LoaderContainer>

diff --git a/web/src/pages/Home/Highlights/index.tsx b/web/src/pages/Home/Highlights/index.tsx
@@ -24,7 +24,7 @@ const Container = styled.div`
 `;
 
 const GridContainer = styled.div`
-  --gap: 24px;
+  --gap: 16px;
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(min(100%, max(274px, (100% - var(--gap) * 2)/3)), 1fr));
   align-items: center;

diff --git a/web/src/pages/Home/index.tsx b/web/src/pages/Home/index.tsx
@@ -1,17 +1,26 @@
 import React from "react";
-import styled from "styled-components";
-import HeroImage from "components/HeroImage";
+import styled, { css } from "styled-components";
+
 import { responsiveSize } from "styles/responsiveSize";
+import { MAX_WIDTH_LANDSCAPE, landscapeStyle } from "styles/landscapeStyle";
+
+import HeroImage from "components/HeroImage";
 import Header from "./Header";
 import Stats from "./Stats";
 import HighlightedLists from "./Highlights";
 
 const Container = styled.div`
   width: 100%;
   background-color: ${({ theme }) => theme.lightBackground};
-  padding: ${responsiveSize(32, 72)} ${responsiveSize(24, 132)} ${responsiveSize(76, 96)};
-  max-width: 1780px;
+  padding: 16px 16px 40px;
+  max-width: ${MAX_WIDTH_LANDSCAPE};
   margin: 0 auto;
+
+  ${landscapeStyle(
+    () => css`
+      padding: 16px ${responsiveSize(0, 132)} 60px;
+    `
+  )}
 `;
 
 const Home: React.FC = () => {