style: onboarding screens (#1539)

* fix: onboarding screen styling * chore: minor styling fixes * chore: disable buttons if form is invalid
2023-07-18 15:20:05 +05:30 · 2023-07-18 15:20:05 +05:30 · 0feab162ff
commit 0feab162ff
parent 55a1291b1d
11 changed files with 38 additions and 28 deletions
--- a/apps/app/components/account/email-code-form.tsx
+++ b/apps/app/components/account/email-code-form.tsx
@ -178,7 +178,7 @@ export const EmailCodeForm = ({ handleSignIn }: any) => {
              ) : errorResendingCode ? (
                "Please try again later"
              ) : (
-                "Resend code"
+                <span className="font-medium">Resend code</span>
              )}
            </button>
          </>
--- a/apps/app/components/core/theme/custom-theme-selector.tsx
+++ b/apps/app/components/core/theme/custom-theme-selector.tsx
@ -21,11 +21,11 @@ type Props = {
 };

 const defaultValues: ICustomTheme = {
-  background: "#292d3e",
-  text: "#ffffff",
-  primary: "#7d57c1",
-  sidebarBackground: "#292d3e",
-  sidebarText: "#ffffff",
+  background: "#0d101b",
+  text: "#c5c5c5",
+  primary: "#3f76ff",
+  sidebarBackground: "#0d101b",
+  sidebarText: "#c5c5c5",
  darkPalette: false,
  palette: "",
 };
