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) => {
-  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]);
 

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

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