Move Sign In, remove unused css

gravitational · Oct 4, 2023 · adf1704 · adf1704
1 parent dd0363d
commit adf1704
Show file tree

Hide file tree

Showing 5 changed files with 92 additions and 126 deletions.
diff --git a/components/Header/HeaderCTA.module.css b/components/Header/HeaderCTA.module.css
@@ -33,60 +33,3 @@
     margin-right: var(--m-2);
   }
 }
-
-.downloadsLink {
-  text-decoration: none;
-  font-weight: 700;
-  font-size: var(--fs-text-md);
-  color: var(--color-code);
-  padding-left: 10px;
-  padding-right: 10px;
-  @media (--lg-scr) {
-    padding-left: var(--m-3);
-    padding-right: var(--m-3);
-  }
-  @media (--sm-scr) {
-    display: none;
-  }
-  &:focus,
-  &:hover {
-    color: var(--color-dark-purple);
-  }
-}
-
-.searchWrapper {
-  padding: var(--m-1) var(--m-1) 0 var(--m-2);
-  @media (--sm-scr) {
-    display: none;
-  }
-}
-
-.group {
-  position: relative;
-  padding-left: var(--m-2);
-  @media (--sm-scr) {
-    padding-left: 0;
-    width: 100%;
-  }
-}
-
-.dropdown {
-  display: none;
-  z-index: 3000;
-
-  @media (--sm-scr) {
-    position: relative;
-    width: 100%;
-  }
-
-  @media (--md-scr) {
-    position: absolute;
-    top: var(--m-6);
-    right: var(--m-2);
-    min-width: 400px;
-  }
-
-  &.visible {
-    display: block;
-  }
-}
diff --git a/components/Header/HeaderCTA.tsx b/components/Header/HeaderCTA.tsx
@@ -1,75 +1,27 @@
-import cn from "classnames";
-import { useState, useCallback, useRef, MouseEvent } from "react";
-import { useClickAway } from "react-use";
 import Button from "components/Button";
-import {
-  DropdownMenuOverlay,
-  DropdownMenuCTA,
-  DropdownMenuItemCTA,
-} from "../DropdownMenu";
 import styles from "./HeaderCTA.module.css";
 
 const HeaderCTA = () => {
-  const ref = useRef(null);
-
-  const [isSignInVisible, setIsSignInVisible] = useState<boolean>(false);
-  const toggleSignIn = useCallback((e: MouseEvent<HTMLElement>) => {
-    e.preventDefault();
-
-    setIsSignInVisible((value) => !value);
-  }, []);
-
-  useClickAway(ref, () => {
-    if (isSignInVisible) {
-      setIsSignInVisible(false);
-    }
-  });
-
   return (
-    <>
-      {isSignInVisible && <DropdownMenuOverlay />}
-      <div className={styles.wrapper}>
-        <div className={styles.group} ref={ref}>
-          <Button
-            as="link"
-            href="https://teleport.sh/"
-            onClick={toggleSignIn}
-            variant="secondary"
-            className={styles.cta}
-            data-testid="sign-in"
-          >
-            Sign In
-          </Button>
-          <div
-            className={cn(styles.dropdown, isSignInVisible && styles.visible)}
-            data-testid="sign-in-menu"
-          >
-            <DropdownMenuCTA title="Sign in to Teleport">
-              <DropdownMenuItemCTA
-                href="https://teleport.sh/"
-                icon="clouds"
-                title="Teleport Cloud Login"
-                description="Login to your Teleport Account"
-              />
-              <DropdownMenuItemCTA
-                href="https://dashboard.gravitational.com/web/login/"
-                icon="download"
-                title="Dashboard Login"
-                description="Legacy Login &amp; Teleport Enterprise Downloads"
-              />
-            </DropdownMenuCTA>
-          </div>
-        </div>
-        <Button
-          as="link"
-          href="/signup/"
-          className={styles.cta}
-          data-testid="get-started"
-        >
-          Get Started
-        </Button>
-      </div>
-    </>
+    <div className={styles.wrapper}>
+      <Button
+        as="link"
+        href="/signup/enterprise/"
+        variant="secondary"
+        className={styles.cta}
+        data-testid="contact-sales"
+      >
+        Contact Sales
+      </Button>
+      <Button
+        as="link"
+        href="/signup/"
+        className={styles.cta}
+        data-testid="get-started"
+      >
+        Get Started
+      </Button>
+    </div>
   );
 };
 

diff --git a/components/Menu/Category.module.css b/components/Menu/Category.module.css
@@ -19,7 +19,7 @@
   align-items: center;
   justify-content: center;
   z-index: 3001;
-  width: 100%;
+  white-space: nowrap;
   min-width: 0;
   height: 80px;
   padding: 0 var(--m-2);

diff --git a/components/Menu/Menu.module.css b/components/Menu/Menu.module.css
@@ -28,3 +28,23 @@
     max-width: none;
   }
 }
+
+.signInDropdown {
+  display: none;
+  z-index: 3000;
+
+  @media (--sm-scr) {
+    position: relative;
+    width: 100%;
+  }
+
+  @media (--md-scr) {
+    position: absolute;
+    left: 0;
+    min-width: 400px;
+  }
+
+  &.visible {
+    display: block;
+  }
+}
diff --git a/components/Menu/Menu.tsx b/components/Menu/Menu.tsx
@@ -1,10 +1,29 @@
-import { useState } from "react";
+import { useState, useRef, useCallback, MouseEvent } from "react";
+import { useClickAway } from "react-use";
 import MenuCategory from "./Category";
 import structure from "./structure";
 import styles from "./Menu.module.css";
+import categoryStyles from "./Category.module.css";
+import cn from "classnames";
+import { DropdownMenuCTA, DropdownMenuItemCTA } from "../DropdownMenu";
 
 const Menu = () => {
   const [openedCategoryId, setOpenedCategoryId] = useState<number | null>(null);
+  const ref = useRef(null);
+
+  const [isSignInVisible, setIsSignInVisible] = useState<boolean>(false);
+  const toggleSignIn = useCallback((e: MouseEvent<HTMLElement>) => {
+    e.preventDefault();
+
+    setIsSignInVisible((value) => !value);
+  }, []);
+
+  useClickAway(ref, () => {
+    if (isSignInVisible) {
+      setIsSignInVisible(false);
+    }
+  });
+
   return (
     <nav className={styles.navItems}>
       {structure.map((props, id) => (
@@ -16,6 +35,38 @@ const Menu = () => {
           {...props}
         />
       ))}
+      <div style={{ position: "relative" }}>
+        <a
+          href="https://teleport.sh/"
+          onClick={toggleSignIn}
+          className={cn(categoryStyles.link, isSignInVisible && styles.visible)}
+          data-testid="sign-in"
+        >
+          Sign In
+        </a>
+        <div
+          className={cn(
+            styles.signInDropdown,
+            isSignInVisible && styles.visible
+          )}
+          data-testid="sign-in-menu"
+        >
+          <DropdownMenuCTA title="Sign in to Teleport">
+            <DropdownMenuItemCTA
+              href="https://teleport.sh/"
+              icon="clouds"
+              title="Teleport Cloud Login"
+              description="Login to your Teleport Account"
+            />
+            <DropdownMenuItemCTA
+              href="https://dashboard.gravitational.com/web/login/"
+              icon="download"
+              title="Dashboard Login"
+              description="Legacy Login &amp; Teleport Enterprise Downloads"
+            />
+          </DropdownMenuCTA>
+        </div>
+      </div>
     </nav>
   );
 };