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

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"

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) => {
+export const GoogleLoginButton: FC<IGoogleLoginButton> = ({ handleSignIn }) => {
-  const { handleSignIn } = props;
-
   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]);
 

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);

apps/app/components/onboarding/tour/sidebar.tsx

@@ -1,32 +1,31 @@
-// icons
+// ui
-import { ContrastIcon, LayerDiagonalIcon, PeopleGroupIcon, ViewListIcon } from "components/icons";
+import { Icon } from "components/ui";
-import { DocumentTextIcon } from "@heroicons/react/24/outline";
 // 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}

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"

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({

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 />

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>

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

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>

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,