makeplane · iam-vipin · Dec 12, 2025 · Dec 12, 2025
diff --git a/apps/admin/app/(all)/(dashboard)/ai/form.tsx b/apps/admin/app/(all)/(dashboard)/ai/form.tsx
@@ -114,8 +114,8 @@ export function InstanceAIForm(props: IInstanceAIForm) {
         </div>
       </div>
 
-      <div className="space-y-4">
-        <Button variant="primary" onClick={handleSubmit(onSubmit)} loading={isSubmitting}>
+      <div className="flex flex-col gap-2 items-start">
+        <Button variant="primary" size="lg" onClick={handleSubmit(onSubmit)} loading={isSubmitting}>
           {isSubmitting ? "Saving..." : "Save changes"}
         </Button>
 

diff --git a/apps/admin/app/(all)/(dashboard)/authentication/gitea/form.tsx b/apps/admin/app/(all)/(dashboard)/authentication/gitea/form.tsx
@@ -178,10 +178,16 @@ export function InstanceGiteaConfigForm(props: Props) {
             ))}
             <div className="flex flex-col gap-1 pt-4">
               <div className="flex items-center gap-4">
-                <Button variant="primary" onClick={handleSubmit(onSubmit)} loading={isSubmitting} disabled={!isDirty}>
+                <Button
+                  variant="primary"
+                  size="lg"
+                  onClick={handleSubmit(onSubmit)}
+                  loading={isSubmitting}
+                  disabled={!isDirty}
+                >
                   {isSubmitting ? "Saving..." : "Save changes"}
                 </Button>
-                <Link href="/authentication" className={getButtonStyling("secondary", "base")} onClick={handleGoBack}>
+                <Link href="/authentication" className={getButtonStyling("secondary", "lg")} onClick={handleGoBack}>
                   Go back
                 </Link>
               </div>

diff --git a/apps/admin/app/(all)/(dashboard)/authentication/github/form.tsx b/apps/admin/app/(all)/(dashboard)/authentication/github/form.tsx
@@ -201,10 +201,16 @@ export function InstanceGithubConfigForm(props: Props) {
             ))}
             <div className="flex flex-col gap-1 pt-4">
               <div className="flex items-center gap-4">
-                <Button variant="primary" onClick={handleSubmit(onSubmit)} loading={isSubmitting} disabled={!isDirty}>
+                <Button
+                  variant="primary"
+                  size="lg"
+                  onClick={handleSubmit(onSubmit)}
+                  loading={isSubmitting}
+                  disabled={!isDirty}
+                >
                   {isSubmitting ? "Saving..." : "Save changes"}
                 </Button>
-                <Link href="/authentication" className={getButtonStyling("secondary", "base")} onClick={handleGoBack}>
+                <Link href="/authentication" className={getButtonStyling("secondary", "lg")} onClick={handleGoBack}>
                   Go back
                 </Link>
               </div>

diff --git a/apps/admin/app/(all)/(dashboard)/authentication/gitlab/form.tsx b/apps/admin/app/(all)/(dashboard)/authentication/gitlab/form.tsx
@@ -183,10 +183,16 @@ export function InstanceGitlabConfigForm(props: Props) {
             ))}
             <div className="flex flex-col gap-1 pt-4">
               <div className="flex items-center gap-4">
-                <Button variant="primary" onClick={handleSubmit(onSubmit)} loading={isSubmitting} disabled={!isDirty}>
+                <Button
+                  variant="primary"
+                  size="lg"
+                  onClick={handleSubmit(onSubmit)}
+                  loading={isSubmitting}
+                  disabled={!isDirty}
+                >
                   {isSubmitting ? "Saving..." : "Save changes"}
                 </Button>
-                <Link href="/authentication" className={getButtonStyling("secondary", "base")} onClick={handleGoBack}>
+                <Link href="/authentication" className={getButtonStyling("secondary", "lg")} onClick={handleGoBack}>
                   Go back
                 </Link>
               </div>

diff --git a/apps/admin/app/(all)/(dashboard)/authentication/google/form.tsx b/apps/admin/app/(all)/(dashboard)/authentication/google/form.tsx
@@ -188,10 +188,16 @@ export function InstanceGoogleConfigForm(props: Props) {
             ))}
             <div className="flex flex-col gap-1 pt-4">
               <div className="flex items-center gap-4">
