chore: replaced listbox with our custom implementation

* [WEB-4693] fix: remove initial load flicker on auto-archive and auto-close automation page

* refactor: optimize auto-archive and auto-close status calculations using useMemo

* chore: add requested changes

README.md

@@ -2,11 +2,10 @@
 
 <p align="center">
 <a href="https://plane.so">
-  <img src="https://plane-marketing.s3.ap-south-1.amazonaws.com/plane-readme/plane_logo_.webp" alt="Plane Logo" width="70">
+  <img src="https://media.docs.plane.so/logo/plane_github_readme.png" alt="Plane Logo" width="400">
 </a>
 </p>
-<h1 align="center"><b>Plane</b></h1>
-<p align="center"><b>Open-source project management that unlocks customer value</b></p>
+<p align="center"><b>Modern project management for all teams</b></p>
 
 <p align="center">
 <a href="https://discord.com/invite/A92xrEGCge">
@@ -25,14 +24,7 @@
 <p>
     <a href="https://app.plane.so/#gh-light-mode-only" target="_blank">
       <img
-        src="https://plane-marketing.s3.ap-south-1.amazonaws.com/plane-readme/plane_screen.webp"
-        alt="Plane Screens"
-        width="100%"
-      />
-    </a>
-    <a href="https://app.plane.so/#gh-dark-mode-only" target="_blank">
-      <img
-        src="https://plane-marketing.s3.ap-south-1.amazonaws.com/plane-readme/plane_screens_dark_mode.webp"
+        src="https://media.docs.plane.so/GitHub-readme/github-top.webp"
         alt="Plane Screens"
         width="100%"
       />
