feat: ui impros

Author: kemuru

web/package.json

@@ -71,7 +71,7 @@
     "@cyntler/react-doc-viewer": "^1.17.0",
     "@kleros/curate-v2-templates": "workspace:^",
     "@kleros/kleros-app": "^2.0.1",
-    "@kleros/ui-components-library": "^2.15.0",
+    "@kleros/ui-components-library": "^2.20.0",
     "@sentry/react": "^7.93.0",
     "@sentry/tracing": "^7.93.0",
     "@tanstack/react-query": "^5.59.20",

web/src/assets/svgs/header/curate.svg

@@ -0,0 +1,9 @@
+import styled from "styled-components";
+
+import { Link } from "react-router-dom";
+
+export const ExternalLink = styled(Link)`
+  :hover {
+    text-decoration: underline;
+  }
+`;

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

@@ -0,0 +1,8 @@
+import { Link } from "react-router-dom";
+import styled from "styled-components";
+
+export const InternalLink = styled(Link)`
+  :hover {
+    color: ${({ theme }) => theme.secondaryBlue} !important;
+  }
+`;

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

@@ -1,22 +1,38 @@
 import React from "react";
-import styled from "styled-components";
+import styled, { css } from "styled-components";
+import { landscapeStyle } from "styles/landscapeStyle";
+import { hoverShortTransitionTiming } from "styles/commonStyles";
+
 import { Button } from "@kleros/ui-components-library";
 
-const StyledButton = styled(Button)`
+const StyledButton = styled(Button)<{ isMobileNavbar?: boolean }>`
+  ${hoverShortTransitionTiming}
   background-color: transparent;
-  padding-left: 0;
+  padding: 8px !important;
+  border-radius: 7px;
   .button-text {
     color: ${({ theme }) => theme.primaryText};
     font-weight: 400;
   }
   .button-svg {
-    fill: ${({ theme }) => theme.secondaryPurple};
+    fill: ${({ theme, isMobileNavbar }) => (isMobileNavbar ? theme.secondaryText : `${theme.white}BF`)} !important;
   }
 
-  :focus,
-  :hover {
-    background-color: transparent;
+  &:hover {
+    .button-svg {
+      fill: ${({ theme, isMobileNavbar }) => (isMobileNavbar ? theme.primaryText : `${theme.white}`)} !important;
+    }
+    background-color: ${({ theme }) => theme.whiteLowOpacityStrong};
   }
+
+  ${landscapeStyle(
+    () => css`
+      padding: 8px !important;
+      .button-svg {
+        margin-right: 0;
+      }
+    `
+  )}
 `;
 
 interface ILightButton {
@@ -25,10 +41,11 @@ interface ILightButton {
   onClick?: React.MouseEventHandler<HTMLButtonElement>;
   disabled?: boolean;
   className?: string;
+  isMobileNavbar?: boolean;
 }
 
-const LightButton: React.FC<ILightButton> = ({ text, Icon, onClick, disabled, className }) => (
-  <StyledButton variant="primary" small {...{ text, Icon, onClick, disabled, className }} />
+const LightButton: React.FC<ILightButton> = ({ text, Icon, onClick, disabled, className, isMobileNavbar }) => (
+  <StyledButton variant="primary" small {...{ text, Icon, onClick, disabled, className, isMobileNavbar }} />
 );
 
 export default LightButton;

web/src/components/ExternalLink.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import styled from "styled-components";
+
+const PortalContainer = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 9999;
+  width: 100%;
+  height: 100%;
+`;
+
+const OverlayPortal: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  return ReactDOM.createPortal(<PortalContainer>{children}</PortalContainer>, document.body);
+};
+
+export default OverlayPortal;

web/src/components/InternalLink.tsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 import DiscordLogo from "svgs/socialmedia/discord.svg";
 import GithubLogo from "svgs/socialmedia/github.svg";
 import LinkedinLogo from "svgs/socialmedia/linkedin.svg";
@@ -9,27 +7,27 @@ import XLogo from "svgs/socialmedia/x.svg";
 
 export const socialmedia = {
   telegram: {
-    icon: <TelegramLogo />,
+    icon: TelegramLogo,
     url: "https://t.me/kleros",
   },
   x: {
-    icon: <XLogo />,
+    icon: XLogo,
     url: "https://x.com/kleros_io",
   },
   discord: {
-    icon: <DiscordLogo />,
+    icon: DiscordLogo,
     url: "https://discord.com/invite/MhXQGCyHd9",
   },
   youtube: {
-    icon: <YouTubeLogo />,
+    icon: YouTubeLogo,
     url: "https://youtube.com/@kleros_io",
   },
   github: {
-    icon: <GithubLogo />,
+    icon: GithubLogo,
     url: "https://github.com/kleros",
   },
   linkedin: {
-    icon: <LinkedinLogo />,
+    icon: LinkedinLogo,
     url: "https://www.linkedin.com/company/kleros/",
   },
 };