[WEB-4488] feat: brand revamp (#7544)

* chore: empty state asset and theme improvement (#7542)

* chore: empty state asset and theme improvement

* chore: upgrade modal improvement and code refactor

* feat: onboarding revamp and theme changes (#7541)

* refactor: consolidate password strength indicator into shared UI package

* chore: remove old password strength meter implementations

* chore: update package dependencies for password strength refactor

* chore: code refactor

* chore: brand logo added

* chore:  terms and conditions refactor

* chore: auth form refactor

* chore: oauth enhancements and refactor

* chore: plane new logos added

* chore: auth input form field added to ui package

* chore: password input component added

* chore: web auth refactor

* chore: update brand colors and remove onboarding-specific styles

* chore: clean up unused assets

* chore: profile menu text overflow

* chore: theme related changes

* chore: logo spinner updated

* chore: onboarding constant and types updated

* chore: theme changes and code refactor

* feat: onboarding flow revamp

* fix:  build error and code refactoring

* chore: code refactor

* fix: build error

* chore: consent option added to onboarding and code refactor

* fix: build fix

* chore: code refactor

* chore: auth screen revamp and code refactor

* chore: onboarding enhancements

* chore: code refactor

* chore: onboarding logic improvement

* chore: code refactor

* fix: onboarding pre release improvements

* chore: color token updated

* chore: color token updated

* chore: auth screen line height and size improvements

* chore: input height updated

* chore: n-progress theme updated

* chore: theme and logo enhancements

* chore: space auth and code refactor

* chore: update new brand empty states (#7543)

* [WEB-4585]chore: branding updates (#7540)

* chore: updated logo, og image, and loaders

* chore: updated branding colors

* chore: tour modal logo

* chore: updated logo spinner size

* chore: updated email templates logos and colors

* chore: code refactor

* fix: removed conditional hook render

* fix: space app loader

---------

Co-authored-by: Vamsi Krishna <46787868+vamsikrishnamathala@users.noreply.github.com>
Co-authored-by: vamsikrishnamathala <matalav55@gmail.com>

packages/ui/src/oauth/index.ts

@@ -0,0 +1 @@
+export * from "./oauth-options";

packages/ui/src/oauth/oauth-button.tsx

@@ -0,0 +1,32 @@
+import * as React from "react";
+import { cn } from "../../helpers";
+
+export interface OAuthButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  text: string;
+  icon: React.ReactNode;
+  compact?: boolean;
+}
+
+const OAuthButton = React.forwardRef<HTMLButtonElement, OAuthButtonProps>((props, ref) => {
+  const { text, icon, compact = false, className = "", ...rest } = props;
+
+  return (
+    <button
+      ref={ref}
+      className={cn(
+        "flex h-9 w-full items-center justify-center gap-2 rounded-md border border-custom-border-300 px-4 py-2.5 text-sm font-medium text-custom-text-100 duration-300 bg-onboarding-background-200 hover:bg-onboarding-background-300",
+        className
+      )}
+      {...rest}
+    >
+      <div className="flex flex-shrink-0 items-center justify-center">{icon}</div>
+      {!compact && (
+        <div className="flex flex-grow items-center justify-center transition-opacity duration-300">{text}</div>
+      )}
+    </button>
+  );
+});
+
+OAuthButton.displayName = "plane-ui-oauth-button";
+
+export { OAuthButton };

packages/ui/src/oauth/oauth-options.tsx

@@ -0,0 +1,57 @@
+import * as React from "react";
+import { cn } from "../../helpers";
+import { OAuthButton } from "./oauth-button";
+
+export type TOAuthOption = {
+  id: string;
+  text: string;
+  icon: React.ReactNode;
+  onClick: () => void;
+  enabled?: boolean;
+};
+
+type OAuthOptionsProps = {
+  options: TOAuthOption[];
+  compact?: boolean;
+
+  className?: string;
+  containerClassName?: string;
+};
+
+export const OAuthOptions = (props: OAuthOptionsProps) => {
+  const { options, compact = false, className = "", containerClassName = "" } = props;
+
+  // Filter enabled options
+  const enabledOptions = options.filter((option) => option.enabled !== false);
+
+  if (enabledOptions.length === 0) return null;
+
+  return (
+    <div className={cn("w-full", containerClassName)}>
+      <div
+        className={cn(
+          "flex gap-4 overflow-hidden transition-all duration-500 ease-in-out",
+          compact ? "flex-row" : "flex-col",
+          className
+        )}
+      >
+        {enabledOptions.map((option) => (
+          <OAuthButton
+            key={option.id}
+            text={option.text}
+            icon={option.icon}
+            onClick={option.onClick}
+            compact={compact}
+            className="transition-all duration-300 ease-in-out"
+          />
+        ))}
+      </div>
+
+      <div className="mt-4 flex items-center transition-all duration-300">
+        <hr className="w-full border-custom-border-300 transition-colors duration-300" />
+        <p className="mx-3 flex-shrink-0 text-center text-sm text-custom-text-400 transition-colors duration-300">or</p>
+        <hr className="w-full border-custom-border-300 transition-colors duration-300" />
+      </div>
+    </div>
+  );
+};