ДИЗАЙН - МЕЖПРОЕКТНАЯ КОММУНИКАЦИЯ: Tasker workspace onboarding

plane-src/apps/web/app/(all)/create-workspace/page.tsx

@@ -6,14 +6,13 @@
 
 import { useState } from "react";
 import { observer } from "mobx-react";
-import Link from "next/link";
 // plane imports
 import { useTranslation } from "@plane/i18n";
 import { Button, getButtonStyling } from "@plane/propel/button";
-import { PlaneLogo } from "@plane/propel/icons";
 import type { IWorkspace } from "@plane/types";
 // assets
 import WorkspaceCreationDisabled from "@/app/assets/workspace/workspace-creation-disabled.png?url";
+import { AuthHeaderBase } from "@/components/auth-screens/header";
 // components
 import { CreateWorkspaceForm } from "@/components/workspace/create-workspace-form";
 // hooks
@@ -58,55 +57,46 @@ const CreateWorkspacePage = observer(function CreateWorkspacePage() {
 
   return (
     <AuthenticationWrapper>
-      <div className="flex h-full flex-col gap-y-2 overflow-hidden bg-surface-1 sm:flex-row sm:gap-y-0">
-        <div className="relative h-1/6 flex-shrink-0 sm:w-2/12 md:w-3/12 lg:w-1/5">
-          <div className="absolute top-1/2 left-0 h-[0.5px] w-full -translate-y-1/2 border-b-[0.5px] border-subtle sm:top-0 sm:left-1/2 sm:h-screen sm:w-[0.5px] sm:-translate-x-1/2 sm:translate-y-0 sm:border-r-[0.5px] md:left-1/3" />
-          <Link
-            className="absolute top-1/2 left-5 grid -translate-y-1/2 place-items-center px-3 sm:top-12 sm:left-1/2 sm:-translate-x-[15px] sm:translate-y-0 sm:px-0 sm:py-5 md:left-1/3"
-            href="/"
-          >
-            <PlaneLogo className="h-9 w-auto text-primary" />
-          </Link>
-          <div className="absolute top-1/4 right-4 -translate-y-1/2 text-13 text-primary sm:fixed sm:top-12 sm:right-16 sm:translate-y-0 sm:py-5">
-            {currentUser?.email}
-          </div>
-        </div>
-        <div className="relative flex h-full justify-center px-8 pb-8 sm:w-10/12 sm:items-center sm:justify-start sm:p-0 sm:pr-[8.33%] md:w-9/12 lg:w-4/5">
+      <div className="relative z-10 flex min-h-screen w-screen flex-col overflow-hidden overflow-y-auto bg-canvas px-8 pt-10 pb-12">
+        <AuthHeaderBase pageTitle={t("workspace_creation.heading")} />
+        <main className="grid flex-1 place-items-center py-8">
           {isWorkspaceCreationDisabled ? (
-            <div className="flex h-full w-4/5 flex-col items-center justify-center gap-1 text-16 font-medium">
+            <section className="nodedc-auth-shell flex flex-col items-center justify-center gap-4 text-center">
               <img
                 src={WorkspaceCreationDisabled}
-                className="mb-4 h-full w-full object-contain"
+                className="max-h-56 w-full object-contain"
                 alt="Workspace creation disabled"
               />
-              <div className="text-center text-16 font-medium">
+              <h1 className="m-0 text-24 font-semibold text-primary">
                 {t("workspace_creation.errors.creation_disabled.title")}
-              </div>
-              <p className="text-center text-13 break-words text-tertiary">
+              </h1>
+              <p className="m-0 text-14 leading-6 text-secondary">
                 {t("workspace_creation.errors.creation_disabled.description")}
               </p>
-              <div className="mt-6 flex gap-4">
-                <Button variant="primary" onClick={() => router.back()}>
+              <div className="mt-6 flex w-full flex-col gap-3">
+                <Button variant="primary" className="nodedc-auth-primary-button" onClick={() => router.back()}>
                   {t("common.go_back")}
                 </Button>
-                <a href={getMailtoHref()} className={getButtonStyling("secondary", "base")}>
+                <a href={getMailtoHref()} className={getButtonStyling("secondary", "base") + " nodedc-auth-secondary-button"}>
                   {t("workspace_creation.errors.creation_disabled.request_button")}
                 </a>
               </div>
-            </div>
+            </section>
           ) : (
-            <div className="w-full space-y-7 sm:space-y-10">
-              <h4 className="text-20 font-semibold">{t("workspace_creation.heading")}</h4>
-              <div className="sm:w-3/4 md:w-2/5">
+            <section className="nodedc-auth-shell nodedc-create-workspace-card space-y-7">
+              <div className="space-y-3">
+                <h1 className="m-0 text-30 font-semibold leading-tight text-primary">Работайте во всех измерениях.</h1>
+                <p className="m-0 text-28 font-semibold leading-tight text-secondary">Создайте рабочее пространство.</p>
+              </div>
               <CreateWorkspaceForm
+                variant="nodedc-auth"
                 onSubmit={onSubmit}
                 defaultValues={defaultValues}
                 setDefaultValues={setDefaultValues}
               />
-              </div>
-            </div>
+            </section>
           )}
-        </div>
+        </main>
       </div>
     </AuthenticationWrapper>
   );

plane-src/apps/web/core/components/workspace/create-workspace-form.tsx

@@ -36,6 +36,7 @@ type Props = {
     loading: string;
     default: string;
   };
+  variant?: "default" | "nodedc-auth";
 };
 
 const workspaceService = new WorkspaceService();
@@ -51,7 +52,25 @@ export const CreateWorkspaceForm = observer(function CreateWorkspaceForm(props:
       loading: "workspace_creation.button.loading",
       default: "workspace_creation.button.default",
     },
+    variant = "default",
   } = props;
+  const isNodeDCAuth = variant === "nodedc-auth";
+  const formClassName = isNodeDCAuth ? "space-y-7" : "space-y-6 sm:space-y-9";
+  const fieldsClassName = isNodeDCAuth ? "space-y-5" : "space-y-6 sm:space-y-7";
+  const fieldClassName = isNodeDCAuth ? "flex flex-col gap-2 text-12 text-secondary" : "flex flex-col gap-2 text-13";
+  const inputShellClassName = isNodeDCAuth ? "nodedc-auth-input-shell flex w-full items-center px-4" : "flex flex-col gap-1";
+  const inputClassName = isNodeDCAuth ? "nodedc-auth-input h-12 w-full px-0 py-0 text-14" : "w-full";
+  const urlShellClassName = isNodeDCAuth
+    ? "nodedc-auth-input-shell flex w-full items-center px-4"
+    : "flex w-full items-center rounded-md border border-subtle bg-layer-2 px-3";
+  const urlInputClassName = isNodeDCAuth
+    ? "nodedc-auth-input block h-12 w-full border-none bg-transparent !px-0 py-0 text-14"
+    : "block w-full rounded-md border-none bg-transparent !px-0 py-2 text-12";
+  const dropdownClassName = isNodeDCAuth
+    ? "nodedc-auth-input-shell flex min-h-12 items-center px-4 text-14 shadow-none"
+    : "rounded-md border border-subtle bg-layer-2 px-3 py-2 text-13 shadow-none";
+  const errorClassName = isNodeDCAuth ? "text-12 text-[rgb(var(--nodedc-accent-rgb))]" : "text-13 text-danger-primary";
+  const requiredMark = isNodeDCAuth ? null : <span className="ml-0.5 text-danger-primary">*</span>;
   // states
   const [slugError, setSlugError] = useState(false);
   const [invalidSlug, setInvalidSlug] = useState(false);
@@ -111,18 +130,18 @@ export const CreateWorkspaceForm = observer(function CreateWorkspaceForm(props:
 
   return (
     <form
-      className="space-y-6 sm:space-y-9"
+      className={formClassName}
       onSubmit={(e) => {
         void handleSubmit(handleCreateWorkspace)(e);
       }}
     >
-      <div className="space-y-6 sm:space-y-7">
-        <div className="flex flex-col gap-2 text-13">
+      <div className={fieldsClassName}>
+        <div className={fieldClassName}>
           <label htmlFor="workspaceName">
             {t("workspace_creation.form.name.label")}
-            <span className="ml-0.5 text-danger-primary">*</span>
+            {requiredMark}
           </label>
-          <div className="flex flex-col gap-1">
+          <div className={inputShellClassName} data-error={Boolean(errors.name)}>
             <Controller
               control={control}
               name="name"
@@ -149,20 +168,20 @@ export const CreateWorkspaceForm = observer(function CreateWorkspaceForm(props:
                   ref={ref}
                   hasError={Boolean(errors.name)}
                   placeholder={t("workspace_creation.form.name.placeholder")}
-                  className="w-full"
+                  className={inputClassName}
                 />
               )}
             />
-            <span className="text-11 text-danger-primary">{errors?.name?.message}</span>
           </div>
+          <span className={errorClassName}>{errors?.name?.message}</span>
         </div>
-        <div className="flex flex-col gap-2 text-13">
+        <div className={fieldClassName}>
           <label htmlFor="workspaceUrl">
             {t("workspace_creation.form.url.label")}
-            <span className="ml-0.5 text-danger-primary">*</span>
+            {requiredMark}
           </label>
-          <div className="flex w-full items-center rounded-md border border-subtle bg-layer-2 px-3">
-            <span className="text-12 whitespace-nowrap text-secondary">{window && window.location.host}/</span>
+          <div className={urlShellClassName} data-error={Boolean(errors.slug) || slugError || invalidSlug}>
+            <span className="mr-1 text-12 whitespace-nowrap text-secondary">{window && window.location.host}/</span>
             <Controller
               control={control}
               name="slug"
@@ -187,25 +206,25 @@ export const CreateWorkspaceForm = observer(function CreateWorkspaceForm(props:
                   ref={ref}
                   hasError={Boolean(errors.slug)}
                   placeholder={t("workspace_creation.form.url.placeholder")}
-                  className="block w-full rounded-md border-none bg-transparent !px-0 py-2 text-12"
+                  className={urlInputClassName}
                 />
               )}
             />
           </div>
           {slugError && (
-            <p className="-mt-3 text-13 text-danger-primary">
+            <p className={errorClassName}>
               {t("workspace_creation.errors.validation.url_already_taken")}
             </p>
           )}
           {invalidSlug && (
-            <p className="text-13 text-danger-primary">{t("workspace_creation.errors.validation.url_alphanumeric")}</p>
+            <p className={errorClassName}>{t("workspace_creation.errors.validation.url_alphanumeric")}</p>
           )}
-          {errors.slug && <span className="text-11 text-danger-primary">{errors.slug.message}</span>}
+          {errors.slug && <span className={errorClassName}>{errors.slug.message}</span>}
         </div>
-        <div className="flex flex-col gap-2 text-13">
+        <div className={fieldClassName}>
           <span>
             {t("workspace_creation.form.organization_size.label")}
-            <span className="ml-0.5 text-danger-primary">*</span>
+            {requiredMark}
           </span>
           <div className="w-full">
             <Controller
@@ -227,23 +246,36 @@ export const CreateWorkspaceForm = observer(function CreateWorkspaceForm(props:
                       </span>
                     )
                   }
-                  menuButtonWrapperClassName="rounded-md border border-subtle bg-layer-2 px-3 py-2 text-13 shadow-none"
+                  menuButtonWrapperClassName={dropdownClassName}
                 />
               )}
             />
             {errors.organization_size && (
-              <span className="text-13 text-danger-primary">{errors.organization_size.message}</span>
+              <span className={errorClassName}>{errors.organization_size.message}</span>
             )}
           </div>
         </div>
       </div>
-      <div className="flex items-center gap-4">
+      <div className={isNodeDCAuth ? "flex flex-col gap-3" : "flex items-center gap-4"}>
         {secondaryButton}
-        <Button variant="primary" type="submit" size="xl" disabled={!isValid} loading={isSubmitting}>
+        <Button
+          variant="primary"
+          type="submit"
+          size="xl"
+          disabled={!isValid}
+          loading={isSubmitting}
+          className={isNodeDCAuth ? "nodedc-auth-primary-button" : undefined}
+        >
           {isSubmitting ? t(primaryButtonText.loading) : t(primaryButtonText.default)}
         </Button>
         {!secondaryButton && (
-          <Button variant="secondary" type="button" size="xl" onClick={() => router.back()}>
+          <Button
+            variant="secondary"
+            type="button"
+            size="xl"
+            onClick={() => router.back()}
+            className={isNodeDCAuth ? "nodedc-auth-secondary-button" : undefined}
+          >
             {t("common.go_back")}
           </Button>
         )}

plane-src/apps/web/styles/globals.css

@@ -2585,6 +2585,36 @@
     color: rgb(var(--nodedc-on-card-active-rgb)) !important;
   }
 
+  .nodedc-auth-secondary-button {
+    width: 100%;
+    min-height: 3rem;
+    border: 0 !important;
+    outline: none !important;
+    box-shadow: none !important;
+    border-radius: 1.15rem !important;
+    background:
+      linear-gradient(180deg, rgba(255, 255, 255, 0.028) 0%, rgba(255, 255, 255, 0.012) 100%), rgba(255, 255, 255, 0.03) !important;
+    color: var(--text-color-secondary) !important;
+  }
+
+  .nodedc-auth-secondary-button:hover {
+    background:
+      linear-gradient(180deg, rgba(255, 255, 255, 0.038) 0%, rgba(255, 255, 255, 0.018) 100%), rgba(255, 255, 255, 0.05) !important;
+    color: var(--text-color-primary) !important;
+  }
+
+  .nodedc-create-workspace-card {
+    max-width: 32rem;
+  }
+
+  .nodedc-create-workspace-card input:-webkit-autofill,
+  .nodedc-create-workspace-card input:-webkit-autofill:hover,
+  .nodedc-create-workspace-card input:-webkit-autofill:focus {
+    -webkit-text-fill-color: var(--text-color-primary);
+    box-shadow: 0 0 0 1000px transparent inset !important;
+    transition: background-color 9999s ease-out 0s;
+  }
+
   .nodedc-error-shell {
     width: 100%;
     max-width: 36rem;