fix: tour sidebar icons, auth pages scroll (#1555)

* fix: tour sidebar icons, menu button word wrap * chore: change theme on sign out * fix: auth pages scroll y-padding
2024-06-14 14:31:34 +00:00 · 2023-07-18 19:02:33 +05:30 · 2023-07-18 19:02:33 +05:30 · 5ae963c451
commit 5ae963c451
parent 07c097c9ad
11 changed files with 34 additions and 52 deletions
--- a/apps/app/components/account/email-code-form.tsx
+++ b/apps/app/components/account/email-code-form.tsx
@ -120,7 +120,7 @@ export const EmailCodeForm = ({ handleSignIn }: any) => {
          Please check your inbox at <span className="font-medium">{watch("email")}</span>
        </p>
      )}
-      <form className="space-y-4 mt-10 w-full sm:w-[360px] mx-auto">
+      <form className="space-y-4 mt-10">
        <div className="space-y-1">
          <Input
            id="email"
--- a/apps/app/components/account/google-login.tsx
+++ b/apps/app/components/account/google-login.tsx
@ -1,5 +1,5 @@
 import { FC, CSSProperties, useEffect, useRef, useCallback, useState } from "react";
-// next
+
 import Script from "next/script";

 export interface IGoogleLoginButton {
@ -8,18 +8,18 @@ export interface IGoogleLoginButton {
  styles?: CSSProperties;
 }

-export const GoogleLoginButton: FC<IGoogleLoginButton> = (props) => {
-  const { handleSignIn } = props;
-
+export const GoogleLoginButton: FC<IGoogleLoginButton> = ({ handleSignIn }) => {
  const googleSignInButton = useRef<HTMLDivElement>(null);
  const [gsiScriptLoaded, setGsiScriptLoaded] = useState(false);

  const loadScript = useCallback(() => {
    if (!googleSignInButton.current || gsiScriptLoaded) return;
+
    window?.google?.accounts.id.initialize({
      client_id: process.env.NEXT_PUBLIC_GOOGLE_CLIENTID || "",
      callback: handleSignIn,
    });
+
    window?.google?.accounts.id.renderButton(
      googleSignInButton.current,
      {
@ -27,12 +27,13 @@ export const GoogleLoginButton: FC<IGoogleLoginButton> = (props) => {
        theme: "outline",
        size: "large",
        logo_alignment: "center",
-        height: "46",
        width: "360",
-        text: "continue_with",
+        text: "signin_with",
      } as GsiButtonConfiguration // customization attributes
    );
+
    window?.google?.accounts.id.prompt(); // also display the One Tap dialog
+
    setGsiScriptLoaded(true);
  }, [handleSignIn, gsiScriptLoaded]);

--- a/apps/app/components/issues/modal.tsx
+++ b/apps/app/components/issues/modal.tsx
@ -262,7 +262,7 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = ({

  const updateIssue = async (payload: Partial<IIssue>) => {
    await issuesService
-      .updateIssue(workspaceSlug as string, activeProject ?? "", data?.id ?? "", payload, user)
+      .patchIssue(workspaceSlug as string, activeProject ?? "", data?.id ?? "", payload, user)
      .then((res) => {
        if (isUpdatingSingleIssue) {
          mutate<IIssue>(PROJECT_ISSUES_DETAILS, (prevData) => ({ ...prevData, ...res }), false);
--- a/apps/app/components/onboarding/tour/sidebar.tsx
+++ b/apps/app/components/onboarding/tour/sidebar.tsx
@ -1,32 +1,31 @@
-// icons
-import { ContrastIcon, LayerDiagonalIcon, PeopleGroupIcon, ViewListIcon } from "components/icons";
-import { DocumentTextIcon } from "@heroicons/react/24/outline";
+// ui
+import { Icon } from "components/ui";
 // types
 import { TTourSteps } from "./root";

 const sidebarOptions: {
  key: TTourSteps;
-  icon: any;
+  icon: string;
 }[] = [
  {
    key: "issues",
-    icon: LayerDiagonalIcon,
+    icon: "stack",
  },
  {
    key: "cycles",
-    icon: ContrastIcon,
+    icon: "contrast",
  },
  {
    key: "modules",
-    icon: PeopleGroupIcon,
+    icon: "dataset",
  },
  {
    key: "views",
-    icon: ViewListIcon,
+    icon: "photo_filter",
  },
  {
    key: "pages",
-    icon: DocumentTextIcon,
+    icon: "article",
  },
 ];

@ -53,13 +52,11 @@ export const TourSidebar: React.FC<Props> = ({ step, setStep }) => (
          }`}
          onClick={() => setStep(option.key)}
        >
-          <option.icon
+          <Icon
+            iconName={option.icon}
            className={`h-5 w-5 flex-shrink-0 ${
              step === option.key ? "text-custom-primary-100" : "text-custom-text-200"
            }`}
-            color={`${
-              step === option.key ? "rgb(var(--color-primary-100))" : "rgb(var(--color-text-200))"
-            }`}
            aria-hidden="true"
          />
          {option.key}
--- a/apps/app/components/ui/dropdowns/custom-menu.tsx
+++ b/apps/app/components/ui/dropdowns/custom-menu.tsx
@ -56,7 +56,7 @@ const CustomMenu = ({
            ) : (
              <Menu.Button
                type="button"
-                className={`flex items-center justify-between gap-1 rounded-md px-2.5 py-1 text-xs duration-300 ${
+                className={`flex items-center justify-between gap-1 rounded-md px-2.5 py-1 text-xs whitespace-nowrap duration-300 ${
                  open ? "bg-custom-background-90 text-custom-text-100" : "text-custom-text-200"
                } ${
                  noBorder ? "" : "border border-custom-border-100 shadow-sm focus:outline-none"
--- a/apps/app/components/workspace/sidebar-dropdown.tsx
+++ b/apps/app/components/workspace/sidebar-dropdown.tsx
@ -3,11 +3,13 @@ import { Fragment } from "react";
 import { useRouter } from "next/router";
 import Link from "next/link";

+// next-themes
+import { useTheme } from "next-themes";
 // headless ui
 import { Menu, Transition } from "@headlessui/react";
 // hooks
 import useUser from "hooks/use-user";
-import useTheme from "hooks/use-theme";
+import useThemeHook from "hooks/use-theme";
 import useWorkspaces from "hooks/use-workspaces";
 import useToast from "hooks/use-toast";
 // services
@ -43,12 +45,13 @@ export const WorkspaceSidebarDropdown = () => {
  const { workspaceSlug } = router.query;
  // fetching user details
  const { user, mutateUser } = useUser();
-  // fetching theme context
-  const { collapsed: sidebarCollapse } = useTheme();
+
+  const { collapsed: sidebarCollapse } = useThemeHook();
+
+  const { setTheme } = useTheme();

  const { setToastAlert } = useToast();

-  // fetching workspaces
  const { activeWorkspace, workspaces } = useWorkspaces();

  const handleWorkspaceNavigation = (workspace: IWorkspace) => {
@ -75,6 +78,7 @@ export const WorkspaceSidebarDropdown = () => {
      .then(() => {
        mutateUser(undefined);
        router.push("/");
+        setTheme("dark");
      })
      .catch(() =>
        setToastAlert({
--- a/apps/app/pages/_app.tsx
+++ b/apps/app/pages/_app.tsx
@ -45,7 +45,7 @@ Router.events.on("routeChangeComplete", NProgress.done);
 function MyApp({ Component, pageProps }: AppProps) {
  return (
    // <UserProvider>
-    <ThemeProvider themes={THEMES} defaultTheme="light">
+    <ThemeProvider themes={THEMES} defaultTheme="dark">
      <ToastContextProvider>
        <ThemeContextProvider>
          <CrispWithNoSSR />
--- a/apps/app/pages/index.tsx
+++ b/apps/app/pages/index.tsx
@ -138,18 +138,18 @@ const HomePage: NextPage = () => {
              </div>
            </div>
          </>
-          <div className="grid place-items-center h-full overflow-y-auto px-7">
+          <div className="grid place-items-center h-full overflow-y-auto py-5 px-7">
            <div>
              {parseInt(process.env.NEXT_PUBLIC_ENABLE_OAUTH || "0") ? (
                <>
                  <h1 className="text-center text-2xl sm:text-2.5xl font-semibold text-custom-text-100">
                    Sign in to Plane
                  </h1>
-                  <div className="divide-y divide-custom-border-200">
+                  <div className="flex flex-col divide-y divide-custom-border-200 sm:w-[360px] mx-auto">
                    <div className="pb-7">
                      <EmailCodeForm handleSignIn={handleEmailCodeSignIn} />
                    </div>
-                    <div className="space-y-4 pt-7 w-full sm:w-[360px] mx-auto">
+                    <div className="flex flex-col items-center justify-center gap-4 pt-7 overflow-hidden">
                      <GoogleLoginButton handleSignIn={handleGoogleSignIn} />
                      <GithubLoginButton handleSignIn={handleGitHubSignIn} />
                    </div>
--- a/apps/app/pages/reset-password.tsx
+++ b/apps/app/pages/reset-password.tsx
@ -100,7 +100,7 @@ const ResetPasswordPage: NextPage = () => {
          </div>
        </div>
      </>
-      <div className="grid place-items-center h-full w-full overflow-y-auto px-7">
+      <div className="grid place-items-center h-full w-full overflow-y-auto py-5 px-7">
        <div className="w-full">
          <h1 className="text-center text-2xl sm:text-2.5xl font-semibold text-custom-text-100">
            Reset your password
--- a/apps/app/pages/sign-up.tsx
+++ b/apps/app/pages/sign-up.tsx
@ -86,7 +86,7 @@ const SignUp: NextPage = () => {
          </div>
        </div>
      </>
-      <div className="grid place-items-center h-full w-full overflow-y-auto px-7">
+      <div className="grid place-items-center h-full w-full overflow-y-auto py-5 px-7">
        <div>
          <EmailPasswordForm onSubmit={handleSignUp} />
        </div>
--- a/apps/app/services/issues.service.ts
+++ b/apps/app/services/issues.service.ts
@ -346,26 +346,6 @@ class ProjectIssuesServices extends APIService {
      });
  }

-  async updateIssue(
-    workspaceSlug: string,
-    projectId: string,
-    issueId: string,
-    data: any,
-    user: ICurrentUserResponse | undefined
-  ): Promise<any> {
-    return this.put(
-      `/api/workspaces/${workspaceSlug}/projects/${projectId}/issues/${issueId}/`,
-      data
-    )
-      .then((response) => {
-        if (trackEvent) trackEventServices.trackIssueEvent(response.data, "ISSUE_UPDATE", user);
-        return response?.data;
-      })
-      .catch((error) => {
-        throw error?.response?.data;
-      });
-  }
-
  async patchIssue(
    workspaceSlug: string,
    projectId: string,