From e2ede25f577eb41216bf793acd90d23ad2864b6d Mon Sep 17 00:00:00 2001 From: Prateek Shourya Date: Tue, 30 Apr 2024 05:07:49 +0530 Subject: [PATCH 1/3] chore: onboarding UI updates and dark mode fixes. --- .../onboarding/create-or-join-workspaces.tsx | 23 +- web/components/onboarding/index.ts | 1 - web/components/onboarding/invite-members.tsx | 54 +-- .../onboarding/onboarding-sidebar.tsx | 291 ------------- web/components/onboarding/profile-setup.tsx | 24 +- .../switch-or-delete-account-dropdown.tsx | 4 +- web/pages/onboarding/index.tsx | 4 +- .../onboarding/create-join-workspace-dark.svg | 278 ++++++++++++ .../onboarding/create-join-workspace.png | Bin 28742 -> 0 bytes .../onboarding/create-join-workspace.svg | 331 +++++++++++++++ web/public/onboarding/invite-members-dark.svg | 224 ++++++++++ .../onboarding/invite-members-light.svg | 240 +++++++++++ web/public/onboarding/profile-setup-dark.svg | 381 +++++++++++++++++ web/public/onboarding/profile-setup-light.svg | 395 ++++++++++++++++++ web/public/onboarding/profile-setup.png | Bin 82370 -> 0 bytes web/public/onboarding/user-dark.svg | 14 - web/public/onboarding/user-light.svg | 14 - 17 files changed, 1890 insertions(+), 388 deletions(-) delete mode 100644 web/components/onboarding/onboarding-sidebar.tsx create mode 100644 web/public/onboarding/create-join-workspace-dark.svg delete mode 100644 web/public/onboarding/create-join-workspace.png create mode 100644 web/public/onboarding/create-join-workspace.svg create mode 100644 web/public/onboarding/invite-members-dark.svg create mode 100644 web/public/onboarding/invite-members-light.svg create mode 100644 web/public/onboarding/profile-setup-dark.svg create mode 100644 web/public/onboarding/profile-setup-light.svg delete mode 100644 web/public/onboarding/profile-setup.png delete mode 100644 web/public/onboarding/user-dark.svg delete mode 100644 web/public/onboarding/user-light.svg diff --git a/web/components/onboarding/create-or-join-workspaces.tsx b/web/components/onboarding/create-or-join-workspaces.tsx index b8b8257b0..ae8fcc450 100644 --- a/web/components/onboarding/create-or-join-workspaces.tsx +++ b/web/components/onboarding/create-or-join-workspaces.tsx @@ -2,7 +2,7 @@ import React, { useEffect, useState } from "react"; import { observer } from "mobx-react"; import Image from "next/image"; // icons -import { Sparkles } from "lucide-react"; +import { useTheme } from "next-themes"; // types import { IWorkspaceMemberInvitation, TOnboardingSteps } from "@plane/types"; // ui @@ -12,7 +12,8 @@ import { Invitations, OnboardingHeader, SwitchOrDeleteAccountDropdown, CreateWor // hooks import { useUser } from "@/hooks/store"; // assets -import createJoinWorkspace from "public/onboarding/create-join-workspace.png"; +import CreateJoinWorkspaceDark from "public/onboarding/create-join-workspace-dark.svg"; +import CreateJoinWorkspace from "public/onboarding/create-join-workspace.svg"; export enum ECreateOrJoinWorkspaceViews { WORKSPACE_CREATE = "WORKSPACE_CREATE", @@ -31,6 +32,8 @@ export const CreateOrJoinWorkspaces: React.FC = observer((props) => { const [currentView, setCurrentView] = useState(null); // store hooks const { data: user } = useUser(); + // hooks + const { resolvedTheme } = useTheme(); useEffect(() => { if (invitations.length > 0) { @@ -47,7 +50,7 @@ export const CreateOrJoinWorkspaces: React.FC = observer((props) => { return (
-
+
@@ -74,14 +77,14 @@ export const CreateOrJoinWorkspaces: React.FC = observer((props) => { )}
-
+
-
-
- - Workspace is the hub for all work happening in your company. -
- create-join-workspace +
+ Profile setup
diff --git a/web/components/onboarding/index.ts b/web/components/onboarding/index.ts index db79162be..8b94c8094 100644 --- a/web/components/onboarding/index.ts +++ b/web/components/onboarding/index.ts @@ -4,7 +4,6 @@ export * from "./create-or-join-workspaces"; export * from "./profile-setup"; export * from "./create-workspace"; export * from "./invitations"; -export * from "./onboarding-sidebar"; export * from "./step-indicator"; export * from "./switch-or-delete-account-dropdown"; export * from "./switch-delete-account-modal"; diff --git a/web/components/onboarding/invite-members.tsx b/web/components/onboarding/invite-members.tsx index 212b162f2..51a2becea 100644 --- a/web/components/onboarding/invite-members.tsx +++ b/web/components/onboarding/invite-members.tsx @@ -30,10 +30,8 @@ import useDynamicDropdownPosition from "@/hooks/use-dynamic-dropdown"; // services import { WorkspaceService } from "@/services/workspace.service"; // assets -import userDark from "public/onboarding/user-dark.svg"; -import userLight from "public/onboarding/user-light.svg"; -import user1 from "public/users/user-1.png"; -import user2 from "public/users/user-2.png"; +import InviteMembersDark from "public/onboarding/invite-members-dark.svg"; +import InviteMembersLight from "public/onboarding/invite-members-light.svg"; // components import { OnboardingHeader } from "./header"; import { SwitchOrDeleteAccountDropdown } from "./switch-or-delete-account-dropdown"; @@ -365,7 +363,7 @@ export const InviteMembers: React.FC = (props) => { return (
-
+
{/* Since this will always be the last step */} @@ -437,46 +435,14 @@ export const InviteMembers: React.FC = (props) => {
-
+
-