[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
2024-06-14 14:31:34 +00:00 · 2024-05-21 16:29:30 +05:30 · 2024-05-21 16:29:30 +05:30 · 846991332a
commit 846991332a
parent afc2ca65cf
11 changed files with 108 additions and 89 deletions
--- 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];
--- 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>
        )}
--- 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 && (
--- 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"
          }`}
        >
--- 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}
    >
--- 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}
    >
--- 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>
  );
 });
--- 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>
--- 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>
--- 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" />
--- 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" />