refactor: more tailwind components

src/routes/onboarding/index.tsx

@@ -9,8 +9,8 @@ import WhoCanSignUp from "./steps/who-can-sign-up";
 import InviteLink from "./steps/invite-link";
 import DonePage from "./steps/done-page";
 import steps from "./steps";
-import StyledOnboardingPage from "./styled";
 import { useTranslation } from "react-i18next";
+import clsx from "clsx";
 
 
 const Navigator = () => {
@@ -19,12 +19,11 @@ const Navigator = () => {
   console.log("active step", activeStep);
 
   return (
-    <div className="navigator">
+    <div className="absolute top-5 w-full flex justify-center gap-2 z-10">
       {steps.map((stepToRender, indexToRender) => {
         const clickable = canJumpTo.includes(stepToRender.name);
-        const nodeCls = `node ${indexToRender === activeStep ? "emphasized" : ""} ${indexToRender > activeStep ? "disabled" : ""
-          } ${clickable ? "clickable" : ""}`;
-        const arrowCls = `arrow ${indexToRender >= activeStep ? "disabled" : ""}`;
+        const itemClass = clsx(`text-sm text-gray-600`, clickable && "cursor-pointer hover:text-gray-500", indexToRender === activeStep && "font-bold text-black", indexToRender >= activeStep && "text-gray-400");
+        const nodeCls = `${itemClass}`;
         return (
           <React.Fragment key={indexToRender}>
             <span
@@ -37,7 +36,7 @@ const Navigator = () => {
             >
               {stepToRender.label}
             </span>
-            {indexToRender !== steps.length - 1 && <span className={arrowCls}>→</span>}
+            {indexToRender !== steps.length - 1 && <span className={nodeCls}>→</span>}
           </React.Fragment>
         );
       })}
@@ -53,7 +52,7 @@ export default function OnboardingPage() {
       <Helmet>
         <title>{t("onboarding.title")}</title>
       </Helmet>
-      <StyledOnboardingPage>
+      <div className="h-screen overflow-y-auto">
         <Wizard header={<Navigator />}>
           <WelcomePage />
           <ServerName serverName={serverName} setServerName={setServerName} />
@@ -63,7 +62,7 @@ export default function OnboardingPage() {
           <InviteLink />
           <DonePage serverName={serverName} />
         </Wizard>
-      </StyledOnboardingPage>
+      </div>
     </>
   );
 }

src/routes/onboarding/steps/invite-link.tsx

@@ -14,7 +14,7 @@ export default function InviteLink() {
   const { link, linkCopied, copyLink, generateNewLink } = useInviteLink();
 
   return (
-    <div className="h-full flex flex-col items-center justify-center relative">
+    <div className="h-full flex-center flex-col relative">
       <span className="text-2xl mb-2 font-bold">{t("invite_title")}</span>
       <span className="text-sm mb-10 text-gray-400">{t("last_tip")}</span>
       <span className="text-sm text-gray-500 mb-2 font-semibold">{t("last_desc")}</span>

src/routes/onboarding/styled.tsx

@@ -1,43 +0,0 @@
-import styled from "styled-components";
-
-const StyledOnboardingPage = styled.div`
-  height: 100vh;
-  overflow-y: auto;
-  > .navigator {
-    position: absolute;
-    top: 20px;
-    width: 100%;
-    display: flex;
-    justify-content: center;
-    gap: 8px;
-    z-index: 10;
-
-    > .node,
-    > .arrow {
-      font-weight: 400;
-      font-size: 14px;
-      line-height: 28px;
-      color: #101828;
-      cursor: default;
-      transition: all 150ms ease-in-out;
-
-      &.disabled {
-        color: #d0d5dd;
-      }
-
-      &.emphasized {
-        font-weight: 600;
-      }
-
-      &.clickable {
-        cursor: pointer;
-
-        &:hover {
-          color: #717180;
-        }
-      }
-    }
-  }
-`;
-
-export default StyledOnboardingPage;