--- a/apps/app/components/onboarding/invite-members.tsx
+++ b/apps/app/components/onboarding/invite-members.tsx
@ -41,7 +41,7 @@ export const InviteMembers: React.FC<Props> = ({ workspace, user, stepChange })
  const {
    control,
    handleSubmit,
-    formState: { isSubmitting, errors },
+    formState: { isSubmitting, errors, isValid },
  } = useForm<FormValues>();

  const { fields, append, remove } = useFieldArray({
@ -204,7 +204,7 @@ export const InviteMembers: React.FC<Props> = ({ workspace, user, stepChange })
        </button>
      </div>
      <div className="flex items-center gap-4">
-        <PrimaryButton type="submit" loading={isSubmitting} size="md">
+        <PrimaryButton type="submit" disabled={!isValid} loading={isSubmitting} size="md">
          {isSubmitting ? "Sending..." : "Send Invite"}
        </PrimaryButton>
        <SecondaryButton size="md" onClick={nextStep} outline>
--- a/apps/app/components/onboarding/tour/root.tsx
+++ b/apps/app/components/onboarding/tour/root.tsx
@ -53,7 +53,7 @@ const TOUR_STEPS: {
    key: "modules",
    title: "Break into modules",
    description:
-      "Modules break your big think into Projects or Features, to help you organize better.",
+      "Modules break your big thing into Projects or Features, to help you organize better.",
    image: ModulesTour,
    prevStep: "cycles",
    nextStep: "views",
@ -132,7 +132,7 @@ export const TourRoot: React.FC<Props> = ({ onComplete }) => {
              <Image src={currentStep?.image} alt={currentStep?.title} />
            </div>
            <div className="flex flex-col h-1/2 sm:h-2/5 p-4 overflow-y-auto">
-              <h3 className="font-medium text-lg">{currentStep?.title}</h3>
+              <h3 className="font-semibold sm:text-xl">{currentStep?.title}</h3>
              <p className="text-custom-text-200 text-sm mt-3">{currentStep?.description}</p>
              <div className="h-full flex items-end justify-between gap-4 mt-3">
                <div className="flex items-center gap-4">
--- a/apps/app/components/onboarding/user-details.tsx
+++ b/apps/app/components/onboarding/user-details.tsx
@ -35,7 +35,7 @@ export const UserDetails: React.FC<Props> = ({ user }) => {
    handleSubmit,
    control,
    reset,
-    formState: { errors, isSubmitting },
+    formState: { errors, isSubmitting, isValid },
  } = useForm<IUser>({
    defaultValues,
  });
@ -164,7 +164,7 @@ export const UserDetails: React.FC<Props> = ({ user }) => {
        </div>
      </div>

-      <PrimaryButton type="submit" size="md" disabled={isSubmitting}>
+      <PrimaryButton type="submit" size="md" disabled={!isValid} loading={isSubmitting}>
        {isSubmitting ? "Updating..." : "Continue"}
      </PrimaryButton>
    </form>
--- a/apps/app/components/onboarding/workspace.tsx
+++ b/apps/app/components/onboarding/workspace.tsx
@ -38,6 +38,10 @@ export const Workspace: React.FC<Props> = ({ user, updateLastWorkspace, stepChan
          defaultValues={defaultValues}
          setDefaultValues={setDefaultValues}
          user={user}
+          primaryButtonText={{
+            loading: "Creating...",
+            default: "Continue",
+          }}
          secondaryButton={
            <SecondaryButton onClick={() => stepChange({ profile_complete: false })}>
              Back
--- a/apps/app/components/ui/buttons/primary-button.tsx
+++ b/apps/app/components/ui/buttons/primary-button.tsx
@ -19,11 +19,7 @@ export const PrimaryButton: React.FC<ButtonProps> = ({
        : size === "md"
        ? "rounded-md px-3.5 py-2 text-sm"
        : "rounded-lg px-4 py-2 text-base"
-    } ${
-      disabled
-        ? "cursor-not-allowed bg-opacity-70 border-opacity-70 hover:bg-opacity-70 hover:border-opacity-70"
-        : ""
-    } ${
+    } ${disabled ? "cursor-not-allowed opacity-70 hover:opacity-70" : ""} ${
      outline
        ? "bg-transparent text-custom-primary hover:bg-custom-primary hover:text-white"
        : "text-white bg-custom-primary hover:border-opacity-90 hover:bg-opacity-90"
--- a/apps/app/components/workspace/create-workspace-form.tsx
+++ b/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>
--- a/apps/app/components/workspace/help-section.tsx
+++ b/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"
--- a/apps/app/helpers/theme.helper.ts
+++ b/apps/app/helpers/theme.helper.ts
@ -96,7 +96,7 @@ export const applyTheme = (palette: string, isDarkPalette: boolean) => {
      ?.style.setProperty(`--color-sidebar-text-${shade}`, sidebarTextRgbValues);

    if (i >= 100 && i <= 400) {
-      const borderShade = (shade + 100) as keyof TShades;
+      const borderShade = i === 100 ? 70 : i === 200 ? 80 : i === 300 ? 90 : 100;

      document
        .querySelector<HTMLElement>("[data-theme='custom']")
--- a/apps/app/pages/[workspaceSlug]/settings/index.tsx
+++ b/apps/app/pages/[workspaceSlug]/settings/index.tsx
@ -276,8 +276,8 @@ const WorkspaceSettings: NextPage = () => {
            </div>
            <div className="grid grid-cols-12 gap-4 sm:gap-16">
              <div className="col-span-12 sm:col-span-6">
-                <h4 className="text-lg font-semibold">Company Size</h4>
-                <p className="text-sm text-custom-text-200">How big is your company?</p>
+                <h4 className="text-lg font-semibold">Organization Size</h4>
+                <p className="text-sm text-custom-text-200">What size is your organization?</p>
              </div>
              <div className="col-span-12 sm:col-span-6">
                <Controller
@ -287,7 +287,10 @@ const WorkspaceSettings: NextPage = () => {
                    <CustomSelect
                      value={value}
                      onChange={onChange}
-                      label={ORGANIZATION_SIZE.find((c) => c === value) ?? "Select company size"}
+                      label={
+                        ORGANIZATION_SIZE.find((c) => c === value) ?? "Select organization size"
+                      }
+                      width="w-full"
                      input
                    >
                      {ORGANIZATION_SIZE?.map((item) => (