feat: update onboarding ui

src/routes/onboarding/steps/1-welcome.js

@@ -10,14 +10,14 @@ const StyledFirstStep = styled.div`
  align-items: center;
 `;
 
-export default function FirstStep({ onButtonClick }) {
+export default function WelcomeStep({ step, setStep }) {
  return (
   <StyledFirstStep>
    <span className="primaryText">Welcome to your Rustchat!</span>
    <span className="secondaryText">
     Everything in this space is owned by you. Let’s set up your space!
    </span>
-   <StyledButton className="startButton" onClick={onButtonClick}>
+   <StyledButton className="startButton" onClick={() => setStep(step + 1)}>
     <img src={PlayIcon} alt="play icon" />
     <span>Start</span>
    </StyledButton>

src/routes/onboarding/steps/2-spaceName.js

@@ -0,0 +1,55 @@
+import styled from "styled-components";
+import toast from "react-hot-toast";
+import StyledInput from "../../../common/component/styled/Input";
+import StyledButton from "../../../common/component/styled/Button";
+
+const StyledSpaceNameStep = styled.div`
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+
+ > .secondaryText {
+  color: #667085;
+ }
+
+ > .button {
+  margin-top: 24px;
+ }
+`;
+
+export default function SpaceNameStep({ step, setStep, data, setData }) {
+ return (
+  <StyledSpaceNameStep>
+   <span className="primaryText">Create a new server</span>
+   <span className="secondaryText">
+    Servers are shared environments where teams can work on projects and chat.
+   </span>
+   <StyledInput
+    className="input"
+    placeholder="Enter server name"
+    value={data.spaceName}
+    onChange={(e) =>
+     setData({
+      ...data,
+      spaceName: e.target.value
+     })
+    }
+   />
+   <StyledButton
+    className="button"
+    onClick={() => {
+     // Verification for space name
+     if (data.spaceName === "") {
+      toast.error("Please enter server name!");
+      return;
+     }
+     setStep(step + 1);
+    }}
+   >
+    Create Server
+   </StyledButton>
+  </StyledSpaceNameStep>
+ );
+}

src/routes/onboarding/steps/3-adminCredentials.js

@@ -1,5 +1,7 @@
 import styled from "styled-components";
 import StyledInput from "../../../common/component/styled/Input";
+import StyledButton from "../../../common/component/styled/Button";
+import toast from "react-hot-toast";
 
 const StyledAdminCredentialsStep = styled.div`
  height: 100%;
@@ -8,12 +10,16 @@ const StyledAdminCredentialsStep = styled.div`
  justify-content: center;
  align-items: center;
 
- > .input:not(:last-child) {
+ > .input:not(:nth-last-child(2)) {
   margin-bottom: 20px;
  }
+
+ > .button {
+  margin-top: 24px;
+ }
 `;
 
-export default function AdminCredentialsStep({ data, setData }) {
+export default function AdminCredentialsStep({ step, setStep, data, setData }) {
  return (
   <StyledAdminCredentialsStep>
    <span className="primaryText">Now let’s set up your admin account</span>
@@ -53,6 +59,25 @@ export default function AdminCredentialsStep({ data, setData }) {
      })
     }
    />
+   <StyledButton
+    className="button"
+    onClick={() => {
+     // Verification for admin credentials
+     if (data.adminEmail === "") {
+      toast.error("Please enter admin email!");
+      return;
+     } else if (data.adminPassword === "") {
+      toast.error("Please enter admin password!");
+      return;
+     } else if (data.adminPassword !== data.adminPassword2) {
+      toast.error("Two passwords do not match!");
+      return;
+     }
+     setStep(step + 1);
+    }}
+   >
+    Sign Up
+   </StyledButton>
   </StyledAdminCredentialsStep>
  );
 }

src/routes/onboarding/steps/4-inviteRule.js

@@ -1,5 +1,6 @@
 import styled from "styled-components";
 import StyledRadio from "../../../common/component/styled/Radio";
+import StyledButton from "../../../common/component/styled/Button";
 
 const StyledInviteRuleStep = styled.div`
  height: 100%;
@@ -8,12 +9,12 @@ const StyledInviteRuleStep = styled.div`
  justify-content: center;
  align-items: center;
 
- > .input:not(:last-child) {
+ > .input:not(:nth-last-child(2)) {
   margin-bottom: 20px;
  }
 `;
 
-export default function InviteRuleStep({ data, setData }) {
+export default function InviteRuleStep({ step, setStep, data, setData }) {
  return (
   <StyledInviteRuleStep>
    <span className="primaryText">Last step: invite others!</span>
@@ -21,13 +22,19 @@ export default function InviteRuleStep({ data, setData }) {
    <StyledRadio
     options={["Everyone", "Invitation link only"]}
     value={data.inviteRule}
-    onChange={(v) =>
+    onChange={(v) => {
      setData({
       ...data,
       inviteRule: v
-     })
-    }
+     });
+     setTimeout(() => {
+      setStep(step + 1);
+     }, 750);
+    }}
    />
+   <StyledButton className="button border_less ghost" onClick={() => setStep(step + 1)}>
+    Skip
+   </StyledButton>
   </StyledInviteRuleStep>
  );
 }

src/routes/onboarding/steps/5-inviteLink.js

@@ -51,7 +51,7 @@ const StyledInviteLinkStep = styled.div`
  }
 `;
 
-export default function InviteLinkStep() {
+export default function InviteLinkStep({ step, setStep }) {
  const { link, linkCopied, copyLink } = useInviteLink();
 
  return (
@@ -65,6 +65,9 @@ export default function InviteLinkStep() {
      {linkCopied ? "Copied" : `Copy`}
     </StyledButton>
    </div>
+   <StyledButton className="button border_less ghost" onClick={() => setStep(step + 1)}>
+    Skip
+   </StyledButton>
   </StyledInviteLinkStep>
  );
 }

src/routes/onboarding/steps/6-completed.js

@@ -14,7 +14,7 @@ const StyledLastStep = styled.div`
  }
 
  > .tip {
-  width: 588px;
+  width: 560px;
   font-size: 20px;
   line-height: 24px;
   text-align: center;
@@ -26,7 +26,7 @@ const StyledLastStep = styled.div`
  }
 `;
 
-export default function LastStep({ data, onButtonClick }) {
+export default function CompletedStep({ data, step, setStep }) {
  return (
   <StyledLastStep>
    <span className="primaryText">Welcome to {data.spaceName}</span>
@@ -35,7 +35,7 @@ export default function LastStep({ data, onButtonClick }) {
     More settings, including domain resolution, privileges, securities, and invites are available in{" "}
     <span className="strong">Settings</span>
    </span>
-   <StyledButton className="startButton" onClick={onButtonClick}>
+   <StyledButton className="startButton" onClick={() => setStep(step + 1)}>
     <img src={PlayIcon} alt="play icon" />
     <span>Start</span>
    </StyledButton>

src/routes/onboarding/steps/spaceName.js

@@ -1,34 +0,0 @@
-import styled from "styled-components";
-import StyledInput from "../../../common/component/styled/Input";
-
-const StyledSpaceNameStep = styled.div`
- height: 100%;
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
-
- > .secondaryText {
-  color: #667085;
- }
-`;
-
-export default function SpaceNameStep({ data, setData }) {
- return (
-  <StyledSpaceNameStep>
-   <span className="primaryText">Let’s start with name:</span>
-   <span className="secondaryText">This space is called: </span>
-   <StyledInput
-    className="input"
-    placeholder="Enter space name"
-    value={data.spaceName}
-    onChange={(e) =>
-     setData({
-      ...data,
-      spaceName: e.target.value
-     })
-    }
-   />
-  </StyledSpaceNameStep>
- );
-}