-
-
+
@@ -93,10 +78,14 @@ const Header = ({ className = "", containerClassName = "" }) => {
/>
{isThemePage && (
-
+ aria-label={t("commands.toggle")}
+ >
+ {theme === "light" && }
+ {theme === "dark" && }
+
)}
diff --git a/src/components/Header.module.scss b/src/components/Header.module.scss
new file mode 100644
index 000000000..dc90efae7
--- /dev/null
+++ b/src/components/Header.module.scss
@@ -0,0 +1,19 @@
+.header {
+ &__toggle {
+ display: flex;
+ border: none;
+ margin-left: 15px;
+ transition:
+ transform 0.3s ease,
+ rotate 0.3s ease;
+
+ &:hover {
+ transform: scale(1.1);
+ rotate: 15deg;
+
+ svg {
+ fill: var(--body-text);
+ }
+ }
+ }
+}
diff --git a/src/components/breakpoint/BreakpointHeader.jsx b/src/components/breakpoint/BreakpointHeader.jsx
index 50d20df3e..3d265dc65 100644
--- a/src/components/breakpoint/BreakpointHeader.jsx
+++ b/src/components/breakpoint/BreakpointHeader.jsx
@@ -1,8 +1,7 @@
import Navbar from "react-bootstrap/Navbar";
-import Image from "next/image";
import Link from "../shared/Link";
import { useTranslation } from "next-i18next";
-import SolanaLogo from "../../../public/src/img/logos-solana/logotype.svg";
+import SolanaLogo from "../../../public/src/img/logos-solana/logotype.inline.svg";
const Header = () => {
const { t } = useTranslation();
@@ -20,13 +19,11 @@ const Header = () => {
style={{ zIndex: 1020 }}
>
-
-
+