@@ -48,13 +40,13 @@ Meet [Plane](https://plane.so/), an open-source project management tool to track
 Getting started with Plane is simple. Choose the setup that works best for you:
 
 - **Plane Cloud**
-Sign up for a free account on [Plane Cloud](https://app.plane.so)—it's the fastest way to get up and running without worrying about infrastructure.
+  Sign up for a free account on [Plane Cloud](https://app.plane.so)—it's the fastest way to get up and running without worrying about infrastructure.
 
 - **Self-host Plane**
-Prefer full control over your data and infrastructure? Install and run Plane on your own servers. Follow our detailed [deployment guides](https://developers.plane.so/self-hosting/overview) to get started.
+  Prefer full control over your data and infrastructure? Install and run Plane on your own servers. Follow our detailed [deployment guides](https://developers.plane.so/self-hosting/overview) to get started.
 
-| Installation methods | Docs link                                                                                                                                          |
-| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| Installation methods | Docs link                                                                                                                                                                               |
+| -------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | Docker               | [![Docker](https://img.shields.io/badge/docker-%230db7ed.svg?style=for-the-badge&logo=docker&logoColor=white)](https://developers.plane.so/self-hosting/methods/docker-compose)         |
 | Kubernetes           | [![Kubernetes](https://img.shields.io/badge/kubernetes-%23326ce5.svg?style=for-the-badge&logo=kubernetes&logoColor=white)](https://developers.plane.so/self-hosting/methods/kubernetes) |
 
@@ -63,58 +55,58 @@ Prefer full control over your data and infrastructure? Install and run Plane on
 ## 🌟 Features
 
 - **Issues**
-Efficiently create and manage tasks with a robust rich text editor that supports file uploads. Enhance organization and tracking by adding sub-properties and referencing related issues.
+  Efficiently create and manage tasks with a robust rich text editor that supports file uploads. Enhance organization and tracking by adding sub-properties and referencing related issues.
 
 - **Cycles**
-Maintain your team’s momentum with Cycles. Track progress effortlessly using burn-down charts and other insightful tools.
+  Maintain your team’s momentum with Cycles. Track progress effortlessly using burn-down charts and other insightful tools.
 
 - **Modules**
-Simplify complex projects by dividing them into smaller, manageable modules.
+  Simplify complex projects by dividing them into smaller, manageable modules.
 
 - **Views**
-Customize your workflow by creating filters to display only the most relevant issues. Save and share these views with ease.
+  Customize your workflow by creating filters to display only the most relevant issues. Save and share these views with ease.
 
 - **Pages**
-Capture and organize ideas using Plane Pages, complete with AI capabilities and a rich text editor. Format text, insert images, add hyperlinks, or convert your notes into actionable items.
+  Capture and organize ideas using Plane Pages, complete with AI capabilities and a rich text editor. Format text, insert images, add hyperlinks, or convert your notes into actionable items.
 
 - **Analytics**
-Access real-time insights across all your Plane data. Visualize trends, remove blockers, and keep your projects moving forward.
+  Access real-time insights across all your Plane data. Visualize trends, remove blockers, and keep your projects moving forward.
 
 - **Drive** (_coming soon_): The drive helps you share documents, images, videos, or any other files that make sense to you or your team and align on the problem/solution.
 
-
 ## 🛠️ Local development
 
 See [CONTRIBUTING](./CONTRIBUTING.md)
 
 ## ⚙️ Built with
+
 [![Next JS](https://img.shields.io/badge/next.js-000000?style=for-the-badge&logo=nextdotjs&logoColor=white)](https://nextjs.org/)
 [![Django](https://img.shields.io/badge/Django-092E20?style=for-the-badge&logo=django&logoColor=green)](https://www.djangoproject.com/)
 [![Node JS](https://img.shields.io/badge/node.js-339933?style=for-the-badge&logo=Node.js&logoColor=white)](https://nodejs.org/en)
 
 ## 📸 Screenshots
 
-<p>
+  <p>
     <a href="https://plane.so" target="_blank">
       <img
-        src="https://ik.imagekit.io/w2okwbtu2/Issues_rNZjrGgFl.png?updatedAt=1709298765880"
+        src="https://media.docs.plane.so/GitHub-readme/github-work-items.webp"
         alt="Plane Views"
         width="100%"
       />
     </a>
   </p>
-<p>
-    <a href="https://plane.so" target="_blank">
-      <img
-        src="https://ik.imagekit.io/w2okwbtu2/Cycles_jCDhqmTl9.png?updatedAt=1709298780697"
-        width="100%"
-      />
-    </a>
-  </p>
   <p>
     <a href="https://plane.so" target="_blank">
       <img
-        src="https://ik.imagekit.io/w2okwbtu2/Modules_PSCVsbSfI.png?updatedAt=1709298796783"
+        src="https://media.docs.plane.so/GitHub-readme/github-cycles.webp"
+        width="100%"
+      />
+    </a>
+  </p>
+  <p>
+    <a href="https://plane.so" target="_blank">
+      <img
+        src="https://media.docs.plane.so/GitHub-readme/github-modules.webp"
         alt="Plane Cycles and Modules"
         width="100%"
       />
@@ -123,7 +115,7 @@ See [CONTRIBUTING](./CONTRIBUTING.md)
   <p>
     <a href="https://plane.so" target="_blank">
       <img
-        src="https://ik.imagekit.io/w2okwbtu2/Views_uxXsRatS4.png?updatedAt=1709298834522"
+        src="https://media.docs.plane.so/GitHub-readme/github-views.webp"
         alt="Plane Analytics"
         width="100%"
       />
@@ -132,25 +124,16 @@ See [CONTRIBUTING](./CONTRIBUTING.md)
    <p>
     <a href="https://plane.so" target="_blank">
       <img
-        src="https://ik.imagekit.io/w2okwbtu2/Analytics_0o22gLRtp.png?updatedAt=1709298834389"
+        src="https://media.docs.plane.so/GitHub-readme/github-analytics.webp"
         alt="Plane Pages"
         width="100%"
       />
     </a>
   </p>
 </p>
-<p>
-    <a href="https://plane.so" target="_blank">
-      <img
-        src="https://ik.imagekit.io/w2okwbtu2/Drive_LlfeY4xn3.png?updatedAt=1709298837917"
-        alt="Plane Command Menu"
-        width="100%"
-      />
-    </a>
-  </p>
-</p>
 
 ## 📝 Documentation
+
 Explore Plane's [product documentation](https://docs.plane.so/) and [developer documentation](https://developers.plane.so/) to learn about features, setup, and usage.
 
 ## ❤️ Community
@@ -186,6 +169,6 @@ Please read [CONTRIBUTING.md](https://github.com/makeplane/plane/blob/master/CON
   <img src="https://contrib.rocks/image?repo=makeplane/plane" />
 </a>
 
-
 ## License
+
 This project is licensed under the [GNU Affero General Public License v3.0](https://github.com/makeplane/plane/blob/master/LICENSE.txt).

apps/admin/app/(all)/(dashboard)/sidebar-dropdown.tsx

@@ -42,7 +42,7 @@ export const AdminSidebarDropdown = observer(() => {
       )}
     >
       <div className="flex flex-col gap-2.5 pb-2">
-        <span className="px-2 text-custom-sidebar-text-200">{currentUser?.email}</span>
+        <span className="px-2 text-custom-sidebar-text-200 truncate">{currentUser?.email}</span>
       </div>
       <div className="py-2">
         <Menu.Item

apps/admin/app/(all)/(home)/auth-header.tsx

@@ -0,0 +1,12 @@
+"use client";
+
+import Link from "next/link";
+import { PlaneLockup } from "@plane/ui";
+
+export const AuthHeader = () => (
+  <div className="flex items-center justify-between gap-6 w-full flex-shrink-0 sticky top-0">
+    <Link href="/">
+      <PlaneLockup height={20} width={95} className="text-custom-text-100" />
+    </Link>
+  </div>
+);

apps/admin/app/(all)/(home)/layout.tsx

@@ -1,35 +1,9 @@
 "use client";
 
-import Image from "next/image";
-import Link from "next/link";
-import { useTheme } from "next-themes";
-// logo assets
-import PlaneBackgroundPatternDark from "public/auth/background-pattern-dark.svg";
-import PlaneBackgroundPattern from "public/auth/background-pattern.svg";
-import BlackHorizontalLogo from "public/plane-logos/black-horizontal-with-blue-logo.png";
-import WhiteHorizontalLogo from "public/plane-logos/white-horizontal-with-blue-logo.png";
-
 export default function RootLayout({ children }: { children: React.ReactNode }) {
-  const { resolvedTheme } = useTheme();
-
-  const patternBackground = resolvedTheme === "light" ? PlaneBackgroundPattern : PlaneBackgroundPatternDark;
-  const logo = resolvedTheme === "light" ? BlackHorizontalLogo : WhiteHorizontalLogo;
-
   return (
-    <div className="relative">
-      <div className="h-screen w-full overflow-hidden overflow-y-auto flex flex-col">
-        <div className="container h-[110px] flex-shrink-0 mx-auto px-5 lg:px-0 flex items-center justify-between gap-5 z-50">
-          <div className="flex items-center gap-x-2 py-10">
-            <Link href={`/`} className="h-[30px] w-[133px]">
-              <Image src={logo} alt="Plane logo" />
-            </Link>
-          </div>
-        </div>
-        <div className="absolute inset-0 z-0">
-          <Image src={patternBackground} className="w-screen h-full object-cover" alt="Plane background pattern" />
-        </div>
-        <div className="relative z-10 flex-grow">{children}</div>
-      </div>
+    <div className="relative z-10 flex flex-col items-center w-screen h-screen overflow-hidden overflow-y-auto pt-6 pb-10 px-8">
+      {children}
     </div>
   );
 }

apps/admin/app/(all)/(home)/page.tsx

@@ -2,8 +2,8 @@
 
 import { observer } from "mobx-react";
 // components
+import { LogoSpinner } from "@/components/common/logo-spinner";
 import { InstanceFailureView } from "@/components/instance/failure";
-import { InstanceLoading } from "@/components/instance/loading";
 import { InstanceSetupForm } from "@/components/instance/setup-form";
 // hooks
 import { useInstance } from "@/hooks/store";
@@ -17,46 +17,24 @@ const HomePage = () => {
   // if instance is not fetched, show loading
   if (!instance && !error) {
     return (
-      <div className="relative h-full w-full overflow-y-auto px-6 py-10 mx-auto flex justify-center items-center">
-        <InstanceLoading />
+      <div className="flex items-center justify-center h-screen w-full">
+        <LogoSpinner />
       </div>
     );
   }
 
   // if instance fetch fails, show failure view
   if (error) {
-    return (
-      <div className="relative h-full w-full overflow-y-auto px-6 py-10 mx-auto flex justify-center items-center">
-        <InstanceFailureView />
-      </div>
-    );
+    return <InstanceFailureView />;
   }
 
   // if instance is fetched and setup is not done, show setup form
   if (instance && !instance?.is_setup_done) {
-    return (
-      <div className="relative h-full w-full overflow-y-auto px-6 py-10 mx-auto flex justify-center items-center">
-        <InstanceSetupForm />
-      </div>
-    );
+    return <InstanceSetupForm />;
   }
 
   // if instance is fetched and setup is done, show sign in form
-  return (
-    <div className="flex-grow container mx-auto max-w-lg px-10 lg:max-w-md lg:px-5 py-10 lg:pt-28 transition-all">
-      <div className="relative flex flex-col space-y-6">
-        <div className="text-center space-y-1">
-          <h3 className="flex gap-4 justify-center text-3xl font-bold text-onboarding-text-100">
-            Manage your Plane instance
-          </h3>
-          <p className="font-medium text-onboarding-text-400">
-            Configure instance-wide settings to secure your instance
-          </p>
-        </div>
-        <InstanceSignInForm />
-      </div>
-    </div>
-  );
+  return <InstanceSignInForm />;
 };
 
 export default observer(HomePage);

apps/admin/app/(all)/(home)/sign-in-form.tsx

@@ -10,7 +10,9 @@ import { Button, Input, Spinner } from "@plane/ui";
 // components
 import { Banner } from "@/components/common/banner";
 // local components
+import { FormHeader } from "../../../core/components/instance/form-header";
 import { AuthBanner } from "./auth-banner";
+import { AuthHeader } from "./auth-header";
 import { authErrorHandler } from "./auth-helpers";
 
 // service initialization
@@ -101,78 +103,91 @@ export const InstanceSignInForm: FC = () => {
   }, [errorCode]);
 
   return (
-    <form
-      className="space-y-4"
-      method="POST"
-      action={`${API_BASE_URL}/api/instances/admins/sign-in/`}
-      onSubmit={() => setIsSubmitting(true)}
-      onError={() => setIsSubmitting(false)}
-    >
-      {errorData.type && errorData?.message ? (
-        <Banner type="error" message={errorData?.message} />
-      ) : (
-        <>{errorInfo && <AuthBanner bannerData={errorInfo} handleBannerData={(value) => setErrorInfo(value)} />}</>
-      )}
-      <input type="hidden" name="csrfmiddlewaretoken" value={csrfToken} />
-
-      <div className="w-full space-y-1">
-        <label className="text-sm text-onboarding-text-300 font-medium" htmlFor="email">
-          Email <span className="text-red-500">*</span>
-        </label>
-        <Input
-          className="w-full border border-onboarding-border-100 !bg-onboarding-background-200 placeholder:text-onboarding-text-400"
-          id="email"
-          name="email"
-          type="email"
-          inputSize="md"
-          placeholder="name@company.com"
-          value={formData.email}
-          onChange={(e) => handleFormChange("email", e.target.value)}
-          autoComplete="on"
-          autoFocus
-        />
-      </div>
-
-      <div className="w-full space-y-1">
-        <label className="text-sm text-onboarding-text-300 font-medium" htmlFor="password">
-          Password <span className="text-red-500">*</span>
-        </label>
-        <div className="relative">
-          <Input
-            className="w-full border border-onboarding-border-100 !bg-onboarding-background-200 placeholder:text-onboarding-text-400"
-            id="password"
-            name="password"
-            type={showPassword ? "text" : "password"}
-            inputSize="md"
-            placeholder="Enter your password"
-            value={formData.password}
-            onChange={(e) => handleFormChange("password", e.target.value)}
-            autoComplete="on"
+    <>
+      <AuthHeader />
+      <div className="flex flex-col justify-center items-center flex-grow w-full py-6 mt-10">
+        <div className="relative flex flex-col gap-6 max-w-[22.5rem] w-full">
+          <FormHeader
+            heading="Manage your Plane instance"
+            subHeading="Configure instance-wide settings to secure your instance"
           />
-          {showPassword ? (
-            <button
-              type="button"
-              className="absolute right-3 top-3.5 flex items-center justify-center text-custom-text-400"
-              onClick={() => setShowPassword(false)}
-            >
-              <EyeOff className="h-4 w-4" />
-            </button>
-          ) : (
-            <button
-              type="button"
-              className="absolute right-3 top-3.5 flex items-center justify-center text-custom-text-400"
-              onClick={() => setShowPassword(true)}
-            >
-              <Eye className="h-4 w-4" />
-            </button>
-          )}
+          <form
+            className="space-y-4"
+            method="POST"
+            action={`${API_BASE_URL}/api/instances/admins/sign-in/`}
+            onSubmit={() => setIsSubmitting(true)}
+            onError={() => setIsSubmitting(false)}
+          >
+            {errorData.type && errorData?.message ? (
+              <Banner type="error" message={errorData?.message} />
+            ) : (
+              <>
+                {errorInfo && <AuthBanner bannerData={errorInfo} handleBannerData={(value) => setErrorInfo(value)} />}
+              </>
+            )}
+            <input type="hidden" name="csrfmiddlewaretoken" value={csrfToken} />
+
+            <div className="w-full space-y-1">
+              <label className="text-sm text-custom-text-300 font-medium" htmlFor="email">
+                Email <span className="text-red-500">*</span>
+              </label>
+              <Input
+                className="w-full border border-custom-border-100 !bg-custom-background-100 placeholder:text-custom-text-400"
+                id="email"
+                name="email"
+                type="email"
+                inputSize="md"
+                placeholder="name@company.com"
+                value={formData.email}
+                onChange={(e) => handleFormChange("email", e.target.value)}
+                autoComplete="on"
+                autoFocus
+              />
+            </div>
+
+            <div className="w-full space-y-1">
+              <label className="text-sm text-custom-text-300 font-medium" htmlFor="password">
+                Password <span className="text-red-500">*</span>
+              </label>
+              <div className="relative">
+                <Input
+                  className="w-full border border-custom-border-100 !bg-custom-background-100 placeholder:text-custom-text-400"
+                  id="password"
+                  name="password"
+                  type={showPassword ? "text" : "password"}
+                  inputSize="md"
+                  placeholder="Enter your password"
+                  value={formData.password}
+                  onChange={(e) => handleFormChange("password", e.target.value)}
+                  autoComplete="on"
+                />
+                {showPassword ? (
+                  <button
+                    type="button"
+                    className="absolute right-3 top-3.5 flex items-center justify-center text-custom-text-400"
+                    onClick={() => setShowPassword(false)}
+                  >
+                    <EyeOff className="h-4 w-4" />
+                  </button>
+                ) : (
+                  <button
+                    type="button"
+                    className="absolute right-3 top-3.5 flex items-center justify-center text-custom-text-400"
+                    onClick={() => setShowPassword(true)}
+                  >
+                    <Eye className="h-4 w-4" />
+                  </button>
+                )}
+              </div>
+            </div>
+            <div className="py-2">
+              <Button type="submit" size="lg" className="w-full" disabled={isButtonDisabled}>
+                {isSubmitting ? <Spinner height="20px" width="20px" /> : "Sign in"}
+              </Button>
+            </div>
+          </form>
         </div>
       </div>
-      <div className="py-2">
-        <Button type="submit" size="lg" className="w-full" disabled={isButtonDisabled}>
-          {isSubmitting ? <Spinner height="20px" width="20px" /> : "Sign in"}
-        </Button>
-      </div>
-    </form>
+    </>
   );
 };

apps/admin/core/components/authentication/authentication-method-card.tsx

@@ -7,8 +7,8 @@ import { cn } from "@plane/utils";
 type Props = {
   name: string;
   description: string;
-  icon: JSX.Element;
-  config: JSX.Element;
+  icon: React.ReactNode;
+  config: React.ReactNode;
   disabled?: boolean;
   withBorder?: boolean;
   unavailable?: boolean;

apps/admin/core/components/common/controller-input.tsx

@@ -13,7 +13,7 @@ type Props = {
   type: "text" | "password";
   name: string;
   label: string;
-  description?: string | JSX.Element;
+  description?: string | React.ReactNode;
   placeholder: string;
   error: boolean;
   required: boolean;
@@ -23,7 +23,7 @@ export type TControllerInputFormField = {
   key: string;
   type: "text" | "password";
   label: string;
-  description?: string | JSX.Element;
+  description?: string | React.ReactNode;
   placeholder: string;
   error: boolean;
   required: boolean;

apps/admin/core/components/common/copy-field.tsx

@@ -9,14 +9,14 @@ import { Button, TOAST_TYPE, setToast } from "@plane/ui";
 type Props = {
   label: string;
   url: string;
-  description: string | JSX.Element;
+  description: string | React.ReactNode;
 };
 
 export type TCopyField = {
   key: string;
   label: string;
   url: string;
-  description: string | JSX.Element;
+  description: string | React.ReactNode;
 };
 
 export const CopyField: React.FC<Props> = (props) => {

apps/admin/core/components/common/logo-spinner.tsx

@@ -7,11 +7,11 @@ import LogoSpinnerLight from "@/public/images/logo-spinner-light.gif";
 export const LogoSpinner = () => {
   const { resolvedTheme } = useTheme();
 
-  const logoSrc = resolvedTheme === "dark" ? LogoSpinnerDark : LogoSpinnerLight;
+  const logoSrc = resolvedTheme === "dark" ? LogoSpinnerLight : LogoSpinnerDark;
 
   return (
     <div className="flex items-center justify-center">
-      <Image src={logoSrc} alt="logo" className="w-[82px] h-[82px] mr-2" priority={false} />
+      <Image src={logoSrc} alt="logo" className="h-6 w-auto sm:h-11" />
     </div>
   );
 };

apps/admin/core/components/instance/failure.tsx

@@ -1,13 +1,15 @@
 "use client";
 import { FC } from "react";
+import { observer } from "mobx-react";
 import Image from "next/image";
 import { useTheme } from "next-themes";
 import { Button } from "@plane/ui";
 // assets
+import { AuthHeader } from "@/app/(all)/(home)/auth-header";
 import InstanceFailureDarkImage from "@/public/instance/instance-failure-dark.svg";
 import InstanceFailureImage from "@/public/instance/instance-failure.svg";
 
-export const InstanceFailureView: FC = () => {
+export const InstanceFailureView: FC = observer(() => {
   const { resolvedTheme } = useTheme();
 
   const instanceImage = resolvedTheme === "dark" ? InstanceFailureDarkImage : InstanceFailureImage;
@@ -17,22 +19,24 @@ export const InstanceFailureView: FC = () => {
   };
 
   return (
-    <div className="h-full w-full relative container px-5 mx-auto flex justify-center items-center">
-      <div className="w-auto max-w-2xl relative space-y-8 py-10">
-        <div className="relative flex flex-col justify-center items-center space-y-4">
-          <Image src={instanceImage} alt="Plane Logo" />
-          <h3 className="font-medium text-2xl text-white ">Unable to fetch instance details.</h3>
-          <p className="font-medium text-base text-center">
-            We were unable to fetch the details of the instance. <br />
-            Fret not, it might just be a connectivity issue.
-          </p>
-        </div>
-        <div className="flex justify-center">
-          <Button size="md" onClick={handleRetry}>
-            Retry
-          </Button>
+    <>
+      <AuthHeader />
+      <div className="flex flex-col justify-center items-center flex-grow w-full py-6 mt-10">
+        <div className="relative flex flex-col gap-6 max-w-[22.5rem] w-full">
+          <div className="relative flex flex-col justify-center items-center space-y-4">
+            <Image src={instanceImage} alt="Plane Logo" />
+            <h3 className="font-medium text-2xl text-white text-center">Unable to fetch instance details.</h3>
+            <p className="font-medium text-base text-center">
+              We were unable to fetch the details of the instance. Fret not, it might just be a connectivity issue.
+            </p>
+          </div>
+          <div className="flex justify-center">
+            <Button size="md" onClick={handleRetry}>
+              Retry
+            </Button>
+          </div>
         </div>
       </div>
-    </div>
+    </>
   );
-};
+});

apps/admin/core/components/instance/form-header.tsx

@@ -0,0 +1,8 @@
+"use client";
+
+export const FormHeader = ({ heading, subHeading }: { heading: string; subHeading: string }) => (
+  <div className="flex flex-col gap-1">
+    <span className="text-2xl font-semibold text-custom-text-100 leading-7">{heading}</span>
+    <span className="text-lg font-semibold text-custom-text-400 leading-7">{subHeading}</span>
+  </div>
+);

apps/admin/core/components/instance/instance-not-ready.tsx

@@ -13,7 +13,7 @@ export const InstanceNotReady: FC = () => (
       <div className="relative flex flex-col justify-center items-center space-y-4">
         <h1 className="text-3xl font-bold pb-3">Welcome aboard Plane!</h1>
         <Image src={PlaneTakeOffImage} alt="Plane Logo" />
-        <p className="font-medium text-base text-onboarding-text-400">
+        <p className="font-medium text-base text-custom-text-400">
           Get started by setting up your instance and workspace
         </p>
       </div>

apps/admin/core/components/instance/loading.tsx

@@ -6,16 +6,12 @@ import LogoSpinnerLight from "@/public/images/logo-spinner-light.gif";
 
 export const InstanceLoading = () => {
   const { resolvedTheme } = useTheme();
-  const logoSrc = resolvedTheme === "dark" ? LogoSpinnerDark : LogoSpinnerLight;
+
+  const logoSrc = resolvedTheme === "dark" ? LogoSpinnerLight : LogoSpinnerDark;
 
   return (
-    <div className="h-full w-full relative container px-5 mx-auto flex justify-center items-center">
-      <div className="w-auto max-w-2xl relative space-y-8 py-10">
-        <div className="relative flex flex-col justify-center items-center space-y-4">
-          <Image src={logoSrc} alt="logo" className="w-[82px] h-[82px] mr-2" priority={false} />
-          <h3 className="font-medium text-2xl text-white ">Fetching instance details...</h3>
-        </div>
-      </div>
+    <div className="flex items-center justify-center">
+      <Image src={logoSrc} alt="logo" className="h-6 w-auto sm:h-11" />
     </div>
   );
 };

apps/admin/core/components/instance/setup-form.tsx

@@ -10,7 +10,9 @@ import { AuthService } from "@plane/services";
 import { Button, Checkbox, Input, PasswordStrengthIndicator, Spinner } from "@plane/ui";
 import { getPasswordStrength } from "@plane/utils";
 // components
+import { AuthHeader } from "@/app/(all)/(home)/auth-header";
 import { Banner } from "@/components/common/banner";
+import { FormHeader } from "@/components/instance/form-header";
 
 // service initialization
 const authService = new AuthService();
@@ -131,227 +133,221 @@ export const InstanceSetupForm: FC = (props) => {
   const renderPasswordMatchError = !isRetryPasswordInputFocused || confirmPassword.length >= password.length;
 
   return (
-    <div className="max-w-lg lg:max-w-md w-full">
-      <div className="relative flex flex-col space-y-6">
-        <div className="text-center space-y-1">
-          <h3 className="flex gap-4 justify-center text-3xl font-bold text-onboarding-text-100">
-            Setup your Plane Instance
-          </h3>
-          <p className="font-medium text-onboarding-text-400">
-            Post setup you will be able to manage this Plane instance.
-          </p>
+    <>
+      <AuthHeader />
+      <div className="flex flex-col justify-center items-center flex-grow w-full py-6 mt-10">
+        <div className="relative flex flex-col gap-6 max-w-[22.5rem] w-full">
+          <FormHeader
+            heading="Setup your Plane Instance"
+            subHeading="Post setup you will be able to manage this Plane instance."
+          />
+          {errorData.type &&
+            errorData?.message &&
+            ![EErrorCodes.INVALID_EMAIL, EErrorCodes.INVALID_PASSWORD].includes(errorData.type) && (
+              <Banner type="error" message={errorData?.message} />
+            )}
+          <form
+            className="space-y-4"
+            method="POST"
+            action={`${API_BASE_URL}/api/instances/admins/sign-up/`}
+            onSubmit={() => setIsSubmitting(true)}
+            onError={() => setIsSubmitting(false)}
+          >
+            <input type="hidden" name="csrfmiddlewaretoken" value={csrfToken} />
+            <input type="hidden" name="is_telemetry_enabled" value={formData.is_telemetry_enabled ? "True" : "False"} />
+
+            <div className="flex flex-col sm:flex-row items-center gap-4">
+              <div className="w-full space-y-1">
+                <label className="text-sm text-custom-text-300 font-medium" htmlFor="first_name">
+                  First name <span className="text-red-500">*</span>
+                </label>
+                <Input
+                  className="w-full border border-custom-border-100 !bg-custom-background-100 placeholder:text-custom-text-400"
+                  id="first_name"
+                  name="first_name"
+                  type="text"
+                  inputSize="md"
+                  placeholder="Wilber"
+                  value={formData.first_name}
+                  onChange={(e) => handleFormChange("first_name", e.target.value)}
+                  autoComplete="on"
+                  autoFocus
+                />
+              </div>
+              <div className="w-full space-y-1">
+                <label className="text-sm text-custom-text-300 font-medium" htmlFor="last_name">
+                  Last name <span className="text-red-500">*</span>
+                </label>
+                <Input
+                  className="w-full border border-custom-border-100 !bg-custom-background-100 placeholder:text-custom-text-400"
+                  id="last_name"
+                  name="last_name"
+                  type="text"
+                  inputSize="md"
+                  placeholder="Wright"
+                  value={formData.last_name}
+                  onChange={(e) => handleFormChange("last_name", e.target.value)}
+                  autoComplete="on"
+                />
+              </div>
+            </div>
+
+            <div className="w-full space-y-1">
+              <label className="text-sm text-custom-text-300 font-medium" htmlFor="email">
+                Email <span className="text-red-500">*</span>
+              </label>
+              <Input
+                className="w-full border border-custom-border-100 !bg-custom-background-100 placeholder:text-custom-text-400"
+                id="email"
+                name="email"
+                type="email"
+                inputSize="md"
+                placeholder="name@company.com"
+                value={formData.email}
+                onChange={(e) => handleFormChange("email", e.target.value)}
+                hasError={errorData.type && errorData.type === EErrorCodes.INVALID_EMAIL ? true : false}
+                autoComplete="on"
+              />
+              {errorData.type && errorData.type === EErrorCodes.INVALID_EMAIL && errorData.message && (
+                <p className="px-1 text-xs text-red-500">{errorData.message}</p>
+              )}
+            </div>
+
+            <div className="w-full space-y-1">
+              <label className="text-sm text-custom-text-300 font-medium" htmlFor="company_name">
+                Company name <span className="text-red-500">*</span>
+              </label>
+              <Input
+                className="w-full border border-custom-border-100 !bg-custom-background-100 placeholder:text-custom-text-400"
+                id="company_name"
+                name="company_name"
+                type="text"
+                inputSize="md"
+                placeholder="Company name"
+                value={formData.company_name}
+                onChange={(e) => handleFormChange("company_name", e.target.value)}
+              />
+            </div>
+
+            <div className="w-full space-y-1">
+              <label className="text-sm text-custom-text-300 font-medium" htmlFor="password">
+                Set a password <span className="text-red-500">*</span>
+              </label>
+              <div className="relative">
+                <Input
+                  className="w-full border border-custom-border-100 !bg-custom-background-100 placeholder:text-custom-text-400"
+                  id="password"
+                  name="password"
+                  type={showPassword.password ? "text" : "password"}
+                  inputSize="md"
+                  placeholder="New password..."
+                  value={formData.password}
+                  onChange={(e) => handleFormChange("password", e.target.value)}
+                  hasError={errorData.type && errorData.type === EErrorCodes.INVALID_PASSWORD ? true : false}
+                  onFocus={() => setIsPasswordInputFocused(true)}
+                  onBlur={() => setIsPasswordInputFocused(false)}
+                  autoComplete="on"
+                />
+                {showPassword.password ? (
+                  <button
+                    type="button"
+                    tabIndex={-1}
+                    className="absolute right-3 top-3.5 flex items-center justify-center text-custom-text-400"
+                    onClick={() => handleShowPassword("password")}
+                  >
+                    <EyeOff className="h-4 w-4" />
+                  </button>
+                ) : (
+                  <button
+                    type="button"
+                    tabIndex={-1}
+                    className="absolute right-3 top-3.5 flex items-center justify-center text-custom-text-400"
+                    onClick={() => handleShowPassword("password")}
+                  >
+                    <Eye className="h-4 w-4" />
+                  </button>
+                )}
+              </div>
+              {errorData.type && errorData.type === EErrorCodes.INVALID_PASSWORD && errorData.message && (
+                <p className="px-1 text-xs text-red-500">{errorData.message}</p>
+              )}
+              <PasswordStrengthIndicator password={formData.password} isFocused={isPasswordInputFocused} />
+            </div>
+
+            <div className="w-full space-y-1">
+              <label className="text-sm text-custom-text-300 font-medium" htmlFor="confirm_password">
+                Confirm password <span className="text-red-500">*</span>
+              </label>
+              <div className="relative">
+                <Input
+                  type={showPassword.retypePassword ? "text" : "password"}
+                  id="confirm_password"
+                  name="confirm_password"
+                  inputSize="md"
+                  value={formData.confirm_password}
+                  onChange={(e) => handleFormChange("confirm_password", e.target.value)}
+                  placeholder="Confirm password"
+                  className="w-full border border-custom-border-100 !bg-custom-background-100 pr-12 placeholder:text-custom-text-400"
+                  onFocus={() => setIsRetryPasswordInputFocused(true)}
+                  onBlur={() => setIsRetryPasswordInputFocused(false)}
+                />
+                {showPassword.retypePassword ? (
+                  <button
+                    type="button"
+                    tabIndex={-1}
+                    className="absolute right-3 top-3.5 flex items-center justify-center text-custom-text-400"
+                    onClick={() => handleShowPassword("retypePassword")}
+                  >
+                    <EyeOff className="h-4 w-4" />
+                  </button>
+                ) : (
+                  <button
+                    type="button"
+                    tabIndex={-1}
+                    className="absolute right-3 top-3.5 flex items-center justify-center text-custom-text-400"
+                    onClick={() => handleShowPassword("retypePassword")}
+                  >
+                    <Eye className="h-4 w-4" />
+                  </button>
+                )}
+              </div>
+              {!!formData.confirm_password &&
+                formData.password !== formData.confirm_password &&
+                renderPasswordMatchError && <span className="text-sm text-red-500">Passwords don{"'"}t match</span>}
+            </div>
+
+            <div className="relative flex gap-2">
+              <div>
+                <Checkbox
+                  className="w-4 h-4"
+                  iconClassName="w-3 h-3"
+                  id="is_telemetry_enabled"
+                  onChange={() => handleFormChange("is_telemetry_enabled", !formData.is_telemetry_enabled)}
+                  checked={formData.is_telemetry_enabled}
+                />
+              </div>
+              <label className="text-sm text-custom-text-300 font-medium cursor-pointer" htmlFor="is_telemetry_enabled">
+                Allow Plane to anonymously collect usage events.{" "}
+                <a
+                  tabIndex={-1}
+                  href="https://developers.plane.so/self-hosting/telemetry"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-sm font-medium text-blue-500 hover:text-blue-600 flex-shrink-0"
+                >
+                  See More
+                </a>
+              </label>
+            </div>
+
+            <div className="py-2">
+              <Button type="submit" size="lg" className="w-full" disabled={isButtonDisabled}>
+                {isSubmitting ? <Spinner height="20px" width="20px" /> : "Continue"}
+              </Button>
+            </div>
+          </form>
         </div>
-
-        {errorData.type &&
-          errorData?.message &&
-          ![EErrorCodes.INVALID_EMAIL, EErrorCodes.INVALID_PASSWORD].includes(errorData.type) && (
-            <Banner type="error" message={errorData?.message} />
-          )}
-
-        <form
-          className="space-y-4"
-          method="POST"
-          action={`${API_BASE_URL}/api/instances/admins/sign-up/`}
-          onSubmit={() => setIsSubmitting(true)}
-          onError={() => setIsSubmitting(false)}
-        >
-          <input type="hidden" name="csrfmiddlewaretoken" value={csrfToken} />
-          <input type="hidden" name="is_telemetry_enabled" value={formData.is_telemetry_enabled ? "True" : "False"} />
-
-          <div className="flex flex-col sm:flex-row items-center gap-4">
-            <div className="w-full space-y-1">
-              <label className="text-sm text-onboarding-text-300 font-medium" htmlFor="first_name">
-                First name <span className="text-red-500">*</span>
-              </label>
-              <Input
-                className="w-full border border-onboarding-border-100 !bg-onboarding-background-200 placeholder:text-onboarding-text-400"
-                id="first_name"
-                name="first_name"
-                type="text"
-                inputSize="md"
-                placeholder="Wilber"
-                value={formData.first_name}
-                onChange={(e) => handleFormChange("first_name", e.target.value)}
-                autoComplete="on"
-                autoFocus
-              />
-            </div>
-            <div className="w-full space-y-1">
-              <label className="text-sm text-onboarding-text-300 font-medium" htmlFor="last_name">
-                Last name <span className="text-red-500">*</span>
-              </label>
-              <Input
-                className="w-full border border-onboarding-border-100 !bg-onboarding-background-200 placeholder:text-onboarding-text-400"
-                id="last_name"
-                name="last_name"
-                type="text"
-                inputSize="md"
-                placeholder="Wright"
-                value={formData.last_name}
-                onChange={(e) => handleFormChange("last_name", e.target.value)}
-                autoComplete="on"
-              />
-            </div>
-          </div>
-
-          <div className="w-full space-y-1">
-            <label className="text-sm text-onboarding-text-300 font-medium" htmlFor="email">
-              Email <span className="text-red-500">*</span>
-            </label>
-            <Input
-              className="w-full border border-onboarding-border-100 !bg-onboarding-background-200 placeholder:text-onboarding-text-400"
-              id="email"
-              name="email"
-              type="email"
-              inputSize="md"
-              placeholder="name@company.com"
-              value={formData.email}
-              onChange={(e) => handleFormChange("email", e.target.value)}
-              hasError={errorData.type && errorData.type === EErrorCodes.INVALID_EMAIL ? true : false}
-              autoComplete="on"
-            />
-            {errorData.type && errorData.type === EErrorCodes.INVALID_EMAIL && errorData.message && (
-              <p className="px-1 text-xs text-red-500">{errorData.message}</p>
-            )}
-          </div>
-
-          <div className="w-full space-y-1">
-            <label className="text-sm text-onboarding-text-300 font-medium" htmlFor="company_name">
-              Company name <span className="text-red-500">*</span>
-            </label>
-            <Input
-              className="w-full border border-onboarding-border-100 !bg-onboarding-background-200 placeholder:text-onboarding-text-400"
-              id="company_name"
-              name="company_name"
-              type="text"
-              inputSize="md"
-              placeholder="Company name"
-              value={formData.company_name}
-              onChange={(e) => handleFormChange("company_name", e.target.value)}
-            />
-          </div>
-
-          <div className="w-full space-y-1">
-            <label className="text-sm text-onboarding-text-300 font-medium" htmlFor="password">
-              Set a password <span className="text-red-500">*</span>
-            </label>
-            <div className="relative">
-              <Input
-                className="w-full border border-onboarding-border-100 !bg-onboarding-background-200 placeholder:text-onboarding-text-400"
-                id="password"
-                name="password"
-                type={showPassword.password ? "text" : "password"}
-                inputSize="md"
-                placeholder="New password..."
-                value={formData.password}
-                onChange={(e) => handleFormChange("password", e.target.value)}
-                hasError={errorData.type && errorData.type === EErrorCodes.INVALID_PASSWORD ? true : false}
-                onFocus={() => setIsPasswordInputFocused(true)}
-                onBlur={() => setIsPasswordInputFocused(false)}
-                autoComplete="on"
-              />
-              {showPassword.password ? (
-                <button
-                  type="button"
-                  tabIndex={-1}
-                  className="absolute right-3 top-3.5 flex items-center justify-center text-custom-text-400"
-                  onClick={() => handleShowPassword("password")}
-                >
-                  <EyeOff className="h-4 w-4" />
-                </button>
-              ) : (
-                <button
-                  type="button"
-                  tabIndex={-1}
-                  className="absolute right-3 top-3.5 flex items-center justify-center text-custom-text-400"
-                  onClick={() => handleShowPassword("password")}
-                >
-                  <Eye className="h-4 w-4" />
-                </button>
-              )}
-            </div>
-            {errorData.type && errorData.type === EErrorCodes.INVALID_PASSWORD && errorData.message && (
-              <p className="px-1 text-xs text-red-500">{errorData.message}</p>
-            )}
-            <PasswordStrengthIndicator password={formData.password} isFocused={isPasswordInputFocused} />
-          </div>
-
-          <div className="w-full space-y-1">
-            <label className="text-sm text-onboarding-text-300 font-medium" htmlFor="confirm_password">
-              Confirm password <span className="text-red-500">*</span>
-            </label>
-            <div className="relative">
-              <Input
-                type={showPassword.retypePassword ? "text" : "password"}
-                id="confirm_password"
-                name="confirm_password"
-                inputSize="md"
-                value={formData.confirm_password}
-                onChange={(e) => handleFormChange("confirm_password", e.target.value)}
-                placeholder="Confirm password"
-                className="w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 placeholder:text-onboarding-text-400"
-                onFocus={() => setIsRetryPasswordInputFocused(true)}
-                onBlur={() => setIsRetryPasswordInputFocused(false)}
-              />
-              {showPassword.retypePassword ? (
-                <button
-                  type="button"
-                  tabIndex={-1}
-                  className="absolute right-3 top-3.5 flex items-center justify-center text-custom-text-400"
-                  onClick={() => handleShowPassword("retypePassword")}
-                >
-                  <EyeOff className="h-4 w-4" />
-                </button>
-              ) : (
-                <button
-                  type="button"
-                  tabIndex={-1}
-                  className="absolute right-3 top-3.5 flex items-center justify-center text-custom-text-400"
-                  onClick={() => handleShowPassword("retypePassword")}
-                >
-                  <Eye className="h-4 w-4" />
-                </button>
-              )}
-            </div>
-            {!!formData.confirm_password &&
-              formData.password !== formData.confirm_password &&
-              renderPasswordMatchError && <span className="text-sm text-red-500">Passwords don{"'"}t match</span>}
-          </div>
-
-          <div className="relative flex items-center pt-2 gap-2">
-            <div>
-              <Checkbox
-                className="w-4 h-4"
-                iconClassName="w-3 h-3"
-                id="is_telemetry_enabled"
-                onChange={() => handleFormChange("is_telemetry_enabled", !formData.is_telemetry_enabled)}
-                checked={formData.is_telemetry_enabled}
-              />
-            </div>
-            <label
-              className="text-sm text-onboarding-text-300 font-medium cursor-pointer"
-              htmlFor="is_telemetry_enabled"
-            >
-              Allow Plane to anonymously collect usage events.
-            </label>
-            <a
-              tabIndex={-1}
-              href="https://developers.plane.so/self-hosting/telemetry"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="text-sm font-medium text-blue-500 hover:text-blue-600"
-            >
-              See More
-            </a>
-          </div>
-
-          <div className="py-2">
-            <Button type="submit" size="lg" className="w-full" disabled={isButtonDisabled}>
-              {isSubmitting ? <Spinner height="20px" width="20px" /> : "Continue"}
-            </Button>
-          </div>
-        </form>
       </div>
-    </div>
+    </>
   );
 };

apps/admin/public/favicon/site.webmanifest

@@ -2,8 +2,8 @@
   "name": "",
   "short_name": "",
   "icons": [
-    { "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
-    { "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
+    { "src": "/favicon/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
+    { "src": "/favicon/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
   ],
   "theme_color": "#ffffff",
   "background_color": "#ffffff",

apps/admin/styles/globals.css

@@ -24,24 +24,24 @@
   :root {
     color-scheme: light !important;
 
-    --color-primary-10: 236, 241, 255;
-    --color-primary-20: 217, 228, 255;
-    --color-primary-30: 197, 214, 255;
-    --color-primary-40: 178, 200, 255;
-    --color-primary-50: 159, 187, 255;
-    --color-primary-60: 140, 173, 255;
-    --color-primary-70: 121, 159, 255;
-    --color-primary-80: 101, 145, 255;
-    --color-primary-90: 82, 132, 255;
-    --color-primary-100: 63, 118, 255;
-    --color-primary-200: 57, 106, 230;
-    --color-primary-300: 50, 94, 204;
-    --color-primary-400: 44, 83, 179;
-    --color-primary-500: 38, 71, 153;
-    --color-primary-600: 32, 59, 128;
-    --color-primary-700: 25, 47, 102;
-    --color-primary-800: 19, 35, 76;
-    --color-primary-900: 13, 24, 51;
+    --color-primary-10: 229, 243, 250;
+    --color-primary-20: 216, 237, 248;
+    --color-primary-30: 199, 229, 244;
+    --color-primary-40: 169, 214, 239;
+    --color-primary-50: 144, 202, 234;
+    --color-primary-60: 109, 186, 227;
+    --color-primary-70: 75, 170, 221;
+    --color-primary-80: 41, 154, 214;
+    --color-primary-90: 34, 129, 180;
+    --color-primary-100: 0, 99, 153;
+    --color-primary-200: 0, 92, 143;
+    --color-primary-300: 0, 86, 133;
+    --color-primary-400: 0, 77, 117;
+    --color-primary-500: 0, 66, 102;
+    --color-primary-600: 0, 53, 82;
+    --color-primary-700: 0, 43, 66;
+    --color-primary-800: 0, 33, 51;
+    --color-primary-900: 0, 23, 36;
 
     --color-background-100: 255, 255, 255; /* primary bg */
     --color-background-90: 247, 247, 247; /* secondary bg */
@@ -135,28 +135,6 @@
     --color-border-300: 212, 212, 212; /* strong border- 1 */
     --color-border-400: 185, 185, 185; /* strong border- 2 */
 
-    /* onboarding colors */
-    --gradient-onboarding-100: linear-gradient(106deg, #f2f6ff 29.8%, #e1eaff 99.34%);
-    --gradient-onboarding-200: linear-gradient(129deg, rgba(255, 255, 255, 0) -22.23%, rgba(255, 255, 255, 0.8) 62.98%);
-    --gradient-onboarding-300: linear-gradient(164deg, #fff 4.25%, rgba(255, 255, 255, 0.06) 93.5%);
-    --gradient-onboarding-400: linear-gradient(129deg, rgba(255, 255, 255, 0) -22.23%, rgba(255, 255, 255, 0.8) 62.98%);
-
-    --color-onboarding-text-100: 23, 23, 23;
-    --color-onboarding-text-200: 58, 58, 58;
-    --color-onboarding-text-300: 82, 82, 82;
-    --color-onboarding-text-400: 163, 163, 163;
-
-    --color-onboarding-background-100: 236, 241, 255;
-    --color-onboarding-background-200: 255, 255, 255;
-    --color-onboarding-background-300: 236, 241, 255;
-    --color-onboarding-background-400: 177, 206, 250;
-
-    --color-onboarding-border-100: 229, 229, 229;
-    --color-onboarding-border-200: 217, 228, 255;
-    --color-onboarding-border-300: 229, 229, 229, 0.5;
-
-    --color-onboarding-shadow-sm: 0px 4px 20px 0px rgba(126, 139, 171, 0.1);
-
     /* toast theme */
     --color-toast-success-text: 62, 155, 79;
     --color-toast-error-text: 220, 62, 66;
@@ -197,6 +175,25 @@
   [data-theme="dark-contrast"] {
     color-scheme: dark !important;
 
+    --color-primary-10: 8, 31, 43;
+    --color-primary-20: 10, 37, 51;
+    --color-primary-30: 13, 49, 69;
+    --color-primary-40: 16, 58, 81;
+    --color-primary-50: 18, 68, 94;
+    --color-primary-60: 23, 86, 120;
+    --color-primary-70: 28, 104, 146;
+    --color-primary-80: 31, 116, 163;
+    --color-primary-90: 34, 129, 180;
+    --color-primary-100: 40, 146, 204;
+    --color-primary-200: 41, 154, 214;
+    --color-primary-300: 75, 170, 221;
+    --color-primary-400: 109, 186, 227;
+    --color-primary-500: 144, 202, 234;
+    --color-primary-600: 169, 214, 239;
+    --color-primary-700: 199, 229, 244;
+    --color-primary-800: 216, 237, 248;
+    --color-primary-900: 229, 243, 250;
+
     --color-background-100: 25, 25, 25; /* primary bg */
     --color-background-90: 32, 32, 32; /* secondary bg */
     --color-background-80: 44, 44, 44; /* tertiary bg */
@@ -225,27 +222,6 @@
     --color-border-300: 46, 46, 46; /* strong border- 1 */
     --color-border-400: 58, 58, 58; /* strong border- 2 */
 
-    /* onboarding colors */
-    --gradient-onboarding-100: linear-gradient(106deg, #18191b 25.17%, #18191b 99.34%);
-    --gradient-onboarding-200: linear-gradient(129deg, rgba(47, 49, 53, 0.8) -22.23%, rgba(33, 34, 37, 0.8) 62.98%);
-    --gradient-onboarding-300: linear-gradient(167deg, rgba(47, 49, 53, 0.45) 19.22%, #212225 98.48%);
-
-    --color-onboarding-text-100: 237, 238, 240;
-    --color-onboarding-text-200: 176, 180, 187;
-    --color-onboarding-text-300: 118, 123, 132;
-    --color-onboarding-text-400: 105, 110, 119;
-
-    --color-onboarding-background-100: 54, 58, 64;
-    --color-onboarding-background-200: 40, 42, 45;
-    --color-onboarding-background-300: 40, 42, 45;
-    --color-onboarding-background-400: 67, 72, 79;
-
-    --color-onboarding-border-100: 54, 58, 64;
-    --color-onboarding-border-200: 54, 58, 64;
-    --color-onboarding-border-300: 34, 35, 38, 0.5;
-
-    --color-onboarding-shadow-sm: 0px 4px 20px 0px rgba(39, 44, 56, 0.1);
-
     /* toast theme */
     --color-toast-success-text: 178, 221, 181;
     --color-toast-error-text: 206, 44, 49;
@@ -286,25 +262,6 @@
   [data-theme="dark"],
   [data-theme="light-contrast"],
   [data-theme="dark-contrast"] {
-    --color-primary-10: 236, 241, 255;
-    --color-primary-20: 217, 228, 255;
-    --color-primary-30: 197, 214, 255;
-    --color-primary-40: 178, 200, 255;
-    --color-primary-50: 159, 187, 255;
-    --color-primary-60: 140, 173, 255;
-    --color-primary-70: 121, 159, 255;
-    --color-primary-80: 101, 145, 255;
-    --color-primary-90: 82, 132, 255;
-    --color-primary-100: 63, 118, 255;
-    --color-primary-200: 57, 106, 230;
-    --color-primary-300: 50, 94, 204;
-    --color-primary-400: 44, 83, 179;
-    --color-primary-500: 38, 71, 153;
-    --color-primary-600: 32, 59, 128;
-    --color-primary-700: 25, 47, 102;
-    --color-primary-800: 19, 35, 76;
-    --color-primary-900: 13, 24, 51;
-
     --color-sidebar-background-100: var(--color-background-100); /* primary sidebar bg */
     --color-sidebar-background-90: var(--color-background-90); /* secondary sidebar bg */
     --color-sidebar-background-80: var(--color-background-80); /* tertiary sidebar bg */

apps/api/plane/api/serializers/issue.py

@@ -22,6 +22,11 @@ from plane.db.models import (
     User,
     EstimatePoint,
 )
+from plane.utils.content_validator import (
+    validate_html_content,
+    validate_json_content,
+    validate_binary_data,
+)
 
 from .base import BaseSerializer
 from .cycle import CycleLiteSerializer, CycleSerializer
@@ -83,6 +88,22 @@ class IssueSerializer(BaseSerializer):
         except Exception:
             raise serializers.ValidationError("Invalid HTML passed")
 
+        # Validate description content for security
+        if data.get("description"):
+            is_valid, error_msg = validate_json_content(data["description"])
+            if not is_valid:
+                raise serializers.ValidationError({"description": error_msg})
+
+        if data.get("description_html"):
+            is_valid, error_msg = validate_html_content(data["description_html"])
+            if not is_valid:
+                raise serializers.ValidationError({"description_html": error_msg})
+
+        if data.get("description_binary"):
+            is_valid, error_msg = validate_binary_data(data["description_binary"])
+            if not is_valid:
+                raise serializers.ValidationError({"description_binary": error_msg})
+
         # Validate assignees are from project
         if data.get("assignees", []):
             data["assignees"] = ProjectMember.objects.filter(
@@ -648,7 +669,6 @@ class IssueExpandSerializer(BaseSerializer):
     assignees = serializers.SerializerMethodField()
     state = StateLiteSerializer(read_only=True)
 
-
     def get_labels(self, obj):
         expand = self.context.get("expand", [])
         if "labels" in expand:
@@ -666,7 +686,6 @@ class IssueExpandSerializer(BaseSerializer):
             ).data
         return [ia.assignee_id for ia in obj.issue_assignee.all()]
 
-
     class Meta:
         model = Issue
         fields = "__all__"

apps/api/plane/api/serializers/project.py

@@ -10,6 +10,10 @@ from plane.db.models import (
     Estimate,
 )
 
+from plane.utils.content_validator import (
+    validate_html_content,
+    validate_json_content,
+)
 from .base import BaseSerializer
 
 
@@ -191,6 +195,29 @@ class ProjectSerializer(BaseSerializer):
                 "Default assignee should be a user in the workspace"
             )
 
+        # Validate description content for security
+        if "description" in data and data["description"]:
+            # For Project, description might be text field, not JSON
+            if isinstance(data["description"], dict):
+                is_valid, error_msg = validate_json_content(data["description"])
+                if not is_valid:
+                    raise serializers.ValidationError({"description": error_msg})
+
+        if "description_text" in data and data["description_text"]:
+            is_valid, error_msg = validate_json_content(data["description_text"])
+            if not is_valid:
+                raise serializers.ValidationError({"description_text": error_msg})
+
+        if "description_html" in data and data["description_html"]:
+            if isinstance(data["description_html"], dict):
+                is_valid, error_msg = validate_json_content(data["description_html"])
+            else:
+                is_valid, error_msg = validate_html_content(
+                    str(data["description_html"])
+                )
+            if not is_valid:
+                raise serializers.ValidationError({"description_html": error_msg})
+
         return data
 
     def create(self, validated_data):

apps/api/plane/api/views/issue.py

@@ -947,7 +947,7 @@ class LabelListCreateAPIEndpoint(BaseAPIView):
         )
 
 
-class LabelDetailAPIEndpoint(BaseAPIView):
+class LabelDetailAPIEndpoint(LabelListCreateAPIEndpoint):
     """Label Detail Endpoint"""
 
     serializer_class = LabelSerializer
@@ -1012,14 +1012,16 @@ class LabelDetailAPIEndpoint(BaseAPIView):
             if (
                 str(request.data.get("external_id"))
                 and (label.external_id != str(request.data.get("external_id")))
-                and Issue.objects.filter(
+                and Label.objects.filter(
                     project_id=project_id,
                     workspace__slug=slug,
                     external_source=request.data.get(
                         "external_source", label.external_source
                     ),
                     external_id=request.data.get("external_id"),
-                ).exists()
+                )
+                .exclude(id=pk)
+                .exists()
             ):
                 return Response(
                     {
@@ -1465,7 +1467,7 @@ class IssueCommentListCreateAPIEndpoint(BaseAPIView):
             # Send the model activity
             model_activity.delay(
                 model_name="issue_comment",
-                model_id=str(serializer.data["id"]),
+                model_id=str(serializer.instance.id),
                 requested_data=request.data,
                 current_instance=None,
                 actor_id=request.user.id,

apps/api/plane/app/serializers/__init__.py

@@ -96,6 +96,7 @@ from .page import (
     SubPageSerializer,
     PageDetailSerializer,
     PageVersionSerializer,
+    PageBinaryUpdateSerializer,
     PageVersionDetailSerializer,
 )
 

apps/api/plane/app/serializers/draft.py

@@ -21,6 +21,11 @@ from plane.db.models import (
     ProjectMember,
     EstimatePoint,
 )
+from plane.utils.content_validator import (
+    validate_html_content,
+    validate_json_content,
+    validate_binary_data,
+)
 from plane.app.permissions import ROLE
 
 
@@ -70,14 +75,21 @@ class DraftIssueCreateSerializer(BaseSerializer):
         ):
             raise serializers.ValidationError("Start date cannot exceed target date")
 
-        try:
-            if attrs.get("description_html", None) is not None:
-                parsed = html.fromstring(attrs["description_html"])
-                parsed_str = html.tostring(parsed, encoding="unicode")
-                attrs["description_html"] = parsed_str
+        # Validate description content for security
+        if "description" in attrs and attrs["description"]:
+            is_valid, error_msg = validate_json_content(attrs["description"])
+            if not is_valid:
+                raise serializers.ValidationError({"description": error_msg})
 
-        except Exception:
-            raise serializers.ValidationError("Invalid HTML passed")
+        if "description_html" in attrs and attrs["description_html"]:
+            is_valid, error_msg = validate_html_content(attrs["description_html"])
+            if not is_valid:
+                raise serializers.ValidationError({"description_html": error_msg})
+
+        if "description_binary" in attrs and attrs["description_binary"]:
+            is_valid, error_msg = validate_binary_data(attrs["description_binary"])
+            if not is_valid:
+                raise serializers.ValidationError({"description_binary": error_msg})
 
         # Validate assignees are from project
         if attrs.get("assignee_ids", []):
@@ -248,7 +260,7 @@ class DraftIssueCreateSerializer(BaseSerializer):
             DraftIssueLabel.objects.bulk_create(
                 [
                     DraftIssueLabel(
-                        label=label,
+                        label_id=label,
                         draft_issue=instance,
                         workspace_id=workspace_id,
                         project_id=project_id,

apps/api/plane/app/serializers/issue.py

@@ -41,6 +41,11 @@ from plane.db.models import (
     ProjectMember,
     EstimatePoint,
 )
+from plane.utils.content_validator import (
+    validate_html_content,
+    validate_json_content,
+    validate_binary_data,
+)
 
 
 class IssueFlatSerializer(BaseSerializer):
@@ -122,14 +127,21 @@ class IssueCreateSerializer(BaseSerializer):
         ):
             raise serializers.ValidationError("Start date cannot exceed target date")
 
-        try:
-            if attrs.get("description_html", None) is not None:
-                parsed = html.fromstring(attrs["description_html"])
-                parsed_str = html.tostring(parsed, encoding="unicode")
-                attrs["description_html"] = parsed_str
+        # Validate description content for security
+        if "description" in attrs and attrs["description"]:
+            is_valid, error_msg = validate_json_content(attrs["description"])
+            if not is_valid:
+                raise serializers.ValidationError({"description": error_msg})
 
-        except Exception:
-            raise serializers.ValidationError("Invalid HTML passed")
+        if "description_html" in attrs and attrs["description_html"]:
+            is_valid, error_msg = validate_html_content(attrs["description_html"])
+            if not is_valid:
+                raise serializers.ValidationError({"description_html": error_msg})
+
+        if "description_binary" in attrs and attrs["description_binary"]:
+            is_valid, error_msg = validate_binary_data(attrs["description_binary"])
+            if not is_valid:
+                raise serializers.ValidationError({"description_binary": error_msg})
 
         # Validate assignees are from project
         if attrs.get("assignee_ids", []):

apps/api/plane/app/serializers/page.py

@@ -1,8 +1,14 @@
 # Third party imports
 from rest_framework import serializers
+import base64
 
 # Module imports
 from .base import BaseSerializer
+from plane.utils.content_validator import (
+    validate_binary_data,
+    validate_html_content,
+    validate_json_content,
+)
 from plane.db.models import (
     Page,
     PageLog,
@@ -186,3 +192,71 @@ class PageVersionDetailSerializer(BaseSerializer):
             "updated_by",
         ]
         read_only_fields = ["workspace", "page"]
+
+
+class PageBinaryUpdateSerializer(serializers.Serializer):
+    """Serializer for updating page binary description with validation"""
+
+    description_binary = serializers.CharField(required=False, allow_blank=True)
+    description_html = serializers.CharField(required=False, allow_blank=True)
+    description = serializers.JSONField(required=False, allow_null=True)
+
+    def validate_description_binary(self, value):
+        """Validate the base64-encoded binary data"""
+        if not value:
+            return value
+
+        try:
+            # Decode the base64 data
+            binary_data = base64.b64decode(value)
+
+            # Validate the binary data
+            is_valid, error_message = validate_binary_data(binary_data)
+            if not is_valid:
+                raise serializers.ValidationError(
+                    f"Invalid binary data: {error_message}"
+                )
+
+            return binary_data
+        except Exception as e:
+            if isinstance(e, serializers.ValidationError):
+                raise
+            raise serializers.ValidationError("Failed to decode base64 data")
+
+    def validate_description_html(self, value):
+        """Validate the HTML content"""
+        if not value:
+            return value
+
+        # Use the validation function from utils
+        is_valid, error_message = validate_html_content(value)
+        if not is_valid:
+            raise serializers.ValidationError(error_message)
+
+        return value
+
+    def validate_description(self, value):
+        """Validate the JSON description"""
+        if not value:
+            return value
+
+        # Use the validation function from utils
+        is_valid, error_message = validate_json_content(value)
+        if not is_valid:
+            raise serializers.ValidationError(error_message)
+
+        return value
+
+    def update(self, instance, validated_data):
+        """Update the page instance with validated data"""
+        if "description_binary" in validated_data:
+            instance.description_binary = validated_data.get("description_binary")
+
+        if "description_html" in validated_data:
+            instance.description_html = validated_data.get("description_html")
+
+        if "description" in validated_data:
+            instance.description = validated_data.get("description")
+
+        instance.save()
+        return instance

apps/api/plane/app/serializers/project.py

@@ -13,6 +13,11 @@ from plane.db.models import (
     DeployBoard,
     ProjectPublicMember,
 )
+from plane.utils.content_validator import (
+    validate_html_content,
+    validate_json_content,
+    validate_binary_data,
+)
 
 
 class ProjectSerializer(BaseSerializer):
@@ -58,6 +63,32 @@ class ProjectSerializer(BaseSerializer):
 
         return identifier
 
+    def validate(self, data):
+        # Validate description content for security
+        if "description" in data and data["description"]:
+            # For Project, description might be text field, not JSON
+            if isinstance(data["description"], dict):
+                is_valid, error_msg = validate_json_content(data["description"])
+                if not is_valid:
+                    raise serializers.ValidationError({"description": error_msg})
+
+        if "description_text" in data and data["description_text"]:
+            is_valid, error_msg = validate_json_content(data["description_text"])
+            if not is_valid:
+                raise serializers.ValidationError({"description_text": error_msg})
+
+        if "description_html" in data and data["description_html"]:
+            if isinstance(data["description_html"], dict):
+                is_valid, error_msg = validate_json_content(data["description_html"])
+            else:
+                is_valid, error_msg = validate_html_content(
+                    str(data["description_html"])
+                )
+            if not is_valid:
+                raise serializers.ValidationError({"description_html": error_msg})
+
+        return data
+
     def create(self, validated_data):
         workspace_id = self.context["workspace_id"]
 

apps/api/plane/app/serializers/workspace.py

@@ -24,6 +24,11 @@ from plane.db.models import (
 )
 from plane.utils.constants import RESTRICTED_WORKSPACE_SLUGS
 from plane.utils.url import contains_url
+from plane.utils.content_validator import (
+    validate_html_content,
+    validate_json_content,
+    validate_binary_data,
+)
 
 # Django imports
 from django.core.validators import URLValidator
@@ -312,6 +317,25 @@ class StickySerializer(BaseSerializer):
         read_only_fields = ["workspace", "owner"]
         extra_kwargs = {"name": {"required": False}}
 
+    def validate(self, data):
+        # Validate description content for security
+        if "description" in data and data["description"]:
+            is_valid, error_msg = validate_json_content(data["description"])
+            if not is_valid:
+                raise serializers.ValidationError({"description": error_msg})
+
+        if "description_html" in data and data["description_html"]:
+            is_valid, error_msg = validate_html_content(data["description_html"])
+            if not is_valid:
+                raise serializers.ValidationError({"description_html": error_msg})
+
+        if "description_binary" in data and data["description_binary"]:
+            is_valid, error_msg = validate_binary_data(data["description_binary"])
+            if not is_valid:
+                raise serializers.ValidationError({"description_binary": error_msg})
+
+        return data
+
 
 class WorkspaceUserPreferenceSerializer(BaseSerializer):
     class Meta:

apps/api/plane/app/views/issue/base.py

@@ -15,6 +15,7 @@ from django.db.models import (
     UUIDField,
     Value,
     Subquery,
+    Count,
 )
 from django.db.models.functions import Coalesce
 from django.utils import timezone
@@ -453,10 +454,12 @@ class IssueViewSet(BaseViewSet):
         project = Project.objects.get(pk=project_id, workspace__slug=slug)
 
         issue = (
-            Issue.objects.filter(project_id=self.kwargs.get("project_id"))
-            .filter(workspace__slug=self.kwargs.get("slug"))
-            .select_related("workspace", "project", "state", "parent")
-            .prefetch_related("assignees", "labels", "issue_module__module")
+            Issue.objects.filter(
+                project_id=self.kwargs.get("project_id"),
+                workspace__slug=self.kwargs.get("slug"),
+                pk=pk,
+            )
+            .select_related("state")
             .annotate(
                 cycle_id=Subquery(
                     CycleIssue.objects.filter(issue=OuterRef("id")).values("cycle_id")[
@@ -465,60 +468,63 @@ class IssueViewSet(BaseViewSet):
                 )
             )
             .annotate(
-                link_count=IssueLink.objects.filter(issue=OuterRef("id"))
-                .order_by()
-                .annotate(count=Func(F("id"), function="Count"))
-                .values("count")
-            )
-            .annotate(
-                attachment_count=FileAsset.objects.filter(
-                    issue_id=OuterRef("id"),
-                    entity_type=FileAsset.EntityTypeContext.ISSUE_ATTACHMENT,
+                link_count=Subquery(
+                    IssueLink.objects.filter(issue=OuterRef("id"))
+                    .values("issue")
+                    .annotate(count=Count("id"))
+                    .values("count")
                 )
-                .order_by()
-                .annotate(count=Func(F("id"), function="Count"))
-                .values("count")
             )
             .annotate(
-                sub_issues_count=Issue.issue_objects.filter(parent=OuterRef("id"))
-                .order_by()
-                .annotate(count=Func(F("id"), function="Count"))
-                .values("count")
+                attachment_count=Subquery(
+                    FileAsset.objects.filter(
+                        issue_id=OuterRef("id"),
+                        entity_type=FileAsset.EntityTypeContext.ISSUE_ATTACHMENT,
+                    )
+                    .values("issue_id")
+                    .annotate(count=Count("id"))
+                    .values("count")
+                )
+            )
+            .annotate(
+                sub_issues_count=Subquery(
+                    Issue.issue_objects.filter(parent=OuterRef("id"))
+                    .values("parent")
+                    .annotate(count=Count("id"))
+                    .values("count")
+                )
             )
-            .filter(pk=pk)
             .annotate(
                 label_ids=Coalesce(
-                    ArrayAgg(
-                        "labels__id",
-                        distinct=True,
-                        filter=Q(
-                            ~Q(labels__id__isnull=True)
-                            & Q(label_issue__deleted_at__isnull=True)
-                        ),
+                    Subquery(
+                        IssueLabel.objects.filter(issue_id=OuterRef("pk"))
+                        .values("issue_id")
+                        .annotate(arr=ArrayAgg("label_id", distinct=True))
+                        .values("arr")
                     ),
                     Value([], output_field=ArrayField(UUIDField())),
                 ),
                 assignee_ids=Coalesce(
-                    ArrayAgg(
-                        "assignees__id",
-                        distinct=True,
-                        filter=Q(
-                            ~Q(assignees__id__isnull=True)
-                            & Q(assignees__member_project__is_active=True)
-                            & Q(issue_assignee__deleted_at__isnull=True)
-                        ),
+                    Subquery(
+                        IssueAssignee.objects.filter(
+                            issue_id=OuterRef("pk"),
+                            assignee__member_project__is_active=True,
+                        )
+                        .values("issue_id")
+                        .annotate(arr=ArrayAgg("assignee_id", distinct=True))
+                        .values("arr")
                     ),
                     Value([], output_field=ArrayField(UUIDField())),
                 ),
                 module_ids=Coalesce(
-                    ArrayAgg(
-                        "issue_module__module_id",
-                        distinct=True,
-                        filter=Q(
-                            ~Q(issue_module__module_id__isnull=True)
-                            & Q(issue_module__module__archived_at__isnull=True)
-                            & Q(issue_module__deleted_at__isnull=True)
-                        ),
+                    Subquery(
+                        ModuleIssue.objects.filter(
+                            issue_id=OuterRef("pk"),
+                            module__archived_at__isnull=True,
+                        )
+                        .values("issue_id")
+                        .annotate(arr=ArrayAgg("module_id", distinct=True))
+                        .values("arr")
                     ),
                     Value([], output_field=ArrayField(UUIDField())),
                 ),
@@ -786,37 +792,42 @@ class IssuePaginatedViewSet(BaseViewSet):
         )
 
         return (
-            issue_queryset.select_related("workspace", "project", "state", "parent")
-            .prefetch_related("assignees", "labels", "issue_module__module")
+            issue_queryset.select_related("state")
             .annotate(
                 cycle_id=Subquery(
-                    CycleIssue.objects.filter(
-                        issue=OuterRef("id"), deleted_at__isnull=True
-                    ).values("cycle_id")[:1]
+                    CycleIssue.objects.filter(issue=OuterRef("id")).values("cycle_id")[
+                        :1
+                    ]
                 )
             )
             .annotate(
-                link_count=IssueLink.objects.filter(issue=OuterRef("id"))
-                .order_by()
-                .annotate(count=Func(F("id"), function="Count"))
-                .values("count")
-            )
-            .annotate(
-                attachment_count=FileAsset.objects.filter(
-                    issue_id=OuterRef("id"),
-                    entity_type=FileAsset.EntityTypeContext.ISSUE_ATTACHMENT,
+                link_count=Subquery(
+                    IssueLink.objects.filter(issue=OuterRef("id"))
+                    .values("issue")
+                    .annotate(count=Count("id"))
+                    .values("count")
                 )
-                .order_by()
-                .annotate(count=Func(F("id"), function="Count"))
-                .values("count")
             )
             .annotate(
-                sub_issues_count=Issue.issue_objects.filter(parent=OuterRef("id"))
-                .order_by()
-                .annotate(count=Func(F("id"), function="Count"))
-                .values("count")
+                attachment_count=Subquery(
+                    FileAsset.objects.filter(
+                        issue_id=OuterRef("id"),
+                        entity_type=FileAsset.EntityTypeContext.ISSUE_ATTACHMENT,
+                    )
+                    .values("issue_id")
+                    .annotate(count=Count("id"))
+                    .values("count")
+                )
             )
-        ).distinct()
+            .annotate(
+                sub_issues_count=Subquery(
+                    Issue.issue_objects.filter(parent=OuterRef("id"))
+                    .values("parent")
+                    .annotate(count=Count("id"))
+                    .values("count")
+                )
+            )
+        )
 
     def process_paginated_result(self, fields, results, timezone):
         paginated_data = results.values(*fields)
@@ -896,37 +907,35 @@ class IssuePaginatedViewSet(BaseViewSet):
 
         queryset = queryset.annotate(
             label_ids=Coalesce(
-                ArrayAgg(
-                    "labels__id",
-                    distinct=True,
-                    filter=Q(
-                        ~Q(labels__id__isnull=True)
-                        & Q(label_issue__deleted_at__isnull=True)
-                    ),
+                Subquery(
+                    IssueLabel.objects.filter(issue_id=OuterRef("pk"))
+                    .values("issue_id")
+                    .annotate(arr=ArrayAgg("label_id", distinct=True))
+                    .values("arr")
                 ),
                 Value([], output_field=ArrayField(UUIDField())),
             ),
             assignee_ids=Coalesce(
-                ArrayAgg(
-                    "assignees__id",
-                    distinct=True,
-                    filter=Q(
-                        ~Q(assignees__id__isnull=True)
-                        & Q(assignees__member_project__is_active=True)
-                        & Q(issue_assignee__deleted_at__isnull=True)
-                    ),
+                Subquery(
+                    IssueAssignee.objects.filter(
+                        issue_id=OuterRef("pk"),
+                        assignee__member_project__is_active=True,
+                    )
+                    .values("issue_id")
+                    .annotate(arr=ArrayAgg("assignee_id", distinct=True))
+                    .values("arr")
                 ),
                 Value([], output_field=ArrayField(UUIDField())),
             ),
             module_ids=Coalesce(
-                ArrayAgg(
-                    "issue_module__module_id",
-                    distinct=True,
-                    filter=Q(
-                        ~Q(issue_module__module_id__isnull=True)
-                        & Q(issue_module__module__archived_at__isnull=True)
-                        & Q(issue_module__deleted_at__isnull=True)
-                    ),
+                Subquery(
+                    ModuleIssue.objects.filter(
+                        issue_id=OuterRef("pk"),
+                        module__archived_at__isnull=True,
+                    )
+                    .values("issue_id")
+                    .annotate(arr=ArrayAgg("module_id", distinct=True))
+                    .values("arr")
                 ),
                 Value([], output_field=ArrayField(UUIDField())),
             ),

apps/api/plane/app/views/page/base.py

@@ -25,6 +25,7 @@ from plane.app.serializers import (
     PageSerializer,
     SubPageSerializer,
     PageDetailSerializer,
+    PageBinaryUpdateSerializer,
 )
 from plane.db.models import (
     Page,
@@ -538,32 +539,27 @@ class PagesDescriptionViewSet(BaseViewSet):
             {"description_html": page.description_html}, cls=DjangoJSONEncoder
         )
 
-        # Get the base64 data from the request
-        base64_data = request.data.get("description_binary")
-
-        # If base64 data is provided
-        if base64_data:
-            # Decode the base64 data to bytes
-            new_binary_data = base64.b64decode(base64_data)
-            # capture the page transaction
+        # Use serializer for validation and update
+        serializer = PageBinaryUpdateSerializer(page, data=request.data, partial=True)
+        if serializer.is_valid():
+            # Capture the page transaction
             if request.data.get("description_html"):
                 page_transaction.delay(
                     new_value=request.data, old_value=existing_instance, page_id=pk
                 )
-            # Store the updated binary data
-            page.description_binary = new_binary_data
-            page.description_html = request.data.get("description_html")
-            page.description = request.data.get("description")
-            page.save()
-            # Return a success response
+
+            # Update the page using serializer
+            updated_page = serializer.save()
+
+            # Run background tasks
             page_version.delay(
-                page_id=page.id,
+                page_id=updated_page.id,
                 existing_instance=existing_instance,
                 user_id=request.user.id,
             )
             return Response({"message": "Updated successfully"})
         else:
-            return Response({"error": "No binary data provided"})
+            return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
 
 
 class PageDuplicateEndpoint(BaseAPIView):

apps/api/plane/bgtasks/email_notification_task.py

@@ -282,7 +282,7 @@ def send_email_notification(
                 "project_url": f"{base_api}/{str(issue.project.workspace.slug)}/projects/{str(issue.project.id)}/issues/",
                 "workspace": str(issue.project.workspace.slug),
                 "project": str(issue.project.name),
-                "user_preference": f"{base_api}/profile/preferences/email",
+                "user_preference": f"{base_api}/{str(issue.project.workspace.slug)}/settings/account/notifications/",
                 "comments": comments,
                 "entity_type": "issue",
             }

apps/api/plane/db/models/user.py

@@ -226,6 +226,9 @@ class Profile(TimeAuditModel):
     goals = models.JSONField(default=dict)
     background_color = models.CharField(max_length=255, default=get_random_color)
 
+    # marketing
+    has_marketing_email_consent = models.BooleanField(default=False)
+
     class Meta:
         verbose_name = "Profile"
         verbose_name_plural = "Profiles"
@@ -273,9 +276,9 @@ def create_user_notification(sender, instance, created, **kwargs):
 
         UserNotificationPreference.objects.create(
             user=instance,
-            property_change=False,
-            state_change=False,
-            comment=False,
-            mention=False,
-            issue_completed=False,
+            property_change=True,
+            state_change=True,
+            comment=True,
+            mention=True,
+            issue_completed=True,
         )

apps/api/plane/space/serializer/issue.py

@@ -28,6 +28,11 @@ from plane.db.models import (
     IssueVote,
     IssueRelation,
 )
+from plane.utils.content_validator import (
+    validate_html_content,
+    validate_json_content,
+    validate_binary_data,
+)
 
 
 class IssueStateFlatSerializer(BaseSerializer):
@@ -283,6 +288,23 @@ class IssueCreateSerializer(BaseSerializer):
             and data.get("start_date", None) > data.get("target_date", None)
         ):
             raise serializers.ValidationError("Start date cannot exceed target date")
+
+        # Validate description content for security
+        if "description" in data and data["description"]:
+            is_valid, error_msg = validate_json_content(data["description"])
+            if not is_valid:
+                raise serializers.ValidationError({"description": error_msg})
+
+        if "description_html" in data and data["description_html"]:
+            is_valid, error_msg = validate_html_content(data["description_html"])
+            if not is_valid:
+                raise serializers.ValidationError({"description_html": error_msg})
+
+        if "description_binary" in data and data["description_binary"]:
+            is_valid, error_msg = validate_binary_data(data["description_binary"])
+            if not is_valid:
+                raise serializers.ValidationError({"description_binary": error_msg})
+
         return data
 
     def create(self, validated_data):

apps/api/plane/tests/contract/api/test_labels.py

@@ -0,0 +1,228 @@
+import pytest
+from rest_framework import status
+from django.db import IntegrityError
+from uuid import uuid4
+
+from plane.db.models import Label, Project, ProjectMember
+
+
+@pytest.fixture
+def project(db, workspace, create_user):
+    """Create a test project with the user as a member"""
+    project = Project.objects.create(
+        name="Test Project",
+        identifier="TP",
+        workspace=workspace,
+        created_by=create_user,
+    )
+    ProjectMember.objects.create(
+        project=project,
+        member=create_user,
+        role=20,  # Admin role
+        is_active=True,
+    )
+    return project
+
+
+@pytest.fixture
+def label_data():
+    """Sample label data for tests"""
+    return {
+        "name": "Test Label",
+        "color": "#FF5733",
+        "description": "A test label for unit tests",
+    }
+
+
+@pytest.fixture
+def create_label(db, project, create_user):
+    """Create a test label"""
+    return Label.objects.create(
+        name="Existing Label",
+        color="#00FF00",
+        description="An existing label",
+        project=project,
+        workspace=project.workspace,
+        created_by=create_user,
+    )
+
+
+@pytest.mark.contract
+class TestLabelListCreateAPIEndpoint:
+    """Test Label List and Create API Endpoint"""
+
+    def get_label_url(self, workspace_slug, project_id):
+        """Helper to get label endpoint URL"""
+        return f"/api/v1/workspaces/{workspace_slug}/projects/{project_id}/labels/"
+
+    @pytest.mark.django_db
+    def test_create_label_success(self, api_key_client, workspace, project, label_data):
+        """Test successful label creation"""
+        url = self.get_label_url(workspace.slug, project.id)
+
+        response = api_key_client.post(url, label_data, format="json")
+
+        assert response.status_code == status.HTTP_201_CREATED
+        assert Label.objects.count() == 1
+
+        created_label = Label.objects.first()
+        assert created_label.name == label_data["name"]
+        assert created_label.color == label_data["color"]
+        assert created_label.description == label_data["description"]
+        assert created_label.project == project
+
+    @pytest.mark.django_db
+    def test_create_label_invalid_data(self, api_key_client, workspace, project):
+        """Test label creation with invalid data"""
+        url = self.get_label_url(workspace.slug, project.id)
+
+        # Test with empty data
+        response = api_key_client.post(url, {}, format="json")
+        assert response.status_code == status.HTTP_400_BAD_REQUEST
+
+        # Test with missing name
+        response = api_key_client.post(url, {"color": "#FF5733"}, format="json")
+        assert response.status_code == status.HTTP_400_BAD_REQUEST
+
+    @pytest.mark.django_db
+    def test_create_label_with_external_id(self, api_key_client, workspace, project):
+        """Test creating label with external ID"""
+        url = self.get_label_url(workspace.slug, project.id)
+
+        label_data = {
+            "name": "External Label",
+            "color": "#FF5733",
+            "external_id": "ext-123",
+            "external_source": "github",
+        }
+
+        response = api_key_client.post(url, label_data, format="json")
+
+        assert response.status_code == status.HTTP_201_CREATED
+        created_label = Label.objects.first()
+        assert created_label.external_id == "ext-123"
+        assert created_label.external_source == "github"
+
+    @pytest.mark.django_db
+    def test_create_label_duplicate_external_id(
+        self, api_key_client, workspace, project
+    ):
+        """Test creating label with duplicate external ID"""
+        url = self.get_label_url(workspace.slug, project.id)
+
+        # Create first label
+        Label.objects.create(
+            name="First Label",
+            project=project,
+            workspace=workspace,
+            external_id="ext-123",
+            external_source="github",
+        )
+
+        # Try to create second label with same external ID
+        label_data = {
+            "name": "Second Label",
+            "external_id": "ext-123",
+            "external_source": "github",
+        }
+
+        response = api_key_client.post(url, label_data, format="json")
+
+        assert response.status_code == status.HTTP_409_CONFLICT
+        assert "same external id" in response.data["error"]
+
+    @pytest.mark.django_db
+    def test_list_labels_success(
+        self, api_key_client, workspace, project, create_label
+    ):
+        """Test successful label listing"""
+        url = self.get_label_url(workspace.slug, project.id)
+
+        # Create additional labels
+        Label.objects.create(
+            name="Label 2", project=project, workspace=workspace, color="#00FF00"
+        )
+        Label.objects.create(
+            name="Label 3", project=project, workspace=workspace, color="#0000FF"
+        )
+
+        response = api_key_client.get(url)
+
+        assert response.status_code == status.HTTP_200_OK
+        assert "results" in response.data
+        assert len(response.data["results"]) == 3  # Including create_label fixture
+
+
+@pytest.mark.contract
+class TestLabelDetailAPIEndpoint:
+    """Test Label Detail API Endpoint"""
+
+    def get_label_detail_url(self, workspace_slug, project_id, label_id):
+        """Helper to get label detail endpoint URL"""
+        return f"/api/v1/workspaces/{workspace_slug}/projects/{project_id}/labels/{label_id}/"
+
+    @pytest.mark.django_db
+    def test_get_label_success(self, api_key_client, workspace, project, create_label):
+        """Test successful label retrieval"""
+        url = self.get_label_detail_url(workspace.slug, project.id, create_label.id)
+
+        response = api_key_client.get(url)
+
+        assert response.status_code == status.HTTP_200_OK
+        assert response.data["id"] == create_label.id
+        assert response.data["name"] == create_label.name
+        assert response.data["color"] == create_label.color
+
+    @pytest.mark.django_db
+    def test_get_label_not_found(self, api_key_client, workspace, project):
+        """Test getting non-existent label"""
+        from uuid import uuid4
+
+        fake_id = uuid4()
+        url = self.get_label_detail_url(workspace.slug, project.id, fake_id)
+
+        response = api_key_client.get(url)
+        assert response.status_code == status.HTTP_404_NOT_FOUND
+
+    @pytest.mark.django_db
+    def test_update_label_success(
+        self, api_key_client, workspace, project, create_label
+    ):
+        """Test successful label update"""
+        url = self.get_label_detail_url(workspace.slug, project.id, create_label.id)
+
+        update_data = {
+            "name": f"Updated Label {uuid4()}",
+        }
+
+        response = api_key_client.patch(url, update_data, format="json")
+
+        assert response.status_code == status.HTTP_200_OK
+
+        create_label.refresh_from_db()
+        assert create_label.name == update_data["name"]
+
+    @pytest.mark.django_db
+    def test_update_label_invalid_data(
+        self, api_key_client, workspace, project, create_label
+    ):
+        """Test label update with invalid data"""
+        url = self.get_label_detail_url(workspace.slug, project.id, create_label.id)
+
+        update_data = {"name": ""}
+        response = api_key_client.patch(url, update_data, format="json")
+
+        # This might be 400 if name is required, or 200 if empty names are allowed
+        assert response.status_code in [status.HTTP_400_BAD_REQUEST, status.HTTP_200_OK]
+
+    @pytest.mark.django_db
+    def test_delete_label_success(
+        self, api_key_client, workspace, project, create_label
+    ):
+        """Test successful label deletion"""
+        url = self.get_label_detail_url(workspace.slug, project.id, create_label.id)
+
+        response = api_key_client.delete(url)
+
+        assert response.status_code == status.HTTP_204_NO_CONTENT
+        assert not Label.objects.filter(id=create_label.id).exists()

apps/api/plane/utils/content_validator.py

@@ -0,0 +1,357 @@
+# Python imports
+import base64
+import json
+import re
+
+
+# Maximum allowed size for binary data (10MB)
+MAX_SIZE = 10 * 1024 * 1024
+
+# Maximum recursion depth to prevent stack overflow
+MAX_RECURSION_DEPTH = 20
+
+# Dangerous text patterns that could indicate XSS or script injection
+DANGEROUS_TEXT_PATTERNS = [
+    r"<script[^>]*>.*?</script>",
+    r"javascript\s*:",
+    r"data\s*:\s*text/html",
+    r"eval\s*\(",
+    r"document\s*\.",
+    r"window\s*\.",
+    r"location\s*\.",
+]
+
+# Dangerous attribute patterns for HTML attributes
+DANGEROUS_ATTR_PATTERNS = [
+    r"javascript\s*:",
+    r"data\s*:\s*text/html",
+    r"eval\s*\(",
+    r"alert\s*\(",
+    r"document\s*\.",
+    r"window\s*\.",
+]
+
+# Suspicious patterns for binary data content
+SUSPICIOUS_BINARY_PATTERNS = [
+    "<html",
+    "<!doctype",
+    "<script",
+    "javascript:",
+    "data:",
+    "<iframe",
+]
+
+# Malicious HTML patterns for content validation
+MALICIOUS_HTML_PATTERNS = [
+    # Script tags with any content
+    r"<script[^>]*>",
+    r"</script>",
+    # JavaScript URLs in various attributes
+    r'(?:href|src|action)\s*=\s*["\']?\s*javascript:',
+    # Data URLs with text/html (potential XSS)
+    r'(?:href|src|action)\s*=\s*["\']?\s*data:text/html',
+    # Dangerous event handlers with JavaScript-like content
+    r'on(?:load|error|click|focus|blur|change|submit|reset|select|resize|scroll|unload|beforeunload|hashchange|popstate|storage|message|offline|online)\s*=\s*["\']?[^"\']*(?:javascript|alert|eval|document\.|window\.|location\.|history\.)[^"\']*["\']?',
+    # Object and embed tags that could load external content
+    r"<(?:object|embed)[^>]*(?:data|src)\s*=",
+    # Base tag that could change relative URL resolution
+    r"<base[^>]*href\s*=",
+    # Dangerous iframe sources
+    r'<iframe[^>]*src\s*=\s*["\']?(?:javascript:|data:text/html)',
+    # Meta refresh redirects
+    r'<meta[^>]*http-equiv\s*=\s*["\']?refresh["\']?',
+    # Link tags - simplified patterns
+    r'<link[^>]*rel\s*=\s*["\']?stylesheet["\']?',
+    r'<link[^>]*href\s*=\s*["\']?https?://',
+    r'<link[^>]*href\s*=\s*["\']?//',
+    r'<link[^>]*href\s*=\s*["\']?(?:data:|javascript:)',
+    # Style tags with external imports
+    r"<style[^>]*>.*?@import.*?(?:https?://|//)",
+    # Link tags with dangerous rel types
+    r'<link[^>]*rel\s*=\s*["\']?(?:import|preload|prefetch|dns-prefetch|preconnect)["\']?',
+    # Forms with action attributes
+    r"<form[^>]*action\s*=",
+]
+
+# Dangerous JavaScript patterns for event handlers
+DANGEROUS_JS_PATTERNS = [
+    r"alert\s*\(",
+    r"eval\s*\(",
+    r"document\s*\.",
+    r"window\s*\.",
+    r"location\s*\.",
+    r"fetch\s*\(",
+    r"XMLHttpRequest",
+    r"innerHTML\s*=",
+    r"outerHTML\s*=",
+    r"document\.write",
+    r"script\s*>",
+]
+
+# HTML self-closing tags that don't need closing tags
+SELF_CLOSING_TAGS = {
+    "img",
+    "br",
+    "hr",
+    "input",
+    "meta",
+    "link",
+    "area",
+    "base",
+    "col",
+    "embed",
+    "source",
+    "track",
+    "wbr",
+}
+
+
+def validate_binary_data(data):
+    """
+    Validate that binary data appears to be valid document format and doesn't contain malicious content.
+
+    Args:
+        data (bytes or str): The binary data to validate, or base64-encoded string
+
+    Returns:
+        tuple: (is_valid: bool, error_message: str or None)
+    """
+    if not data:
+        return True, None  # Empty is OK
+
+    # Handle base64-encoded strings by decoding them first
+    if isinstance(data, str):
+        try:
+            binary_data = base64.b64decode(data)
+        except Exception:
+            return False, "Invalid base64 encoding"
+    else:
+        binary_data = data
+
+    # Size check - 10MB limit
+    if len(binary_data) > MAX_SIZE:
+        return False, "Binary data exceeds maximum size limit (10MB)"
+
+    # Basic format validation
+    if len(binary_data) < 4:
+        return False, "Binary data too short to be valid document format"
+
+    # Check for suspicious text patterns (HTML/JS)
+    try:
+        decoded_text = binary_data.decode("utf-8", errors="ignore")[:200]
+        if any(
+            pattern in decoded_text.lower() for pattern in SUSPICIOUS_BINARY_PATTERNS
+        ):
+            return False, "Binary data contains suspicious content patterns"
+    except Exception:
+        pass  # Binary data might not be decodable as text, which is fine
+
+    return True, None
+
+
+def validate_html_content(html_content):
+    """
+    Validate that HTML content is safe and doesn't contain malicious patterns.
+
+    Args:
+        html_content (str): The HTML content to validate
+
+    Returns:
+        tuple: (is_valid: bool, error_message: str or None)
+    """
+    if not html_content:
+        return True, None  # Empty is OK
+
+    # Size check - 10MB limit (consistent with binary validation)
+    if len(html_content.encode("utf-8")) > MAX_SIZE:
+        return False, "HTML content exceeds maximum size limit (10MB)"
+
+    # Check for specific malicious patterns (simplified and more reliable)
+    for pattern in MALICIOUS_HTML_PATTERNS:
+        if re.search(pattern, html_content, re.IGNORECASE | re.DOTALL):
+            return (
+                False,
+                f"HTML content contains potentially malicious patterns: {pattern}",
+            )
+
+    # Additional check for inline event handlers that contain suspicious content
+    # This is more permissive - only blocks if the event handler contains actual dangerous code
+    event_handler_pattern = r'on\w+\s*=\s*["\']([^"\']*)["\']'
+    event_matches = re.findall(event_handler_pattern, html_content, re.IGNORECASE)
+
+    for handler_content in event_matches:
+        for js_pattern in DANGEROUS_JS_PATTERNS:
+            if re.search(js_pattern, handler_content, re.IGNORECASE):
+                return (
+                    False,
+                    f"HTML content contains dangerous JavaScript in event handler: {handler_content[:100]}",
+                )
+
+    # Basic HTML structure validation - check for common malformed tags
+    try:
+        # Count opening and closing tags for basic structure validation
+        opening_tags = re.findall(r"<(\w+)[^>]*>", html_content)
+        closing_tags = re.findall(r"</(\w+)>", html_content)
+
+        # Filter out self-closing tags from opening tags
+        opening_tags_filtered = [
+            tag for tag in opening_tags if tag.lower() not in SELF_CLOSING_TAGS
+        ]
+
+        # Basic check - if we have significantly more opening than closing tags, it might be malformed
+        if len(opening_tags_filtered) > len(closing_tags) + 10:  # Allow some tolerance
+            return False, "HTML content appears to be malformed (unmatched tags)"
+
+    except Exception:
+        # If HTML parsing fails, we'll allow it
+        pass
+
+    return True, None
+
+
+def validate_json_content(json_content):
+    """
+    Validate that JSON content is safe and doesn't contain malicious patterns.
+
+    Args:
+        json_content (dict): The JSON content to validate
+
+    Returns:
+        tuple: (is_valid: bool, error_message: str or None)
+    """
+    if not json_content:
+        return True, None  # Empty is OK
+
+    try:
+        # Size check - 10MB limit (consistent with other validations)
+        json_str = json.dumps(json_content)
+        if len(json_str.encode("utf-8")) > MAX_SIZE:
+            return False, "JSON content exceeds maximum size limit (10MB)"
+
+        # Basic structure validation for page description JSON
+        if isinstance(json_content, dict):
+            # Check for expected page description structure
+            # This is based on ProseMirror/Tiptap JSON structure
+            if "type" in json_content and json_content.get("type") == "doc":
+                # Valid document structure
+                if "content" in json_content and isinstance(
+                    json_content["content"], list
+                ):
+                    # Recursively check content for suspicious patterns
+                    is_valid, error_msg = _validate_json_content_array(
+                        json_content["content"]
+                    )
+                    if not is_valid:
+                        return False, error_msg
+            elif "type" not in json_content and "content" not in json_content:
+                # Allow other JSON structures but validate for suspicious content
+                is_valid, error_msg = _validate_json_content_recursive(json_content)
+                if not is_valid:
+                    return False, error_msg
+        else:
+            return False, "JSON description must be a valid object"
+
+    except (TypeError, ValueError) as e:
+        return False, "Invalid JSON structure"
+    except Exception as e:
+        return False, "Failed to validate JSON content"
+
+    return True, None
+
+
+def _validate_json_content_array(content, depth=0):
+    """
+    Validate JSON content array for suspicious patterns.
+
+    Args:
+        content (list): Array of content nodes to validate
+        depth (int): Current recursion depth (default: 0)
+
+    Returns:
+        tuple: (is_valid: bool, error_message: str or None)
+    """
+    # Check recursion depth to prevent stack overflow
+    if depth > MAX_RECURSION_DEPTH:
+        return False, f"Maximum recursion depth ({MAX_RECURSION_DEPTH}) exceeded"
+
+    if not isinstance(content, list):
+        return True, None
+
+    for node in content:
+        if isinstance(node, dict):
+            # Check text content for suspicious patterns (more targeted)
+            if node.get("type") == "text" and "text" in node:
+                text_content = node["text"]
+                for pattern in DANGEROUS_TEXT_PATTERNS:
+                    if re.search(pattern, text_content, re.IGNORECASE):
+                        return (
+                            False,
+                            "JSON content contains suspicious script patterns in text",
+                        )
+
+            # Check attributes for suspicious content (more targeted)
+            if "attrs" in node and isinstance(node["attrs"], dict):
+                for attr_name, attr_value in node["attrs"].items():
+                    if isinstance(attr_value, str):
+                        # Only check specific attributes that could be dangerous
+                        if attr_name.lower() in [
+                            "href",
+                            "src",
+                            "action",
+                            "onclick",
+                            "onload",
+                            "onerror",
+                        ]:
+                            for pattern in DANGEROUS_ATTR_PATTERNS:
+                                if re.search(pattern, attr_value, re.IGNORECASE):
+                                    return (
+                                        False,
+                                        f"JSON content contains dangerous pattern in {attr_name} attribute",
+                                    )
+
+            # Recursively check nested content
+            if "content" in node and isinstance(node["content"], list):
+                is_valid, error_msg = _validate_json_content_array(
+                    node["content"], depth + 1
+                )
+                if not is_valid:
+                    return False, error_msg
+
+    return True, None
+
+
+def _validate_json_content_recursive(obj, depth=0):
+    """
+    Recursively validate JSON object for suspicious content.
+
+    Args:
+        obj: JSON object (dict, list, or primitive) to validate
+        depth (int): Current recursion depth (default: 0)
+
+    Returns:
+        tuple: (is_valid: bool, error_message: str or None)
+    """
+    # Check recursion depth to prevent stack overflow
+    if depth > MAX_RECURSION_DEPTH:
+        return False, f"Maximum recursion depth ({MAX_RECURSION_DEPTH}) exceeded"
+    if isinstance(obj, dict):
+        for key, value in obj.items():
+            if isinstance(value, str):
+                # Check for dangerous patterns using module constants
+                for pattern in DANGEROUS_TEXT_PATTERNS:
+                    if re.search(pattern, value, re.IGNORECASE):
+                        return (
+                            False,
+                            "JSON content contains suspicious script patterns",
+                        )
+            elif isinstance(value, (dict, list)):
+                is_valid, error_msg = _validate_json_content_recursive(value, depth + 1)
+                if not is_valid:
+                    return False, error_msg
+    elif isinstance(obj, list):
+        for item in obj:
+            is_valid, error_msg = _validate_json_content_recursive(item, depth + 1)
+            if not is_valid:
+                return False, error_msg
+
+    return True, None

apps/api/templates/emails/auth/forgot_password.html

@@ -8,8 +8,8 @@
     <title>Set a new password to your Plane account</title>
     <style type="text/css" emogrify="no"> #outlook a { padding: 0; } .ExternalClass { width: 100%; } .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div { line-height: 100%; } table td { border-collapse: collapse; mso-line-height-rule: exactly; } .editable.image { font-size: 0 !important; line-height: 0 !important; } .nl2go_preheader { display: none !important; mso-hide: all !important; mso-line-height-rule: exactly; visibility: hidden !important; line-height: 0px !important; font-size: 0px !important; } body { width: 100% !important; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; margin: 0; padding: 0; } img { outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; } a img { border: none; } table { border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; } th { font-weight: normal; text-align: left; } *[class="gmail-fix"] { display: none !important; } </style>
     <style type="text/css" emogrify="no"> @media (max-width: 600px) { .gmx-killpill { content: " \03D1"; } } </style>
-    <style type="text/css" emogrify="no"> @media (max-width: 600px) { .gmx-killpill { content: " \03D1"; } .r0-o { border-style: solid !important; margin: 0 auto 0 auto !important; width: 320px !important; } .r1-i { background-color: #ffffff !important; } .r2-c { box-sizing: border-box !important; text-align: center !important; valign: top !important; width: 100% !important; } .r3-o { border-style: solid !important; margin: 0 auto 0 auto !important; width: 100% !important; } .r4-i { padding-bottom: 20px !important; padding-left: 15px !important; padding-right: 15px !important; padding-top: 20px !important; } .r5-c { box-sizing: border-box !important; display: block !important; valign: top !important; width: 100% !important; } .r6-o { border-style: solid !important; width: 100% !important; } .r7-i { padding-left: 0px !important; padding-right: 0px !important; } .r8-c { box-sizing: border-box !important; text-align: left !important; valign: top !important; width: 100% !important; } .r9-o { border-style: solid !important; margin: 0 auto 0 0 !important; width: 100% !important; } .r10-i { padding-bottom: 10px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 10px !important; } .r11-i { padding-bottom: 15px !important; padding-top: 15px !important; text-align: left !important; } .r12-i { background-color: #ffffff !important; padding-bottom: 15px !important; padding-top: 15px !important; text-align: left !important; } .r13-c { box-sizing: border-box !important; padding: 0 !important; text-align: center !important; valign: top !important; width: 100% !important; } .r14-o { border-style: solid !important; margin: 0 auto 0 auto !important; margin-bottom: 15px !important; margin-top: 15px !important; width: 100% !important; } .r15-i { padding: 0 !important; text-align: center !important; } .r16-r { background-color: #3f76ff !important; border-radius: 4px !important; border-width: 0px !important; box-sizing: border-box; height: initial !important; padding: 0 !important; padding-bottom: 12px !important; padding-top: 12px !important; text-align: center !important; width: 100% !important; } .r17-i { padding-bottom: 0px !important; padding-left: 15px !important; padding-right: 15px !important; padding-top: 0px !important; } .r18-c { box-sizing: border-box !important; text-align: center !important; width: 100% !important; } .r19-i { padding-bottom: 5px !important; padding-top: 5px !important; } .r20-i { padding-bottom: 15px !important; padding-left: 15px !important; padding-right: 15px !important; padding-top: 15px !important; } .r21-o { border-bottom-color: #efefef !important; border-bottom-width: 2px !important; border-left-color: #efefef !important; border-left-width: 2px !important; border-right-color: #efefef !important; border-right-width: 2px !important; border-style: solid !important; border-top-color: #efefef !important; border-top-width: 2px !important; margin: 0 auto 0 0 !important; width: 100% !important; } .r22-i { padding-bottom: 5px !important; padding-left: 5px !important; padding-right: 5px !important; padding-top: 5px !important; text-align: left !important; } .r23-i { padding-bottom: 5px !important; padding-left: 15px !important; padding-right: 15px !important; padding-top: 5px !important; } .r24-c { box-sizing: border-box !important; width: 100% !important; } .r25-i { font-size: 0px !important; padding-bottom: 10px !important; padding-left: 65px !important; padding-right: 65px !important; padding-top: 10px !important; } .r26-c { box-sizing: border-box !important; width: 32px !important; } .r27-o { border-style: solid !important; margin-right: 8px !important; width: 32px !important; } .r28-o { border-style: solid !important; margin-right: 0px !important; width: 32px !important; } .r29-i { padding-bottom: 0px !important; padding-top: 5px !important; text-align: center !important; } body { -webkit-text-size-adjust: none; } .nl2go-responsive-hide { display: none; } .nl2go-body-table { min-width: unset !important; } .mobshow { height: auto !important; overflow: visible !important; max-height: unset !important; visibility: visible !important; border: none !important; } .resp-table { display: inline-table !important; } .magic-resp { display: table-cell !important; } } </style>
-    <style type="text/css"> p, h1, h2, h3, h4, ol, ul { margin: 0; } a, a:link { color: #3f76ff; text-decoration: underline; } .nl2go-default-textstyle { color: #3b3f44; font-family: georgia, serif; font-size: 16px; line-height: 1.5; word-break: break-word; } .default-button { color: #ffffff; font-family: georgia, serif; font-size: 16px; font-style: normal; font-weight: normal; line-height: 1.15; text-decoration: none; word-break: break-word; } .default-heading1 { color: #1f2d3d; font-family: arial, helvetica, sans-serif; font-size: 36px; word-break: break-word; } .default-heading2 { color: #1f2d3d; font-family: arial, helvetica, sans-serif; font-size: 32px; word-break: break-word; } .default-heading3 { color: #1f2d3d; font-family: arial, helvetica, sans-serif; font-size: 24px; word-break: break-word; } .default-heading4 { color: #1f2d3d; font-family: arial, helvetica, sans-serif; font-size: 18px; word-break: break-word; } a[x-apple-data-detectors] { color: inherit !important; text-decoration: inherit !important; font-size: inherit !important; font-family: inherit !important; font-weight: inherit !important; line-height: inherit !important; } .no-show-for-you { border: none; display: none; float: none; font-size: 0; height: 0; line-height: 0; max-height: 0; mso-hide: all; overflow: hidden; table-layout: fixed; visibility: hidden; width: 0; } </style>
+    <style type="text/css" emogrify="no"> @media (max-width: 600px) { .gmx-killpill { content: " \03D1"; } .r0-o { border-style: solid !important; margin: 0 auto 0 auto !important; width: 320px !important; } .r1-i { background-color: #ffffff !important; } .r2-c { box-sizing: border-box !important; text-align: center !important; valign: top !important; width: 100% !important; } .r3-o { border-style: solid !important; margin: 0 auto 0 auto !important; width: 100% !important; } .r4-i { padding-bottom: 20px !important; padding-left: 15px !important; padding-right: 15px !important; padding-top: 20px !important; } .r5-c { box-sizing: border-box !important; display: block !important; valign: top !important; width: 100% !important; } .r6-o { border-style: solid !important; width: 100% !important; } .r7-i { padding-left: 0px !important; padding-right: 0px !important; } .r8-c { box-sizing: border-box !important; text-align: left !important; valign: top !important; width: 100% !important; } .r9-o { border-style: solid !important; margin: 0 auto 0 0 !important; width: 100% !important; } .r10-i { padding-bottom: 10px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 10px !important; } .r11-i { padding-bottom: 15px !important; padding-top: 15px !important; text-align: left !important; } .r12-i { background-color: #ffffff !important; padding-bottom: 15px !important; padding-top: 15px !important; text-align: left !important; } .r13-c { box-sizing: border-box !important; padding: 0 !important; text-align: center !important; valign: top !important; width: 100% !important; } .r14-o { border-style: solid !important; margin: 0 auto 0 auto !important; margin-bottom: 15px !important; margin-top: 15px !important; width: 100% !important; } .r15-i { padding: 0 !important; text-align: center !important; } .r16-r { background-color: #006399 !important; border-radius: 4px !important; border-width: 0px !important; box-sizing: border-box; height: initial !important; padding: 0 !important; padding-bottom: 12px !important; padding-top: 12px !important; text-align: center !important; width: 100% !important; } .r17-i { padding-bottom: 0px !important; padding-left: 15px !important; padding-right: 15px !important; padding-top: 0px !important; } .r18-c { box-sizing: border-box !important; text-align: center !important; width: 100% !important; } .r19-i { padding-bottom: 5px !important; padding-top: 5px !important; } .r20-i { padding-bottom: 15px !important; padding-left: 15px !important; padding-right: 15px !important; padding-top: 15px !important; } .r21-o { border-bottom-color: #efefef !important; border-bottom-width: 2px !important; border-left-color: #efefef !important; border-left-width: 2px !important; border-right-color: #efefef !important; border-right-width: 2px !important; border-style: solid !important; border-top-color: #efefef !important; border-top-width: 2px !important; margin: 0 auto 0 0 !important; width: 100% !important; } .r22-i { padding-bottom: 5px !important; padding-left: 5px !important; padding-right: 5px !important; padding-top: 5px !important; text-align: left !important; } .r23-i { padding-bottom: 5px !important; padding-left: 15px !important; padding-right: 15px !important; padding-top: 5px !important; } .r24-c { box-sizing: border-box !important; width: 100% !important; } .r25-i { font-size: 0px !important; padding-bottom: 10px !important; padding-left: 65px !important; padding-right: 65px !important; padding-top: 10px !important; } .r26-c { box-sizing: border-box !important; width: 32px !important; } .r27-o { border-style: solid !important; margin-right: 8px !important; width: 32px !important; } .r28-o { border-style: solid !important; margin-right: 0px !important; width: 32px !important; } .r29-i { padding-bottom: 0px !important; padding-top: 5px !important; text-align: center !important; } body { -webkit-text-size-adjust: none; } .nl2go-responsive-hide { display: none; } .nl2go-body-table { min-width: unset !important; } .mobshow { height: auto !important; overflow: visible !important; max-height: unset !important; visibility: visible !important; border: none !important; } .resp-table { display: inline-table !important; } .magic-resp { display: table-cell !important; } } </style>
+    <style type="text/css"> p, h1, h2, h3, h4, ol, ul { margin: 0; } a, a:link { color: #006399; text-decoration: underline; } .nl2go-default-textstyle { color: #3b3f44; font-family: georgia, serif; font-size: 16px; line-height: 1.5; word-break: break-word; } .default-button { color: #ffffff; font-family: georgia, serif; font-size: 16px; font-style: normal; font-weight: normal; line-height: 1.15; text-decoration: none; word-break: break-word; } .default-heading1 { color: #1f2d3d; font-family: arial, helvetica, sans-serif; font-size: 36px; word-break: break-word; } .default-heading2 { color: #1f2d3d; font-family: arial, helvetica, sans-serif; font-size: 32px; word-break: break-word; } .default-heading3 { color: #1f2d3d; font-family: arial, helvetica, sans-serif; font-size: 24px; word-break: break-word; } .default-heading4 { color: #1f2d3d; font-family: arial, helvetica, sans-serif; font-size: 18px; word-break: break-word; } a[x-apple-data-detectors] { color: inherit !important; text-decoration: inherit !important; font-size: inherit !important; font-family: inherit !important; font-weight: inherit !important; line-height: inherit !important; } .no-show-for-you { border: none; display: none; float: none; font-size: 0; height: 0; line-height: 0; max-height: 0; mso-hide: all; overflow: hidden; table-layout: fixed; visibility: hidden; width: 0; } </style>
     <!--[if mso ]>
     <xml>
       <o:OfficeDocumentSettings>
@@ -18,9 +18,9 @@
       </o:OfficeDocumentSettings>
     </xml>
     <! [endif]--> 
-    <style type="text/css"> a:link { color: #3f76ff; text-decoration: underline; } </style>
+    <style type="text/css"> a:link { color: #006399; text-decoration: underline; } </style>
   </head>
-  <body bgcolor="#ffffff" text="#3b3f44" link="#3f76ff" yahoo="fix" style="background-color: #ffffff" >
+  <body bgcolor="#ffffff" text="#3b3f44" link="#006399" yahoo="fix" style="background-color: #ffffff" >
     <table cellspacing="0" cellpadding="0" border="0" role="presentation" class="nl2go-body-table" width="100%" style="background-color: #ffffff; width: 100%" >
       <tr>
         <td>
@@ -41,7 +41,7 @@
                                       <td class="r8-c" align="left">
                                         <table cellspacing="0" cellpadding="0" border="0" role="presentation" width="150" class="r9-o" style=" table-layout: fixed; width: 150px; " >
                                           <tr>
-                                            <td style=" font-size: 0px; line-height: 0px; " > <img src="https://img.mailinblue.com/5942152/images/content_library/original/64708f00b503b149db7ff135.png" width="150" border="0" style=" display: block; width: 100%; " /> </td>
+                                            <td style=" font-size: 0px; line-height: 0px; " > <img src="https://media.docs.plane.so/logo/new-logo-white.png" width="150" border="0" style=" display: block; width: 100%; " /> </td>
                                           </tr>
                                         </table>
                                       </td>
@@ -94,9 +94,9 @@
                                     </tr>
                                     <tr>
                                       <td class="r13-c" align="center" style=" align: center; padding-bottom: 15px; padding-top: 15px; valign: top; " >
-                                        <table cellspacing="0" cellpadding="0" border="0" role="presentation" width="285" class="r14-o" style=" background-color: #3f76ff; border-collapse: separate; border-color: #3f76ff; border-radius: 4px; border-style: solid; border-width: 0px; table-layout: fixed; width: 285px; " >
+                                        <table cellspacing="0" cellpadding="0" border="0" role="presentation" width="285" class="r14-o" style=" background-color: #006399; border-collapse: separate; border-color: #006399; border-radius: 4px; border-style: solid; border-width: 0px; table-layout: fixed; width: 285px; " >
                                           <tr>
-                                            <td height="18" align="center" valign="top" class="r15-i nl2go-default-textstyle" style=" word-break: break-word; background-color: #3f76ff; border-radius: 4px; color: #ffffff; font-family: georgia, serif; font-size: 16px; font-style: normal; line-height: 1.15; padding-bottom: 12px; padding-top: 12px; text-align: center; " > <a href="{{forgot_password_url}}" class="r16-r default-button" target="_blank" data-btn="1" style=" font-style: normal; font-weight: normal; line-height: 1.15; text-decoration: none; word-break: break-word; word-wrap: break-word; display: block; -webkit-text-size-adjust: none; color: #ffffff; font-family: arial, helvetica, sans-serif; font-size: 16px; " > <span>Reset password</span></a > </td>
+                                            <td height="18" align="center" valign="top" class="r15-i nl2go-default-textstyle" style=" word-break: break-word; background-color: #006399; border-radius: 4px; color: #ffffff; font-family: georgia, serif; font-size: 16px; font-style: normal; line-height: 1.15; padding-bottom: 12px; padding-top: 12px; text-align: center; " > <a href="{{forgot_password_url}}" class="r16-r default-button" target="_blank" data-btn="1" style=" font-style: normal; font-weight: normal; line-height: 1.15; text-decoration: none; word-break: break-word; word-wrap: break-word; display: block; -webkit-text-size-adjust: none; color: #ffffff; font-family: arial, helvetica, sans-serif; font-size: 16px; " > <span>Reset password</span></a > </td>
                                           </tr>
                                         </table>
                                       </td>
@@ -187,7 +187,7 @@
                                             <td class="nl2go-responsive-hide" width="2" style=" font-size: 0px; line-height: 1px; background-color: #efefef; " > ­ </td>
                                             <td align="left" valign="top" class="r22-i nl2go-default-textstyle" style=" color: #3b3f44; font-family: georgia, serif; font-size: 16px; word-break: break-word; line-height: 1.5; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; padding-top: 5px; text-align: left; " >
                                               <div>
-                                                <p style="margin: 0"> <span style="font-size: 13px" >Despite our popularity, we are humbly early-stage. We are shipping fast, so please reach out to us with feature requests, major and minor nits, and anything else you find missing. We read every </span ><a href="https://discord.com/channels/1031547764020084846/1094927053867995176" title="Plane Support on Discod" target="_blank" style=" color: #3f76ff; text-decoration: underline; " ><span style="font-size: 13px" >message</span ></a ><span style="font-size: 13px" >, </span ><a href="http://twitter.com/planepowers" title="@planepowers" target="_blank" style=" color: #3f76ff; text-decoration: underline; " ><span style="font-size: 13px" >tweet</span ></a ><span style="font-size: 13px" >, and </span ><a href="https://github.com/makeplane/plane/issues" title="Plane's GitHub conversations" target="_blank" style=" color: #3f76ff; text-decoration: underline; " ><span style="font-size: 13px" >conversation</span ></a ><span style="font-size: 13px" > and update </span ><a href="https://plane.sh/plane/0b170a1c-0e55-47cb-9307-ea49a05672b5?board=kanban" title="Plane's roadmap" target="_blank" style=" color: #3f76ff; text-decoration: underline; " ><span style="font-size: 13px" >our public roadmap</span ></a ><span style="font-size: 13px" >.</span > </p>
+                                                <p style="margin: 0"> <span style="font-size: 13px" >Despite our popularity, we are humbly early-stage. We are shipping fast, so please reach out to us with feature requests, major and minor nits, and anything else you find missing. We read every </span ><a href="https://discord.com/channels/1031547764020084846/1094927053867995176" title="Plane Support on Discod" target="_blank" style=" color: #006399; text-decoration: underline; " ><span style="font-size: 13px" >message</span ></a ><span style="font-size: 13px" >, </span ><a href="http://twitter.com/planepowers" title="@planepowers" target="_blank" style=" color: #006399; text-decoration: underline; " ><span style="font-size: 13px" >tweet</span ></a ><span style="font-size: 13px" >, and </span ><a href="https://github.com/makeplane/plane/issues" title="Plane's GitHub conversations" target="_blank" style=" color: #006399; text-decoration: underline; " ><span style="font-size: 13px" >conversation</span ></a ><span style="font-size: 13px" > and update </span ><a href="https://plane.sh/plane/0b170a1c-0e55-47cb-9307-ea49a05672b5?board=kanban" title="Plane's roadmap" target="_blank" style=" color: #006399; text-decoration: underline; " ><span style="font-size: 13px" >our public roadmap</span ></a ><span style="font-size: 13px" >.</span > </p>
                                               </div>
                                             </td>
                                             <td class="nl2go-responsive-hide" width="2" style=" font-size: 0px; line-height: 1px; background-color: #efefef; " > ­ </td>
@@ -236,7 +236,7 @@
                                                               <th width="40" class="r26-c mobshow resp-table" style=" font-weight: normal; " >
                                                                 <table cellspacing="0" cellpadding="0" border="0" role="presentation" width="100%" class="r27-o" style=" table-layout: fixed; width: 100%; " >
                                                                   <tr>
-                                                                    <td class="r19-i" style=" font-size: 0px; line-height: 0px; padding-bottom: 5px; padding-top: 5px; " > <a href="https://github.com/makeplane" target="_blank" style=" color: #3f76ff; text-decoration: underline; " > <img src="https://creative-assets.mailinblue.com/editor/social-icons/rounded_colored/github_32px.png" width="32" border="0" style=" display: block; width: 100%; " /></a> </td>
+                                                                    <td class="r19-i" style=" font-size: 0px; line-height: 0px; padding-bottom: 5px; padding-top: 5px; " > <a href="https://github.com/makeplane" target="_blank" style=" color: #006399; text-decoration: underline; " > <img src="https://creative-assets.mailinblue.com/editor/social-icons/rounded_colored/github_32px.png" width="32" border="0" style=" display: block; width: 100%; " /></a> </td>
                                                                     <td class="nl2go-responsive-hide" width="8" style=" font-size: 0px; line-height: 1px; " > ­ </td>
                                                                   </tr>
                                                                 </table>
@@ -244,7 +244,7 @@
                                                               <th width="40" class="r26-c mobshow resp-table" style=" font-weight: normal; " >
                                                                 <table cellspacing="0" cellpadding="0" border="0" role="presentation" width="100%" class="r27-o" style=" table-layout: fixed; width: 100%; " >
                                                                   <tr>
-                                                                    <td class="r19-i" style=" font-size: 0px; line-height: 0px; padding-bottom: 5px; padding-top: 5px; " > <a href="https://www.linkedin.com/company/planepowers/" target="_blank" style=" color: #3f76ff; text-decoration: underline; " > <img src="https://creative-assets.mailinblue.com/editor/social-icons/rounded_colored/linkedin_32px.png" width="32" border="0" style=" display: block; width: 100%; " /></a> </td>
+                                                                    <td class="r19-i" style=" font-size: 0px; line-height: 0px; padding-bottom: 5px; padding-top: 5px; " > <a href="https://www.linkedin.com/company/planepowers/" target="_blank" style=" color: #006399; text-decoration: underline; " > <img src="https://creative-assets.mailinblue.com/editor/social-icons/rounded_colored/linkedin_32px.png" width="32" border="0" style=" display: block; width: 100%; " /></a> </td>
                                                                     <td class="nl2go-responsive-hide" width="8" style=" font-size: 0px; line-height: 1px; " > ­ </td>
                                                                   </tr>
                                                                 </table>
@@ -252,7 +252,7 @@
                                                               <th width="40" class="r26-c mobshow resp-table" style=" font-weight: normal; " >
                                                                 <table cellspacing="0" cellpadding="0" border="0" role="presentation" width="100%" class="r27-o" style=" table-layout: fixed; width: 100%; " >
                                                                   <tr>
-                                                                    <td class="r19-i" style=" font-size: 0px; line-height: 0px; padding-bottom: 5px; padding-top: 5px; " > <a href="https://twitter.com/planepowers" target="_blank" style=" color: #3f76ff; text-decoration: underline; " > <img src="https://creative-assets.mailinblue.com/editor/social-icons/rounded_colored/twitter_32px.png" width="32" border="0" style=" display: block; width: 100%; " /></a> </td>
+                                                                    <td class="r19-i" style=" font-size: 0px; line-height: 0px; padding-bottom: 5px; padding-top: 5px; " > <a href="https://twitter.com/planepowers" target="_blank" style=" color: #006399; text-decoration: underline; " > <img src="https://creative-assets.mailinblue.com/editor/social-icons/rounded_colored/twitter_32px.png" width="32" border="0" style=" display: block; width: 100%; " /></a> </td>
                                                                     <td class="nl2go-responsive-hide" width="8" style=" font-size: 0px; line-height: 1px; " > ­ </td>
                                                                   </tr>
                                                                 </table>
@@ -260,7 +260,7 @@
                                                               <th width="32" class="r26-c mobshow resp-table" style=" font-weight: normal; " >
                                                                 <table cellspacing="0" cellpadding="0" border="0" role="presentation" width="100%" class="r28-o" style=" table-layout: fixed; width: 100%; " >
                                                                   <tr>
-                                                                    <td class="r19-i" style=" font-size: 0px; line-height: 0px; padding-bottom: 5px; padding-top: 5px; " > <a href="https://plane.so/" target="_blank" style=" color: #3f76ff; text-decoration: underline; " > <img src="https://creative-assets.mailinblue.com/editor/social-icons/rounded_colored/website_32px.png" width="32" border="0" style=" display: block; width: 100%; " /></a> </td>
+                                                                    <td class="r19-i" style=" font-size: 0px; line-height: 0px; padding-bottom: 5px; padding-top: 5px; " > <a href="https://plane.so/" target="_blank" style=" color: #006399; text-decoration: underline; " > <img src="https://creative-assets.mailinblue.com/editor/social-icons/rounded_colored/website_32px.png" width="32" border="0" style=" display: block; width: 100%; " /></a> </td>
                                                                   </tr>
                                                                 </table>
                                                               </th>

apps/api/templates/emails/auth/magic_signin.html

@@ -9,7 +9,7 @@
     <style type="text/css" emogrify="no"> #outlook a { padding: 0; } .ExternalClass { width: 100%; } .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div { line-height: 100%; } table td { border-collapse: collapse; mso-line-height-rule: exactly; } .editable.image { font-size: 0 !important; line-height: 0 !important; } .nl2go_preheader { display: none !important; mso-hide: all !important; mso-line-height-rule: exactly; visibility: hidden !important; line-height: 0px !important; font-size: 0px !important; } body { width: 100% !important; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; margin: 0; padding: 0; } img { outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; } a img { border: none; } table { border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; } th { font-weight: normal; text-align: left; } *[class="gmail-fix"] { display: none !important; } </style>
     <style type="text/css" emogrify="no"> @media (max-width: 600px) { .gmx-killpill { content: " \03D1"; } } </style>
     <style type="text/css" emogrify="no"> @media (max-width: 600px) { .gmx-killpill { content: " \03D1"; } .r0-o { border-style: solid !important; margin: 0 auto 0 auto !important; width: 320px !important; } .r1-i { background-color: #ffffff !important; } .r2-c { box-sizing: border-box !important; text-align: center !important; valign: top !important; width: 100% !important; } .r3-o { border-style: solid !important; margin: 0 auto 0 auto !important; width: 100% !important; } .r4-i { padding-bottom: 20px !important; padding-left: 15px !important; padding-right: 15px !important; padding-top: 20px !important; } .r5-c { box-sizing: border-box !important; display: block !important; valign: top !important; width: 100% !important; } .r6-o { border-style: solid !important; width: 100% !important; } .r7-i { padding-left: 0px !important; padding-right: 0px !important; } .r8-c { box-sizing: border-box !important; text-align: left !important; valign: top !important; width: 100% !important; } .r9-o { border-style: solid !important; margin: 0 auto 0 0 !important; width: 100% !important; } .r10-i { padding-bottom: 15px !important; padding-left: 15px !important; padding-right: 15px !important; padding-top: 15px !important; } .r11-i { padding-bottom: 10px !important; padding-top: 10px !important; text-align: left !important; } .r12-i { padding-bottom: 10px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 10px !important; } .r13-o { border-bottom-color: #d9e4ff !important; border-bottom-width: 1px !important; border-left-color: #d9e4ff !important; border-left-width: 1px !important; border-right-color: #d9e4ff !important; border-right-width: 1px !important; border-style: solid !important; border-top-color: #d9e4ff !important; border-top-width: 1px !important; margin: 0 auto 0 0 !important; width: 100% !important; } .r14-i { background-color: #ecf1ff !important; padding-bottom: 10px !important; padding-left: 10px !important; padding-right: 10px !important; padding-top: 10px !important; text-align: left !important; } .r15-o { border-bottom-color: #efefef !important; border-bottom-width: 2px !important; border-left-color: #efefef !important; border-left-width: 2px !important; border-right-color: #efefef !important; border-right-width: 2px !important; border-style: solid !important; border-top-color: #efefef !important; border-top-width: 2px !important; margin: 0 auto 0 0 !important; width: 100% !important; } .r16-i { padding-bottom: 5px !important; padding-left: 5px !important; padding-right: 5px !important; padding-top: 5px !important; text-align: left !important; } .r17-i { padding-bottom: 5px !important; padding-left: 15px !important; padding-right: 15px !important; padding-top: 5px !important; } .r18-c { box-sizing: border-box !important; text-align: center !important; width: 100% !important; } .r19-c { box-sizing: border-box !important; width: 100% !important; } .r20-i { font-size: 0px !important; padding-bottom: 10px !important; padding-left: 65px !important; padding-right: 65px !important; padding-top: 10px !important; } .r21-c { box-sizing: border-box !important; width: 32px !important; } .r22-o { border-style: solid !important; margin-right: 8px !important; width: 32px !important; } .r23-i { padding-bottom: 5px !important; padding-top: 5px !important; } .r24-o { border-style: solid !important; margin-right: 0px !important; width: 32px !important; } .r25-i { padding-bottom: 0px !important; padding-top: 5px !important; text-align: center !important; } body { -webkit-text-size-adjust: none; } .nl2go-responsive-hide { display: none; } .nl2go-body-table { min-width: unset !important; } .mobshow { height: auto !important; overflow: visible !important; max-height: unset !important; visibility: visible !important; border: none !important; } .resp-table { display: inline-table !important; } .magic-resp { display: table-cell !important; } } </style>
-    <style type="text/css"> p, h1, h2, h3, h4, ol, ul { margin: 0; } a, a:link { color: #3f76ff; text-decoration: underline; } .nl2go-default-textstyle { color: #3b3f44; font-family: georgia, serif; font-size: 16px; line-height: 1.5; word-break: break-word; } .default-button { color: #ffffff; font-family: georgia, serif; font-size: 16px; font-style: normal; font-weight: normal; line-height: 1.15; text-decoration: none; word-break: break-word; } .default-heading1 { color: #1f2d3d; font-family: arial, helvetica, sans-serif; font-size: 36px; word-break: break-word; } .default-heading2 { color: #1f2d3d; font-family: arial, helvetica, sans-serif; font-size: 32px; word-break: break-word; } .default-heading3 { color: #1f2d3d; font-family: arial, helvetica, sans-serif; font-size: 24px; word-break: break-word; } .default-heading4 { color: #1f2d3d; font-family: arial, helvetica, sans-serif; font-size: 18px; word-break: break-word; } a[x-apple-data-detectors] { color: inherit !important; text-decoration: inherit !important; font-size: inherit !important; font-family: inherit !important; font-weight: inherit !important; line-height: inherit !important; } .no-show-for-you { border: none; display: none; float: none; font-size: 0; height: 0; line-height: 0; max-height: 0; mso-hide: all; overflow: hidden; table-layout: fixed; visibility: hidden; width: 0; } </style>
+    <style type="text/css"> p, h1, h2, h3, h4, ol, ul { margin: 0; } a, a:link { color: #006399; text-decoration: underline; } .nl2go-default-textstyle { color: #3b3f44; font-family: georgia, serif; font-size: 16px; line-height: 1.5; word-break: break-word; } .default-button { color: #ffffff; font-family: georgia, serif; font-size: 16px; font-style: normal; font-weight: normal; line-height: 1.15; text-decoration: none; word-break: break-word; } .default-heading1 { color: #1f2d3d; font-family: arial, helvetica, sans-serif; font-size: 36px; word-break: break-word; } .default-heading2 { color: #1f2d3d; font-family: arial, helvetica, sans-serif; font-size: 32px; word-break: break-word; } .default-heading3 { color: #1f2d3d; font-family: arial, helvetica, sans-serif; font-size: 24px; word-break: break-word; } .default-heading4 { color: #1f2d3d; font-family: arial, helvetica, sans-serif; font-size: 18px; word-break: break-word; } a[x-apple-data-detectors] { color: inherit !important; text-decoration: inherit !important; font-size: inherit !important; font-family: inherit !important; font-weight: inherit !important; line-height: inherit !important; } .no-show-for-you { border: none; display: none; float: none; font-size: 0; height: 0; line-height: 0; max-height: 0; mso-hide: all; overflow: hidden; table-layout: fixed; visibility: hidden; width: 0; } </style>
     <!--[if mso ]>
     <xml>
       <o:OfficeDocumentSettings>
@@ -18,9 +18,9 @@
       </o:OfficeDocumentSettings>
     </xml>
     <! [endif]--> 
-    <style type="text/css"> a:link { color: #3f76ff; text-decoration: underline; } </style>
+    <style type="text/css"> a:link { color: #006399; text-decoration: underline; } </style>
   </head>
-  <body bgcolor="#ffffff" text="#3b3f44" link="#3f76ff" yahoo="fix" style="background-color: #ffffff" >
+  <body bgcolor="#ffffff" text="#3b3f44" link="#006399" yahoo="fix" style="background-color: #ffffff" >
     <table cellspacing="0" cellpadding="0" border="0" role="presentation" class="nl2go-body-table" width="100%" style="background-color: #ffffff; width: 100%" >
       <tr>
         <td>
@@ -41,7 +41,7 @@
                                       <td class="r8-c" align="left">
                                         <table cellspacing="0" cellpadding="0" border="0" role="presentation" width="150" class="r9-o" style=" table-layout: fixed; width: 150px; " >
                                           <tr>
-                                            <td style=" font-size: 0px; line-height: 0px; " > <img src="https://img.mailinblue.com/5942152/images/content_library/original/64708f00b503b149db7ff135.png" width="150" border="0" style=" display: block; width: 100%; " /> </td>
+                                            <td style=" font-size: 0px; line-height: 0px; " > <img src="https://media.docs.plane.so/logo/new-logo-white.png" width="150" border="0" style=" display: block; width: 100%; " /> </td>
                                           </tr>
                                         </table>
                                       </td>
@@ -80,7 +80,7 @@
                                       </td>
                                     </tr>
                                   </table>
-                                </td>
+                              </td>
                               </tr>
                             </table>
                           </th>
@@ -145,7 +145,7 @@
                                             <td class="nl2go-responsive-hide" width="2" style=" font-size: 0px; line-height: 1px; background-color: #efefef; " > ­ </td>
                                             <td align="left" valign="top" class="r16-i nl2go-default-textstyle" style=" color: #3b3f44; font-family: georgia, serif; font-size: 16px; word-break: break-word; line-height: 1.5; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; padding-top: 5px; text-align: left; " >
                                               <div>
-                                                <p style="margin: 0"> <span style="font-size: 13px" >Despite our popularity, we are humbly early-stage. We are shipping fast, so please reach out to us with feature requests, major and minor nits, and anything else you find missing. We read every </span ><a href="https://discord.com/channels/1031547764020084846/1094927053867995176" title="Plane Support on Discod" target="_blank" style=" color: #3f76ff; text-decoration: underline; " ><span style="font-size: 13px" >message</span ></a ><span style="font-size: 13px" >, </span ><a href="http://twitter.com/planepowers" title="@planepowers" target="_blank" style=" color: #3f76ff; text-decoration: underline; " ><span style="font-size: 13px" >tweet</span ></a ><span style="font-size: 13px" >, and </span ><a href="https://github.com/makeplane/plane/issues" title="Plane's GitHub conversations" target="_blank" style=" color: #3f76ff; text-decoration: underline; " ><span style="font-size: 13px" >conversation</span ></a ><span style="font-size: 13px" > and update </span ><a href="https://plane.sh/plane/0b170a1c-0e55-47cb-9307-ea49a05672b5?board=kanban" title="Plane's roadmap" target="_blank" style=" color: #3f76ff; text-decoration: underline; " ><span style="font-size: 13px" >our public roadmap</span ></a ><span style="font-size: 13px" >.</span > </p>
+                                                <p style="margin: 0"> <span style="font-size: 13px" >Despite our popularity, we are humbly early-stage. We are shipping fast, so please reach out to us with feature requests, major and minor nits, and anything else you find missing. We read every </span ><a href="https://discord.com/channels/1031547764020084846/1094927053867995176" title="Plane Support on Discod" target="_blank" style=" color: #006399; text-decoration: underline; " ><span style="font-size: 13px" >message</span ></a ><span style="font-size: 13px" >, </span ><a href="http://twitter.com/planepowers" title="@planepowers" target="_blank" style=" color: #006399; text-decoration: underline; " ><span style="font-size: 13px" >tweet</span ></a ><span style="font-size: 13px" >, and </span ><a href="https://github.com/makeplane/plane/issues" title="Plane's GitHub conversations" target="_blank" style=" color: #006399; text-decoration: underline; " ><span style="font-size: 13px" >conversation</span ></a ><span style="font-size: 13px" > and update </span ><a href="https://plane.sh/plane/0b170a1c-0e55-47cb-9307-ea49a05672b5?board=kanban" title="Plane's roadmap" target="_blank" style=" color: #006399; text-decoration: underline; " ><span style="font-size: 13px" >our public roadmap</span ></a ><span style="font-size: 13px" >.</span > </p>
                                               </div>
                                             </td>
                                             <td class="nl2go-responsive-hide" width="2" style=" font-size: 0px; line-height: 1px; background-color: #efefef; " > ­ </td>
@@ -194,7 +194,7 @@
                                                               <th width="40" class="r21-c mobshow resp-table" style=" font-weight: normal; " >
                                                                 <table cellspacing="0" cellpadding="0" border="0" role="presentation" width="100%" class="r22-o" style=" table-layout: fixed; width: 100%; " >
                                                                   <tr>
-                                                                    <td class="r23-i" style=" font-size: 0px; line-height: 0px; padding-bottom: 5px; padding-top: 5px; " > <a href="https://github.com/makeplane" target="_blank" style=" color: #3f76ff; text-decoration: underline; " > <img src="https://creative-assets.mailinblue.com/editor/social-icons/rounded_colored/github_32px.png" width="32" border="0" style=" display: block; width: 100%; " /></a> </td>
+                                                                    <td class="r23-i" style=" font-size: 0px; line-height: 0px; padding-bottom: 5px; padding-top: 5px; " > <a href="https://github.com/makeplane" target="_blank" style=" color: #006399; text-decoration: underline; " > <img src="https://creative-assets.mailinblue.com/editor/social-icons/rounded_colored/github_32px.png" width="32" border="0" style=" display: block; width: 100%; " /></a> </td>
                                                                     <td class="nl2go-responsive-hide" width="8" style=" font-size: 0px; line-height: 1px; " > ­ </td>
                                                                   </tr>
                                                                 </table>
@@ -202,7 +202,7 @@
                                                               <th width="40" class="r21-c mobshow resp-table" style=" font-weight: normal; " >
                                                                 <table cellspacing="0" cellpadding="0" border="0" role="presentation" width="100%" class="r22-o" style=" table-layout: fixed; width: 100%; " >
                                                                   <tr>
-                                                                    <td class="r23-i" style=" font-size: 0px; line-height: 0px; padding-bottom: 5px; padding-top: 5px; " > <a href="https://www.linkedin.com/company/planepowers/" target="_blank" style=" color: #3f76ff; text-decoration: underline; " > <img src="https://creative-assets.mailinblue.com/editor/social-icons/rounded_colored/linkedin_32px.png" width="32" border="0" style=" display: block; width: 100%; " /></a> </td>
+                                                                    <td class="r23-i" style=" font-size: 0px; line-height: 0px; padding-bottom: 5px; padding-top: 5px; " > <a href="https://www.linkedin.com/company/planepowers/" target="_blank" style=" color: #006399; text-decoration: underline; " > <img src="https://creative-assets.mailinblue.com/editor/social-icons/rounded_colored/linkedin_32px.png" width="32" border="0" style=" display: block; width: 100%; " /></a> </td>
                                                                     <td class="nl2go-responsive-hide" width="8" style=" font-size: 0px; line-height: 1px; " > ­ </td>
                                                                   </tr>
                                                                 </table>
@@ -210,7 +210,7 @@
                                                               <th width="40" class="r21-c mobshow resp-table" style=" font-weight: normal; " >
                                                                 <table cellspacing="0" cellpadding="0" border="0" role="presentation" width="100%" class="r22-o" style=" table-layout: fixed; width: 100%; " >
                                                                   <tr>
-                                                                    <td class="r23-i" style=" font-size: 0px; line-height: 0px; padding-bottom: 5px; padding-top: 5px; " > <a href="https://twitter.com/planepowers" target="_blank" style=" color: #3f76ff; text-decoration: underline; " > <img src="https://creative-assets.mailinblue.com/editor/social-icons/rounded_colored/twitter_32px.png" width="32" border="0" style=" display: block; width: 100%; " /></a> </td>
+                                                                    <td class="r23-i" style=" font-size: 0px; line-height: 0px; padding-bottom: 5px; padding-top: 5px; " > <a href="https://twitter.com/planepowers" target="_blank" style=" color: #006399; text-decoration: underline; " > <img src="https://creative-assets.mailinblue.com/editor/social-icons/rounded_colored/twitter_32px.png" width="32" border="0" style=" display: block; width: 100%; " /></a> </td>
                                                                     <td class="nl2go-responsive-hide" width="8" style=" font-size: 0px; line-height: 1px; " > ­ </td>
                                                                   </tr>
                                                                 </table>
@@ -218,7 +218,7 @@
                                                               <th width="32" class="r21-c mobshow resp-table" style=" font-weight: normal; " >
                                                                 <table cellspacing="0" cellpadding="0" border="0" role="presentation" width="100%" class="r24-o" style=" table-layout: fixed; width: 100%; " >
                                                                   <tr>
-                                                                    <td class="r23-i" style=" font-size: 0px; line-height: 0px; padding-bottom: 5px; padding-top: 5px; " > <a href="https://plane.so/" target="_blank" style=" color: #3f76ff; text-decoration: underline; " > <img src="https://creative-assets.mailinblue.com/editor/social-icons/rounded_colored/website_32px.png" width="32" border="0" style=" display: block; width: 100%; " /></a> </td>
+                                                                    <td class="r23-i" style=" font-size: 0px; line-height: 0px; padding-bottom: 5px; padding-top: 5px; " > <a href="https://plane.so/" target="_blank" style=" color: #006399; text-decoration: underline; " > <img src="https://creative-assets.mailinblue.com/editor/social-icons/rounded_colored/website_32px.png" width="32" border="0" style=" display: block; width: 100%; " /></a> </td>
                                                                   </tr>
                                                                 </table>
                                                               </th>

apps/api/templates/emails/invitations/project_invitation.html

@@ -8,7 +8,7 @@
     <title> {{ first_name }} invited you to join {{ project_name }} on Plane </title>
     <style type="text/css" emogrify="no"> #outlook a { padding: 0; } .ExternalClass { width: 100%; } .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div { line-height: 100%; } table td { border-collapse: collapse; mso-line-height-rule: exactly; } .editable.image { font-size: 0 !important; line-height: 0 !important; } .nl2go_preheader { display: none !important; mso-hide: all !important; mso-line-height-rule: exactly; visibility: hidden !important; line-height: 0px !important; font-size: 0px !important; } body { width: 100% !important; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; margin: 0; padding: 0; } img { outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; } a img { border: none; } table { border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; } th { font-weight: normal; text-align: left; } *[class="gmail-fix"] { display: none !important; } </style>
     <style type="text/css" emogrify="no"> @media (max-width: 600px) { .gmx-killpill { content: " \03D1"; } } </style>
-    <style type="text/css" emogrify="no"> @media (max-width: 600px) { .gmx-killpill { content: " \03D1"; } .r0-c { box-sizing: border-box !important; text-align: center !important; valign: top !important; width: 320px !important; } .r1-o { border-style: solid !important; margin: 0 auto 0 auto !important; width: 320px !important; } .r2-i { background-color: #ffffff !important; } .r3-c { box-sizing: border-box !important; text-align: center !important; valign: top !important; width: 100% !important; } .r4-o { border-style: solid !important; margin: 0 auto 0 auto !important; margin-top: 20px !important; width: 100% !important; } .r5-i { background-color: #f8f9fa !important; padding-bottom: 20px !important; padding-left: 10px !important; padding-right: 10px !important; padding-top: 20px !important; } .r6-c { box-sizing: border-box !important; display: block !important; valign: top !important; width: 100% !important; } .r7-o { border-style: solid !important; width: 100% !important; } .r8-i { padding-left: 0px !important; padding-right: 0px !important; } .r9-o { border-style: solid !important; margin: 0 auto 0 auto !important; width: 100% !important; } .r10-i { padding-bottom: 35px !important; padding-top: 15px !important; } .r11-c { box-sizing: border-box !important; text-align: left !important; valign: top !important; width: 100% !important; } .r12-o { border-style: solid !important; margin: 0 auto 0 0 !important; width: 100% !important; } .r13-i { padding-left: 20px !important; padding-right: 20px !important; padding-top: 0px !important; text-align: center !important; } .r14-o { border-style: solid !important; margin: 0 auto 0 auto !important; margin-bottom: 20px !important; margin-top: 20px !important; width: 100% !important; } .r15-i { text-align: center !important; } .r16-r { background-color: #ffffff !important; border-color: #3f76ff !important; border-radius: 4px !important; border-width: 1px !important; box-sizing: border-box; height: initial !important; padding-bottom: 7px !important; padding-left: 20px !important; padding-right: 20px !important; padding-top: 7px !important; text-align: center !important; width: 100% !important; } .r17-i { padding-bottom: 15px !important; padding-left: 20px !important; padding-right: 20px !important; padding-top: 15px !important; text-align: left !important; } .r18-i { background-color: #eff2f7 !important; padding-bottom: 20px !important; padding-left: 15px !important; padding-right: 15px !important; padding-top: 20px !important; } .r19-i { padding-bottom: 15px !important; padding-top: 15px !important; } .r20-i { color: #3b3f44 !important; padding-bottom: 0px !important; padding-top: 0px !important; text-align: center !important; } .r21-c { box-sizing: border-box !important; text-align: center !important; width: 100% !important; } .r22-c { box-sizing: border-box !important; width: 100% !important; } .r23-i { font-size: 0px !important; padding-bottom: 15px !important; padding-left: 65px !important; padding-right: 65px !important; padding-top: 15px !important; } .r24-c { box-sizing: border-box !important; width: 32px !important; } .r25-o { border-style: solid !important; margin-right: 8px !important; width: 32px !important; } .r26-i { padding-bottom: 5px !important; padding-top: 5px !important; } .r27-o { border-style: solid !important; margin-right: 0px !important; width: 32px !important; } .r28-i { color: #3b3f44 !important; padding-bottom: 15px !important; padding-top: 15px !important; text-align: center !important; } .r29-i { padding-bottom: 15px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; } .r30-c { box-sizing: border-box !important; text-align: center !important; valign: top !important; width: 129px !important; } .r31-o { border-style: solid !important; margin: 0 auto 0 auto !important; width: 129px !important; } body { -webkit-text-size-adjust: none; } .nl2go-responsive-hide { display: none; } .nl2go-body-table { min-width: unset !important; } .mobshow { height: auto !important; overflow: visible !important; max-height: unset !important; visibility: visible !important; border: none !important; } .resp-table { display: inline-table !important; } .magic-resp { display: table-cell !important; } } </style>
+    <style type="text/css" emogrify="no"> @media (max-width: 600px) { .gmx-killpill { content: " \03D1"; } .r0-c { box-sizing: border-box !important; text-align: center !important; valign: top !important; width: 320px !important; } .r1-o { border-style: solid !important; margin: 0 auto 0 auto !important; width: 320px !important; } .r2-i { background-color: #ffffff !important; } .r3-c { box-sizing: border-box !important; text-align: center !important; valign: top !important; width: 100% !important; } .r4-o { border-style: solid !important; margin: 0 auto 0 auto !important; margin-top: 20px !important; width: 100% !important; } .r5-i { background-color: #f8f9fa !important; padding-bottom: 20px !important; padding-left: 10px !important; padding-right: 10px !important; padding-top: 20px !important; } .r6-c { box-sizing: border-box !important; display: block !important; valign: top !important; width: 100% !important; } .r7-o { border-style: solid !important; width: 100% !important; } .r8-i { padding-left: 0px !important; padding-right: 0px !important; } .r9-o { border-style: solid !important; margin: 0 auto 0 auto !important; width: 100% !important; } .r10-i { padding-bottom: 35px !important; padding-top: 15px !important; } .r11-c { box-sizing: border-box !important; text-align: left !important; valign: top !important; width: 100% !important; } .r12-o { border-style: solid !important; margin: 0 auto 0 0 !important; width: 100% !important; } .r13-i { padding-left: 20px !important; padding-right: 20px !important; padding-top: 0px !important; text-align: center !important; } .r14-o { border-style: solid !important; margin: 0 auto 0 auto !important; margin-bottom: 20px !important; margin-top: 20px !important; width: 100% !important; } .r15-i { text-align: center !important; } .r16-r { background-color: #ffffff !important; border-color: #006399 !important; border-radius: 4px !important; border-width: 1px !important; box-sizing: border-box; height: initial !important; padding-bottom: 7px !important; padding-left: 20px !important; padding-right: 20px !important; padding-top: 7px !important; text-align: center !important; width: 100% !important; } .r17-i { padding-bottom: 15px !important; padding-left: 20px !important; padding-right: 20px !important; padding-top: 15px !important; text-align: left !important; } .r18-i { background-color: #eff2f7 !important; padding-bottom: 20px !important; padding-left: 15px !important; padding-right: 15px !important; padding-top: 20px !important; } .r19-i { padding-bottom: 15px !important; padding-top: 15px !important; } .r20-i { color: #3b3f44 !important; padding-bottom: 0px !important; padding-top: 0px !important; text-align: center !important; } .r21-c { box-sizing: border-box !important; text-align: center !important; width: 100% !important; } .r22-c { box-sizing: border-box !important; width: 100% !important; } .r23-i { font-size: 0px !important; padding-bottom: 15px !important; padding-left: 65px !important; padding-right: 65px !important; padding-top: 15px !important; } .r24-c { box-sizing: border-box !important; width: 32px !important; } .r25-o { border-style: solid !important; margin-right: 8px !important; width: 32px !important; } .r26-i { padding-bottom: 5px !important; padding-top: 5px !important; } .r27-o { border-style: solid !important; margin-right: 0px !important; width: 32px !important; } .r28-i { color: #3b3f44 !important; padding-bottom: 15px !important; padding-top: 15px !important; text-align: center !important; } .r29-i { padding-bottom: 15px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; } .r30-c { box-sizing: border-box !important; text-align: center !important; valign: top !important; width: 129px !important; } .r31-o { border-style: solid !important; margin: 0 auto 0 auto !important; width: 129px !important; } body { -webkit-text-size-adjust: none; } .nl2go-responsive-hide { display: none; } .nl2go-body-table { min-width: unset !important; } .mobshow { height: auto !important; overflow: visible !important; max-height: unset !important; visibility: visible !important; border: none !important; } .resp-table { display: inline-table !important; } .magic-resp { display: table-cell !important; } } </style>
     <!--[if !mso]><!--> 
     <style type="text/css" emogrify="no"> @import url("https://fonts.googleapis.com/css2?family=Bitter&family=Roboto"); </style>
     <!--<![endif]--> 
@@ -58,7 +58,7 @@
                                                   <td height="15" style=" font-size: 15px; line-height: 15px; " > ­ </td>
                                                 </tr>
                                                 <tr>
-                                                  <td class="r10-i" style=" font-size: 0px; line-height: 0px; " > <img src="https://ik.imagekit.io/w2okwbtu2/Plane_Logo_pIhtbyIoa.png?ik-sdk-version=javascript-1.4.3&updatedAt=1670873447444" width="120" border="0" class="" style=" display: block; width: 100%; " /> </td>
+                                                  <td class="r10-i" style=" font-size: 0px; line-height: 0px; " > <img src="https://media.docs.plane.so/logo/new-logo-white.png" width="120" border="0" class="" style=" display: block; width: 100%; " /> </td>
                                                 </tr>
                                                 <tr class="nl2go-responsive-hide" >
                                                   <td height="35" style=" font-size: 35px; line-height: 35px; " > ­ </td>
@@ -91,17 +91,17 @@
                                                 <tr>
                                                   <td height="18" align="center" valign="top" class="r15-i nl2go-default-textstyle" style=" color: #3b3f44; font-family: arial, helvetica, sans-serif; font-size: 16px; line-height: 1.5; " >
                                                     <!--[if mso]> 
-                                                    <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="{{invitation_url}}" style=" v-text-anchor: middle; height: 33px; width: 301px; " arcsize="12%" fillcolor="#ffffff" strokecolor="#3f76ff" strokeweight="1px" data-btn="1" >
+                                                    <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="{{invitation_url}}" style=" v-text-anchor: middle; height: 33px; width: 301px; " arcsize="12%" fillcolor="#ffffff" strokecolor="#006399" strokeweight="1px" data-btn="1" >
                                                       <w:anchorlock />
                                                       <div style="display: none" >
                                                         <center class="default-button" >
-                                                          <p> <span style=" color: #3f76ff; " >Accept the invite</span > </p>
+                                                          <p> <span style=" color: #006399; " >Accept the invite</span > </p>
                                                         </center>
                                                       </div>
                                                     </v:roundrect>
                                                     <![endif]--> <!--[if !mso]><!-- --> 
-                                                    <a href="{{invitation_url}}" class="r16-r default-button" target="_blank" rel="noopener noreferrer" data-btn="1" style=" font-style: normal; font-weight: bold; line-height: 1.15; text-decoration: none; border-style: solid; word-wrap: break-word; display: inline-block; -webkit-text-size-adjust: none; mso-hide: all; background-color: #ffffff; border-color: #3f76ff; border-radius: 4px; border-width: 1px; color: #ffffff; font-family: arial, helvetica, sans-serif; font-size: 16px; height: 18px; padding-bottom: 7px; padding-left: 20px; padding-right: 20px; padding-top: 7px; width: 258px; " >
-                                                      <p style="margin: 0"> <span style="color: #3f76ff" >Accept the invite</span > </p>
+                                                    <a href="{{invitation_url}}" class="r16-r default-button" target="_blank" rel="noopener noreferrer" data-btn="1" style=" font-style: normal; font-weight: bold; line-height: 1.15; text-decoration: none; border-style: solid; word-wrap: break-word; display: inline-block; -webkit-text-size-adjust: none; mso-hide: all; background-color: #ffffff; border-color: #006399; border-radius: 4px; border-width: 1px; color: #ffffff; font-family: arial, helvetica, sans-serif; font-size: 16px; height: 18px; padding-bottom: 7px; padding-left: 20px; padding-right: 20px; padding-top: 7px; width: 258px; " >
+                                                      <p style="margin: 0"> <span style="color: #006399" >Accept the invite</span > </p>
                                                     </a>
                                                     <!--<![endif]--> 
                                                   </td>

apps/api/templates/emails/invitations/workspace_invitation.html

@@ -8,8 +8,8 @@
     <title>{{first_name}} has invited you to join them in {{workspace_name}} on Plane.</title>
     <style type="text/css" emogrify="no">#outlook a { padding:0; } .ExternalClass { width:100%; } .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div { line-height: 100%; } table td { border-collapse: collapse; mso-line-height-rule: exactly; } .editable.image { font-size: 0 !important; line-height: 0 !important; } .nl2go_preheader { display: none !important; mso-hide:all !important; mso-line-height-rule: exactly; visibility: hidden !important; line-height: 0px !important; font-size: 0px !important; } body { width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0; } img { outline:none; text-decoration:none; -ms-interpolation-mode: bicubic; } a img { border:none; } table { border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; } th { font-weight: normal; text-align: left; } *[class="gmail-fix"] { display: none !important; } </style>
     <style type="text/css" emogrify="no"> @media (max-width: 600px) { .gmx-killpill { content: ' \03D1';} } </style>
-    <style type="text/css" emogrify="no">@media (max-width: 600px) { .gmx-killpill { content: ' \03D1';} .r0-o { border-style: solid !important; margin: 0 auto 0 auto !important; width: 320px !important } .r1-i { background-color: #ffffff !important } .r2-c { box-sizing: border-box !important; text-align: center !important; valign: top !important; width: 100% !important } .r3-o { border-style: solid !important; margin: 0 auto 0 auto !important; width: 100% !important } .r4-i { padding-bottom: 20px !important; padding-left: 15px !important; padding-right: 15px !important; padding-top: 20px !important } .r5-c { box-sizing: border-box !important; display: block !important; valign: top !important; width: 100% !important } .r6-o { border-style: solid !important; width: 100% !important } .r7-i { padding-left: 0px !important; padding-right: 0px !important } .r8-i { padding-bottom: 20px !important; padding-left: 10px !important; padding-right: 10px !important; padding-top: 20px !important } .r9-c { box-sizing: border-box !important; text-align: left !important; valign: top !important; width: 100% !important } .r10-o { border-style: solid !important; margin: 0 auto 0 0 !important; width: 100% !important } .r11-i { padding-top: 15px !important; text-align: center !important } .r12-c { box-sizing: border-box !important; padding-bottom: 15px !important; padding-top: 15px !important; text-align: left !important; valign: top !important; width: 100% !important } .r13-c { box-sizing: border-box !important; padding: 0 !important; text-align: center !important; valign: top !important; width: 100% !important } .r14-o { border-style: solid !important; margin: 0 auto 0 auto !important; margin-bottom: 15px !important; margin-top: 15px !important; width: 100% !important } .r15-i { padding: 0 !important; text-align: center !important } .r16-r { background-color: #3f76ff !important; border-radius: 4px !important; border-width: 0px !important; box-sizing: border-box; height: initial !important; padding: 0 !important; padding-bottom: 12px !important; padding-left: 5px !important; padding-right: 5px !important; padding-top: 12px !important; text-align: center !important; width: 100% !important } .r17-c { box-sizing: border-box !important; text-align: center !important; width: 100% !important } .r18-c { box-sizing: border-box !important; width: 100% !important } .r19-i { font-size: 0px !important; padding-bottom: 15px !important; padding-left: 65px !important; padding-right: 65px !important; padding-top: 15px !important } .r20-c { box-sizing: border-box !important; width: 32px !important } .r21-o { border-style: solid !important; margin-right: 8px !important; width: 32px !important } .r22-i { padding-bottom: 5px !important; padding-top: 5px !important } .r23-o { border-style: solid !important; margin-right: 0px !important; width: 32px !important } body { -webkit-text-size-adjust: none } .nl2go-responsive-hide { display: none } .nl2go-body-table { min-width: unset !important } .mobshow { height: auto !important; overflow: visible !important; max-height: unset !important; visibility: visible !important; border: none !important } .resp-table { display: inline-table !important } .magic-resp { display: table-cell !important } } </style>
-    <style type="text/css">p, h1, h2, h3, h4, ol, ul, li { margin: 0; } a, a:link { color: #3f76ff; text-decoration: underline } .nl2go-default-textstyle { color: #3b3f44; font-family: georgia, serif; font-size: 18px; line-height: 1.5; word-break: break-word } .default-button { color: #ffffff; font-family: georgia, serif; font-size: 16px; font-style: normal; font-weight: bold; line-height: 1.15; text-decoration: none; word-break: break-word } .default-heading1 { color: #1F2D3D; font-family: arial,helvetica,sans-serif; font-size: 36px; word-break: break-word } .default-heading2 { color: #1F2D3D; font-family: arial,helvetica,sans-serif; font-size: 32px; word-break: break-word } .default-heading3 { color: #1F2D3D; font-family: arial,helvetica,sans-serif; font-size: 24px; word-break: break-word } .default-heading4 { color: #1F2D3D; font-family: arial,helvetica,sans-serif; font-size: 18px; word-break: break-word } a[x-apple-data-detectors] { color: inherit !important; text-decoration: inherit !important; font-size: inherit !important; font-family: inherit !important; font-weight: inherit !important; line-height: inherit !important; } .no-show-for-you { border: none; display: none; float: none; font-size: 0; height: 0; line-height: 0; max-height: 0; mso-hide: all; overflow: hidden; table-layout: fixed; visibility: hidden; width: 0; } </style>
+    <style type="text/css" emogrify="no">@media (max-width: 600px) { .gmx-killpill { content: ' \03D1';} .r0-o { border-style: solid !important; margin: 0 auto 0 auto !important; width: 320px !important } .r1-i { background-color: #ffffff !important } .r2-c { box-sizing: border-box !important; text-align: center !important; valign: top !important; width: 100% !important } .r3-o { border-style: solid !important; margin: 0 auto 0 auto !important; width: 100% !important } .r4-i { padding-bottom: 20px !important; padding-left: 15px !important; padding-right: 15px !important; padding-top: 20px !important } .r5-c { box-sizing: border-box !important; display: block !important; valign: top !important; width: 100% !important } .r6-o { border-style: solid !important; width: 100% !important } .r7-i { padding-left: 0px !important; padding-right: 0px !important } .r8-i { padding-bottom: 20px !important; padding-left: 10px !important; padding-right: 10px !important; padding-top: 20px !important } .r9-c { box-sizing: border-box !important; text-align: left !important; valign: top !important; width: 100% !important } .r10-o { border-style: solid !important; margin: 0 auto 0 0 !important; width: 100% !important } .r11-i { padding-top: 15px !important; text-align: center !important } .r12-c { box-sizing: border-box !important; padding-bottom: 15px !important; padding-top: 15px !important; text-align: left !important; valign: top !important; width: 100% !important } .r13-c { box-sizing: border-box !important; padding: 0 !important; text-align: center !important; valign: top !important; width: 100% !important } .r14-o { border-style: solid !important; margin: 0 auto 0 auto !important; margin-bottom: 15px !important; margin-top: 15px !important; width: 100% !important } .r15-i { padding: 0 !important; text-align: center !important } .r16-r { background-color: #006399 !important; border-radius: 4px !important; border-width: 0px !important; box-sizing: border-box; height: initial !important; padding: 0 !important; padding-bottom: 12px !important; padding-left: 5px !important; padding-right: 5px !important; padding-top: 12px !important; text-align: center !important; width: 100% !important } .r17-c { box-sizing: border-box !important; text-align: center !important; width: 100% !important } .r18-c { box-sizing: border-box !important; width: 100% !important } .r19-i { font-size: 0px !important; padding-bottom: 15px !important; padding-left: 65px !important; padding-right: 65px !important; padding-top: 15px !important } .r20-c { box-sizing: border-box !important; width: 32px !important } .r21-o { border-style: solid !important; margin-right: 8px !important; width: 32px !important } .r22-i { padding-bottom: 5px !important; padding-top: 5px !important } .r23-o { border-style: solid !important; margin-right: 0px !important; width: 32px !important } body { -webkit-text-size-adjust: none } .nl2go-responsive-hide { display: none } .nl2go-body-table { min-width: unset !important } .mobshow { height: auto !important; overflow: visible !important; max-height: unset !important; visibility: visible !important; border: none !important } .resp-table { display: inline-table !important } .magic-resp { display: table-cell !important } } </style>
+    <style type="text/css">p, h1, h2, h3, h4, ol, ul, li { margin: 0; } a, a:link { color: #006399; text-decoration: underline } .nl2go-default-textstyle { color: #3b3f44; font-family: georgia, serif; font-size: 18px; line-height: 1.5; word-break: break-word } .default-button { color: #ffffff; font-family: georgia, serif; font-size: 16px; font-style: normal; font-weight: bold; line-height: 1.15; text-decoration: none; word-break: break-word } .default-heading1 { color: #1F2D3D; font-family: arial,helvetica,sans-serif; font-size: 36px; word-break: break-word } .default-heading2 { color: #1F2D3D; font-family: arial,helvetica,sans-serif; font-size: 32px; word-break: break-word } .default-heading3 { color: #1F2D3D; font-family: arial,helvetica,sans-serif; font-size: 24px; word-break: break-word } .default-heading4 { color: #1F2D3D; font-family: arial,helvetica,sans-serif; font-size: 18px; word-break: break-word } a[x-apple-data-detectors] { color: inherit !important; text-decoration: inherit !important; font-size: inherit !important; font-family: inherit !important; font-weight: inherit !important; line-height: inherit !important; } .no-show-for-you { border: none; display: none; float: none; font-size: 0; height: 0; line-height: 0; max-height: 0; mso-hide: all; overflow: hidden; table-layout: fixed; visibility: hidden; width: 0; } </style>
     <!--[if mso]>
     <xml>
       <o:OfficeDocumentSettings>
@@ -18,9 +18,9 @@
       </o:OfficeDocumentSettings>
     </xml>
     <![endif]-->
-    <style type="text/css">a:link{color: #3f76ff; text-decoration: underline;}</style>
+    <style type="text/css">a:link{color: #006399; text-decoration: underline;}</style>
   </head>
-  <body bgcolor="#ffffff" text="#3b3f44" link="#3f76ff" yahoo="fix" style="background-color: #ffffff;">
+  <body bgcolor="#ffffff" text="#3b3f44" link="#006399" yahoo="fix" style="background-color: #ffffff;">
     <table cellspacing="0" cellpadding="0" border="0" role="presentation" class="nl2go-body-table" width="100%" style="background-color: #ffffff; width: 100%;">
       <tr>
         <td>
@@ -41,7 +41,7 @@
                                       <td class="r2-c" align="center">
                                         <table cellspacing="0" cellpadding="0" border="0" role="presentation" width="200" class="r3-o" style="table-layout: fixed; width: 200px;">
                                           <tr>
-                                            <td style="font-size: 0px; line-height: 0px;"> <img src="https://img.mailinblue.com/5942152/images/content_library/original/64708f00b503b149db7ff135.png" width="200" border="0" style="display: block; width: 100%;"></td>
+                                            <td style="font-size: 0px; line-height: 0px;"> <img src="https://media.docs.plane.so/logo/new-logo-white.png" width="200" border="0" style="display: block; width: 100%;"></td>
                                           </tr>
                                         </table>
                                       </td>
@@ -88,9 +88,9 @@
                                     </tr>
                                     <tr>
                                       <td class="r13-c" align="center" style="align: center; padding-bottom: 15px; padding-top: 15px; valign: top;">
-                                        <table cellspacing="0" cellpadding="0" border="0" role="presentation" width="300" class="r14-o" style="background-color: #3f76ff; border-collapse: separate; border-color: #3f76ff; border-radius: 4px; border-style: solid; border-width: 0px; table-layout: fixed; width: 300px;">
+                                        <table cellspacing="0" cellpadding="0" border="0" role="presentation" width="300" class="r14-o" style="background-color: #006399; border-collapse: separate; border-color: #006399; border-radius: 4px; border-style: solid; border-width: 0px; table-layout: fixed; width: 300px;">
                                           <tr>
-                                            <td height="18" align="center" valign="top" class="r15-i nl2go-default-textstyle" style="word-break: break-word; background-color: #3f76ff; border-radius: 4px; color: #ffffff; font-family: georgia, serif; font-size: 16px; font-style: normal; line-height: 1.15; padding-bottom: 12px; padding-left: 5px; padding-right: 5px; padding-top: 12px; text-align: center;"> <a href="{{abs_url}}" class="r16-r default-button" target="_blank" data-btn="1" style="font-style: normal; font-weight: bold; line-height: 1.15; text-decoration: none; word-break: break-word; word-wrap: break-word; display: block; -webkit-text-size-adjust: none; color: #ffffff; font-family: georgia, serif; font-size: 16px;"> <span><span style="font-family: Arial, helvetica, sans-serif;">Join them on Plane</span></span></a> </td>
+                                            <td height="18" align="center" valign="top" class="r15-i nl2go-default-textstyle" style="word-break: break-word; background-color: #006399; border-radius: 4px; color: #ffffff; font-family: georgia, serif; font-size: 16px; font-style: normal; line-height: 1.15; padding-bottom: 12px; padding-left: 5px; padding-right: 5px; padding-top: 12px; text-align: center;"> <a href="{{abs_url}}" class="r16-r default-button" target="_blank" data-btn="1" style="font-style: normal; font-weight: bold; line-height: 1.15; text-decoration: none; word-break: break-word; word-wrap: break-word; display: block; -webkit-text-size-adjust: none; color: #ffffff; font-family: georgia, serif; font-size: 16px;"> <span><span style="font-family: Arial, helvetica, sans-serif;">Join them on Plane</span></span></a> </td>
                                           </tr>
                                         </table>
                                       </td>
@@ -131,7 +131,7 @@
                                                               <th width="40" class="r20-c mobshow resp-table" style="font-weight: normal;">
                                                                 <table cellspacing="0" cellpadding="0" border="0" role="presentation" width="100%" class="r21-o" style="table-layout: fixed; width: 100%;">
                                                                   <tr>
-                                                                    <td class="r22-i" style="font-size: 0px; line-height: 0px; padding-bottom: 5px; padding-top: 5px;"> <a href="https://github.com/makeplane" target="_blank" style="color: #3f76ff; text-decoration: underline;"> <img src="https://creative-assets.mailinblue.com/editor/social-icons/rounded_colored/github_32px.png" width="32" border="0" style="display: block; width: 100%;"></a> </td>
+                                                                    <td class="r22-i" style="font-size: 0px; line-height: 0px; padding-bottom: 5px; padding-top: 5px;"> <a href="https://github.com/makeplane" target="_blank" style="color: #006399; text-decoration: underline;"> <img src="https://creative-assets.mailinblue.com/editor/social-icons/rounded_colored/github_32px.png" width="32" border="0" style="display: block; width: 100%;"></a> </td>
                                                                     <td class="nl2go-responsive-hide" width="8" style="font-size: 0px; line-height: 1px;">­ </td>
                                                                   </tr>
                                                                 </table>
@@ -139,7 +139,7 @@
                                                               <th width="40" class="r20-c mobshow resp-table" style="font-weight: normal;">
                                                                 <table cellspacing="0" cellpadding="0" border="0" role="presentation" width="100%" class="r21-o" style="table-layout: fixed; width: 100%;">
                                                                   <tr>
-                                                                    <td class="r22-i" style="font-size: 0px; line-height: 0px; padding-bottom: 5px; padding-top: 5px;"> <a href="https://www.linkedin.com/company/planepowers/" target="_blank" style="color: #3f76ff; text-decoration: underline;"> <img src="https://creative-assets.mailinblue.com/editor/social-icons/rounded_colored/linkedin_32px.png" width="32" border="0" style="display: block; width: 100%;"></a> </td>
+                                                                    <td class="r22-i" style="font-size: 0px; line-height: 0px; padding-bottom: 5px; padding-top: 5px;"> <a href="https://www.linkedin.com/company/planepowers/" target="_blank" style="color: #006399; text-decoration: underline;"> <img src="https://creative-assets.mailinblue.com/editor/social-icons/rounded_colored/linkedin_32px.png" width="32" border="0" style="display: block; width: 100%;"></a> </td>
                                                                     <td class="nl2go-responsive-hide" width="8" style="font-size: 0px; line-height: 1px;">­ </td>
                                                                   </tr>
                                                                 </table>
@@ -147,7 +147,7 @@
                                                               <th width="40" class="r20-c mobshow resp-table" style="font-weight: normal;">
                                                                 <table cellspacing="0" cellpadding="0" border="0" role="presentation" width="100%" class="r21-o" style="table-layout: fixed; width: 100%;">
                                                                   <tr>
-                                                                    <td class="r22-i" style="font-size: 0px; line-height: 0px; padding-bottom: 5px; padding-top: 5px;"> <a href="https://twitter.com/planepowers" target="_blank" style="color: #3f76ff; text-decoration: underline;"> <img src="https://creative-assets.mailinblue.com/editor/social-icons/rounded_colored/twitter_32px.png" width="32" border="0" style="display: block; width: 100%;"></a> </td>
+                                                                    <td class="r22-i" style="font-size: 0px; line-height: 0px; padding-bottom: 5px; padding-top: 5px;"> <a href="https://twitter.com/planepowers" target="_blank" style="color: #006399; text-decoration: underline;"> <img src="https://creative-assets.mailinblue.com/editor/social-icons/rounded_colored/twitter_32px.png" width="32" border="0" style="display: block; width: 100%;"></a> </td>
                                                                     <td class="nl2go-responsive-hide" width="8" style="font-size: 0px; line-height: 1px;">­ </td>
                                                                   </tr>
                                                                 </table>
@@ -155,7 +155,7 @@
                                                               <th width="32" class="r20-c mobshow resp-table" style="font-weight: normal;">
                                                                 <table cellspacing="0" cellpadding="0" border="0" role="presentation" width="100%" class="r23-o" style="table-layout: fixed; width: 100%;">
                                                                   <tr>
-                                                                    <td class="r22-i" style="font-size: 0px; line-height: 0px; padding-bottom: 5px; padding-top: 5px;"> <a href="https://plane.so/" target="_blank" style="color: #3f76ff; text-decoration: underline;"> <img src="https://creative-assets.mailinblue.com/editor/social-icons/rounded_colored/website_32px.png" width="32" border="0" style="display: block; width: 100%;"></a> </td>
+                                                                    <td class="r22-i" style="font-size: 0px; line-height: 0px; padding-bottom: 5px; padding-top: 5px;"> <a href="https://plane.so/" target="_blank" style="color: #006399; text-decoration: underline;"> <img src="https://creative-assets.mailinblue.com/editor/social-icons/rounded_colored/website_32px.png" width="32" border="0" style="display: block; width: 100%;"></a> </td>
                                                                   </tr>
                                                                 </table>
                                                               </th>

apps/api/templates/emails/notifications/issue-updates.html

@@ -8,14 +8,14 @@
     <style> *[class="gmail-fix"] { display: none !important; } </style>
     <style type="text/css" emogrify="no"> @media (max-width: 600px) { .gmx-killpill { content: " \03D1"; } } </style>
   </head>
-  <body bgcolor="#ffffff" text="#3b3f44" link="#3f76ff" yahoo="fix" style="background-color: #f7f9ff; margin: 20px" >
+  <body bgcolor="#ffffff" text="#3b3f44" link="#006399" yahoo="fix" style="background-color: #f7f9ff; margin: 20px" >
     <div style=" width: 600px; table-layout: fixed; height: 100%; margin-left: auto; margin-right: auto; " >
       <!-- Header --> 
       <div>
         <table style="width: 600px" cellspacing="0">
           <tr>
             <td>
-              <div style="margin-left: 30px; margin-bottom: 20px; margin-top: 20px" > <img src="https://plane-marketing.s3.ap-south-1.amazonaws.com/plane-assets/emails/plane-logo.png" width="130" height="40" border="0" /> </div>
+              <div style="margin-left: 30px; margin-bottom: 20px; margin-top: 20px" > <img src="https://media.docs.plane.so/logo/new-logo-white.png" width="150" border="0" /> </div>
             </td>
           </tr>
         </table>

apps/api/templates/emails/notifications/project_addition.html

@@ -164,7 +164,7 @@
           text-align: center !important;
         }
         .r15-r {
-          background-color: #3f76ff !important;
+          background-color: #006399 !important;
           border-radius: 4px !important;
           border-width: 0px !important;
           box-sizing: border-box;
@@ -296,7 +296,7 @@
       }
       a,
       a:link {
-        color: #3f76ff;
+        color: #006399;
         text-decoration: underline;
       }
       .nl2go-default-textstyle {
@@ -372,7 +372,7 @@
     [endif]-->
     <style type="text/css">
       a:link {
-        color: #3f76ff;
+        color: #006399;
         text-decoration: underline;
       }
     </style>
@@ -380,7 +380,7 @@
   <body
     bgcolor="#ffffff"
     text="#3b3f44"
-    link="#3f76ff"
+    link="#006399"
     yahoo="fix"
     style="background-color: #ffffff"
   >
@@ -483,7 +483,7 @@
                                               "
                                             >
                                               <img
-                                                src="https://img.mailinblue.com/5942152/images/content_library/original/64708f00b503b149db7ff135.png"
+                                                src="https://media.docs.plane.so/logo/new-logo-white.png"
                                                 width="150"
                                                 border="0"
                                                 style="
@@ -672,9 +672,9 @@
                                           width="285"
                                           class="r13-o"
                                           style="
-                                            background-color: #3f76ff;
+                                            background-color: #006399;
                                             border-collapse: separate;
-                                            border-color: #3f76ff;
+                                            border-color: #006399;
                                             border-radius: 4px;
                                             border-style: solid;
                                             border-width: 0px;
@@ -690,7 +690,7 @@
                                               class="r14-i nl2go-default-textstyle"
                                               style="
                                                 word-break: break-word;
-                                                background-color: #3f76ff;
+                                                background-color: #006399;
                                                 border-radius: 4px;
                                                 color: #ffffff;
                                                 font-family: georgia, serif;
@@ -984,7 +984,7 @@
                                                     title="Plane Support on Discod"
                                                     target="_blank"
                                                     style="
-                                                      color: #3f76ff;
+                                                      color: #006399;
                                                       text-decoration: underline;
                                                     "
                                                     ><span
@@ -998,7 +998,7 @@
                                                     title="@planepowers"
                                                     target="_blank"
                                                     style="
-                                                      color: #3f76ff;
+                                                      color: #006399;
                                                       text-decoration: underline;
                                                     "
                                                     ><span
@@ -1012,7 +1012,7 @@
                                                     title="Plane's GitHub conversations"
                                                     target="_blank"
                                                     style="
-                                                      color: #3f76ff;
+                                                      color: #006399;
                                                       text-decoration: underline;
                                                     "
                                                     ><span
@@ -1028,7 +1028,7 @@
                                                     title="Plane's roadmap"
                                                     target="_blank"
                                                     style="
-                                                      color: #3f76ff;
+                                                      color: #006399;
                                                       text-decoration: underline;
                                                     "
                                                     ><span
@@ -1248,7 +1248,7 @@
                                                                         href="https://github.com/makeplane"
                                                                         target="_blank"
                                                                         style="
-                                                                          color: #3f76ff;
+                                                                          color: #006399;
                                                                           text-decoration: underline;
                                                                         "
                                                                       >
@@ -1308,7 +1308,7 @@
                                                                         href="https://www.linkedin.com/company/planepowers/"
                                                                         target="_blank"
                                                                         style="
-                                                                          color: #3f76ff;
+                                                                          color: #006399;
                                                                           text-decoration: underline;
                                                                         "
                                                                       >
@@ -1368,7 +1368,7 @@
                                                                         href="https://twitter.com/planepowers"
                                                                         target="_blank"
                                                                         style="
-                                                                          color: #3f76ff;
+                                                                          color: #006399;
                                                                           text-decoration: underline;
                                                                         "
                                                                       >
@@ -1428,7 +1428,7 @@
                                                                         href="https://plane.so/"
                                                                         target="_blank"
                                                                         style="
-                                                                          color: #3f76ff;
+                                                                          color: #006399;
                                                                           text-decoration: underline;
                                                                         "
                                                                       >

apps/api/templates/emails/notifications/webhook-deactivate.html

@@ -8,8 +8,8 @@
     <title>{{ message }}</title>
     <style type="text/css" emogrify="no"> #outlook a { padding: 0; } .ExternalClass { width: 100%; } .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div { line-height: 100%; } table td { border-collapse: collapse; mso-line-height-rule: exactly; } .editable.image { font-size: 0 !important; line-height: 0 !important; } .nl2go_preheader { display: none !important; mso-hide: all !important; mso-line-height-rule: exactly; visibility: hidden !important; line-height: 0px !important; font-size: 0px !important; } body { width: 100% !important; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; margin: 0; padding: 0; } img { outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; } a img { border: none; } table { border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; } th { font-weight: normal; text-align: left; } *[class="gmail-fix"] { display: none !important; } </style>
     <style type="text/css" emogrify="no"> @media (max-width: 600px) { .gmx-killpill { content: " \03D1"; } } </style>
-    <style type="text/css" emogrify="no"> @media (max-width: 600px) { .gmx-killpill { content: " \03D1"; } .r0-o { border-style: solid !important; margin: 0 auto 0 auto !important; width: 320px !important; } .r1-i { background-color: #ffffff !important; } .r2-c { box-sizing: border-box !important; text-align: center !important; valign: top !important; width: 100% !important; } .r3-o { border-style: solid !important; margin: 0 auto 0 auto !important; width: 100% !important; } .r4-i { padding-bottom: 20px !important; padding-left: 15px !important; padding-right: 15px !important; padding-top: 20px !important; } .r5-c { box-sizing: border-box !important; display: block !important; valign: top !important; width: 100% !important; } .r6-o { border-style: solid !important; width: 100% !important; } .r7-i { padding-left: 0px !important; padding-right: 0px !important; } .r8-c { box-sizing: border-box !important; text-align: left !important; valign: top !important; width: 100% !important; } .r9-o { border-style: solid !important; margin: 0 auto 0 0 !important; width: 100% !important; } .r10-i { padding-bottom: 10px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 10px !important; } .r11-i { padding-bottom: 15px !important; padding-top: 15px !important; text-align: left !important; } .r12-c { box-sizing: border-box !important; padding: 0 !important; text-align: center !important; valign: top !important; width: 100% !important; } .r13-o { border-style: solid !important; margin: 0 auto 0 auto !important; margin-bottom: 15px !important; margin-top: 15px !important; width: 100% !important; } .r14-i { padding: 0 !important; text-align: center !important; } .r15-r { background-color: #3f76ff !important; border-radius: 4px !important; border-width: 0px !important; box-sizing: border-box; height: initial !important; padding: 0 !important; padding-bottom: 12px !important; padding-top: 12px !important; text-align: center !important; width: 100% !important; } .r16-i { padding-bottom: 0px !important; padding-left: 15px !important; padding-right: 15px !important; padding-top: 0px !important; } .r17-c { box-sizing: border-box !important; text-align: center !important; width: 100% !important; } .r18-i { padding-bottom: 5px !important; padding-top: 5px !important; } .r19-i { padding-bottom: 15px !important; padding-left: 15px !important; padding-right: 15px !important; padding-top: 15px !important; } .r20-o { border-bottom-color: #efefef !important; border-bottom-width: 2px !important; border-left-color: #efefef !important; border-left-width: 2px !important; border-right-color: #efefef !important; border-right-width: 2px !important; border-style: solid !important; border-top-color: #efefef !important; border-top-width: 2px !important; margin: 0 auto 0 0 !important; width: 100% !important; } .r21-i { padding-bottom: 5px !important; padding-left: 5px !important; padding-right: 5px !important; padding-top: 5px !important; text-align: left !important; } .r22-i { padding-bottom: 5px !important; padding-left: 15px !important; padding-right: 15px !important; padding-top: 5px !important; } .r23-c { box-sizing: border-box !important; width: 100% !important; } .r24-i { font-size: 0px !important; padding-bottom: 10px !important; padding-left: 65px !important; padding-right: 65px !important; padding-top: 10px !important; } .r25-c { box-sizing: border-box !important; width: 32px !important; } .r26-o { border-style: solid !important; margin-right: 8px !important; width: 32px !important; } .r27-o { border-style: solid !important; margin-right: 0px !important; width: 32px !important; } .r28-i { padding-bottom: 0px !important; padding-top: 5px !important; text-align: center !important; } body { -webkit-text-size-adjust: none; } .nl2go-responsive-hide { display: none; } .nl2go-body-table { min-width: unset !important; } .mobshow { height: auto !important; overflow: visible !important; max-height: unset !important; visibility: visible !important; border: none !important; } .resp-table { display: inline-table !important; } .magic-resp { display: table-cell !important; } } </style>
-    <style type="text/css"> p, h1, h2, h3, h4, ol, ul { margin: 0; } a, a:link { color: #3f76ff; text-decoration: underline; } .nl2go-default-textstyle { color: #3b3f44; font-family: georgia, serif; font-size: 16px; line-height: 1.5; word-break: break-word; } .default-button { color: #ffffff; font-family: georgia, serif; font-size: 16px; font-style: normal; font-weight: normal; line-height: 1.15; text-decoration: none; word-break: break-word; } .default-heading1 { color: #1f2d3d; font-family: arial, helvetica, sans-serif; font-size: 36px; word-break: break-word; } .default-heading2 { color: #1f2d3d; font-family: arial, helvetica, sans-serif; font-size: 32px; word-break: break-word; } .default-heading3 { color: #1f2d3d; font-family: arial, helvetica, sans-serif; font-size: 24px; word-break: break-word; } .default-heading4 { color: #1f2d3d; font-family: arial, helvetica, sans-serif; font-size: 18px; word-break: break-word; } a[x-apple-data-detectors] { color: inherit !important; text-decoration: inherit !important; font-size: inherit !important; font-family: inherit !important; font-weight: inherit !important; line-height: inherit !important; } .no-show-for-you { border: none; display: none; float: none; font-size: 0; height: 0; line-height: 0; max-height: 0; mso-hide: all; overflow: hidden; table-layout: fixed; visibility: hidden; width: 0; } </style>
+    <style type="text/css" emogrify="no"> @media (max-width: 600px) { .gmx-killpill { content: " \03D1"; } .r0-o { border-style: solid !important; margin: 0 auto 0 auto !important; width: 320px !important; } .r1-i { background-color: #ffffff !important; } .r2-c { box-sizing: border-box !important; text-align: center !important; valign: top !important; width: 100% !important; } .r3-o { border-style: solid !important; margin: 0 auto 0 auto !important; width: 100% !important; } .r4-i { padding-bottom: 20px !important; padding-left: 15px !important; padding-right: 15px !important; padding-top: 20px !important; } .r5-c { box-sizing: border-box !important; display: block !important; valign: top !important; width: 100% !important; } .r6-o { border-style: solid !important; width: 100% !important; } .r7-i { padding-left: 0px !important; padding-right: 0px !important; } .r8-c { box-sizing: border-box !important; text-align: left !important; valign: top !important; width: 100% !important; } .r9-o { border-style: solid !important; margin: 0 auto 0 0 !important; width: 100% !important; } .r10-i { padding-bottom: 10px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 10px !important; } .r11-i { padding-bottom: 15px !important; padding-top: 15px !important; text-align: left !important; } .r12-c { box-sizing: border-box !important; padding: 0 !important; text-align: center !important; valign: top !important; width: 100% !important; } .r13-o { border-style: solid !important; margin: 0 auto 0 auto !important; margin-bottom: 15px !important; margin-top: 15px !important; width: 100% !important; } .r14-i { padding: 0 !important; text-align: center !important; } .r15-r { background-color: #006399 !important; border-radius: 4px !important; border-width: 0px !important; box-sizing: border-box; height: initial !important; padding: 0 !important; padding-bottom: 12px !important; padding-top: 12px !important; text-align: center !important; width: 100% !important; } .r16-i { padding-bottom: 0px !important; padding-left: 15px !important; padding-right: 15px !important; padding-top: 0px !important; } .r17-c { box-sizing: border-box !important; text-align: center !important; width: 100% !important; } .r18-i { padding-bottom: 5px !important; padding-top: 5px !important; } .r19-i { padding-bottom: 15px !important; padding-left: 15px !important; padding-right: 15px !important; padding-top: 15px !important; } .r20-o { border-bottom-color: #efefef !important; border-bottom-width: 2px !important; border-left-color: #efefef !important; border-left-width: 2px !important; border-right-color: #efefef !important; border-right-width: 2px !important; border-style: solid !important; border-top-color: #efefef !important; border-top-width: 2px !important; margin: 0 auto 0 0 !important; width: 100% !important; } .r21-i { padding-bottom: 5px !important; padding-left: 5px !important; padding-right: 5px !important; padding-top: 5px !important; text-align: left !important; } .r22-i { padding-bottom: 5px !important; padding-left: 15px !important; padding-right: 15px !important; padding-top: 5px !important; } .r23-c { box-sizing: border-box !important; width: 100% !important; } .r24-i { font-size: 0px !important; padding-bottom: 10px !important; padding-left: 65px !important; padding-right: 65px !important; padding-top: 10px !important; } .r25-c { box-sizing: border-box !important; width: 32px !important; } .r26-o { border-style: solid !important; margin-right: 8px !important; width: 32px !important; } .r27-o { border-style: solid !important; margin-right: 0px !important; width: 32px !important; } .r28-i { padding-bottom: 0px !important; padding-top: 5px !important; text-align: center !important; } body { -webkit-text-size-adjust: none; } .nl2go-responsive-hide { display: none; } .nl2go-body-table { min-width: unset !important; } .mobshow { height: auto !important; overflow: visible !important; max-height: unset !important; visibility: visible !important; border: none !important; } .resp-table { display: inline-table !important; } .magic-resp { display: table-cell !important; } } </style>
+    <style type="text/css"> p, h1, h2, h3, h4, ol, ul { margin: 0; } a, a:link { color: #006399; text-decoration: underline; } .nl2go-default-textstyle { color: #3b3f44; font-family: georgia, serif; font-size: 16px; line-height: 1.5; word-break: break-word; } .default-button { color: #ffffff; font-family: georgia, serif; font-size: 16px; font-style: normal; font-weight: normal; line-height: 1.15; text-decoration: none; word-break: break-word; } .default-heading1 { color: #1f2d3d; font-family: arial, helvetica, sans-serif; font-size: 36px; word-break: break-word; } .default-heading2 { color: #1f2d3d; font-family: arial, helvetica, sans-serif; font-size: 32px; word-break: break-word; } .default-heading3 { color: #1f2d3d; font-family: arial, helvetica, sans-serif; font-size: 24px; word-break: break-word; } .default-heading4 { color: #1f2d3d; font-family: arial, helvetica, sans-serif; font-size: 18px; word-break: break-word; } a[x-apple-data-detectors] { color: inherit !important; text-decoration: inherit !important; font-size: inherit !important; font-family: inherit !important; font-weight: inherit !important; line-height: inherit !important; } .no-show-for-you { border: none; display: none; float: none; font-size: 0; height: 0; line-height: 0; max-height: 0; mso-hide: all; overflow: hidden; table-layout: fixed; visibility: hidden; width: 0; } </style>
     <!--[if mso ]>
     <xml>
       <o:OfficeDocumentSettings>
@@ -18,9 +18,9 @@
       </o:OfficeDocumentSettings>
     </xml>
     <! [endif]--> 
-    <style type="text/css"> a:link { color: #3f76ff; text-decoration: underline; } </style>
+    <style type="text/css"> a:link { color: #006399; text-decoration: underline; } </style>
   </head>
-  <body bgcolor="#ffffff" text="#3b3f44" link="#3f76ff" yahoo="fix" style="background-color: #ffffff" >
+  <body bgcolor="#ffffff" text="#3b3f44" link="#006399" yahoo="fix" style="background-color: #ffffff" >
     <table cellspacing="0" cellpadding="0" border="0" role="presentation" class="nl2go-body-table" width="100%" style="background-color: #ffffff; width: 100%" >
       <tr>
         <td>
@@ -41,7 +41,7 @@
                                       <td class="r8-c" align="left">
                                         <table cellspacing="0" cellpadding="0" border="0" role="presentation" width="150" class="r9-o" style=" table-layout: fixed; width: 150px; " >
                                           <tr>
-                                            <td style=" font-size: 0px; line-height: 0px; " > <img src="https://img.mailinblue.com/5942152/images/content_library/original/64708f00b503b149db7ff135.png" width="150" border="0" style=" display: block; width: 100%; " /> </td>
+                                            <td style=" font-size: 0px; line-height: 0px; " > <img src="https://media.docs.plane.so/logo/new-logo-white.png" width="150" border="0" style=" display: block; width: 100%; " /> </td>
                                           </tr>
                                         </table>
                                       </td>
@@ -80,7 +80,7 @@
                                       </td>
                                     </tr>
                                     <tr style=" display: flex; align-items: center; width: 100%; justify-content: center; " >
-                                      <td style=" display: flex; align-items: center; width: 100%; justify-content: center; " > <a href="{{ webhook_url }}" style=" text-decoration: none; display: flex; align-items: center; width: 100%; justify-content: center; " > <span style=" max-width: min-content; white-space: nowrap; background-color: #3f76ff; padding: 10px 15px; border: 1px solid #2f4ba8; border-radius: 4px; margin-top: 15px; cursor: pointer; font-size: 0.8rem; color: #ffffff; display: flex; align-items: center; justify-content: center; " > View webhook </span> </a> </td>
+                                      <td style=" display: flex; align-items: center; width: 100%; justify-content: center; " > <a href="{{ webhook_url }}" style=" text-decoration: none; display: flex; align-items: center; width: 100%; justify-content: center; " > <span style=" max-width: min-content; white-space: nowrap; background-color: #006399; padding: 10px 15px; border: 1px solid #2f4ba8; border-radius: 4px; margin-top: 15px; cursor: pointer; font-size: 0.8rem; color: #ffffff; display: flex; align-items: center; justify-content: center; " > View webhook </span> </a> </td>
                                     </tr>
                                   </table>
                                 </td>
@@ -155,7 +155,7 @@
                                             <td class="nl2go-responsive-hide" width="2" style=" font-size: 0px; line-height: 1px; background-color: #efefef; " > ­ </td>
                                             <td align="left" valign="top" class="r21-i nl2go-default-textstyle" style=" color: #3b3f44; font-family: georgia, serif; font-size: 16px; word-break: break-word; line-height: 1.5; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; padding-top: 5px; text-align: left; " >
                                               <div>
-                                                <p style="margin: 0"> <span style="font-size: 13px" >Despite our popularity, we are humbly early-stage. We are shipping fast, so please reach out to us with feature requests, major and minor nits, and anything else you find missing. We read every </span ><a href="https://discord.com/channels/1031547764020084846/1094927053867995176" title="Plane Support on Discod" target="_blank" style=" color: #3f76ff; text-decoration: underline; " ><span style="font-size: 13px" >message</span ></a ><span style="font-size: 13px" >, </span ><a href="http://twitter.com/planepowers" title="@planepowers" target="_blank" style=" color: #3f76ff; text-decoration: underline; " ><span style="font-size: 13px" >tweet</span ></a ><span style="font-size: 13px" >, and </span ><a href="https://github.com/makeplane/plane/issues" title="Plane's GitHub conversations" target="_blank" style=" color: #3f76ff; text-decoration: underline; " ><span style="font-size: 13px" >conversation</span ></a ><span style="font-size: 13px" > and update </span ><a href="https://plane.sh/plane/0b170a1c-0e55-47cb-9307-ea49a05672b5?board=kanban" title="Plane's roadmap" target="_blank" style=" color: #3f76ff; text-decoration: underline; " ><span style="font-size: 13px" >our public roadmap</span ></a ><span style="font-size: 13px" >.</span > </p>
+                                                <p style="margin: 0"> <span style="font-size: 13px" >Despite our popularity, we are humbly early-stage. We are shipping fast, so please reach out to us with feature requests, major and minor nits, and anything else you find missing. We read every </span ><a href="https://discord.com/channels/1031547764020084846/1094927053867995176" title="Plane Support on Discod" target="_blank" style=" color: #006399; text-decoration: underline; " ><span style="font-size: 13px" >message</span ></a ><span style="font-size: 13px" >, </span ><a href="http://twitter.com/planepowers" title="@planepowers" target="_blank" style=" color: #006399; text-decoration: underline; " ><span style="font-size: 13px" >tweet</span ></a ><span style="font-size: 13px" >, and </span ><a href="https://github.com/makeplane/plane/issues" title="Plane's GitHub conversations" target="_blank" style=" color: #006399; text-decoration: underline; " ><span style="font-size: 13px" >conversation</span ></a ><span style="font-size: 13px" > and update </span ><a href="https://plane.sh/plane/0b170a1c-0e55-47cb-9307-ea49a05672b5?board=kanban" title="Plane's roadmap" target="_blank" style=" color: #006399; text-decoration: underline; " ><span style="font-size: 13px" >our public roadmap</span ></a ><span style="font-size: 13px" >.</span > </p>
                                               </div>
                                             </td>
                                             <td class="nl2go-responsive-hide" width="2" style=" font-size: 0px; line-height: 1px; background-color: #efefef; " > ­ </td>
@@ -204,7 +204,7 @@
                                                               <th width="40" class="r25-c mobshow resp-table" style=" font-weight: normal; " >
                                                                 <table cellspacing="0" cellpadding="0" border="0" role="presentation" width="100%" class="r26-o" style=" table-layout: fixed; width: 100%; " >
                                                                   <tr>
-                                                                    <td class="r18-i" style=" font-size: 0px; line-height: 0px; padding-bottom: 5px; padding-top: 5px; " > <a href="https://github.com/makeplane" target="_blank" style=" color: #3f76ff; text-decoration: underline; " > <img src="https://creative-assets.mailinblue.com/editor/social-icons/rounded_colored/github_32px.png" width="32" border="0" style=" display: block; width: 100%; " /></a> </td>
+                                                                    <td class="r18-i" style=" font-size: 0px; line-height: 0px; padding-bottom: 5px; padding-top: 5px; " > <a href="https://github.com/makeplane" target="_blank" style=" color: #006399; text-decoration: underline; " > <img src="https://creative-assets.mailinblue.com/editor/social-icons/rounded_colored/github_32px.png" width="32" border="0" style=" display: block; width: 100%; " /></a> </td>
                                                                     <td class="nl2go-responsive-hide" width="8" style=" font-size: 0px; line-height: 1px; " > ­ </td>
                                                                   </tr>
                                                                 </table>
@@ -212,7 +212,7 @@
                                                               <th width="40" class="r25-c mobshow resp-table" style=" font-weight: normal; " >
                                                                 <table cellspacing="0" cellpadding="0" border="0" role="presentation" width="100%" class="r26-o" style=" table-layout: fixed; width: 100%; " >
                                                                   <tr>
-                                                                    <td class="r18-i" style=" font-size: 0px; line-height: 0px; padding-bottom: 5px; padding-top: 5px; " > <a href="https://www.linkedin.com/company/planepowers/" target="_blank" style=" color: #3f76ff; text-decoration: underline; " > <img src="https://creative-assets.mailinblue.com/editor/social-icons/rounded_colored/linkedin_32px.png" width="32" border="0" style=" display: block; width: 100%; " /></a> </td>
+                                                                    <td class="r18-i" style=" font-size: 0px; line-height: 0px; padding-bottom: 5px; padding-top: 5px; " > <a href="https://www.linkedin.com/company/planepowers/" target="_blank" style=" color: #006399; text-decoration: underline; " > <img src="https://creative-assets.mailinblue.com/editor/social-icons/rounded_colored/linkedin_32px.png" width="32" border="0" style=" display: block; width: 100%; " /></a> </td>
                                                                     <td class="nl2go-responsive-hide" width="8" style=" font-size: 0px; line-height: 1px; " > ­ </td>
                                                                   </tr>
                                                                 </table>
@@ -220,7 +220,7 @@
                                                               <th width="40" class="r25-c mobshow resp-table" style=" font-weight: normal; " >
                                                                 <table cellspacing="0" cellpadding="0" border="0" role="presentation" width="100%" class="r26-o" style=" table-layout: fixed; width: 100%; " >
                                                                   <tr>
-                                                                    <td class="r18-i" style=" font-size: 0px; line-height: 0px; padding-bottom: 5px; padding-top: 5px; " > <a href="https://twitter.com/planepowers" target="_blank" style=" color: #3f76ff; text-decoration: underline; " > <img src="https://creative-assets.mailinblue.com/editor/social-icons/rounded_colored/twitter_32px.png" width="32" border="0" style=" display: block; width: 100%; " /></a> </td>
+                                                                    <td class="r18-i" style=" font-size: 0px; line-height: 0px; padding-bottom: 5px; padding-top: 5px; " > <a href="https://twitter.com/planepowers" target="_blank" style=" color: #006399; text-decoration: underline; " > <img src="https://creative-assets.mailinblue.com/editor/social-icons/rounded_colored/twitter_32px.png" width="32" border="0" style=" display: block; width: 100%; " /></a> </td>
                                                                     <td class="nl2go-responsive-hide" width="8" style=" font-size: 0px; line-height: 1px; " > ­ </td>
                                                                   </tr>
                                                                 </table>
@@ -228,7 +228,7 @@
                                                               <th width="32" class="r25-c mobshow resp-table" style=" font-weight: normal; " >
                                                                 <table cellspacing="0" cellpadding="0" border="0" role="presentation" width="100%" class="r27-o" style=" table-layout: fixed; width: 100%; " >
                                                                   <tr>
-                                                                    <td class="r18-i" style=" font-size: 0px; line-height: 0px; padding-bottom: 5px; padding-top: 5px; " > <a href="https://plane.so/" target="_blank" style=" color: #3f76ff; text-decoration: underline; " > <img src="https://creative-assets.mailinblue.com/editor/social-icons/rounded_colored/website_32px.png" width="32" border="0" style=" display: block; width: 100%; " /></a> </td>
+                                                                    <td class="r18-i" style=" font-size: 0px; line-height: 0px; padding-bottom: 5px; padding-top: 5px; " > <a href="https://plane.so/" target="_blank" style=" color: #006399; text-decoration: underline; " > <img src="https://creative-assets.mailinblue.com/editor/social-icons/rounded_colored/website_32px.png" width="32" border="0" style=" display: block; width: 100%; " /></a> </td>
                                                                   </tr>
                                                                 </table>
                                                               </th>

apps/api/templates/emails/user/user_activation.html

@@ -173,7 +173,7 @@
           text-align: center !important;
         }
         .r16-r {
-          background-color: #3f76ff !important;
+          background-color: #006399 !important;
           border-radius: 4px !important;
           border-width: 0px !important;
           box-sizing: border-box;
@@ -305,7 +305,7 @@
       }
       a,
       a:link {
-        color: #3f76ff;
+        color: #006399;
         text-decoration: underline;
       }
       .nl2go-default-textstyle {
@@ -382,7 +382,7 @@
     <![endif]-->
     <style type="text/css">
       a:link {
-        color: #3f76ff;
+        color: #006399;
         text-decoration: underline;
       }
     </style>
@@ -390,7 +390,7 @@
   <body
     bgcolor="#ffffff"
     text="#3b3f44"
-    link="#3f76ff"
+    link="#006399"
     yahoo="fix"
     style="background-color: #ffffff"
   >
@@ -493,7 +493,7 @@
                                               "
                                             >
                                               <img
-                                                src="https://img.mailinblue.com/5942152/images/content_library/original/64708f00b503b149db7ff135.png"
+                                                src="https://media.docs.plane.so/logo/new-logo-white.png"
                                                 width="150"
                                                 border="0"
                                                 style="
@@ -651,9 +651,9 @@
                                           width="285"
                                           class="r14-o"
                                           style="
-                                            background-color: #3f76ff;
+                                            background-color: #006399;
                                             border-collapse: separate;
-                                            border-color: #3f76ff;
+                                            border-color: #006399;
                                             border-radius: 4px;
                                             border-style: solid;
                                             border-width: 0px;
@@ -669,7 +669,7 @@
                                               class="r15-i nl2go-default-textstyle"
                                               style="
                                                 word-break: break-word;
-                                                background-color: #3f76ff;
+                                                background-color: #006399;
                                                 border-radius: 4px;
                                                 color: #ffffff;
                                                 font-family: georgia, serif;
@@ -963,7 +963,7 @@
                                                     title="Plane Support on Discod"
                                                     target="_blank"
                                                     style="
-                                                      color: #3f76ff;
+                                                      color: #006399;
                                                       text-decoration: underline;
                                                     "
                                                     ><span
@@ -977,7 +977,7 @@
                                                     title="@planepowers"
                                                     target="_blank"
                                                     style="
-                                                      color: #3f76ff;
+                                                      color: #006399;
                                                       text-decoration: underline;
                                                     "
                                                     ><span
@@ -991,7 +991,7 @@
                                                     title="Plane's GitHub conversations"
                                                     target="_blank"
                                                     style="
-                                                      color: #3f76ff;
+                                                      color: #006399;
                                                       text-decoration: underline;
                                                     "
                                                     ><span
@@ -1007,7 +1007,7 @@
                                                     title="Plane's roadmap"
                                                     target="_blank"
                                                     style="
-                                                      color: #3f76ff;
+                                                      color: #006399;
                                                       text-decoration: underline;
                                                     "
                                                     ><span
@@ -1227,7 +1227,7 @@
                                                                         href="https://github.com/makeplane"
                                                                         target="_blank"
                                                                         style="
-                                                                          color: #3f76ff;
+                                                                          color: #006399;
                                                                           text-decoration: underline;
                                                                         "
                                                                       >
@@ -1287,7 +1287,7 @@
                                                                         href="https://www.linkedin.com/company/planepowers/"
                                                                         target="_blank"
                                                                         style="
-                                                                          color: #3f76ff;
+                                                                          color: #006399;
                                                                           text-decoration: underline;
                                                                         "
                                                                       >
@@ -1347,7 +1347,7 @@
                                                                         href="https://twitter.com/planepowers"
                                                                         target="_blank"
                                                                         style="
-                                                                          color: #3f76ff;
+                                                                          color: #006399;
                                                                           text-decoration: underline;
                                                                         "
                                                                       >
@@ -1407,7 +1407,7 @@
                                                                         href="https://plane.so/"
                                                                         target="_blank"
                                                                         style="
-                                                                          color: #3f76ff;
+                                                                          color: #006399;
                                                                           text-decoration: underline;
                                                                         "
                                                                       >

apps/api/templates/emails/user/user_deactivation.html

@@ -173,7 +173,7 @@
           text-align: center !important;
         }
         .r16-r {
-          background-color: #3f76ff !important;
+          background-color: #006399 !important;
           border-radius: 4px !important;
           border-width: 0px !important;
           box-sizing: border-box;
@@ -305,7 +305,7 @@
       }
       a,
       a:link {
-        color: #3f76ff;
+        color: #006399;
         text-decoration: underline;
       }
       .nl2go-default-textstyle {
@@ -382,7 +382,7 @@
     <![endif]-->
     <style type="text/css">
       a:link {
-        color: #3f76ff;
+        color: #006399;
         text-decoration: underline;
       }
     </style>
@@ -390,7 +390,7 @@
   <body
     bgcolor="#ffffff"
     text="#3b3f44"
-    link="#3f76ff"
+    link="#006399"
     yahoo="fix"
     style="background-color: #ffffff"
   >
@@ -493,7 +493,7 @@
                                               "
                                             >
                                               <img
-                                                src="https://img.mailinblue.com/5942152/images/content_library/original/64708f00b503b149db7ff135.png"
+                                                src="https://media.docs.plane.so/logo/new-logo-white.png"
                                                 width="150"
                                                 border="0"
                                                 style="
@@ -650,9 +650,9 @@
                                           width="285"
                                           class="r14-o"
                                           style="
-                                            background-color: #3f76ff;
+                                            background-color: #006399;
                                             border-collapse: separate;
-                                            border-color: #3f76ff;
+                                            border-color: #006399;
                                             border-radius: 4px;
                                             border-style: solid;
                                             border-width: 0px;
@@ -668,7 +668,7 @@
                                               class="r15-i nl2go-default-textstyle"
                                               style="
                                                 word-break: break-word;
-                                                background-color: #3f76ff;
+                                                background-color: #006399;
                                                 border-radius: 4px;
                                                 color: #ffffff;
                                                 font-family: georgia, serif;
@@ -964,7 +964,7 @@
                                                     title="Plane Support on Discod"
                                                     target="_blank"
                                                     style="
-                                                      color: #3f76ff;
+                                                      color: #006399;
                                                       text-decoration: underline;
                                                     "
                                                     ><span
@@ -978,7 +978,7 @@
                                                     title="@planepowers"
                                                     target="_blank"
                                                     style="
-                                                      color: #3f76ff;
+                                                      color: #006399;
                                                       text-decoration: underline;
                                                     "
                                                     ><span
@@ -992,7 +992,7 @@
                                                     title="Plane's GitHub conversations"
                                                     target="_blank"
                                                     style="
-                                                      color: #3f76ff;
+                                                      color: #006399;
                                                       text-decoration: underline;
                                                     "
                                                     ><span
@@ -1008,7 +1008,7 @@
                                                     title="Plane's roadmap"
                                                     target="_blank"
                                                     style="
-                                                      color: #3f76ff;
+                                                      color: #006399;
                                                       text-decoration: underline;
                                                     "
                                                     ><span
@@ -1228,7 +1228,7 @@
                                                                         href="https://github.com/makeplane"
                                                                         target="_blank"
                                                                         style="
-                                                                          color: #3f76ff;
+                                                                          color: #006399;
                                                                           text-decoration: underline;
                                                                         "
                                                                       >
@@ -1288,7 +1288,7 @@
                                                                         href="https://www.linkedin.com/company/planepowers/"
                                                                         target="_blank"
                                                                         style="
-                                                                          color: #3f76ff;
+                                                                          color: #006399;
                                                                           text-decoration: underline;
                                                                         "
                                                                       >
@@ -1348,7 +1348,7 @@
                                                                         href="https://twitter.com/planepowers"
                                                                         target="_blank"
                                                                         style="
-                                                                          color: #3f76ff;
+                                                                          color: #006399;
                                                                           text-decoration: underline;
                                                                         "
                                                                       >
@@ -1408,7 +1408,7 @@
                                                                         href="https://plane.so/"
                                                                         target="_blank"
                                                                         style="
-                                                                          color: #3f76ff;
+                                                                          color: #006399;
                                                                           text-decoration: underline;
                                                                         "
                                                                       >

apps/proxy/Dockerfile.ce

@@ -5,7 +5,7 @@ RUN xcaddy build \
         --with github.com/caddy-dns/digitalocean@04bde2867106aa1b44c2f9da41a285fa02e629c5 \
         --with github.com/mholt/caddy-l4@4d3c80e89c5f80438a3e048a410d5543ff5fb9f4
 
-FROM caddy:2.10.0-builder-alpine
+FROM caddy:2.10.0-alpine
 
 RUN apk add --no-cache nss-tools bash curl
 

apps/space/app/issues/[anchor]/client-layout.tsx

@@ -39,7 +39,13 @@ export const IssuesClientLayout = observer((props: Props) => {
       : null
   );
 
-  if (!publishSettings && !error) return <LogoSpinner />;
+  if (!publishSettings && !error) {
+    return (
+      <div className="flex items-center justify-center h-screen w-full">
+        <LogoSpinner />
+      </div>
+    );
+  }
 
   if (error) return <SomethingWentWrongError />;
 

apps/space/app/page.tsx

@@ -9,9 +9,14 @@ import { AuthView } from "@/components/views";
 import { useUser } from "@/hooks/store";
 
 const HomePage = observer(() => {
-  const { data: currentUser, isAuthenticated, isLoading } = useUser();
+  const { data: currentUser, isAuthenticated, isInitializing } = useUser();
 
-  if (isLoading) return <LogoSpinner />;
+  if (isInitializing)
+    return (
+      <div className="flex h-screen min-h-[500px] w-full justify-center items-center">
+        <LogoSpinner />
+      </div>
+    );
 
   if (currentUser && isAuthenticated) return <UserLoggedIn />;
 

apps/space/app/views/[anchor]/layout.tsx

@@ -42,7 +42,13 @@ const IssuesLayout = observer((props: Props) => {
 
   if (error) return <SomethingWentWrongError />;
 
-  if (!publishSettings || !viewData) return <LogoSpinner />;
+  if (!publishSettings || !viewData) {
+    return (
+      <div className="flex items-center justify-center h-screen w-full">
+        <LogoSpinner />
+      </div>
+    );
+  }
 
   return (
     <div className="relative flex h-screen min-h-[500px] w-screen flex-col overflow-hidden">

apps/space/ce/hooks/use-editor-flagging.ts

@@ -0,0 +1,35 @@
+// editor
+import { TExtensions } from "@plane/editor";
+
+export type TEditorFlaggingHookReturnType = {
+  document: {
+    disabled: TExtensions[];
+    flagged: TExtensions[];
+  };
+  liteText: {
+    disabled: TExtensions[];
+    flagged: TExtensions[];
+  };
+  richText: {
+    disabled: TExtensions[];
+    flagged: TExtensions[];
+  };
+};
+
+/**
+ * @description extensions disabled in various editors
+ */
+export const useEditorFlagging = (anchor: string): TEditorFlaggingHookReturnType => ({
+  document: {
+    disabled: [],
+    flagged: [],
+  },
+  liteText: {
+    disabled: [],
+    flagged: [],
+  },
+  richText: {
+    disabled: [],
+    flagged: [],
+  },
+});

apps/space/core/components/account/auth-forms/auth-header.tsx

@@ -1,12 +1,11 @@
 "use client";
 
-import { FC, ReactNode } from "react";
+import { FC } from "react";
 // helpers
 import { EAuthModes } from "@/types/auth";
 
 type TAuthHeader = {
   authMode: EAuthModes;
-  children: ReactNode;
 };
 
 type TAuthHeaderContent = {
@@ -30,7 +29,7 @@ const Titles: TAuthHeaderDetails = {
 };
 
 export const AuthHeader: FC<TAuthHeader> = (props) => {
-  const { authMode, children } = props;
+  const { authMode } = props;
 
   const getHeaderSubHeader = (mode: EAuthModes | null): TAuthHeaderContent => {
     if (mode) {
@@ -38,7 +37,7 @@ export const AuthHeader: FC<TAuthHeader> = (props) => {
     }
 
     return {
-      header: "Comment or react to work itemss",
+      header: "Comment or react to work items",
       subHeader: "Use plane to add your valuable inputs to features.",
     };
   };
@@ -47,11 +46,10 @@ export const AuthHeader: FC<TAuthHeader> = (props) => {
 
   return (
     <>
-      <div className="space-y-1 text-center">
-        <h3 className="text-xl sm:text-2xl md:text-3xl font-bold text-onboarding-text-100">{header}</h3>
-        <p className="text-xs sm:text-sm md:text-base font-medium text-onboarding-text-400">{subHeader}</p>
+      <div className="flex flex-col gap-1">
+        <span className="text-2xl font-semibold text-custom-text-100 leading-7">{header}</span>
+        <span className="text-2xl font-semibold text-custom-text-400 leading-7">{subHeader}</span>
       </div>
-      {children}
     </>
   );
 };

apps/space/core/components/account/auth-forms/auth-root.tsx

@@ -2,10 +2,14 @@
 
 import React, { FC, useEffect, useState } from "react";
 import { observer } from "mobx-react";
+import Image from "next/image";
 import { useSearchParams } from "next/navigation";
+import { useTheme } from "next-themes";
 // plane imports
+import { API_BASE_URL } from "@plane/constants";
 import { SitesAuthService } from "@plane/services";
 import { IEmailCheckData } from "@plane/types";
+import { OAuthOptions } from "@plane/ui";
 // components
 import {
   AuthHeader,
@@ -13,7 +17,6 @@ import {
   AuthEmailForm,
   AuthUniqueCodeForm,
   AuthPasswordForm,
-  OAuthOptions,
   TermsAndConditions,
 } from "@/components/account";
 // helpers
@@ -27,6 +30,11 @@ import {
 import { useInstance } from "@/hooks/store";
 // types
 import { EAuthModes, EAuthSteps } from "@/types/auth";
+// assets
+import GithubLightLogo from "/public/logos/github-black.png";
+import GithubDarkLogo from "/public/logos/github-dark.svg";
+import GitlabLogo from "/public/logos/gitlab-logo.svg";
+import GoogleLogo from "/public/logos/google-logo.svg";
 
 const authService = new SitesAuthService();
 
@@ -36,6 +44,7 @@ export const AuthRoot: FC = observer(() => {
   const emailParam = searchParams.get("email") || undefined;
   const error_code = searchParams.get("error_code") || undefined;
   const nextPath = searchParams.get("next_path") || undefined;
+  const next_path = searchParams.get("next_path");
   // states
   const [authMode, setAuthMode] = useState<EAuthModes>(EAuthModes.SIGN_UP);
   const [authStep, setAuthStep] = useState<EAuthSteps>(EAuthSteps.EMAIL);
@@ -43,6 +52,7 @@ export const AuthRoot: FC = observer(() => {
   const [errorInfo, setErrorInfo] = useState<TAuthErrorInfo | undefined>(undefined);
   const [isPasswordAutoset, setIsPasswordAutoset] = useState(true);
   // hooks
+  const { resolvedTheme } = useTheme();
   const { config } = useInstance();
 
   useEffect(() => {
@@ -146,12 +156,54 @@ export const AuthRoot: FC = observer(() => {
       });
   };
 
+  const content = authMode === EAuthModes.SIGN_UP ? "Sign up" : "Sign in";
+
+  const OAuthConfig = [
+    {
+      id: "google",
+      text: `${content} with Google`,
+      icon: <Image src={GoogleLogo} height={18} width={18} alt="Google Logo" />,
+      onClick: () => {
+        window.location.assign(`${API_BASE_URL}/auth/google/${next_path ? `?next_path=${next_path}` : ``}`);
+      },
+      enabled: config?.is_google_enabled,
+    },
+    {
+      id: "github",
+      text: `${content} with GitHub`,
+      icon: (
+        <Image
+          src={resolvedTheme === "dark" ? GithubDarkLogo : GithubLightLogo}
+          height={18}
+          width={18}
+          alt="GitHub Logo"
+        />
+      ),
+      onClick: () => {
+        window.location.assign(`${API_BASE_URL}/auth/github/${next_path ? `?next_path=${next_path}` : ``}`);
+      },
+      enabled: config?.is_github_enabled,
+    },
+    {
+      id: "gitlab",
+      text: `${content} with GitLab`,
+      icon: <Image src={GitlabLogo} height={18} width={18} alt="GitLab Logo" />,
+      onClick: () => {
+        window.location.assign(`${API_BASE_URL}/auth/gitlab/${next_path ? `?next_path=${next_path}` : ``}`);
+      },
+      enabled: config?.is_gitlab_enabled,
+    },
+  ];
+
   return (
-    <div className="relative flex flex-col space-y-6">
-      <AuthHeader authMode={authMode}>
+    <div className="flex flex-col justify-center items-center flex-grow w-full py-6 mt-10">
+      <div className="relative flex flex-col gap-6 max-w-[22.5rem] w-full">
         {errorInfo && errorInfo?.type === EErrorAlertType.BANNER_ALERT && (
           <AuthBanner bannerData={errorInfo} handleBannerData={(value) => setErrorInfo(value)} />
         )}
+        <AuthHeader authMode={authMode} />
+        {isOAuthEnabled && <OAuthOptions options={OAuthConfig} compact={authStep === EAuthSteps.PASSWORD} />}
+
         {authStep === EAuthSteps.EMAIL && <AuthEmailForm defaultEmail={email} onSubmit={handleEmailVerification} />}
         {authStep === EAuthSteps.UNIQUE_CODE && (
           <AuthUniqueCodeForm
@@ -182,9 +234,8 @@ export const AuthRoot: FC = observer(() => {
             }}
           />
         )}
-        {isOAuthEnabled && <OAuthOptions />}
         <TermsAndConditions isSignUp={authMode === EAuthModes.SIGN_UP ? true : false} />
-      </AuthHeader>
+      </div>
     </div>
   );
 });

apps/space/core/components/account/auth-forms/email.tsx

@@ -46,13 +46,13 @@ export const AuthEmailForm: FC<TAuthEmailForm> = observer((props) => {
   return (
     <form onSubmit={handleFormSubmit} className="mt-5 space-y-4">
       <div className="space-y-1">
-        <label className="text-sm text-onboarding-text-300 font-medium" htmlFor="email">
+        <label className="text-sm text-custom-text-300 font-medium" htmlFor="email">
           Email
         </label>
         <div
           className={cn(
-            `relative flex items-center rounded-md bg-onboarding-background-200 border`,
-            !isFocused && Boolean(emailError?.email) ? `border-red-500` : `border-onboarding-border-100`
+            `relative flex items-center rounded-md bg-custom-background-100 border`,
+            !isFocused && Boolean(emailError?.email) ? `border-red-500` : `border-custom-border-100`
           )}
           onFocus={() => {
             setIsFocused(true);
@@ -68,7 +68,7 @@ export const AuthEmailForm: FC<TAuthEmailForm> = observer((props) => {
             value={email}
             onChange={(e) => setEmail(e.target.value)}
             placeholder="name@company.com"
-            className={`disable-autofill-style h-[46px] w-full placeholder:text-onboarding-text-400 autofill:bg-red-500 border-0 focus:bg-none active:bg-transparent`}
+            className={`disable-autofill-style h-10 w-full placeholder:text-custom-text-400 autofill:bg-red-500 border-0 focus:bg-none active:bg-transparent`}
             autoComplete="on"
             autoFocus
             ref={inputRef}
@@ -83,7 +83,7 @@ export const AuthEmailForm: FC<TAuthEmailForm> = observer((props) => {
               }}
               tabIndex={-1}
             >
-              <XCircle className="h-[46px] w-11 px-3 stroke-custom-text-400 hover:cursor-pointer text-xs" />
+              <XCircle className="h-10 w-11 px-3 stroke-custom-text-400 hover:cursor-pointer text-xs" />
             </button>
           )}
         </div>

apps/space/core/components/account/auth-forms/password.tsx

@@ -117,11 +117,11 @@ export const AuthPasswordForm: React.FC<Props> = observer((props: Props) => {
       <input type="hidden" value={passwordFormData.email} name="email" />
       <input type="hidden" value={nextPath} name="next_path" />
       <div className="space-y-1">
-        <label className="text-sm font-medium text-onboarding-text-300" htmlFor="email">
+        <label className="text-sm font-medium text-custom-text-300" htmlFor="email">
           Email
         </label>
         <div
-          className={`relative flex items-center rounded-md bg-onboarding-background-200 border border-onboarding-border-100`}
+          className={`relative flex items-center rounded-md bg-custom-background-100 border border-custom-border-100`}
         >
           <Input
             id="email"
@@ -130,7 +130,7 @@ export const AuthPasswordForm: React.FC<Props> = observer((props: Props) => {
             value={passwordFormData.email}
             onChange={(e) => handleFormChange("email", e.target.value)}
             placeholder="name@company.com"
-            className={`disable-autofill-style h-[46px] w-full placeholder:text-onboarding-text-400 border-0`}
+            className={`disable-autofill-style h-10 w-full placeholder:text-custom-text-400 border-0`}
             disabled
           />
           {passwordFormData.email.length > 0 && (
@@ -143,17 +143,17 @@ export const AuthPasswordForm: React.FC<Props> = observer((props: Props) => {
       </div>
 
       <div className="space-y-1">
-        <label className="text-sm text-onboarding-text-300 font-medium" htmlFor="password">
+        <label className="text-sm text-custom-text-300 font-medium" htmlFor="password">
           {mode === EAuthModes.SIGN_IN ? "Password" : "Set a password"}
         </label>
-        <div className="relative flex items-center rounded-md bg-onboarding-background-200">
+        <div className="relative flex items-center rounded-md bg-custom-background-100">
           <Input
             type={showPassword?.password ? "text" : "password"}
             name="password"
             value={passwordFormData.password}
             onChange={(e) => handleFormChange("password", e.target.value)}
             placeholder="Enter password"
-            className="disable-autofill-style h-[46px] w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 placeholder:text-onboarding-text-400"
+            className="disable-autofill-style h-10 w-full border border-custom-border-100 !bg-custom-background-100 pr-12 placeholder:text-custom-text-400"
             onFocus={() => setIsPasswordInputFocused(true)}
             onBlur={() => setIsPasswordInputFocused(false)}
             autoComplete="on"
@@ -176,17 +176,17 @@ export const AuthPasswordForm: React.FC<Props> = observer((props: Props) => {
 
       {mode === EAuthModes.SIGN_UP && (
         <div className="space-y-1">
-          <label className="text-sm text-onboarding-text-300 font-medium" htmlFor="confirm_password">
+          <label className="text-sm text-custom-text-300 font-medium" htmlFor="confirm_password">
             Confirm password
           </label>
-          <div className="relative flex items-center rounded-md bg-onboarding-background-200">
+          <div className="relative flex items-center rounded-md bg-custom-background-100">
             <Input
               type={showPassword?.retypePassword ? "text" : "password"}
               name="confirm_password"
               value={passwordFormData.confirm_password}
               onChange={(e) => handleFormChange("confirm_password", e.target.value)}
               placeholder="Confirm password"
-              className="disable-autofill-style h-[46px] w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 placeholder:text-onboarding-text-400"
+              className="disable-autofill-style h-10 w-full border border-custom-border-100 !bg-custom-background-100 pr-12 placeholder:text-custom-text-400"
               onFocus={() => setIsRetryPasswordInputFocused(true)}
               onBlur={() => setIsRetryPasswordInputFocused(false)}
             />

apps/space/core/components/account/auth-forms/unique-code.tsx

@@ -81,11 +81,11 @@ export const AuthUniqueCodeForm: React.FC<TAuthUniqueCodeForm> = (props) => {
       <input type="hidden" value={uniqueCodeFormData.email} name="email" />
       <input type="hidden" value={nextPath} name="next_path" />
       <div className="space-y-1">
-        <label className="text-sm font-medium text-onboarding-text-300" htmlFor="email">
+        <label className="text-sm font-medium text-custom-text-300" htmlFor="email">
           Email
         </label>
         <div
-          className={`relative flex items-center rounded-md bg-onboarding-background-200 border border-onboarding-border-100`}
+          className={`relative flex items-center rounded-md bg-custom-background-100 border border-custom-border-100`}
         >
           <Input
             id="email"
@@ -94,7 +94,7 @@ export const AuthUniqueCodeForm: React.FC<TAuthUniqueCodeForm> = (props) => {
             value={uniqueCodeFormData.email}
             onChange={(e) => handleFormChange("email", e.target.value)}
             placeholder="name@company.com"
-            className={`disable-autofill-style h-[46px] w-full placeholder:text-onboarding-text-400 border-0`}
+            className={`disable-autofill-style h-10 w-full placeholder:text-custom-text-400 border-0`}
             disabled
           />
           {uniqueCodeFormData.email.length > 0 && (
@@ -107,7 +107,7 @@ export const AuthUniqueCodeForm: React.FC<TAuthUniqueCodeForm> = (props) => {
       </div>
 
       <div className="space-y-1">
-        <label className="text-sm font-medium text-onboarding-text-300" htmlFor="code">
+        <label className="text-sm font-medium text-custom-text-300" htmlFor="code">
           Unique code
         </label>
         <Input
@@ -115,7 +115,7 @@ export const AuthUniqueCodeForm: React.FC<TAuthUniqueCodeForm> = (props) => {
           value={uniqueCodeFormData.code}
           onChange={(e) => handleFormChange("code", e.target.value)}
           placeholder="gets-sets-flys"
-          className="disable-autofill-style h-[46px] w-full border border-onboarding-border-100 !bg-onboarding-background-200 pr-12 placeholder:text-onboarding-text-400"
+          className="disable-autofill-style h-10 w-full border border-custom-border-100 !bg-custom-background-100 pr-12 placeholder:text-custom-text-400"
           autoFocus
         />
         <div className="flex w-full items-center justify-between px-1 text-xs pt-1">
@@ -128,7 +128,7 @@ export const AuthUniqueCodeForm: React.FC<TAuthUniqueCodeForm> = (props) => {
             onClick={() => generateNewCode(uniqueCodeFormData.email)}
             className={`${
               isRequestNewCodeDisabled
-                ? "text-onboarding-text-400"
+                ? "text-custom-text-400"
                 : "font-medium text-custom-primary-300 hover:text-custom-primary-200"
             }`}
             disabled={isRequestNewCodeDisabled}

apps/space/core/components/account/index.ts

@@ -1,4 +1,3 @@
 export * from "./auth-forms";
-export * from "./oauth";
 export * from "./terms-and-conditions";
 export * from "./user-logged-in";

apps/space/core/components/account/oauth/github-button.tsx

@@ -1,41 +0,0 @@
-import { FC } from "react";
-import Image from "next/image";
-import { useSearchParams } from "next/navigation";
-import { useTheme } from "next-themes";
-import { API_BASE_URL } from "@plane/constants";
-// images
-import githubLightModeImage from "/public/logos/github-black.png";
-import githubDarkModeImage from "/public/logos/github-dark.svg";
-
-export type GithubOAuthButtonProps = {
-  text: string;
-};
-
-export const GithubOAuthButton: FC<GithubOAuthButtonProps> = (props) => {
-  const searchParams = useSearchParams();
-  const nextPath = searchParams.get("next_path") || undefined;
-  const { text } = props;
-  // hooks
-  const { resolvedTheme } = useTheme();
-
-  const handleSignIn = () => {
-    window.location.assign(`${API_BASE_URL}/auth/spaces/github/${nextPath ? `?next_path=${nextPath}` : ``}`);
-  };
-
-  return (
-    <button
-      className={`flex h-[42px] w-full items-center justify-center gap-2 rounded border px-2 text-sm font-medium text-custom-text-100 duration-300 hover:bg-onboarding-background-300 ${
-        resolvedTheme === "dark" ? "border-[#43484F] bg-[#2F3135]" : "border-[#D9E4FF]"
-      }`}
-      onClick={handleSignIn}
-    >
-      <Image
-        src={resolvedTheme === "dark" ? githubDarkModeImage : githubLightModeImage}
-        height={20}
-        width={20}
-        alt="GitHub Logo"
-      />
-      {text}
-    </button>
-  );
-};

apps/space/core/components/account/oauth/gitlab-button.tsx

@@ -1,35 +0,0 @@
-import { FC } from "react";
-import Image from "next/image";
-import { useSearchParams } from "next/navigation";
-import { useTheme } from "next-themes";
-import { API_BASE_URL } from "@plane/constants";
-// images
-import GitlabLogo from "/public/logos/gitlab-logo.svg";
-
-export type GitlabOAuthButtonProps = {
-  text: string;
-};
-
-export const GitlabOAuthButton: FC<GitlabOAuthButtonProps> = (props) => {
-  const searchParams = useSearchParams();
-  const nextPath = searchParams.get("next_path") || undefined;
-  const { text } = props;
-  // hooks
-  const { resolvedTheme } = useTheme();
-
-  const handleSignIn = () => {
-    window.location.assign(`${API_BASE_URL}/auth/spaces/gitlab/${nextPath ? `?next_path=${nextPath}` : ``}`);
-  };
-
-  return (
-    <button
-      className={`flex h-[42px] w-full items-center justify-center gap-2 rounded border px-2 text-sm font-medium text-custom-text-100 duration-300 hover:bg-onboarding-background-300 ${
-        resolvedTheme === "dark" ? "border-[#43484F] bg-[#2F3135]" : "border-[#D9E4FF]"
-      }`}
-      onClick={handleSignIn}
-    >
-      <Image src={GitlabLogo} height={20} width={20} alt="GitLab Logo" />
-      {text}
-    </button>
-  );
-};

apps/space/core/components/account/oauth/google-button.tsx

@@ -1,35 +0,0 @@
-import { FC } from "react";
-import Image from "next/image";
-import { useSearchParams } from "next/navigation";
-import { useTheme } from "next-themes";
-import { API_BASE_URL } from "@plane/constants";
-// images
-import GoogleLogo from "/public/logos/google-logo.svg";
-
-export type GoogleOAuthButtonProps = {
-  text: string;
-};
-
-export const GoogleOAuthButton: FC<GoogleOAuthButtonProps> = (props) => {
-  const searchParams = useSearchParams();
-  const nextPath = searchParams.get("next_path") || undefined;
-  const { text } = props;
-  // hooks
-  const { resolvedTheme } = useTheme();
-
-  const handleSignIn = () => {
-    window.location.assign(`${API_BASE_URL}/auth/spaces/google/${nextPath ? `?next_path=${nextPath}` : ``}`);
-  };
-
-  return (
-    <button
-      className={`flex h-[42px] w-full items-center justify-center gap-2 rounded border px-2 text-sm font-medium text-custom-text-100 duration-300 hover:bg-onboarding-background-300 ${
-        resolvedTheme === "dark" ? "border-[#43484F] bg-[#2F3135]" : "border-[#D9E4FF]"
-      }`}
-      onClick={handleSignIn}
-    >
-      <Image src={GoogleLogo} height={18} width={18} alt="Google Logo" />
-      {text}
-    </button>
-  );
-};

apps/space/core/components/account/oauth/index.ts

@@ -1,4 +0,0 @@
-export * from "./oauth-options";
-export * from "./google-button";
-export * from "./github-button";
-export * from "./gitlab-button";

apps/space/core/components/account/oauth/oauth-options.tsx

@@ -1,29 +0,0 @@
-import { observer } from "mobx-react";
-// components
-import { GithubOAuthButton, GitlabOAuthButton, GoogleOAuthButton } from "@/components/account";
-// hooks
-import { useInstance } from "@/hooks/store";
-
-export const OAuthOptions: React.FC = observer(() => {
-  // hooks
-  const { config } = useInstance();
-
-  return (
-    <>
-      <div className="mt-4 flex items-center">
-        <hr className="w-full border-onboarding-border-100" />
-        <p className="mx-3 flex-shrink-0 text-center text-sm text-onboarding-text-400">or</p>
-        <hr className="w-full border-onboarding-border-100" />
-      </div>
-      <div className={`mt-7 grid gap-4 overflow-hidden`}>
-        {config?.is_google_enabled && (
-          <div className="flex h-[42px] items-center !overflow-hidden">
-            <GoogleOAuthButton text="Sign in with Google" />
-          </div>
-        )}
-        {config?.is_github_enabled && <GithubOAuthButton text="Sign in with GitHub" />}
-        {config?.is_gitlab_enabled && <GitlabOAuthButton text="Sign in with GitLab" />}
-      </div>
-    </>
-  );
-});

apps/space/core/components/account/terms-and-conditions.tsx

@@ -11,7 +11,7 @@ export const TermsAndConditions: FC<Props> = (props) => {
   const { isSignUp = false } = props;
   return (
     <span className="flex items-center justify-center py-6">
-      <p className="text-center text-sm text-onboarding-text-200 whitespace-pre-line">
+      <p className="text-center text-sm text-custom-text-200 whitespace-pre-line">
         {isSignUp ? "By creating an account" : "By signing in"}, you agree to our{" \n"}
         <Link href="https://plane.so/legals/terms-and-conditions" target="_blank" rel="noopener noreferrer">
           <span className="text-sm font-medium underline hover:cursor-pointer">Terms of Service</span>

apps/space/core/components/account/user-logged-in.tsx

@@ -2,33 +2,25 @@
 
 import { observer } from "mobx-react";
 import Image from "next/image";
-import { useTheme } from "next-themes";
+import { PlaneLockup } from "@plane/ui";
 // components
 import { PoweredBy } from "@/components/common";
 import { UserAvatar } from "@/components/issues";
 // hooks
 import { useUser } from "@/hooks/store";
 // assets
-import PlaneBlackLogo from "@/public/plane-logos/black-horizontal-with-blue-logo.png";
-import PlaneWhiteLogo from "@/public/plane-logos/white-horizontal-with-blue-logo.png";
 import UserLoggedInImage from "@/public/user-logged-in.svg";
 
 export const UserLoggedIn = observer(() => {
   // store hooks
   const { data: user } = useUser();
-  // next-themes
-  const { resolvedTheme } = useTheme();
-
-  const logo = resolvedTheme === "dark" ? PlaneWhiteLogo : PlaneBlackLogo;
 
   if (!user) return null;
 
   return (
     <div className="flex flex-col h-screen w-screen">
       <div className="relative flex w-full items-center justify-between gap-4 border-b border-custom-border-200 px-6 py-5">
-        <div className="h-[30px] w-[133px]">
-          <Image src={logo} alt="Plane logo" />
-        </div>
+        <PlaneLockup className="h-6 w-auto text-custom-text-100" />
         <UserAvatar />
       </div>
 

apps/space/core/components/common/logo-spinner.tsx

@@ -8,13 +8,11 @@ import LogoSpinnerLight from "@/public/images/logo-spinner-light.gif";
 export const LogoSpinner = () => {
   const { resolvedTheme } = useTheme();
 
-  const logoSrc = resolvedTheme === "dark" ? LogoSpinnerDark : LogoSpinnerLight;
+  const logoSrc = resolvedTheme === "dark" ? LogoSpinnerLight : LogoSpinnerDark;
 
   return (
-    <div className="h-screen w-full flex min-h-[600px] justify-center items-center">
-      <div className="flex items-center justify-center">
-        <Image src={logoSrc} alt="logo" className="w-[82px] h-[82px] mr-2" />
-      </div>
+    <div className="flex items-center justify-center">
+      <Image src={logoSrc} alt="logo" className="h-6 w-auto sm:h-11" />
     </div>
   );
 };

apps/space/core/components/common/powered-by.tsx

@@ -1,10 +1,9 @@
 "use client";
 
 import { FC } from "react";
-import Image from "next/image";
 import { WEBSITE_URL } from "@plane/constants";
 // assets
-import planeLogo from "@/public/plane-logo.svg";
+import { PlaneLogo } from "@plane/ui";
 
 type TPoweredBy = {
   disabled?: boolean;
@@ -23,9 +22,7 @@ export const PoweredBy: FC<TPoweredBy> = (props) => {
       target="_blank"
       rel="noreferrer noopener"
     >
-      <div className="relative grid h-6 w-6 place-items-center">
-        <Image src={planeLogo} alt="Plane logo" className="h-6 w-6" height="24" width="24" />
-      </div>
+      <PlaneLogo className="h-3 w-auto text-custom-text-100" />
       <div className="text-xs">
         Powered by <span className="font-semibold">Plane Publish</span>
       </div>

apps/space/core/components/editor/index.ts

@@ -1,5 +1,4 @@
 export * from "./embeds";
 export * from "./lite-text-editor";
-export * from "./lite-text-read-only-editor";
 export * from "./rich-text-editor";
 export * from "./toolbar";

apps/space/core/components/editor/lite-text-editor.tsx

@@ -1,36 +1,42 @@
 import React from "react";
 // plane imports
-import { EditorRefApi, ILiteTextEditorProps, LiteTextEditorWithRef, TFileHandler } from "@plane/editor";
-import { MakeOptional } from "@plane/types";
+import { type EditorRefApi, type ILiteTextEditorProps, LiteTextEditorWithRef, type TFileHandler } from "@plane/editor";
+import type { MakeOptional } from "@plane/types";
 import { cn } from "@plane/utils";
 // components
 import { EditorMentionsRoot, IssueCommentToolbar } from "@/components/editor";
 // helpers
 import { getEditorFileHandlers } from "@/helpers/editor.helper";
 import { isCommentEmpty } from "@/helpers/string.helper";
+import { useEditorFlagging } from "@/plane-web/hooks/use-editor-flagging";
 
-interface LiteTextEditorWrapperProps
-  extends MakeOptional<
-    Omit<ILiteTextEditorProps, "fileHandler" | "mentionHandler">,
-    "disabledExtensions" | "flaggedExtensions"
-  > {
+type LiteTextEditorWrapperProps = MakeOptional<
+  Omit<ILiteTextEditorProps, "fileHandler" | "mentionHandler">,
+  "disabledExtensions" | "flaggedExtensions"
+> & {
   anchor: string;
-  workspaceId: string;
   isSubmitting?: boolean;
   showSubmitButton?: boolean;
-  uploadFile: TFileHandler["upload"];
-}
+  workspaceId: string;
+} & (
+    | {
+        editable: false;
+      }
+    | {
+        editable: true;
+        uploadFile: TFileHandler["upload"];
+      }
+  );
 
 export const LiteTextEditor = React.forwardRef<EditorRefApi, LiteTextEditorWrapperProps>((props, ref) => {
   const {
     anchor,
     containerClassName,
-    workspaceId,
+    disabledExtensions: additionalDisabledExtensions = [],
+    editable,
     isSubmitting = false,
     showSubmitButton = true,
-    uploadFile,
-    disabledExtensions,
-    flaggedExtensions,
+    workspaceId,
     ...rest
   } = props;
   function isMutableRefObject<T>(ref: React.ForwardedRef<T>): ref is React.MutableRefObject<T | null> {
@@ -39,16 +45,18 @@ export const LiteTextEditor = React.forwardRef<EditorRefApi, LiteTextEditorWrapp
   // derived values
   const isEmpty = isCommentEmpty(props.initialValue);
   const editorRef = isMutableRefObject<EditorRefApi>(ref) ? ref.current : null;
+  const { liteText: liteTextEditorExtensions } = useEditorFlagging(anchor);
 
   return (
     <div className="border border-custom-border-200 rounded p-3 space-y-3">
       <LiteTextEditorWithRef
         ref={ref}
-        disabledExtensions={disabledExtensions ?? []}
-        flaggedExtensions={flaggedExtensions ?? []}
+        disabledExtensions={[...liteTextEditorExtensions.disabled, ...additionalDisabledExtensions]}
+        flaggedExtensions={liteTextEditorExtensions.flagged}
+        editable={editable}
         fileHandler={getEditorFileHandlers({
           anchor,
-          uploadFile,
+          uploadFile: editable ? props.uploadFile : async () => "",
           workspaceId,
         })}
         mentionHandler={{

apps/space/core/components/editor/lite-text-read-only-editor.tsx

@@ -1,48 +0,0 @@
-import React from "react";
-// plane imports
-import { EditorReadOnlyRefApi, ILiteTextReadOnlyEditorProps, LiteTextReadOnlyEditorWithRef } from "@plane/editor";
-import { MakeOptional } from "@plane/types";
-import { cn } from "@plane/utils";
-// components
-import { EditorMentionsRoot } from "@/components/editor";
-// helpers
-import { getReadOnlyEditorFileHandlers } from "@/helpers/editor.helper";
-// store hooks
-import { useMember } from "@/hooks/store";
-
-type LiteTextReadOnlyEditorWrapperProps = MakeOptional<
-  Omit<ILiteTextReadOnlyEditorProps, "fileHandler" | "mentionHandler">,
-  "disabledExtensions" | "flaggedExtensions"
-> & {
-  anchor: string;
-  workspaceId: string;
-};
-
-export const LiteTextReadOnlyEditor = React.forwardRef<EditorReadOnlyRefApi, LiteTextReadOnlyEditorWrapperProps>(
-  ({ anchor, workspaceId, disabledExtensions, flaggedExtensions, ...props }, ref) => {
-    const { getMemberById } = useMember();
-
-    return (
-      <LiteTextReadOnlyEditorWithRef
-        ref={ref}
-        disabledExtensions={disabledExtensions ?? []}
-        flaggedExtensions={flaggedExtensions ?? []}
-        fileHandler={getReadOnlyEditorFileHandlers({
-          anchor,
-          workspaceId,
-        })}
-        mentionHandler={{
-          renderComponent: (props) => <EditorMentionsRoot {...props} />,
-          getMentionedEntityDetails: (id: string) => ({
-            display_name: getMemberById(id)?.member__display_name ?? "",
-          }),
-        }}
-        {...props}
-        // overriding the customClassName to add relative class passed
-        containerClassName={cn(props.containerClassName, "relative p-2")}
-      />
-    );
-  }
-);
-
-LiteTextReadOnlyEditor.displayName = "LiteTextReadOnlyEditor";

apps/space/core/components/editor/rich-text-editor.tsx

@@ -1,5 +1,6 @@
 import React, { forwardRef } from "react";
 // plane imports
+import { useEditorFlagging } from "ce/hooks/use-editor-flagging";
 import { EditorRefApi, IRichTextEditorProps, RichTextEditorWithRef, TFileHandler } from "@plane/editor";
 import { MakeOptional } from "@plane/types";
 // components
@@ -26,8 +27,17 @@ type RichTextEditorWrapperProps = MakeOptional<
   );
 
 export const RichTextEditor = forwardRef<EditorRefApi, RichTextEditorWrapperProps>((props, ref) => {
-  const { anchor, containerClassName, editable, workspaceId, disabledExtensions, flaggedExtensions, ...rest } = props;
+  const {
+    anchor,
+    containerClassName,
+    editable,
+    workspaceId,
+    disabledExtensions: additionalDisabledExtensions = [],
+    ...rest
+  } = props;
   const { getMemberById } = useMember();
+  const { richText: richTextEditorExtensions } = useEditorFlagging(anchor);
+
   return (
     <RichTextEditorWithRef
       mentionHandler={{
@@ -37,14 +47,14 @@ export const RichTextEditor = forwardRef<EditorRefApi, RichTextEditorWrapperProp
         }),
       }}
       ref={ref}
-      disabledExtensions={disabledExtensions ?? []}
+      disabledExtensions={[...richTextEditorExtensions.disabled, ...additionalDisabledExtensions]}
       editable={editable}
       fileHandler={getEditorFileHandlers({
         anchor,
         uploadFile: editable ? props.uploadFile : async () => "",
         workspaceId,
       })}
-      flaggedExtensions={flaggedExtensions ?? []}
+      flaggedExtensions={richTextEditorExtensions.flagged}
       {...rest}
       containerClassName={containerClassName}
       editorClassName="min-h-[100px] max-h-[200px] border-[0.5px] border-custom-border-300 rounded-md pl-3 py-2 overflow-hidden"

apps/space/core/components/issues/issue-layouts/issue-layout-HOC.tsx

@@ -3,7 +3,7 @@ import { TLoader } from "@plane/types";
 import { LogoSpinner } from "@/components/common";
 
 interface Props {
-  children: string | JSX.Element | JSX.Element[];
+  children: string | React.ReactNode | React.ReactNode[];
   getGroupIssueCount: (
     groupId: string | undefined,
     subGroupId: string | undefined,

apps/space/core/components/issues/peek-overview/comment/add-comment.tsx

@@ -75,6 +75,7 @@ export const AddComment: React.FC<Props> = observer((props) => {
           control={control}
           render={({ field: { value, onChange } }) => (
             <LiteTextEditor
+              editable
               onEnterKeyPress={(e) => {
                 if (currentUser) handleSubmit(onSubmit)(e);
               }}

apps/space/core/components/issues/peek-overview/comment/comment-detail-card.tsx

@@ -8,7 +8,7 @@ import { EditorRefApi } from "@plane/editor";
 import { TIssuePublicComment } from "@plane/types";
 import { getFileURL } from "@plane/utils";
 // components
-import { LiteTextEditor, LiteTextReadOnlyEditor } from "@/components/editor";
+import { LiteTextEditor } from "@/components/editor";
 import { CommentReactions } from "@/components/issues/peek-overview";
 // helpers
 import { timeAgo } from "@/helpers/date-time.helper";
@@ -102,6 +102,7 @@ export const CommentCard: React.FC<Props> = observer((props) => {
                 name="comment_html"
                 render={({ field: { onChange, value } }) => (
                   <LiteTextEditor
+                    editable
                     anchor={anchor}
                     workspaceId={workspaceID?.toString() ?? ""}
                     onEnterKeyPress={handleSubmit(handleCommentUpdate)}
@@ -138,7 +139,8 @@ export const CommentCard: React.FC<Props> = observer((props) => {
             </div>
           </form>
           <div className={`${isEditing ? "hidden" : ""}`}>
-            <LiteTextReadOnlyEditor
+            <LiteTextEditor
+              editable={false}
               anchor={anchor}
               workspaceId={workspaceID?.toString() ?? ""}
               ref={showEditorRef}

apps/space/core/components/issues/peek-overview/header.tsx

@@ -3,9 +3,8 @@
 import React from "react";
 import { observer } from "mobx-react";
 import { Link2, MoveRight } from "lucide-react";
-import { Listbox, Transition } from "@headlessui/react";
 // ui
-import { CenterPanelIcon, FullScreenPanelIcon, setToast, SidePanelIcon, TOAST_TYPE } from "@plane/ui";
+import { CenterPanelIcon, CustomSelect, FullScreenPanelIcon, setToast, SidePanelIcon, TOAST_TYPE } from "@plane/ui";
 // helpers
 import { copyTextToClipboard } from "@/helpers/string.helper";
 // hooks
@@ -66,49 +65,29 @@ export const PeekOverviewHeader: React.FC<Props> = observer((props) => {
               <MoveRight className="size-4" />
             </button>
           )}
-          <Listbox
-            as="div"
+          <CustomSelect
             value={peekMode}
-            onChange={(val) => setPeekMode(val)}
+            onChange={(val: any) => setPeekMode(val)}
             className="relative flex-shrink-0 text-left"
+            customButtonClassName={`grid place-items-center text-custom-text-300 hover:text-custom-text-200 ${peekMode === "full" ? "rotate-45" : ""}`}
+            customButton={<Icon className="h-4 w-4 text-custom-text-300 hover:text-custom-text-200" />}
+            optionsClassName="absolute left-0 z-10 mt-1 min-w-[12rem] origin-top-left overflow-y-auto whitespace-nowrap rounded-md border border-custom-border-300 bg-custom-background-90 text-xs shadow-lg focus:outline-none"
           >
-            <Listbox.Button
-              className={`grid place-items-center text-custom-text-300 hover:text-custom-text-200 ${peekMode === "full" ? "rotate-45" : ""}`}
-            >
-              <Icon className="h-4 w-4 text-custom-text-300 hover:text-custom-text-200" />
-            </Listbox.Button>
-
-            <Transition
-              as={React.Fragment}
-              enter="transition ease-out duration-100"
-              enterFrom="transform opacity-0 scale-95"
-              enterTo="transform opacity-100 scale-100"
-              leave="transition ease-in duration-75"
-              leaveFrom="transform opacity-100 scale-100"
-              leaveTo="transform opacity-0 scale-95"
-            >
-              <Listbox.Options className="absolute left-0 z-10 mt-1 min-w-[12rem] origin-top-left overflow-y-auto whitespace-nowrap rounded-md border border-custom-border-300 bg-custom-background-90 text-xs shadow-lg focus:outline-none">
-                <div className="space-y-1 p-2">
-                  {PEEK_MODES.map((mode) => (
-                    <Listbox.Option
-                      key={mode.key}
-                      value={mode.key}
-                      className={({ active, selected }) =>
-                        `cursor-pointer select-none truncate rounded px-1 py-1.5 ${
-                          active ? "bg-custom-background-80" : ""
-                        } ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
-                      }
-                    >
-                      <div className="flex items-center gap-1.5">
-                        <mode.icon className="-my-1 h-4 w-4 flex-shrink-0" />
-                        {mode.label}
-                      </div>
-                    </Listbox.Option>
-                  ))}
-                </div>
-              </Listbox.Options>
-            </Transition>
-          </Listbox>
+            <div className="space-y-1 p-2">
+              {PEEK_MODES.map((mode) => (
+                <CustomSelect.Option
+                  key={mode.key}
+                  value={mode.key}
+                  className="cursor-pointer select-none truncate rounded px-1 py-1.5"
+                >
+                  <div className="flex items-center gap-1.5">
+                    <mode.icon className="-my-1 h-4 w-4 flex-shrink-0" />
+                    {mode.label}
+                  </div>
+                </CustomSelect.Option>
+              ))}
+            </div>
+          </CustomSelect>
         </div>
         {isClipboardWriteAllowed && (peekMode === "side" || peekMode === "modal") && (
           <div className="flex flex-shrink-0 items-center gap-2">

apps/space/core/components/views/auth.tsx

@@ -1,47 +1,14 @@
 "use client";
 
-import { observer } from "mobx-react";
-import Image from "next/image";
-import Link from "next/link";
-import { useTheme } from "next-themes";
-import { SPACE_BASE_PATH } from "@plane/constants";
 // components
 import { AuthRoot } from "@/components/account";
 import { PoweredBy } from "@/components/common";
-// images
-import PlaneBackgroundPatternDark from "@/public/auth/background-pattern-dark.svg";
-import PlaneBackgroundPattern from "@/public/auth/background-pattern.svg";
-import BlackHorizontalLogo from "@/public/plane-logos/black-horizontal-with-blue-logo.png";
-import WhiteHorizontalLogo from "@/public/plane-logos/white-horizontal-with-blue-logo.png";
+import { AuthHeader } from "./header";
 
-export const AuthView = observer(() => {
-  // hooks
-  const { resolvedTheme } = useTheme();
-
-  const logo = resolvedTheme === "light" ? BlackHorizontalLogo : WhiteHorizontalLogo;
-
-  return (
-    <div className="relative w-screen h-screen overflow-hidden">
-      <div className="absolute inset-0 z-0">
-        <Image
-          src={resolvedTheme === "dark" ? PlaneBackgroundPatternDark : PlaneBackgroundPattern}
-          className="w-full h-full object-cover"
-          alt="Plane background pattern"
-        />
-      </div>
-      <div className="relative z-10 w-screen h-screen overflow-hidden overflow-y-auto flex flex-col">
-        <div className="container min-w-full px-10 lg:px-20 xl:px-36 flex-shrink-0 relative flex items-center justify-between pb-4 transition-all">
-          <div className="flex items-center gap-x-2 py-10">
-            <Link href={`${SPACE_BASE_PATH}/`} className="h-[30px] w-[133px]">
-              <Image src={logo} alt="Plane logo" />
-            </Link>
-          </div>
-        </div>
-        <div className="flex flex-col justify-center flex-grow container h-[100vh-60px] mx-auto max-w-lg px-10 lg:max-w-md lg:px-5 transition-all">
-          <AuthRoot />
-        </div>
-      </div>
-      <PoweredBy />
-    </div>
-  );
-});
+export const AuthView = () => (
+  <div className="relative z-10 flex flex-col items-center w-screen h-screen overflow-hidden overflow-y-auto pt-6 pb-10 px-8">
+    <AuthHeader />
+    <AuthRoot />
+    <PoweredBy />
+  </div>
+);

apps/space/core/components/views/header.tsx

@@ -0,0 +1,13 @@
+"use client";
+
+import React from "react";
+import Link from "next/link";
+import { PlaneLockup } from "@plane/ui";
+
+export const AuthHeader = () => (
+  <div className="flex items-center justify-between gap-6 w-full flex-shrink-0 sticky top-0">
+    <Link href="/">
+      <PlaneLockup height={20} width={95} className="text-custom-text-100" />
+    </Link>
+  </div>
+);

apps/space/core/lib/instance-provider.tsx

@@ -38,7 +38,7 @@ export const InstanceProvider = observer(({ children }: { children: ReactNode })
 
   if (!instance && !error)
     return (
-      <div className="flex h-screen min-h-[500px] w-full justify-center items-center">
+      <div className="flex items-center justify-center h-screen w-full">
         <LogoSpinner />
       </div>
     );

apps/space/core/store/profile.store.ts

@@ -51,6 +51,7 @@ export class ProfileStore implements IProfileStore {
     billing_address_country: undefined,
     billing_address: undefined,
     has_billing_address: false,
+    has_marketing_email_consent: false,
     created_at: "",
     updated_at: "",
     language: "",

apps/space/core/store/user.store.ts

@@ -17,7 +17,7 @@ type TUserErrorStatus = {
 export interface IUserStore {
   // observables
   isAuthenticated: boolean;
-  isLoading: boolean;
+  isInitializing: boolean;
   error: TUserErrorStatus | undefined;
   data: IUser | undefined;
   // store observables
@@ -35,7 +35,7 @@ export interface IUserStore {
 export class UserStore implements IUserStore {
   // observables
   isAuthenticated: boolean = false;
-  isLoading: boolean = true;
+  isInitializing: boolean = true;
   error: TUserErrorStatus | undefined = undefined;
   data: IUser | undefined = undefined;
   // store observables
@@ -52,7 +52,7 @@ export class UserStore implements IUserStore {
     makeObservable(this, {
       // observables
       isAuthenticated: observable.ref,
-      isLoading: observable.ref,
+      isInitializing: observable.ref,
       error: observable,
       // model observables
       data: observable,
@@ -87,7 +87,7 @@ export class UserStore implements IUserStore {
   fetchCurrentUser = async (): Promise<IUser> => {
     try {
       runInAction(() => {
-        if (this.data === undefined) this.isLoading = true;
+        if (this.data === undefined && !this.error) this.isInitializing = true;
         this.error = undefined;
       });
       const user = await this.userService.me();
@@ -95,19 +95,19 @@ export class UserStore implements IUserStore {
         await this.profile.fetchUserProfile();
         runInAction(() => {
           this.data = user;
-          this.isLoading = false;
+          this.isInitializing = false;
           this.isAuthenticated = true;
         });
       } else
         runInAction(() => {
           this.data = user;
-          this.isLoading = false;
+          this.isInitializing = false;
           this.isAuthenticated = false;
         });
       return user;
     } catch (error) {
       runInAction(() => {
-        this.isLoading = false;
+        this.isInitializing = false;
         this.isAuthenticated = false;
         this.error = {
           status: "user-fetch-error",
@@ -166,7 +166,7 @@ export class UserStore implements IUserStore {
   reset = (): void => {
     runInAction(() => {
       this.isAuthenticated = false;
-      this.isLoading = false;
+      this.isInitializing = false;
       this.error = undefined;
       this.data = undefined;
       this.profile = new ProfileStore(this.store);

apps/space/helpers/editor.helper.ts

@@ -1,6 +1,6 @@
 // plane imports
 import { MAX_FILE_SIZE } from "@plane/constants";
-import { TFileHandler, TReadOnlyFileHandler } from "@plane/editor";
+import { TFileHandler } from "@plane/editor";
 import { SitesFileService } from "@plane/services";
 import { getFileURL } from "@plane/utils";
 // services
@@ -22,10 +22,11 @@ type TArgs = {
 };
 
 /**
- * @description this function returns the file handler required by the read-only editors
+ * @description this function returns the file handler required by the editors
+ * @param {TArgs} args
  */
-export const getReadOnlyEditorFileHandlers = (args: Pick<TArgs, "anchor" | "workspaceId">): TReadOnlyFileHandler => {
-  const { anchor, workspaceId } = args;
+export const getEditorFileHandlers = (args: TArgs): TFileHandler => {
+  const { anchor, uploadFile, workspaceId } = args;
 
   const getAssetSrc = async (path: string) => {
     if (!path) return "";
@@ -38,31 +39,9 @@ export const getReadOnlyEditorFileHandlers = (args: Pick<TArgs, "anchor" | "work
 
   return {
     checkIfAssetExists: async () => true,
+    assetsUploadStatus: {},
     getAssetDownloadSrc: getAssetSrc,
     getAssetSrc: getAssetSrc,
-    restore: async (src: string) => {
-      if (src?.startsWith("http")) {
-        await sitesFileService.restoreOldEditorAsset(workspaceId, src);
-      } else {
-        await sitesFileService.restoreNewAsset(anchor, src);
-      }
-    },
-  };
-};
-
-/**
- * @description this function returns the file handler required by the editors
- * @param {TArgs} args
- */
-export const getEditorFileHandlers = (args: TArgs): TFileHandler => {
-  const { anchor, uploadFile, workspaceId } = args;
-
-  return {
-    ...getReadOnlyEditorFileHandlers({
-      anchor,
-      workspaceId,
-    }),
-    assetsUploadStatus: {},
     upload: uploadFile,
     delete: async (src: string) => {
       if (src?.startsWith("http")) {
@@ -72,6 +51,13 @@ export const getEditorFileHandlers = (args: TArgs): TFileHandler => {
       }
     },
     cancel: sitesFileService.cancelUpload,
+    restore: async (src: string) => {
+      if (src?.startsWith("http")) {
+        await sitesFileService.restoreOldEditorAsset(workspaceId, src);
+      } else {
+        await sitesFileService.restoreNewAsset(anchor, src);
+      }
+    },
     validation: {
       maxFileSize: MAX_FILE_SIZE,
     },

apps/space/public/favicon/site.webmanifest

@@ -1 +1,11 @@
-{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
+{
+  "name": "",
+  "short_name": "",
+  "icons": [
+    { "src": "/favicon/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
+    { "src": "/favicon/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
+  ],
+  "theme_color": "#ffffff",
+  "background_color": "#ffffff",
+  "display": "standalone"
+}

apps/space/styles/globals.css

@@ -12,24 +12,24 @@
   :root {
     color-scheme: light !important;
 
-    --color-primary-10: 236, 241, 255;
-    --color-primary-20: 217, 228, 255;
-    --color-primary-30: 197, 214, 255;
-    --color-primary-40: 178, 200, 255;
-    --color-primary-50: 159, 187, 255;
-    --color-primary-60: 140, 173, 255;
-    --color-primary-70: 121, 159, 255;
-    --color-primary-80: 101, 145, 255;
-    --color-primary-90: 82, 132, 255;
-    --color-primary-100: 63, 118, 255;
-    --color-primary-200: 57, 106, 230;
-    --color-primary-300: 50, 94, 204;
-    --color-primary-400: 44, 83, 179;
-    --color-primary-500: 38, 71, 153;
-    --color-primary-600: 32, 59, 128;
-    --color-primary-700: 25, 47, 102;
-    --color-primary-800: 19, 35, 76;
-    --color-primary-900: 13, 24, 51;
+    --color-primary-10: 229, 243, 250;
+    --color-primary-20: 216, 237, 248;
+    --color-primary-30: 199, 229, 244;
+    --color-primary-40: 169, 214, 239;
+    --color-primary-50: 144, 202, 234;
+    --color-primary-60: 109, 186, 227;
+    --color-primary-70: 75, 170, 221;
+    --color-primary-80: 41, 154, 214;
+    --color-primary-90: 34, 129, 180;
+    --color-primary-100: 0, 99, 153;
+    --color-primary-200: 0, 92, 143;
+    --color-primary-300: 0, 86, 133;
+    --color-primary-400: 0, 77, 117;
+    --color-primary-500: 0, 66, 102;
+    --color-primary-600: 0, 53, 82;
+    --color-primary-700: 0, 43, 66;
+    --color-primary-800: 0, 33, 51;
+    --color-primary-900: 0, 23, 36;
 
     --color-background-100: 255, 255, 255; /* primary bg */
     --color-background-90: 247, 247, 247; /* secondary bg */
@@ -185,6 +185,25 @@
   [data-theme="dark-contrast"] {
     color-scheme: dark !important;
 
+    --color-primary-10: 8, 31, 43;
+    --color-primary-20: 10, 37, 51;
+    --color-primary-30: 13, 49, 69;
+    --color-primary-40: 16, 58, 81;
+    --color-primary-50: 18, 68, 94;
+    --color-primary-60: 23, 86, 120;
+    --color-primary-70: 28, 104, 146;
+    --color-primary-80: 31, 116, 163;
+    --color-primary-90: 34, 129, 180;
+    --color-primary-100: 40, 146, 204;
+    --color-primary-200: 41, 154, 214;
+    --color-primary-300: 75, 170, 221;
+    --color-primary-400: 109, 186, 227;
+    --color-primary-500: 144, 202, 234;
+    --color-primary-600: 169, 214, 239;
+    --color-primary-700: 199, 229, 244;
+    --color-primary-800: 216, 237, 248;
+    --color-primary-900: 229, 243, 250;
+
     --color-background-100: 25, 25, 25; /* primary bg */
     --color-background-90: 32, 32, 32; /* secondary bg */
     --color-background-80: 44, 44, 44; /* tertiary bg */
@@ -274,25 +293,6 @@
   [data-theme="dark"],
   [data-theme="light-contrast"],
   [data-theme="dark-contrast"] {
-    --color-primary-10: 236, 241, 255;
-    --color-primary-20: 217, 228, 255;
-    --color-primary-30: 197, 214, 255;
-    --color-primary-40: 178, 200, 255;
-    --color-primary-50: 159, 187, 255;
-    --color-primary-60: 140, 173, 255;
-    --color-primary-70: 121, 159, 255;
-    --color-primary-80: 101, 145, 255;
-    --color-primary-90: 82, 132, 255;
-    --color-primary-100: 63, 118, 255;
-    --color-primary-200: 57, 106, 230;
-    --color-primary-300: 50, 94, 204;
-    --color-primary-400: 44, 83, 179;
-    --color-primary-500: 38, 71, 153;
-    --color-primary-600: 32, 59, 128;
-    --color-primary-700: 25, 47, 102;
-    --color-primary-800: 19, 35, 76;
-    --color-primary-900: 13, 24, 51;
-
     --color-sidebar-background-100: var(--color-background-100); /* primary sidebar bg */
     --color-sidebar-background-90: var(--color-background-90); /* secondary sidebar bg */
     --color-sidebar-background-80: var(--color-background-80); /* tertiary sidebar bg */

apps/web/app/(all)/[workspaceSlug]/(projects)/profile/[userId]/activity/page.tsx

@@ -31,7 +31,7 @@ const ProfileActivityPage = observer(() => {
 
   const handleLoadMore = () => setPageCount((prev) => prev + 1);
 
-  const activityPages: JSX.Element[] = [];
+  const activityPages: React.ReactNode[] = [];
   for (let i = 0; i < pageCount; i++)
     activityPages.push(
       <WorkspaceActivityListPage

apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(list)/mobile-header.tsx

@@ -6,7 +6,7 @@ import { useParams } from "next/navigation";
 // icons
 import { Calendar, ChevronDown, Kanban, List } from "lucide-react";
 // plane imports
-import { EIssueFilterType, ISSUE_LAYOUTS, ISSUE_DISPLAY_FILTERS_BY_PAGE } from "@plane/constants";
+import { EIssueFilterType, ISSUE_DISPLAY_FILTERS_BY_PAGE } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import {
   EIssuesStoreType,
@@ -15,7 +15,6 @@ import {
   IIssueFilterOptions,
   EIssueLayoutTypes,
 } from "@plane/types";
-import { CustomMenu } from "@plane/ui";
 import { isIssueFilterActive } from "@plane/utils";
 // components
 import { WorkItemsModal } from "@/components/analytics/work-items/modal";
@@ -23,7 +22,6 @@ import {
   DisplayFiltersSelection,
   FilterSelection,
   FiltersDropdown,
-  IssueLayoutIcon,
   MobileLayoutSelection,
 } from "@/components/issues/issue-layouts";
 // helpers