diff --git a/src/components/CardWithIcon/CardWithIcon.tsx b/src/components/CardWithIcon/CardWithIcon.tsx
index 642612d3a8..f50ee5dbb4 100644
--- a/src/components/CardWithIcon/CardWithIcon.tsx
+++ b/src/components/CardWithIcon/CardWithIcon.tsx
@@ -1,5 +1,6 @@
import Link from '@docusaurus/Link';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import styled from 'styled-components';
import { theme, VerticalTile } from '@apify/ui-library';
@@ -7,6 +8,16 @@ import { Heading } from '../Heading';
import { Text } from '../Text';
import styles from './styles.module.css';
+const StyledVerticalTile = styled(VerticalTile)`
+ background-color: var(--color-neutral-card-background);
+ border-color: var(--color-neutral-border);
+
+ &:hover {
+ background-color: var(--color-neutral-card-background-hover);
+ border-color: var(--color-neutral-border);
+ }
+`;
+
interface CardWithIconProps {
icon: React.ReactNode;
title: string;
@@ -20,7 +31,7 @@ export default function CardWithIcon({ icon, title, description, to, width }: Ca
const external = to.startsWith('http');
const Tile = (
-
diff --git a/src/components/Cards.module.css b/src/components/Cards.module.css
index 312601b9e5..ead46e2b24 100644
--- a/src/components/Cards.module.css
+++ b/src/components/Cards.module.css
@@ -1,14 +1,11 @@
.card {
- border: 1px solid #b3b8d2;
+ background: var(--color-neutral-card-background);
+ border: 1px solid var(--color-neutral-border);
border-radius: 0.5rem;
}
.card-hoverable:hover {
- background-color: rgb(241, 242, 247);
-}
-
-html[data-theme='dark'] .card-hoverable:hover {
- background-color: rgb(30, 40, 59);
+ background-color: var(--color-neutral-card-background-hover);
}
.card-image-container {
@@ -36,7 +33,7 @@ html[data-theme='dark'] .card-hoverable:hover {
font-size: 120%;
padding: 20px 1rem;
margin: 0px 0px 10px 0px;
- border-bottom: 1px #b3b8d2 solid;
+ border-bottom: 1px solid var(--color-neutral-border);
box-sizing: border-box;
}
diff --git a/src/components/GitButton.tsx b/src/components/GitButton.tsx
index dc83c1897b..0e9ec6bf77 100644
--- a/src/components/GitButton.tsx
+++ b/src/components/GitButton.tsx
@@ -1,9 +1,37 @@
+import BrowserOnly from '@docusaurus/BrowserOnly';
import { useColorMode } from '@docusaurus/theme-common';
-import type { GitHubButtonProps } from 'github-buttons';
-import type { PropsWithChildren } from 'react';
-import GitHubButton from 'react-github-btn';
-export default function GitButton(props: PropsWithChildren) {
+interface GitButtonProps {
+ href: string;
+ ariaLabel: string;
+}
+
+function GitButtonInner({ href, ariaLabel }: GitButtonProps) {
const { colorMode } = useColorMode();
- return {() => ;
}
diff --git a/src/components/OpenSourceCards/OpenSourceCards.tsx b/src/components/OpenSourceCards/OpenSourceCards.tsx
index 30cc47cf8f..7714daf9f1 100644
--- a/src/components/OpenSourceCards/OpenSourceCards.tsx
+++ b/src/components/OpenSourceCards/OpenSourceCards.tsx
@@ -1,12 +1,11 @@
import Link from '@docusaurus/Link';
-import { useColorMode } from '@docusaurus/theme-common';
import useBaseUrl from '@docusaurus/useBaseUrl';
import type React from 'react';
-import GitHubButton from 'react-github-btn';
import { theme } from '@apify/ui-library';
import CardWithImageAndContent from '../CardWithImageAndContent/ImageWithContent';
+import GitButton from '../GitButton';
import { Heading } from '../Heading';
import { Text } from '../Text';
import styles from './styles.module.css';
@@ -16,8 +15,6 @@ interface OpenSourceCardsProps {
}
const OpenSourceCards: React.FC = ({ hideCrawlee = false }) => {
- const { colorMode } = useColorMode();
-
return (
<>
{!hideCrawlee && (
@@ -41,15 +38,10 @@ const OpenSourceCards: React.FC = ({ hideCrawlee = false }
-
- Star
-
+ ariaLabel="Star apify/crawlee on GitHub"
+ />
}
@@ -75,15 +67,10 @@ const OpenSourceCards: React.FC
-
- Star
-
+ ariaLabel="Star apify/fingerprint-suite on GitHub"
+ />
}
@@ -108,15 +95,7 @@ const OpenSourceCards: React.FC
-
- Star
-
+
}
@@ -141,15 +120,7 @@ const OpenSourceCards: React.FC
-
- Star
-
+
}
@@ -173,15 +144,10 @@ const OpenSourceCards: React.FC
-
- Star
-
+ ariaLabel="Star apify/proxy-chain on GitHub"
+ />
}
diff --git a/src/components/OpenSourceCards/styles.module.css b/src/components/OpenSourceCards/styles.module.css
index 6815d3ea81..081fef2977 100644
--- a/src/components/OpenSourceCards/styles.module.css
+++ b/src/components/OpenSourceCards/styles.module.css
@@ -69,19 +69,11 @@ html[data-theme='dark'] .imageLink:hover img {
align-items: center;
width: 100%;
aspect-ratio: 384 / 124;
- background: #f8f9fc;
+ background: var(--color-neutral-background-muted);
border-radius: 12px;
transition: background 200ms ease-in-out;
}
.imageLink:hover .iconWrapper {
- background: #f0f1f4;
-}
-
-html[data-theme='dark'] .iconWrapper {
- background: #23262d;
-}
-
-html[data-theme='dark'] .imageLink:hover .iconWrapper {
- background: #2a2d35;
+ background: var(--color-neutral-card-background-hover);
}
diff --git a/src/components/PlainCard/PlainCard.tsx b/src/components/PlainCard/PlainCard.tsx
index 4e7df58a6f..aae9ac82bd 100644
--- a/src/components/PlainCard/PlainCard.tsx
+++ b/src/components/PlainCard/PlainCard.tsx
@@ -1,5 +1,6 @@
import Link from '@docusaurus/Link';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import styled from 'styled-components';
import { theme, VerticalTile } from '@apify/ui-library';
@@ -7,6 +8,16 @@ import { Heading } from '../Heading';
import { Text } from '../Text';
import styles from './styles.module.css';
+const StyledVerticalTile = styled(VerticalTile)`
+ background-color: var(--color-neutral-card-background);
+ border-color: var(--color-neutral-border);
+
+ &:hover {
+ background-color: var(--color-neutral-card-background-hover);
+ border-color: var(--color-neutral-border);
+ }
+`;
+
interface PlainCardProps {
icon: React.ReactNode;
title: string;
@@ -20,7 +31,7 @@ export default function PlainCard({ icon, title, description, to, width }: Plain
const external = to.startsWith('http');
const Tile = (
-