) => (
);
diff --git a/docs/src/assets/trustedTeamsLogos/dark/1inch-dark.png b/docs/src/assets/trustedTeamsLogos/dark/1inch-dark.png
new file mode 100644
index 0000000000..49a90acbbf
Binary files /dev/null and b/docs/src/assets/trustedTeamsLogos/dark/1inch-dark.png differ
diff --git a/docs/src/assets/trustedTeamsLogos/dark/aave-dark.png b/docs/src/assets/trustedTeamsLogos/dark/aave-dark.png
new file mode 100644
index 0000000000..0f4898f106
Binary files /dev/null and b/docs/src/assets/trustedTeamsLogos/dark/aave-dark.png differ
diff --git a/docs/src/assets/trustedTeamsLogos/dark/aragonOne-dark.png b/docs/src/assets/trustedTeamsLogos/dark/aragonOne-dark.png
new file mode 100644
index 0000000000..9667db1320
Binary files /dev/null and b/docs/src/assets/trustedTeamsLogos/dark/aragonOne-dark.png differ
diff --git a/docs/src/assets/trustedTeamsLogos/dark/augur-dark.png b/docs/src/assets/trustedTeamsLogos/dark/augur-dark.png
new file mode 100644
index 0000000000..95746d6340
Binary files /dev/null and b/docs/src/assets/trustedTeamsLogos/dark/augur-dark.png differ
diff --git a/docs/src/assets/trustedTeamsLogos/dark/balancer-dark.png b/docs/src/assets/trustedTeamsLogos/dark/balancer-dark.png
new file mode 100644
index 0000000000..496611b8e9
Binary files /dev/null and b/docs/src/assets/trustedTeamsLogos/dark/balancer-dark.png differ
diff --git a/docs/src/assets/trustedTeamsLogos/dark/celer-dark.png b/docs/src/assets/trustedTeamsLogos/dark/celer-dark.png
new file mode 100644
index 0000000000..546c50cf73
Binary files /dev/null and b/docs/src/assets/trustedTeamsLogos/dark/celer-dark.png differ
diff --git a/docs/src/assets/trustedTeamsLogos/dark/celo-dark.png b/docs/src/assets/trustedTeamsLogos/dark/celo-dark.png
new file mode 100644
index 0000000000..e90aab53bc
Binary files /dev/null and b/docs/src/assets/trustedTeamsLogos/dark/celo-dark.png differ
diff --git a/docs/src/assets/trustedTeamsLogos/dark/chainlink-dark.png b/docs/src/assets/trustedTeamsLogos/dark/chainlink-dark.png
new file mode 100644
index 0000000000..0f75314582
Binary files /dev/null and b/docs/src/assets/trustedTeamsLogos/dark/chainlink-dark.png differ
diff --git a/docs/src/assets/trustedTeamsLogos/dark/connext-dark.png b/docs/src/assets/trustedTeamsLogos/dark/connext-dark.png
new file mode 100644
index 0000000000..e21e946510
Binary files /dev/null and b/docs/src/assets/trustedTeamsLogos/dark/connext-dark.png differ
diff --git a/docs/src/assets/trustedTeamsLogos/dark/decentraland-dark.png b/docs/src/assets/trustedTeamsLogos/dark/decentraland-dark.png
new file mode 100644
index 0000000000..f1de5ccbda
Binary files /dev/null and b/docs/src/assets/trustedTeamsLogos/dark/decentraland-dark.png differ
diff --git a/docs/src/assets/trustedTeamsLogos/dark/dharma-dark.png b/docs/src/assets/trustedTeamsLogos/dark/dharma-dark.png
new file mode 100644
index 0000000000..e7f66884c7
Binary files /dev/null and b/docs/src/assets/trustedTeamsLogos/dark/dharma-dark.png differ
diff --git a/docs/src/assets/trustedTeamsLogos/dark/ens-dark.png b/docs/src/assets/trustedTeamsLogos/dark/ens-dark.png
new file mode 100644
index 0000000000..c94a828f81
Binary files /dev/null and b/docs/src/assets/trustedTeamsLogos/dark/ens-dark.png differ
diff --git a/docs/src/assets/trustedTeamsLogos/dark/gnosis-dark.png b/docs/src/assets/trustedTeamsLogos/dark/gnosis-dark.png
new file mode 100644
index 0000000000..d798f682e6
Binary files /dev/null and b/docs/src/assets/trustedTeamsLogos/dark/gnosis-dark.png differ
diff --git a/docs/src/assets/trustedTeamsLogos/dark/hegic-dark.png b/docs/src/assets/trustedTeamsLogos/dark/hegic-dark.png
new file mode 100644
index 0000000000..cd83c2da51
Binary files /dev/null and b/docs/src/assets/trustedTeamsLogos/dark/hegic-dark.png differ
diff --git a/docs/src/assets/trustedTeamsLogos/dark/horizon-dark.png b/docs/src/assets/trustedTeamsLogos/dark/horizon-dark.png
new file mode 100644
index 0000000000..802084f819
Binary files /dev/null and b/docs/src/assets/trustedTeamsLogos/dark/horizon-dark.png differ
diff --git a/docs/src/assets/trustedTeamsLogos/dark/instadapp-dark.png b/docs/src/assets/trustedTeamsLogos/dark/instadapp-dark.png
new file mode 100644
index 0000000000..b9578d1334
Binary files /dev/null and b/docs/src/assets/trustedTeamsLogos/dark/instadapp-dark.png differ
diff --git a/docs/src/assets/trustedTeamsLogos/dark/kleros-dark.png b/docs/src/assets/trustedTeamsLogos/dark/kleros-dark.png
new file mode 100644
index 0000000000..9eef23717c
Binary files /dev/null and b/docs/src/assets/trustedTeamsLogos/dark/kleros-dark.png differ
diff --git a/docs/src/assets/trustedTeamsLogos/dark/kyber-dark.png b/docs/src/assets/trustedTeamsLogos/dark/kyber-dark.png
new file mode 100644
index 0000000000..2d28e8108e
Binary files /dev/null and b/docs/src/assets/trustedTeamsLogos/dark/kyber-dark.png differ
diff --git a/docs/src/assets/trustedTeamsLogos/dark/livepeer-dark.png b/docs/src/assets/trustedTeamsLogos/dark/livepeer-dark.png
new file mode 100644
index 0000000000..ef44a64604
Binary files /dev/null and b/docs/src/assets/trustedTeamsLogos/dark/livepeer-dark.png differ
diff --git a/docs/src/assets/trustedTeamsLogos/dark/lodestar-dark.png b/docs/src/assets/trustedTeamsLogos/dark/lodestar-dark.png
new file mode 100644
index 0000000000..9be21c1626
Binary files /dev/null and b/docs/src/assets/trustedTeamsLogos/dark/lodestar-dark.png differ
diff --git a/docs/src/assets/trustedTeamsLogos/dark/loopring-dark.png b/docs/src/assets/trustedTeamsLogos/dark/loopring-dark.png
new file mode 100644
index 0000000000..ac2834561d
Binary files /dev/null and b/docs/src/assets/trustedTeamsLogos/dark/loopring-dark.png differ
diff --git a/docs/src/assets/trustedTeamsLogos/dark/mainframe-dark.png b/docs/src/assets/trustedTeamsLogos/dark/mainframe-dark.png
new file mode 100644
index 0000000000..24774411e8
Binary files /dev/null and b/docs/src/assets/trustedTeamsLogos/dark/mainframe-dark.png differ
diff --git a/docs/src/assets/trustedTeamsLogos/dark/melon-dark.png b/docs/src/assets/trustedTeamsLogos/dark/melon-dark.png
new file mode 100644
index 0000000000..087dc82518
Binary files /dev/null and b/docs/src/assets/trustedTeamsLogos/dark/melon-dark.png differ
diff --git a/docs/src/assets/trustedTeamsLogos/dark/molochdao-dark.png b/docs/src/assets/trustedTeamsLogos/dark/molochdao-dark.png
new file mode 100644
index 0000000000..e1c5ae1155
Binary files /dev/null and b/docs/src/assets/trustedTeamsLogos/dark/molochdao-dark.png differ
diff --git a/docs/src/assets/trustedTeamsLogos/dark/mstable-dark.png b/docs/src/assets/trustedTeamsLogos/dark/mstable-dark.png
new file mode 100644
index 0000000000..8096265b87
Binary files /dev/null and b/docs/src/assets/trustedTeamsLogos/dark/mstable-dark.png differ
diff --git a/docs/src/assets/trustedTeamsLogos/dark/mycrypto-dark.png b/docs/src/assets/trustedTeamsLogos/dark/mycrypto-dark.png
new file mode 100644
index 0000000000..16d00e4b46
Binary files /dev/null and b/docs/src/assets/trustedTeamsLogos/dark/mycrypto-dark.png differ
diff --git a/docs/src/assets/trustedTeamsLogos/dark/openGSN-dark.png b/docs/src/assets/trustedTeamsLogos/dark/openGSN-dark.png
new file mode 100644
index 0000000000..2747ff68eb
Binary files /dev/null and b/docs/src/assets/trustedTeamsLogos/dark/openGSN-dark.png differ
diff --git a/docs/src/assets/trustedTeamsLogos/dark/openzeppelin-dark.png b/docs/src/assets/trustedTeamsLogos/dark/openzeppelin-dark.png
new file mode 100644
index 0000000000..4722d6d035
Binary files /dev/null and b/docs/src/assets/trustedTeamsLogos/dark/openzeppelin-dark.png differ
diff --git a/docs/src/assets/trustedTeamsLogos/dark/optimism-dark.png b/docs/src/assets/trustedTeamsLogos/dark/optimism-dark.png
new file mode 100644
index 0000000000..50d332f6ae
Binary files /dev/null and b/docs/src/assets/trustedTeamsLogos/dark/optimism-dark.png differ
diff --git a/docs/src/assets/trustedTeamsLogos/dark/opyn-dark.png b/docs/src/assets/trustedTeamsLogos/dark/opyn-dark.png
new file mode 100644
index 0000000000..6607c22d8d
Binary files /dev/null and b/docs/src/assets/trustedTeamsLogos/dark/opyn-dark.png differ
diff --git a/docs/src/assets/trustedTeamsLogos/dark/pieDAO-dark.png b/docs/src/assets/trustedTeamsLogos/dark/pieDAO-dark.png
new file mode 100644
index 0000000000..6828cd13cd
Binary files /dev/null and b/docs/src/assets/trustedTeamsLogos/dark/pieDAO-dark.png differ
diff --git a/docs/src/assets/trustedTeamsLogos/dark/poap-dark.png b/docs/src/assets/trustedTeamsLogos/dark/poap-dark.png
new file mode 100644
index 0000000000..d908dbed0f
Binary files /dev/null and b/docs/src/assets/trustedTeamsLogos/dark/poap-dark.png differ
diff --git a/docs/src/assets/trustedTeamsLogos/dark/pool-dark.png b/docs/src/assets/trustedTeamsLogos/dark/pool-dark.png
new file mode 100644
index 0000000000..210cca6d83
Binary files /dev/null and b/docs/src/assets/trustedTeamsLogos/dark/pool-dark.png differ
diff --git a/docs/src/assets/trustedTeamsLogos/dark/reflexer-dark.png b/docs/src/assets/trustedTeamsLogos/dark/reflexer-dark.png
new file mode 100644
index 0000000000..2a01d8819c
Binary files /dev/null and b/docs/src/assets/trustedTeamsLogos/dark/reflexer-dark.png differ
diff --git a/docs/src/assets/trustedTeamsLogos/dark/set-dark.png b/docs/src/assets/trustedTeamsLogos/dark/set-dark.png
new file mode 100644
index 0000000000..db757652c7
Binary files /dev/null and b/docs/src/assets/trustedTeamsLogos/dark/set-dark.png differ
diff --git a/docs/src/assets/trustedTeamsLogos/dark/skale-dark.png b/docs/src/assets/trustedTeamsLogos/dark/skale-dark.png
new file mode 100644
index 0000000000..b94c9d3db1
Binary files /dev/null and b/docs/src/assets/trustedTeamsLogos/dark/skale-dark.png differ
diff --git a/docs/src/assets/trustedTeamsLogos/dark/status-dark.png b/docs/src/assets/trustedTeamsLogos/dark/status-dark.png
new file mode 100644
index 0000000000..e530e495bd
Binary files /dev/null and b/docs/src/assets/trustedTeamsLogos/dark/status-dark.png differ
diff --git a/docs/src/assets/trustedTeamsLogos/dark/sushiswap-dark.png b/docs/src/assets/trustedTeamsLogos/dark/sushiswap-dark.png
new file mode 100644
index 0000000000..b91f3b44ab
Binary files /dev/null and b/docs/src/assets/trustedTeamsLogos/dark/sushiswap-dark.png differ
diff --git a/docs/src/assets/trustedTeamsLogos/dark/synthetix-dark.png b/docs/src/assets/trustedTeamsLogos/dark/synthetix-dark.png
new file mode 100644
index 0000000000..6aa21e66f3
Binary files /dev/null and b/docs/src/assets/trustedTeamsLogos/dark/synthetix-dark.png differ
diff --git a/docs/src/assets/trustedTeamsLogos/dark/uma-dark.png b/docs/src/assets/trustedTeamsLogos/dark/uma-dark.png
new file mode 100644
index 0000000000..97dee74c97
Binary files /dev/null and b/docs/src/assets/trustedTeamsLogos/dark/uma-dark.png differ
diff --git a/docs/src/assets/trustedTeamsLogos/dark/uniswap-dark.png b/docs/src/assets/trustedTeamsLogos/dark/uniswap-dark.png
new file mode 100644
index 0000000000..4371ecec15
Binary files /dev/null and b/docs/src/assets/trustedTeamsLogos/dark/uniswap-dark.png differ
diff --git a/docs/src/assets/trustedTeamsLogos/dark/unlock-dark.png b/docs/src/assets/trustedTeamsLogos/dark/unlock-dark.png
new file mode 100644
index 0000000000..7220b93ace
Binary files /dev/null and b/docs/src/assets/trustedTeamsLogos/dark/unlock-dark.png differ
diff --git a/docs/src/assets/trustedTeamsLogos/dark/yearn-dark.png b/docs/src/assets/trustedTeamsLogos/dark/yearn-dark.png
new file mode 100644
index 0000000000..df580de62a
Binary files /dev/null and b/docs/src/assets/trustedTeamsLogos/dark/yearn-dark.png differ
diff --git a/docs/src/assets/trustedTeamsLogos/dark/zksync-dark.png b/docs/src/assets/trustedTeamsLogos/dark/zksync-dark.png
new file mode 100644
index 0000000000..c8697d5566
Binary files /dev/null and b/docs/src/assets/trustedTeamsLogos/dark/zksync-dark.png differ
diff --git a/docs/src/assets/trustedTeamsLogos/logos.ts b/docs/src/assets/trustedTeamsLogos/logos.ts
index 13bb5ec584..62608d679b 100644
--- a/docs/src/assets/trustedTeamsLogos/logos.ts
+++ b/docs/src/assets/trustedTeamsLogos/logos.ts
@@ -1,6 +1,6 @@
/* eslint global-require: "off" */
-const TrustedTeamsLogos = [
+export const TrustedTeamsLogos = [
{
img: require("./lodestar.png"),
alt: "Lodestar company logo",
@@ -170,4 +170,173 @@ const TrustedTeamsLogos = [
},
];
-export default TrustedTeamsLogos;
+// TODO-LANDING-DARK: Replace images below with correct dark themed images.
+export const TrustedTeamsLogosDark = [
+ {
+ img: require("./dark/lodestar-dark.png"),
+ alt: "Lodestar company logo",
+ },
+ {
+ img: require("./dark/connext-dark.png"),
+ alt: "Connext company logo",
+ },
+ { img: require("./dark/set-dark.png"), alt: "Set company logo" },
+ {
+ img: require("./dark/opyn-dark.png"),
+ alt: "Opyn company logo",
+ },
+ {
+ img: require("./dark/balancer-dark.png"),
+ alt: "Balancer company logo",
+ },
+ {
+ img: require("./dark/molochdao-dark.png"),
+ alt: "Molochdao company logo",
+ },
+ {
+ img: require("./dark/kyber-dark.png"),
+ alt: "Kyber company logo",
+ },
+ {
+ img: require("./dark/openzeppelin-dark.png"),
+ alt: "Openzepellin company logo",
+ },
+ {
+ img: require("./dark/pieDAO-dark.png"),
+ alt: "PieDAO company logo",
+ },
+ {
+ img: require("./dark/optimism-dark.png"),
+ alt: "Optimism company logo",
+ },
+ {
+ img: require("./dark/decentraland-dark.png"),
+ alt: "Decentraland company logo",
+ },
+ {
+ img: require("./dark/aragonOne-dark.png"),
+ alt: "ARAGONE ONE company logo",
+ },
+ {
+ img: require("./dark/kleros-dark.png"),
+ alt: "Kleros company logo",
+ },
+ {
+ img: require("./dark/mstable-dark.png"),
+ alt: "M STABLE company logo",
+ },
+ {
+ img: require("./dark/celo-dark.png"),
+ alt: "Celo company logo",
+ },
+ {
+ img: require("./dark/mycrypto-dark.png"),
+ alt: "MyCrypto company logo",
+ },
+ {
+ img: require("./dark/poap-dark.png"),
+ alt: "Poap company logo",
+ },
+ {
+ img: require("./dark/melon-dark.png"),
+ alt: "Melon company logo",
+ },
+ {
+ img: require("./dark/openGSN-dark.png"),
+ alt: "OpenGSN company logo",
+ },
+ {
+ img: require("./dark/unlock-dark.png"),
+ alt: "Unlock company logo",
+ },
+ {
+ img: require("./dark/status-dark.png"),
+ alt: "Status company logo",
+ },
+ {
+ img: require("./dark/pool-dark.png"),
+ alt: "Pool company logo",
+ },
+ {
+ img: require("./dark/instadapp-dark.png"),
+ alt: "Instadapp company logo",
+ },
+ {
+ img: require("./dark/mainframe-dark.png"),
+ alt: "Mainframe company logo",
+ },
+ {
+ img: require("./dark/horizon-dark.png"),
+ alt: "Horizon company logo",
+ },
+ {
+ img: require("./dark/aave-dark.png"),
+ alt: "Aave company logo",
+ },
+ {
+ img: require("./dark/skale-dark.png"),
+ alt: "Skale company logo",
+ },
+ {
+ img: require("./dark/synthetix-dark.png"),
+ alt: "Synthetix company logo",
+ },
+ {
+ img: require("./dark/celer-dark.png"),
+ alt: "Celer company logo",
+ },
+ { img: require("./dark/uma-dark.png"), alt: "Uma company logo" },
+ {
+ img: require("./dark/chainlink-dark.png"),
+ alt: "Chainlink company logo",
+ },
+ {
+ img: require("./dark/gnosis-dark.png"),
+ alt: "Gnosis company logo",
+ },
+ {
+ img: require("./dark/sushiswap-dark.png"),
+ alt: "Sushiswap company logo",
+ },
+ { img: require("./dark/ens-dark.png"), alt: "ENS company logo" },
+ {
+ img: require("./dark/yearn-dark.png"),
+ alt: "Yearn company logo",
+ },
+ {
+ img: require("./dark/reflexer-dark.png"),
+ alt: "Reflexer company logo",
+ },
+ {
+ img: require("./dark/dharma-dark.png"),
+ alt: "Dharma company logo",
+ },
+ {
+ img: require("./dark/1inch-dark.png"),
+ alt: "1inch company logo",
+ },
+ {
+ img: require("./dark/uniswap-dark.png"),
+ alt: "Uniswap company logo",
+ },
+ {
+ img: require("./dark/hegic-dark.png"),
+ alt: "Hegic company logo",
+ },
+ {
+ img: require("./dark/augur-dark.png"),
+ alt: "Augur company logo",
+ },
+ {
+ img: require("./dark/zksync-dark.png"),
+ alt: "zkSync company logo",
+ },
+ {
+ img: require("./dark/livepeer-dark.png"),
+ alt: "Livepeer company logo",
+ },
+ {
+ img: require("./dark/loopring-dark.png"),
+ alt: "Loopring company logo",
+ },
+];
diff --git a/docs/src/assets/vibrantCommunityImage.svg b/docs/src/assets/vibrantCommunityImage.svg
new file mode 100644
index 0000000000..b3081809de
--- /dev/null
+++ b/docs/src/assets/vibrantCommunityImage.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/docs/src/assets/vibrantCommunityImageDark.svg b/docs/src/assets/vibrantCommunityImageDark.svg
new file mode 100644
index 0000000000..f60c58fff0
--- /dev/null
+++ b/docs/src/assets/vibrantCommunityImageDark.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/docs/src/components/DesktopAnimation.tsx b/docs/src/components/DesktopAnimation.tsx
index c5b9731c85..4539e0ea7f 100644
--- a/docs/src/components/DesktopAnimation.tsx
+++ b/docs/src/components/DesktopAnimation.tsx
@@ -4,12 +4,15 @@ import { styled } from "linaria/react";
import heroBackTextureReflect from "../assets/animation/desktop/hero-back_texture_reflect.svg";
import heroBackTexture from "../assets/animation/desktop/hero-back_texture.svg";
+import heroBackTextureDark from "../assets/animation/desktop/hero-back_texture-dark.svg";
import mascotsEthereumLogo from "../assets/animation/desktop/mascots-ethereum_logo.svg";
+import mascotsEthereumLogoDark from "../assets/animation/desktop/mascots-ethereum_logo-dark.svg";
import heHead from "../assets/animation/desktop/he-head.svg";
import sheHead from "../assets/animation/desktop/she-head.svg";
import heEyesOpen from "../assets/animation/desktop/he-eyes_open.svg";
import sheEyesOpen from "../assets/animation/desktop/she-eyes_open.svg";
import shadow from "../assets/animation/desktop/shadow.svg";
+import shadowDark from "../assets/animation/desktop/shadow-dark.svg";
import { media, tmSelectors } from "../themes";
const AnimationContainer = styled.section`
@@ -43,24 +46,16 @@ const AnimationContainer = styled.section`
z-index: 0;
top: -100px;
left: 50px;
- ${tmSelectors.dark} {
- filter: invert(0.5);
- }
- ${media.mqDark} {
- ${tmSelectors.auto} {
- filter: invert(0.5);
- }
- }
}
& .back-reflect {
z-index: 0;
${tmSelectors.dark} {
- filter: brightness(0.1);
+ display: none;
}
${media.mqDark} {
${tmSelectors.auto} {
- filter: brightness(0.1);
+ display: none;
}
}
}
@@ -97,11 +92,11 @@ const AnimationContainer = styled.section`
animation: shadowSpread 8s linear infinite;
z-index: 0;
${tmSelectors.dark} {
- filter: brightness(0.15);
+ fill: "#111316";
}
${media.mqDark} {
${tmSelectors.auto} {
- filter: brightness(0.15);
+ fill: "#111316";
}
}
}
@@ -164,6 +159,30 @@ const AnimationContainer = styled.section`
transform: none;
}
}
+ & .light {
+ display: inline;
+ }
+ & .dark {
+ display: none;
+ }
+ ${tmSelectors.dark} {
+ & .light {
+ display: none;
+ }
+ & .dark {
+ display: inline;
+ }
+ }
+ ${media.mqDark} {
+ ${tmSelectors.auto} {
+ & .light {
+ display: none;
+ }
+ & .dark {
+ display: inline;
+ }
+ }
+ }
`;
const DesktopAnimation = () => {
@@ -173,17 +192,36 @@ const DesktopAnimation = () => {
-
+
+
+
+
+
+
-
+
+
+
+
+
+
@@ -200,7 +238,12 @@ const DesktopAnimation = () => {
-
+
+
+
+
+
+
);
diff --git a/docs/src/components/DocsNavigation.tsx b/docs/src/components/DocsNavigation.tsx
index 4abdd23308..262e83a1e1 100644
--- a/docs/src/components/DocsNavigation.tsx
+++ b/docs/src/components/DocsNavigation.tsx
@@ -3,21 +3,13 @@ import { styled } from "linaria/react";
import Link from "next/link";
import Image from "next/image";
-import {
- media,
- ThemeContext,
- ThemesEnum,
- tm,
- tmDark,
- tmSelectors,
-} from "../themes";
+import { media, ThemeContext, tm, tmDark, tmSelectors } from "../themes";
import logo from "../assets/hardhat-logo.svg";
import darkLogo from "../assets/hardhat-logo-dark.svg";
import Hamburger from "./ui/Hamburger";
import DesktopMenu from "./ui/DesktopMenu";
import { menuItemsList, socialsItems } from "../config";
-import ThemeSwitcher from "../assets/icons/theme-switcher.svg";
-import ThemeSwitcherDark from "../assets/icons/theme-switcher-dark.svg";
+import ThemeSwitchButton from "./ThemeSwitchButton";
interface Props {
isSidebarOpen: boolean;
@@ -34,21 +26,18 @@ const NavigationStyled = styled.nav`
box-sizing: border-box;
padding: 32px 24px;
transition: all ease-in-out 0.25s;
- background-color: ${tm(({ colors }) => colors.neutral200)};
- border-bottom: 1px solid ${tm(({ colors }) => colors.transparent)};
+ background-color: ${tm(({ colors }) => colors.neutral0)};
z-index: 10;
${media.md} {
padding: 24px;
}
${tmSelectors.dark} {
- background-color: ${tmDark(({ colors }) => colors.neutral200)};
- border-bottom: 1px solid ${tmDark(({ colors }) => colors.border)};
+ background-color: ${tmDark(({ colors }) => colors.neutral0)};
}
${media.mqDark} {
${tmSelectors.auto} {
- background-color: ${tmDark(({ colors }) => colors.neutral200)};
- border-bottom: 1px solid ${tmDark(({ colors }) => colors.border)};
+ background-color: ${tmDark(({ colors }) => colors.neutral0)};
}
}
`;
@@ -105,78 +94,13 @@ const HamburgerWrapper = styled.div`
}
`;
-const ThemeButton = styled.button`
- font-size: 15px;
- line-height: 13px;
- display: flex;
- justify-content: flex-end;
- align-items: center;
- background-color: ${tm(({ colors }) => colors.transparent)};
- color: ${tm(({ colors }) => colors.neutral900)};
- border: none;
- cursor: pointer;
- transform-origin: center;
- min-width: 45px;
- transition: transform ease-in-out 0.25s;
- &:hover {
- opacity: 0.8;
- }
- ${tmSelectors.dark} {
- color: ${tmDark(({ colors }) => colors.autoThemeButton)};
- }
- ${media.mqDark} {
- ${tmSelectors.auto} {
- color: ${tmDark(({ colors }) => colors.autoThemeButton)};
- }
- }
-`;
-
-const ThemeIconWrapper = styled.div`
- transition: transform ease-in-out 0.25s;
- & > span {
- display: none;
- }
- & > .theme-switcher {
- position: relative;
- bottom: -3px;
- }
- & > .light {
- display: inline;
- }
- ${tmSelectors.dark} {
- & > .light {
- display: none;
- }
- & > .dark {
- display: inline;
- }
- }
- ${media.mqDark} {
- ${tmSelectors.auto} {
- & > .light {
- display: none;
- }
- & > .dark {
- display: inline;
- }
- }
- }
-`;
-
const DocsNavigation: FC = ({ isSidebarOpen, onSidebarOpen }) => {
- const { theme, changeTheme } = useContext(ThemeContext);
+ const { theme } = useContext(ThemeContext);
return (
-
- onSidebarOpen(!isSidebarOpen)}
- />
-
-
@@ -189,22 +113,14 @@ const DocsNavigation: FC = ({ isSidebarOpen, onSidebarOpen }) => {
-
-
- {theme === ThemesEnum.AUTO && "A"}
-
-
-
-
-
-
-
-
-
+
+
+
+ onSidebarOpen(!isSidebarOpen)}
+ />
+
);
diff --git a/docs/src/components/DocumentationLayout.tsx b/docs/src/components/DocumentationLayout.tsx
index 72c072ae32..16dcb70cf2 100644
--- a/docs/src/components/DocumentationLayout.tsx
+++ b/docs/src/components/DocumentationLayout.tsx
@@ -29,7 +29,6 @@ import MDImage from "./mdxComponents/MDImage";
import OrderedList from "./mdxComponents/OrderedList";
import TabsGroup from "./mdxComponents/TabsGroup";
import Tab from "./mdxComponents/Tab";
-import { Header } from "./LandingLayout";
import GDPRNotice from "./GDPRNotice";
const Container = styled.div`
@@ -90,17 +89,34 @@ export const SidebarContainer = styled.aside<{ isSidebarOpen: boolean }>`
width: min(366px, 100%);
position: fixed;
top: 136px;
- left: ${(props) => (props.isSidebarOpen ? "0px" : "-120vw")};
+ left: ${({ isSidebarOpen }) => (isSidebarOpen ? "0px" : "-120vw")};
height: calc(100vh - 136px);
display: flex;
overflow-y: scroll;
transition: all ease-out 0.25s;
- z-index: 1;
+ z-index: 50;
background-color: ${tm(({ colors }) => colors.neutral0)};
${media.md} {
left: 0;
}
+
+ .landing & {
+ ${media.md} {
+ display: none;
+ }
+ pointer-events: ${({ isSidebarOpen }) => (isSidebarOpen ? "auto" : "none")};
+ }
+
+ ${tmSelectors.dark} {
+ background-color: ${tmDark(({ colors }) => colors.neutral0)};
+ }
+ ${media.mqDark} {
+ ${tmSelectors.auto} {
+ background-color: ${tmDark(({ colors }) => colors.neutral0)};
+ }
+ }
+
:not(&[data-no-border="true"]) {
border-right: 1px solid ${tm(({ colors }) => colors.neutral400)};
${tmSelectors.dark} {
@@ -115,15 +131,6 @@ export const SidebarContainer = styled.aside<{ isSidebarOpen: boolean }>`
}
}
- ${tmSelectors.dark} {
- background-color: ${tmDark(({ colors }) => colors.neutral0)};
- }
- ${media.mqDark} {
- ${tmSelectors.auto} {
- background-color: ${tmDark(({ colors }) => colors.neutral0)};
- }
- }
-
${SidebarMask} {
display: none;
${media.md} {
@@ -142,6 +149,16 @@ export const SidebarContainer = styled.aside<{ isSidebarOpen: boolean }>`
}
`;
+export const Header = styled.header`
+ position: fixed;
+ width: 100%;
+ top: 0;
+ left: 0;
+ display: flex;
+ flex-direction: column;
+ z-index: 199;
+`;
+
const View = styled.section`
display: flex;
flex-direction: column;
@@ -283,6 +300,7 @@ const DocumentationLayout = ({
socialsItems={socialsItems}
sidebarElementsList={sidebarLayout}
closeSidebar={() => setIsSidebarOpen(false)}
+ isDocumentation
/>
diff --git a/docs/src/components/LandingFooter.tsx b/docs/src/components/LandingFooter.tsx
index 55fea65825..4f105ec319 100644
--- a/docs/src/components/LandingFooter.tsx
+++ b/docs/src/components/LandingFooter.tsx
@@ -1,8 +1,10 @@
-import { styled } from "linaria/react";
import React from "react";
+import { styled } from "linaria/react";
+import Image from "next/image";
import Link from "next/link";
-import EthereumFoundationLogo from "../assets/ethereum-foundation-logo";
-import { media, tm } from "../themes";
+import ethereumFoundationLogo from "../assets/ethereum-foundation-logo.svg";
+import ethereumFoundationLogoDark from "../assets/ethereum-foundation-logo-dark.svg";
+import { media, tm, tmDark, tmSelectors } from "../themes";
import { PRIVACY_POLICY_PATH } from "../config";
const Footer = styled.footer`
@@ -15,6 +17,34 @@ const Footer = styled.footer`
${media.md} {
padding: 64px 24px 40px;
}
+ & .light {
+ display: inline;
+ }
+ & .dark {
+ display: none;
+ }
+ ${tmSelectors.dark} {
+ background-color: ${tmDark(({ colors }) => colors.neutral900)};
+
+ & .light {
+ display: none;
+ }
+ & .dark {
+ display: inline;
+ }
+ }
+ ${media.mqDark} {
+ ${tmSelectors.auto} {
+ background-color: ${tmDark(({ colors }) => colors.neutral900)};
+
+ & .light {
+ display: none;
+ }
+ & .dark {
+ display: inline;
+ }
+ }
+ }
`;
const SupportedBy = styled.section`
@@ -27,7 +57,7 @@ const SupportedBy = styled.section`
`;
const Subtitle = styled.h2`
- color: ${tm(({ colors }) => colors.neutral100)};
+ color: ${tm(({ colors }) => colors.footerText)};
font-size: 18px;
font-weight: normal;
line-height: 40px;
@@ -40,6 +70,14 @@ const Subtitle = styled.h2`
margin-right: 24px;
font-size: 24px;
}
+ ${tmSelectors.dark} {
+ color: ${tmDark(({ colors }) => colors.footerText)};
+ }
+ ${media.mqDark} {
+ ${tmSelectors.auto} {
+ color: ${tmDark(({ colors }) => colors.footerText)};
+ }
+ }
`;
const Legal = styled.section`
@@ -50,7 +88,7 @@ const Legal = styled.section`
line-height: 12px;
letter-spacing: 0;
text-align: center;
- color: ${tm(({ colors }) => colors.neutral700)};
+ color: ${tm(({ colors }) => colors.footerText2)};
&:before {
content: " ";
height: 1px;
@@ -59,13 +97,27 @@ const Legal = styled.section`
top: 0;
left: 50%;
transform: translateX(-50%);
- background-color: ${tm(({ colors }) => colors.neutral500)};
+ background-color: ${tm(({ colors }) => colors.footerText2)};
}
${media.md} {
font-size: 15px;
line-height: 24px;
margin-top: 96px;
}
+ ${tmSelectors.dark} {
+ color: ${tmDark(({ colors }) => colors.footerText2)};
+ &:before {
+ background-color: ${tmDark(({ colors }) => colors.footerText2)};
+ }
+ }
+ ${media.mqDark} {
+ ${tmSelectors.auto} {
+ &:before {
+ background-color: ${tmDark(({ colors }) => colors.footerText2)};
+ }
+ color: ${tmDark(({ colors }) => colors.footerText2)};
+ }
+ }
`;
const PrivacyPolicyLink = styled.a`
@@ -81,7 +133,12 @@ const LandingFooter = () => {