style: onboarding screens (#1539)

* fix: onboarding screen styling

* chore: minor styling fixes

* chore: disable buttons if form is invalid

apps/app/components/workspace/create-workspace-form.tsx

@@ -9,7 +9,7 @@ import workspaceService from "services/workspace.service";
 // hooks
 import useToast from "hooks/use-toast";
 // ui
-import { CustomSelect, Input, PrimaryButton, SecondaryButton } from "components/ui";
+import { CustomSelect, Input, PrimaryButton } from "components/ui";
 // types
 import { ICurrentUserResponse, IWorkspace } from "types";
 // fetch-keys
@@ -27,6 +27,10 @@ type Props = {
   setDefaultValues: Dispatch<SetStateAction<any>>;
   user: ICurrentUserResponse | undefined;
   secondaryButton?: React.ReactNode;
+  primaryButtonText?: {
+    loading: string;
+    default: string;
+  };
 };
 
 const restrictedUrls = [
@@ -49,6 +53,10 @@ export const CreateWorkspaceForm: React.FC<Props> = ({
   setDefaultValues,
   user,
   secondaryButton,
+  primaryButtonText = {
+    loading: "Creating...",
+    default: "Create Workspace",
+  },
 }) => {
   const [slugError, setSlugError] = useState(false);
   const [invalidSlug, setInvalidSlug] = useState(false);
@@ -61,7 +69,7 @@ export const CreateWorkspaceForm: React.FC<Props> = ({
     control,
     setValue,
     getValues,
-    formState: { errors, isSubmitting },
+    formState: { errors, isSubmitting, isValid },
   } = useForm<IWorkspace>({ defaultValues, mode: "onChange" });
 
   const handleCreateWorkspace = async (formData: IWorkspace) => {
@@ -202,8 +210,8 @@ export const CreateWorkspaceForm: React.FC<Props> = ({
 
       <div className="flex items-center gap-4">
         {secondaryButton}
-        <PrimaryButton type="submit" size="md" disabled={isSubmitting}>
-          {isSubmitting ? "Creating..." : "Create Workspace"}
+        <PrimaryButton type="submit" size="md" disabled={!isValid} loading={isSubmitting}>
+          {isSubmitting ? primaryButtonText.loading : primaryButtonText.default}
         </PrimaryButton>
       </div>
     </form>

apps/app/components/workspace/help-section.tsx

@@ -17,12 +17,11 @@ import useOutsideClickDetector from "hooks/use-outside-click-detector";
 // components
 import UpgradeToProModal from "./upgrade-to-pro-modal";
 // ui
-import { CircularProgress } from "components/ui";
+import { CircularProgress, Icon } from "components/ui";
 // icons
 import {
   ArrowLongLeftIcon,
   ChatBubbleOvalLeftEllipsisIcon,
-  RocketLaunchIcon,
   ArrowUpCircleIcon,
   XMarkIcon,
 } from "@heroicons/react/24/outline";
@@ -171,7 +170,7 @@ export const WorkspaceHelpSection: React.FC<WorkspaceHelpSectionProps> = ({ setS
           }}
           title="Shortcuts"
         >
-          <RocketLaunchIcon className="h-4 w-4 text-custom-text-200" />
+          <Icon iconName="bolt" />
         </button>
         <button
           type="button"