chore: add links to sourcecraft repo (#116)

Author: shadowusr

docusaurus.config.ts

@@ -113,6 +113,15 @@ const config: Config = {
                 {
                     href: "https://github.com/gemini-testing/testplane",
                     label: "GitHub",
+                    className: "header-github-link",
+                    "aria-label": "GitHub repository",
+                    position: "right",
+                },
+                {
+                    href: "https://sourcecraft.dev/testplane/testplane",
+                    label: "SourceCraft",
+                    className: "header-sourcecraft-link",
+                    "aria-label": "SourceCraft repository",
                     position: "right",
                 },
             ],

src/scss/custom.scss

@@ -117,10 +117,6 @@ html[data-theme-override="light"] {
     --ifm-navbar-background-color: #fff;
 }
 
-.docs-wrapper .navbar__items {
-    // @apply bg-white dark:bg-neutral-950;
-}
-
 .docs-wrapper .main-wrapper,
 .blog-wrapper .main-wrapper {
     max-width: var(--max-width);
@@ -143,6 +139,11 @@ html[data-theme-override="light"] {
     will-change: transform;
     @apply justify-center px-0 text-neutral-600 shadow-none dark:fill-white dark:text-neutral-400;
 
+    .navbar__items {
+        position: relative;
+        --ifm-navbar-padding-horizontal: 1.5rem;
+    }
+
     .navbar__inner {
         max-width: var(--max-width);
         padding: 0 2rem;
@@ -200,11 +201,20 @@ html[data-theme-override="light"] {
     }
 
     .DocSearch-Button {
-        @apply mr-6 h-8 w-40 scale-110 rounded-lg bg-transparent font-normal text-neutral-500 hover:bg-neutral-200 hover:text-neutral-500 hover:shadow-none md:scale-100 md:bg-neutral-100 md:text-neutral-500 lg:mr-0 xl:w-80 dark:bg-transparent dark:text-neutral-400 dark:hover:bg-neutral-800/80 dark:md:bg-neutral-800/50;
+        @apply mr-3 flex h-8 w-8 items-center justify-center rounded-lg bg-transparent p-0 text-neutral-500 hover:bg-neutral-100 hover:text-neutral-900 hover:shadow-none md:mr-6 md:w-40 md:justify-start md:bg-neutral-100 md:px-3 md:font-normal md:text-neutral-500 md:hover:bg-neutral-200 lg:mr-0 xl:w-80 dark:text-neutral-400 dark:hover:bg-neutral-200/10 dark:hover:text-neutral-300 dark:md:bg-neutral-800/50 dark:md:hover:bg-neutral-800/80;
         font-family: Jost;
 
-        svg {
-            @apply w-4 text-current;
+        .DocSearch-Button-Container {
+            @apply flex h-full w-full items-center justify-center md:justify-start;
+        }
+
+        .DocSearch-Search-Icon {
+            @apply m-0 h-4 w-4 shrink-0 text-current;
+        }
+
+        .DocSearch-Button-Placeholder,
+        .DocSearch-Button-Keys {
+            @apply hidden md:flex;
         }
 
         .DocSearch-Button-Key {
@@ -239,6 +249,52 @@ html[data-theme-override="light"] {
         }
     }
 
+    .header-github-link svg,
+    .header-sourcecraft-link svg {
+        display: none !important;
+    }
+
+    .header-github-link,
+    .header-sourcecraft-link,
+    .color-mode-toggle {
+        @apply mx-0.5 items-center gap-[5px] rounded-lg lg:flex lg:h-8 lg:w-8 lg:justify-center lg:gap-0 lg:p-0 lg:text-[0px];
+    }
+
+    /*.header-github-link,
+    .header-sourcecraft-link {
+        font-size: 0;
+    }*/
+
+    .color-mode-toggle .clean-btn {
+        @apply flex h-full w-full items-center justify-center rounded-lg p-0;
+    }
+
+    .color-mode-toggle:hover,
+    .color-mode-toggle .clean-btn:hover {
+        @apply bg-neutral-100 dark:bg-neutral-200/10;
+    }
+
+    .header-github-link::before,
+    .header-sourcecraft-link::before {
+        content: "";
+        display: block;
+        width: 1rem;
+        height: 1rem;
+        background-color: currentColor;
+        background-repeat: no-repeat;
+        background-position: center;
+        background-size: contain;
+    }
+
+    .header-github-link::before {
+        mask: url("../../static/icons/github.svg") no-repeat center / contain;
+    }
+
+    .header-sourcecraft-link::before {
+        mask: url("../../static/icons/sourcecraft-light-theme.svg") no-repeat center / contain;
+        transform: scale(1.5);
+    }
+
     .navbar__brand {
         @apply px-2 font-mono;
     }

src/theme/ColorModeToggle/styles.module.css

@@ -2,8 +2,6 @@
 
 .toggle {
     @apply flex justify-center rounded-lg;
-    height: 21px;
-    width: 21px;
 }
 
 .toggleButton {

src/theme/Footer/Layout/index.tsx

@@ -1,6 +1,7 @@
 import React, { useRef } from "react";
 import type { Props } from "@theme/Footer/Layout";
 import GithubIcon from "@site/static/icons/github.svg";
+import SourceCraftIcon from "@site/static/icons/sourcecraft-light-theme.svg";
 import TestplaneLogo from "@site/static/img/logo.svg";
 import TestplaneLogoDark from "@site/static/img/logo-dark.svg";
 import { LogoStackOverflow, LogoTelegram } from "@gravity-ui/icons";
@@ -10,15 +11,19 @@ export default function FooterLayout({ links, copyright }: Props): JSX.Element {
 
     const SOCIAL_LINKS = [
         {
-            icon: GithubIcon,
+            icon: <GithubIcon className="h-full w-full" />,
             href: "https://github.com/gemini-testing/testplane",
         },
         {
-            icon: LogoStackOverflow,
+            icon: <SourceCraftIcon className="h-full w-full scale-150" />,
+            href: "https://sourcecraft.dev/testplane/testplane",
+        },
+        {
+            icon: <LogoStackOverflow className="h-full w-full" />,
             href: "https://stackoverflow.com/questions/tagged/testplane",
         },
         {
-            icon: LogoTelegram,
+            icon: <LogoTelegram className="h-full w-full" />,
             href: "https://t.me/testplane",
         },
     ];
@@ -34,15 +39,15 @@ export default function FooterLayout({ links, copyright }: Props): JSX.Element {
                 <div className="mt-4 flex items-center">
                     <div className="">{copyright}</div>
                     <div className="ml-1 flex items-center">
-                        {SOCIAL_LINKS.map(({ icon: Icon, href }, index) => (
+                        {SOCIAL_LINKS.map(({ icon, href }, index) => (
                             <a
                                 className="flex h-8 w-8 items-center rounded-lg p-2 text-neutral-500 hover:bg-neutral-100 hover:text-neutral-900 dark:text-neutral-400 dark:hover:bg-neutral-200/10 dark:hover:text-neutral-200"
                                 href={href}
                                 target="_blank"
                                 rel="noreferrer"
                                 key={index}
                             >
-                                <Icon className="h-full w-full" />
+                                {icon}
                             </a>
                         ))}
                     </div>

src/theme/Navbar/MobileSidebar/Toggle/index.tsx

@@ -14,7 +14,7 @@ export default function MobileSidebarToggle(): JSX.Element {
                 description: "The ARIA label for hamburger menu button of mobile navigation",
             })}
             aria-expanded={shown}
-            className="navbar__toggle clean-btn absolute right-2 z-999"
+            className="navbar__toggle clean-btn absolute right-0 z-999 flex h-8 w-8 items-center justify-center lg:hidden"
             type="button"
         >
             <EllipsisVertical />