From 846991332a284813b5d18e2bda8ef26746b0bccb Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Tue, 21 May 2024 16:29:30 +0530
Subject: [PATCH] [WEB-1385] style: oauth button enhancement (#4539)

* style: oauth button enhancement

* style: space app applied issue filter section styling updated

* style: space app sidebar icon consistency

* chore: issue title input improvement

* fix: create workspace and invite workspace theme issue

* fix: member invite modal improvement
---
 .../filters/applied-filters/filters-list.tsx  |  2 +-
 .../issues/peek-overview/header.tsx           |  6 +-
 .../issues/peek-overview/issue-reaction.tsx   |  1 -
 .../peek-overview/issue-vote-reactions.tsx    |  4 +-
 .../account/oauth/github-button.tsx           |  4 +-
 .../account/oauth/google-button.tsx           |  4 +-
 web/components/issues/title-input.tsx         | 85 +++++++++++--------
 .../project/send-project-invitation-modal.tsx | 10 +--
 .../send-workspace-invitation-modal.tsx       | 73 +++++++++-------
 web/pages/create-workspace.tsx                |  4 +-
 web/pages/invitations/index.tsx               |  4 +-
 11 files changed, 108 insertions(+), 89 deletions(-)

diff --git a/space/components/issues/filters/applied-filters/filters-list.tsx b/space/components/issues/filters/applied-filters/filters-list.tsx
index cec23d301..83d651f5d 100644
--- a/space/components/issues/filters/applied-filters/filters-list.tsx
+++ b/space/components/issues/filters/applied-filters/filters-list.tsx
@@ -23,7 +23,7 @@ export const AppliedFiltersList: React.FC<Props> = observer((props) => {
   const { appliedFilters = {}, handleRemoveAllFilters, handleRemoveFilter, states } = props;
 
   return (
-    <div className="flex flex-wrap items-stretch gap-2 bg-custom-background-100">
+    <div className="flex flex-wrap items-stretch gap-2">
       {Object.entries(appliedFilters).map(([key, value]) => {
         const filterKey = key as keyof TFilters;
         const filterValue = value as TFilters[keyof TFilters];
diff --git a/space/components/issues/peek-overview/header.tsx b/space/components/issues/peek-overview/header.tsx
index 3b8e2960f..4200458a8 100644
--- a/space/components/issues/peek-overview/header.tsx
+++ b/space/components/issues/peek-overview/header.tsx
@@ -62,7 +62,7 @@ export const PeekOverviewHeader: React.FC<Props> = observer((props) => {
         <div className="flex items-center gap-4">
           {peekMode === "side" && (
             <button type="button" onClick={handleClose}>
-              <MoveRight className="h-3.5 w-3.5" strokeWidth={2} />
+              <MoveRight className="h-4 w-4" strokeWidth={2} />
             </button>
           )}
           <Listbox
@@ -72,7 +72,7 @@ export const PeekOverviewHeader: React.FC<Props> = observer((props) => {
             className="relative flex-shrink-0 text-left"
           >
             <Listbox.Button className={`grid place-items-center ${peekMode === "full" ? "rotate-45" : ""}`}>
-              <Icon iconName={peekModes.find((m) => m.key === peekMode)?.icon ?? ""} />
+              <Icon iconName={peekModes.find((m) => m.key === peekMode)?.icon ?? ""} className="text-[1rem]" />
             </Listbox.Button>
 
             <Transition
@@ -120,7 +120,7 @@ export const PeekOverviewHeader: React.FC<Props> = observer((props) => {
         {(peekMode === "side" || peekMode === "modal") && (
           <div className="flex flex-shrink-0 items-center gap-2">
             <button type="button" onClick={handleCopyLink} className="-rotate-45 focus:outline-none" tabIndex={1}>
-              <Icon iconName="link" />
+              <Icon iconName="link" className="text-[1rem]" />
             </button>
           </div>
         )}
diff --git a/space/components/issues/peek-overview/issue-reaction.tsx b/space/components/issues/peek-overview/issue-reaction.tsx
index 28090d36a..991125312 100644
--- a/space/components/issues/peek-overview/issue-reaction.tsx
+++ b/space/components/issues/peek-overview/issue-reaction.tsx
@@ -19,7 +19,6 @@ export const IssueReactions: React.FC = () => {
           <div className="flex items-center gap-2">
             <IssueVotes workspaceSlug={workspaceSlug} projectId={projectId} />
           </div>
-          <div className="h-8 w-0.5 bg-custom-background-200" />
         </>
       )}
       {canReact && (
diff --git a/space/components/issues/peek-overview/issue-vote-reactions.tsx b/space/components/issues/peek-overview/issue-vote-reactions.tsx
index 073938daa..388d59072 100644
--- a/space/components/issues/peek-overview/issue-vote-reactions.tsx
+++ b/space/components/issues/peek-overview/issue-vote-reactions.tsx
@@ -97,7 +97,7 @@ export const IssueVotes: React.FC<TIssueVotes> = observer((props) => {
             if (user) handleVote(e, 1);
             else router.push(`/?next_path=${pathName}?${queryParam}`);
           }}
-          className={`flex items-center justify-center gap-x-1 overflow-hidden rounded border px-2 focus:outline-none ${
+          className={`flex items-center justify-center gap-x-1 overflow-hidden rounded border px-2 h-7 focus:outline-none ${
             isUpVotedByUser ? "border-custom-primary-200 text-custom-primary-200" : "border-custom-border-300"
           }`}
         >
@@ -131,7 +131,7 @@ export const IssueVotes: React.FC<TIssueVotes> = observer((props) => {
             if (user) handleVote(e, -1);
             else router.push(`/?next_path=${pathName}?${queryParam}`);
           }}
-          className={`flex items-center justify-center gap-x-1 overflow-hidden rounded border px-2 focus:outline-none ${
+          className={`flex items-center justify-center gap-x-1 h-7 overflow-hidden rounded border px-2 focus:outline-none ${
             isDownVotedByUser ? "border-red-600 text-red-600" : "border-custom-border-300"
           }`}
         >
diff --git a/web/components/account/oauth/github-button.tsx b/web/components/account/oauth/github-button.tsx
index be9b59f24..6d274c125 100644
--- a/web/components/account/oauth/github-button.tsx
+++ b/web/components/account/oauth/github-button.tsx
@@ -25,8 +25,8 @@ export const GithubOAuthButton: FC<GithubOAuthButtonProps> = (props) => {
 
   return (
     <button
-      className={`flex h-[42px] w-full items-center justify-center gap-2 rounded border px-2 text-sm font-medium text-custom-text-100 duration-300 hover:bg-onboarding-background-300 ${
-        resolvedTheme === "dark" ? "border-[#43484F] bg-[#2F3135]" : "border-[#D9E4FF]"
+      className={`flex h-[42px] w-full items-center justify-center gap-2 rounded border px-2 text-sm font-medium text-custom-text-100 duration-300 bg-onboarding-background-200 hover:bg-onboarding-background-300 ${
+        resolvedTheme === "dark" ? "border-[#43484F]" : "border-[#D9E4FF]"
       }`}
       onClick={handleSignIn}
     >
diff --git a/web/components/account/oauth/google-button.tsx b/web/components/account/oauth/google-button.tsx
index d196ff97a..279c5ea42 100644
--- a/web/components/account/oauth/google-button.tsx
+++ b/web/components/account/oauth/google-button.tsx
@@ -24,8 +24,8 @@ export const GoogleOAuthButton: FC<GoogleOAuthButtonProps> = (props) => {
 
   return (
     <button
-      className={`flex h-[42px] w-full items-center justify-center gap-2 rounded border px-2 text-sm font-medium text-custom-text-100 duration-300 hover:bg-onboarding-background-300 ${
-        resolvedTheme === "dark" ? "border-[#43484F] bg-[#2F3135]" : "border-[#D9E4FF]"
+      className={`flex h-[42px] w-full items-center justify-center gap-2 rounded border px-2 text-sm font-medium text-custom-text-100 duration-300 bg-onboarding-background-200 hover:bg-onboarding-background-300 ${
+        resolvedTheme === "dark" ? "border-[#43484F]" : "border-[#D9E4FF]"
       }`}
       onClick={handleSignIn}
     >
diff --git a/web/components/issues/title-input.tsx b/web/components/issues/title-input.tsx
index db9a4199a..6499f5330 100644
--- a/web/components/issues/title-input.tsx
+++ b/web/components/issues/title-input.tsx
@@ -47,13 +47,18 @@ export const IssueTitleInput: FC<IssueTitleInputProps> = observer((props) => {
   useEffect(() => {
     const textarea = document.querySelector("#title-input");
     if (debouncedValue && debouncedValue !== value) {
-      issueOperations.update(workspaceSlug, projectId, issueId, { name: debouncedValue }).finally(() => {
+      if (debouncedValue.trim().length > 0) {
+        issueOperations.update(workspaceSlug, projectId, issueId, { name: debouncedValue }).finally(() => {
+          setIsSubmitting("saved");
+          if (textarea && !textarea.matches(":focus")) {
+            const trimmedTitle = debouncedValue.trim();
+            if (trimmedTitle !== title) setTitle(trimmedTitle);
+          }
+        });
+      } else {
+        setTitle(value || "");
         setIsSubmitting("saved");
-        if (textarea && !textarea.matches(":focus")) {
-          const trimmedTitle = debouncedValue.trim();
-          if (trimmedTitle !== title) setTitle(trimmedTitle);
-        }
-      });
+      }
     }
     // DO NOT Add more dependencies here. It will cause multiple requests to be sent.
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -63,8 +68,13 @@ export const IssueTitleInput: FC<IssueTitleInputProps> = observer((props) => {
     const handleBlur = () => {
       const trimmedTitle = title.trim();
       if (trimmedTitle !== title && isSubmitting !== "submitting") {
-        setTitle(trimmedTitle);
-        setIsSubmitting("submitting");
+        if (trimmedTitle.length > 0) {
+          setTitle(trimmedTitle);
+          setIsSubmitting("submitting");
+        } else {
+          setTitle(value || "");
+          setIsSubmitting("saved");
+        }
       }
     };
 
@@ -91,35 +101,38 @@ export const IssueTitleInput: FC<IssueTitleInputProps> = observer((props) => {
   if (disabled) return <div className="text-2xl font-medium">{title}</div>;
 
   return (
-    <div className={cn("relative", containerClassName)}>
-      <TextArea
-        id="title-input"
-        className={cn(
-          "block w-full resize-none overflow-hidden rounded border-none bg-transparent px-3 py-0 text-2xl font-medium outline-none ring-0",
-          {
-            "ring-red-400": title.length === 0,
-          },
-          className
-        )}
-        disabled={disabled}
-        value={title}
-        onChange={handleTitleChange}
-        maxLength={255}
-        placeholder="Issue title"
-        onFocus={() => setIsLengthVisible(true)}
-        onBlur={() => setIsLengthVisible(false)}
-      />
-      <div
-        className={cn(
-          "pointer-events-none absolute bottom-1 right-1 z-[2] rounded bg-custom-background-100 p-0.5 text-xs text-custom-text-200 opacity-0 transition-opacity",
-          {
-            "opacity-100": isLengthVisible,
-          }
-        )}
-      >
-        <span className={`${title.length === 0 || title.length > 255 ? "text-red-500" : ""}`}>{title.length}</span>
-        /255
+    <div className="flex flex-col gap-1.5">
+      <div className={cn("relative", containerClassName)}>
+        <TextArea
+          id="title-input"
+          className={cn(
+            "block w-full resize-none overflow-hidden rounded border-none bg-transparent px-3 py-0 text-2xl font-medium outline-none ring-0",
+            {
+              "ring-1 ring-red-400 mx-3": title.length === 0,
+            },
+            className
+          )}
+          disabled={disabled}
+          value={title}
+          onChange={handleTitleChange}
+          maxLength={255}
+          placeholder="Issue title"
+          onFocus={() => setIsLengthVisible(true)}
+          onBlur={() => setIsLengthVisible(false)}
+        />
+        <div
+          className={cn(
+            "pointer-events-none absolute bottom-1 right-1 z-[2] rounded bg-custom-background-100 p-0.5 text-xs text-custom-text-200 opacity-0 transition-opacity",
+            {
+              "opacity-100": isLengthVisible,
+            }
+          )}
+        >
+          <span className={`${title.length === 0 || title.length > 255 ? "text-red-500" : ""}`}>{title.length}</span>
+          /255
+        </div>
       </div>
+      {title.length === 0 && <span className="text-sm text-red-500">Title is required</span>}
     </div>
   );
 });
diff --git a/web/components/project/send-project-invitation-modal.tsx b/web/components/project/send-project-invitation-modal.tsx
index bfeba2b0c..9faa526ca 100644
--- a/web/components/project/send-project-invitation-modal.tsx
+++ b/web/components/project/send-project-invitation-modal.tsx
@@ -206,9 +206,9 @@ export const SendProjectInvitationModal: React.FC<Props> = observer((props) => {
                       {fields.map((field, index) => (
                         <div
                           key={field.id}
-                          className="group mb-1 grid grid-cols-6  sm:grid-cols-12 items-start gap-x-4 text-sm"
+                          className="group mb-1 flex items-center justify-between gap-x-4 text-sm w-full"
                         >
-                          <div className="col-span-4 sm:col-span-10 flex flex-col gap-1">
+                          <div className="flex flex-col gap-1 flex-grow w-full">
                             <Controller
                               control={control}
                               name={`members.${index}.member_id`}
@@ -250,8 +250,8 @@ export const SendProjectInvitationModal: React.FC<Props> = observer((props) => {
                             )}
                           </div>
 
-                          <div className="col-span-2 sm:col-span-2 flex items-center justify-between gap-2">
-                            <div className="flex w-full flex-col gap-1">
+                          <div className="flex items-center justify-between gap-2 flex-shrink-0 ">
+                            <div className="flex flex-col gap-1">
                               <Controller
                                 name={`members.${index}.role`}
                                 control={control}
@@ -260,7 +260,7 @@ export const SendProjectInvitationModal: React.FC<Props> = observer((props) => {
                                   <CustomSelect
                                     {...field}
                                     customButton={
-                                      <div className="flex w-full items-center justify-between gap-1 rounded-md border border-custom-border-200 px-3 py-2.5 text-left text-sm text-custom-text-200 shadow-sm duration-300 hover:bg-custom-background-80 hover:text-custom-text-100 focus:outline-none">
+                                      <div className="flex w-24 items-center justify-between gap-1 rounded-md border border-custom-border-200 px-3 py-2.5 text-left text-sm text-custom-text-200 shadow-sm duration-300 hover:bg-custom-background-80 hover:text-custom-text-100 focus:outline-none">
                                         <span className="capitalize">
                                           {field.value ? ROLE[field.value] : "Select role"}
                                         </span>
diff --git a/web/components/workspace/send-workspace-invitation-modal.tsx b/web/components/workspace/send-workspace-invitation-modal.tsx
index 8d8ceada9..9518452e1 100644
--- a/web/components/workspace/send-workspace-invitation-modal.tsx
+++ b/web/components/workspace/send-workspace-invitation-modal.tsx
@@ -121,7 +121,10 @@ export const SendWorkspaceInvitationModal: React.FC<Props> = observer((props) =>
 
                     <div className="mb-3 space-y-4">
                       {fields.map((field, index) => (
-                        <div key={field.id} className="group relative flex items-start gap-4">
+                        <div
+                          key={field.id}
+                          className="relative group mb-1 flex items-start justify-between gap-x-4 text-sm w-full"
+                        >
                           <div className="w-full">
                             <Controller
                               control={control}
@@ -155,39 +158,43 @@ export const SendWorkspaceInvitationModal: React.FC<Props> = observer((props) =>
                               )}
                             />
                           </div>
-                          <div className="flex items-center gap-2">
-                            <Controller
-                              control={control}
-                              name={`emails.${index}.role`}
-                              rules={{ required: true }}
-                              render={({ field: { value, onChange } }) => (
-                                <CustomSelect
-                                  value={value}
-                                  label={<span className="text-xs sm:text-sm">{ROLE[value]}</span>}
-                                  onChange={onChange}
-                                  optionsClassName="w-full"
-                                  className="flex-grow"
-                                  input
-                                >
-                                  {Object.entries(ROLE).map(([key, value]) => {
-                                    if (currentWorkspaceRole && currentWorkspaceRole >= parseInt(key))
-                                      return (
-                                        <CustomSelect.Option key={key} value={parseInt(key)}>
-                                          {value}
-                                        </CustomSelect.Option>
-                                      );
-                                  })}
-                                </CustomSelect>
-                              )}
-                            />
+                          <div className="flex items-center justify-between gap-2 flex-shrink-0 ">
+                            <div className="flex flex-col gap-1">
+                              <Controller
+                                control={control}
+                                name={`emails.${index}.role`}
+                                rules={{ required: true }}
+                                render={({ field: { value, onChange } }) => (
+                                  <CustomSelect
+                                    value={value}
+                                    label={<span className="text-xs sm:text-sm">{ROLE[value]}</span>}
+                                    onChange={onChange}
+                                    optionsClassName="w-full"
+                                    className="flex-grow w-24"
+                                    input
+                                  >
+                                    {Object.entries(ROLE).map(([key, value]) => {
+                                      if (currentWorkspaceRole && currentWorkspaceRole >= parseInt(key))
+                                        return (
+                                          <CustomSelect.Option key={key} value={parseInt(key)}>
+                                            {value}
+                                          </CustomSelect.Option>
+                                        );
+                                    })}
+                                  </CustomSelect>
+                                )}
+                              />
+                            </div>
                             {fields.length > 1 && (
-                              <button
-                                type="button"
-                                className="grid place-items-center self-center rounded flex-shrink-0"
-                                onClick={() => remove(index)}
-                              >
-                                <X className="h-3.5 w-3.5 text-custom-text-200" />
-                              </button>
+                              <div className="flex-item flex w-6">
+                                <button
+                                  type="button"
+                                  className="place-items-center self-center rounded"
+                                  onClick={() => remove(index)}
+                                >
+                                  <X className="h-4 w-4 text-custom-text-200" />
+                                </button>
+                              </div>
                             )}
                           </div>
                         </div>
diff --git a/web/pages/create-workspace.tsx b/web/pages/create-workspace.tsx
index 9365716ba..08fcea958 100644
--- a/web/pages/create-workspace.tsx
+++ b/web/pages/create-workspace.tsx
@@ -33,7 +33,7 @@ const CreateWorkspacePage: NextPageWithLayout = observer(() => {
     organization_size: "",
   });
   // hooks
-  const { theme } = useTheme();
+  const { resolvedTheme } = useTheme();
 
   const onSubmit = async (workspace: IWorkspace) => {
     await updateUserProfile({ last_workspace_id: workspace.id }).then(() => router.push(`/${workspace.slug}`));
@@ -50,7 +50,7 @@ const CreateWorkspacePage: NextPageWithLayout = observer(() => {
             href="/"
           >
             <div className="h-[30px] w-[133px]">
-              {theme === "light" ? (
+              {resolvedTheme === "light" ? (
                 <Image src={BlackHorizontalLogo} alt="Plane black logo" />
               ) : (
                 <Image src={WhiteHorizontalLogo} alt="Plane white logo" />
diff --git a/web/pages/invitations/index.tsx b/web/pages/invitations/index.tsx
index 7e14d2d74..0fe64519d 100644
--- a/web/pages/invitations/index.tsx
+++ b/web/pages/invitations/index.tsx
@@ -49,7 +49,7 @@ const UserInvitationsPage: NextPageWithLayout = observer(() => {
 
   const { fetchWorkspaces } = useWorkspace();
   // next-themes
-  const { theme } = useTheme();
+  const { resolvedTheme } = useTheme();
 
   const { data: invitations } = useSWR("USER_WORKSPACE_INVITATIONS", () => workspaceService.userWorkspaceInvitations());
 
@@ -135,7 +135,7 @@ const UserInvitationsPage: NextPageWithLayout = observer(() => {
           <div className="absolute left-0 top-1/2 h-[0.5px] w-full -translate-y-1/2 border-b-[0.5px] border-custom-border-200 sm:left-1/2 sm:top-0 sm:h-screen sm:w-[0.5px] sm:-translate-x-1/2 sm:translate-y-0 sm:border-r-[0.5px] md:left-1/3" />
           <div className="absolute left-5 top-1/2 grid -translate-y-1/2 place-items-center bg-custom-background-100 px-3 sm:left-1/2 sm:top-12 sm:-translate-x-[15px] sm:translate-y-0 sm:px-0 sm:py-5 md:left-1/3">
             <div className="h-[30px] w-[133px]">
-              {theme === "light" ? (
+              {resolvedTheme === "light" ? (
                 <Image src={BlackHorizontalLogo} alt="Plane black logo" />
               ) : (
                 <Image src={WhiteHorizontalLogo} alt="Plane white logo" />