-                <Button variant="primary" onClick={handleSubmit(onSubmit)} loading={isSubmitting} disabled={!isDirty}>
+                <Button
+                  variant="primary"
+                  size="lg"
+                  onClick={handleSubmit(onSubmit)}
+                  loading={isSubmitting}
+                  disabled={!isDirty}
+                >
                   {isSubmitting ? "Saving..." : "Save changes"}
                 </Button>
-                <Link href="/authentication" className={getButtonStyling("secondary", "base")} onClick={handleGoBack}>
+                <Link href="/authentication" className={getButtonStyling("secondary", "lg")} onClick={handleGoBack}>
                   Go back
                 </Link>
               </div>

diff --git a/apps/admin/app/(all)/(dashboard)/email/email-config-form.tsx b/apps/admin/app/(all)/(dashboard)/email/email-config-form.tsx
@@ -204,6 +204,7 @@ export function InstanceEmailForm(props: IInstanceEmailForm) {
       <div className="flex max-w-4xl items-center py-1 gap-4">
         <Button
           variant="primary"
+          size="lg"
           onClick={handleSubmit(onSubmit)}
           loading={isSubmitting}
           disabled={!isValid || !isDirty}
@@ -212,6 +213,7 @@ export function InstanceEmailForm(props: IInstanceEmailForm) {
         </Button>
         <Button
           variant="secondary"
+          size="lg"
           onClick={() => setIsSendTestEmailModalOpen(true)}
           loading={isSubmitting}
           disabled={!isValid}

diff --git a/apps/admin/app/(all)/(dashboard)/email/page.tsx b/apps/admin/app/(all)/(dashboard)/email/page.tsx
@@ -58,7 +58,7 @@ const InstanceEmailPage = observer(function InstanceEmailPage(_props: Route.Comp
               Plane can send useful emails to you and your users from your own instance without talking to the Internet.
               <div className="text-13 font-regular text-tertiary">
                 Set it up below and please test your settings before you save them.&nbsp;
-                <span className="text-red-400">Misconfigs can lead to email bounces and errors.</span>
+                <span className="text-danger">Misconfigs can lead to email bounces and errors.</span>
               </div>
             </div>
           </div>

diff --git a/apps/admin/app/(all)/(dashboard)/email/test-email-modal.tsx b/apps/admin/app/(all)/(dashboard)/email/test-email-modal.tsx
@@ -116,11 +116,11 @@ export function SendTestEmailModal(props: Props) {
                   )}
                   {sendEmailStep === ESendEmailSteps.FAILED && <div className="text-13">{error}</div>}
                   <div className="flex items-center gap-2 justify-end mt-5">
-                    <Button variant="secondary" onClick={handleClose} tabIndex={2}>
+                    <Button variant="secondary" size="lg" onClick={handleClose} tabIndex={2}>
                       {sendEmailStep === ESendEmailSteps.SEND_EMAIL ? "Cancel" : "Close"}
                     </Button>
                     {sendEmailStep === ESendEmailSteps.SEND_EMAIL && (
-                      <Button variant="primary" loading={isLoading} onClick={handleSubmit} tabIndex={3}>
+                      <Button variant="primary" size="lg" loading={isLoading} onClick={handleSubmit} tabIndex={3}>
                         {isLoading ? "Sending email..." : "Send email"}
                       </Button>
                     )}

diff --git a/apps/admin/app/(all)/(dashboard)/general/form.tsx b/apps/admin/app/(all)/(dashboard)/general/form.tsx
@@ -63,8 +63,8 @@ export const GeneralConfigurationForm = observer(function GeneralConfigurationFo
 
   return (
     <div className="space-y-8">
-      <div className="space-y-3">
-        <div className="text-16 font-medium">Instance details</div>
+      <div className="space-y-4">
+        <div className="text-16 font-medium text-primary">Instance details</div>
         <div className="grid-col grid w-full grid-cols-1 items-center justify-between gap-8 md:grid-cols-2 lg:grid-cols-3">
           <ControllerInput
             key="instance_name"
@@ -105,8 +105,8 @@ export const GeneralConfigurationForm = observer(function GeneralConfigurationFo
         </div>
       </div>
 
-      <div className="space-y-3">
-        <div className="text-16 font-medium">Chat + telemetry</div>
+      <div className="space-y-4">
+        <div className="text-16 font-medium text-primary">Chat + telemetry</div>
         <IntercomConfig isTelemetryEnabled={watch("is_telemetry_enabled") ?? false} />
         <div className="flex items-center gap-14 px-4 py-3 border border-subtle rounded-sm">
           <div className="grow flex items-center gap-4">
@@ -144,7 +144,7 @@ export const GeneralConfigurationForm = observer(function GeneralConfigurationFo
       </div>
 
       <div>
-        <Button variant="primary" onClick={handleSubmit(onSubmit)} loading={isSubmitting}>
+        <Button variant="primary" size="lg" onClick={handleSubmit(onSubmit)} loading={isSubmitting}>
           {isSubmitting ? "Saving..." : "Save changes"}
         </Button>
       </div>

diff --git a/apps/admin/app/(all)/(dashboard)/header.tsx b/apps/admin/app/(all)/(dashboard)/header.tsx
@@ -12,7 +12,7 @@ export const HamburgerToggle = observer(function HamburgerToggle() {
   const { isSidebarCollapsed, toggleSidebar } = useTheme();
   return (
     <div
-      className="w-7 h-7 rounded-sm flex justify-center items-center bg-layer-1 transition-all hover:bg-surface-2 cursor-pointer group md:hidden"
+      className="w-7 h-7 rounded-sm flex justify-center items-center bg-layer-1 transition-all hover:bg-layer-1-hover cursor-pointer group md:hidden"
       onClick={() => toggleSidebar(!isSidebarCollapsed)}
     >
       <Menu size={14} className="text-secondary group-hover:text-primary transition-all" />

diff --git a/apps/admin/app/(all)/(dashboard)/image/form.tsx b/apps/admin/app/(all)/(dashboard)/image/form.tsx
@@ -70,7 +70,7 @@ export function InstanceImageConfigForm(props: IInstanceImageConfigForm) {
       </div>
 
       <div>
-        <Button variant="primary" onClick={handleSubmit(onSubmit)} loading={isSubmitting}>
+        <Button variant="primary" size="lg" onClick={handleSubmit(onSubmit)} loading={isSubmitting}>
           {isSubmitting ? "Saving..." : "Save changes"}
         </Button>
       </div>

diff --git a/apps/admin/app/(all)/(dashboard)/layout.tsx b/apps/admin/app/(all)/(dashboard)/layout.tsx
@@ -36,7 +36,7 @@ function AdminLayout(_props: Route.ComponentProps) {
         <AdminSidebar />
         <main className="relative flex h-full w-full flex-col overflow-hidden bg-surface-1">
           <AdminHeader />
-          <div className="h-full w-full overflow-hidden">
+          <div className="h-full w-full overflow-hidden overflow-y-scroll vertical-scrollbar scrollbar-md">
             <Outlet />
           </div>
         </main>

diff --git a/apps/admin/app/(all)/(dashboard)/sidebar-dropdown.tsx b/apps/admin/app/(all)/(dashboard)/sidebar-dropdown.tsx
@@ -46,7 +46,7 @@ export const AdminSidebarDropdown = observer(function AdminSidebarDropdown() {
         <Menu.Item
           as="button"
           type="button"
-          className="flex w-full items-center gap-2 rounded-sm px-2 py-1 hover:bg-layer-1"
+          className="flex w-full items-center gap-2 rounded-sm px-2 py-1 hover:bg-layer-1-hover"
           onClick={handleThemeSwitch}
         >
           <Palette className="h-4 w-4 stroke-[1.5]" />
@@ -59,7 +59,7 @@ export const AdminSidebarDropdown = observer(function AdminSidebarDropdown() {
           <Menu.Item
             as="button"
             type="submit"
-            className="flex w-full items-center gap-2 rounded-sm px-2 py-1 hover:bg-layer-1"
+            className="flex w-full items-center gap-2 rounded-sm px-2 py-1 hover:bg-layer-1-hover"
           >
             <LogOut className="h-4 w-4 stroke-[1.5]" />
             Sign out

diff --git a/apps/admin/app/(all)/(dashboard)/sidebar-help-section.tsx b/apps/admin/app/(all)/(dashboard)/sidebar-help-section.tsx
@@ -64,7 +64,7 @@ export const AdminSidebarHelpSection = observer(function AdminSidebarHelpSection
         <Tooltip tooltipContent="Help" position={isSidebarCollapsed ? "right" : "top"} className="ml-4">
           <button
             type="button"
-            className={`ml-auto grid place-items-center rounded-md p-1.5 text-secondary outline-none hover:bg-surface-2 hover:text-primary ${
+            className={`ml-auto grid place-items-center rounded-md p-1.5 text-secondary outline-none hover:bg-layer-1-hover hover:text-primary ${
               isSidebarCollapsed ? "w-full" : ""
             }`}
             onClick={() => setIsNeedHelpOpen((prev) => !prev)}
@@ -75,7 +75,7 @@ export const AdminSidebarHelpSection = observer(function AdminSidebarHelpSection
         <Tooltip tooltipContent="Toggle sidebar" position={isSidebarCollapsed ? "right" : "top"} className="ml-4">
           <button
             type="button"
-            className={`grid place-items-center rounded-md p-1.5 text-secondary outline-none hover:bg-surface-2 hover:text-primary ${
+            className={`grid place-items-center rounded-md p-1.5 text-secondary outline-none hover:bg-layer-1-hover hover:text-primary ${
               isSidebarCollapsed ? "w-full" : ""
             }`}
             onClick={() => toggleSidebar(!isSidebarCollapsed)}
@@ -106,7 +106,7 @@ export const AdminSidebarHelpSection = observer(function AdminSidebarHelpSection
                 if (href)
                   return (
                     <Link href={href} key={name} target="_blank">
-                      <div className="flex items-center gap-x-2 rounded-sm px-2 py-1 text-11 hover:bg-layer-1">
+                      <div className="flex items-center gap-x-2 rounded-sm px-2 py-1 text-11 hover:bg-layer-1-hover">
                         <div className="grid flex-shrink-0 place-items-center">
                           <Icon className="h-3.5 w-3.5 text-secondary" width={14} height={14} />
                         </div>

diff --git a/apps/admin/app/(all)/(dashboard)/sidebar-menu.tsx b/apps/admin/app/(all)/(dashboard)/sidebar-menu.tsx
@@ -73,7 +73,7 @@ export const AdminSidebarMenu = observer(function AdminSidebarMenu() {
                     `group flex w-full items-center gap-3 rounded-md px-3 py-2 outline-none transition-colors`,
                     isActive
                       ? "bg-accent-primary/10 text-accent-primary"
-                      : "text-secondary hover:bg-layer-1 focus:bg-layer-1",
+                      : "text-secondary hover:bg-layer-1-hover focus:bg-layer-1-hover",
                     isSidebarCollapsed ? "justify-center" : "w-[260px]"
                   )}
                 >

diff --git a/apps/admin/app/(all)/(dashboard)/workspace/create/form.tsx b/apps/admin/app/(all)/(dashboard)/workspace/create/form.tsx
@@ -195,13 +195,14 @@ export function WorkspaceCreateForm() {
       <div className="flex max-w-4xl items-center py-1 gap-4">
         <Button
           variant="primary"
+          size="lg"
           onClick={handleSubmit(handleCreateWorkspace)}
           disabled={!isValid}
           loading={isSubmitting}
         >
           {isSubmitting ? "Creating workspace" : "Create workspace"}
         </Button>
-        <Link className={getButtonStyling("secondary", "base")} href="/workspace">
+        <Link className={getButtonStyling("secondary", "lg")} href="/workspace">
           Go back
         </Link>
       </div>

diff --git a/apps/admin/app/(all)/(dashboard)/workspace/page.tsx b/apps/admin/app/(all)/(dashboard)/workspace/page.tsx
@@ -126,7 +126,7 @@ const WorkspaceManagementPage = observer(function WorkspaceManagementPage(_props
                   </div>
                 </div>
                 <div className="flex items-center gap-2">
-                  <Link href="/workspace/create" className={getButtonStyling("primary", "base")}>
+                  <Link href="/workspace/create" className={getButtonStyling("primary", "lg")}>
                     Create workspace
                   </Link>
                 </div>
@@ -140,6 +140,7 @@ const WorkspaceManagementPage = observer(function WorkspaceManagementPage(_props
                 <div className="flex justify-center">
                   <Button
                     variant="link"
+                    size="lg"
                     onClick={() => fetchNextWorkspaces()}
                     disabled={workspaceLoader === "pagination"}
                   >

diff --git a/apps/admin/app/(all)/(home)/layout.tsx b/apps/admin/app/(all)/(home)/layout.tsx
@@ -16,7 +16,7 @@ function RootLayout() {
   }, [replace, isUserLoggedIn]);
 
   return (
-    <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">
+    <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 bg-surface-1">
       <Outlet />
     </div>
   );

diff --git a/apps/admin/app/root.tsx b/apps/admin/app/root.tsx
@@ -56,7 +56,11 @@ export const meta: Route.MetaFunction = () => [
 ];
 
 export default function Root() {
-  return <Outlet />;
+  return (
+    <div className="bg-canvas min-h-screen">
+      <Outlet />
+    </div>
+  );
 }
 
 export function HydrateFallback() {

diff --git a/apps/admin/ce/components/authentication/authentication-modes.tsx b/apps/admin/ce/components/authentication/authentication-modes.tsx
@@ -112,7 +112,7 @@ export const AuthenticationModes = observer(function AuthenticationModes(props:
   const { resolvedTheme } = useTheme();
 
   return (
-    <>
+    <div className="flex flex-col gap-3">
       {getAuthenticationModes({ disabled, updateConfig, resolvedTheme }).map((method) => (
         <AuthenticationMethodCard
           key={method.key}
@@ -124,6 +124,6 @@ export const AuthenticationModes = observer(function AuthenticationModes(props:
           unavailable={method.unavailable}
         />
       ))}
-    </>
+    </div>
   );
 });
diff --git a/apps/admin/core/components/common/confirm-discard-modal.tsx b/apps/admin/core/components/common/confirm-discard-modal.tsx
@@ -55,7 +55,7 @@ export function ConfirmDiscardModal(props: Props) {
                   </div>
                 </div>
                 <div className="flex justify-end items-center p-4 sm:px-6 gap-2">
-                  <Button variant="secondary" onClick={handleClose}>
+                  <Button variant="secondary" size="lg" onClick={handleClose}>
                     Keep editing
                   </Button>
                   <Link href={onDiscardHref} className={getButtonStyling("primary", "base")}>

diff --git a/apps/admin/core/components/common/copy-field.tsx b/apps/admin/core/components/common/copy-field.tsx
@@ -25,6 +25,7 @@ export function CopyField(props: Props) {
       <h4 className="text-13 text-secondary">{label}</h4>
       <Button
         variant="secondary"
+        size="lg"
         className="flex items-center justify-between py-2"
         onClick={() => {
           navigator.clipboard.writeText(url);

diff --git a/apps/admin/core/components/common/empty-state.tsx b/apps/admin/core/components/common/empty-state.tsx
@@ -28,6 +28,7 @@ export function EmptyState({ title, description, image, primaryButton, secondary
               prependIcon={primaryButton.icon}
               onClick={primaryButton.onClick}
               disabled={disabled}
+              size="lg"
             >
               {primaryButton.text}
             </Button>

diff --git a/apps/admin/core/components/new-user-popup.tsx b/apps/admin/core/components/new-user-popup.tsx
@@ -27,10 +27,10 @@ export const NewUserPopup = observer(function NewUserPopup() {
             workspace.
           </div>
           <div className="flex items-center gap-4 pt-2">
-            <Link href="/workspace/create" className={getButtonStyling("primary", "base")}>
+            <Link href="/workspace/create" className={getButtonStyling("primary", "lg")}>
               Create workspace
             </Link>
-            <Button variant="secondary" onClick={toggleNewUserPopup}>
+            <Button variant="secondary" size="lg" onClick={toggleNewUserPopup}>
               Close
             </Button>
           </div>

diff --git a/apps/admin/core/components/workspace/list-item.tsx b/apps/admin/core/components/workspace/list-item.tsx
@@ -23,7 +23,7 @@ export const WorkspaceListItem = observer(function WorkspaceListItem({ workspace
       key={workspaceId}
       href={`${WEB_BASE_URL}/${encodeURIComponent(workspace.slug)}`}
       target="_blank"
-      className="group flex items-center justify-between p-4 gap-2.5 truncate border border-subtle/70 hover:border-subtle hover:bg-surface-2 rounded-md"
+      className="group flex items-center justify-between p-4 gap-2.5 truncate border border-subtle/70 hover:border-subtle bg-layer-1 hover:bg-layer-1-hover rounded-md"
       rel="noreferrer"
     >
       <div className="flex items-start gap-4">