fix: ui and bug fixes (#980)

* style: sub issue theming * style: shortcut modal theming * style: blocking and blocked by modal theming * fix: filter labels dropdown width fix * style: display properties * chore: workspace invite * style: invite co workers theming * style: create workspace theming * style: attachment theming * style: workspace sidebar theming * style: issue property theming * style: create module modal lead icon * style: label list modal theming * delete attachment and member modal theming * style: transfer issue modal * style: delete estimate modal theming * style: module form status * style: delete state modal theming * style: shortcut modal * style: onboarding logo * style: onboarding command menu
makeplane · May 2, 2023 · 483c49d · 483c49d · vercel · May 2, 2023
1 parent 0fa9451
commit 483c49d
Show file tree

Hide file tree

Showing 31 changed files with 180 additions and 102 deletions.
diff --git a/apps/app/components/command-palette/shortcuts-modal.tsx b/apps/app/components/command-palette/shortcuts-modal.tsx
@@ -4,7 +4,7 @@ import { Dialog, Transition } from "@headlessui/react";
 // icons
 import { XMarkIcon } from "@heroicons/react/20/solid";
 import { MagnifyingGlassIcon } from "@heroicons/react/24/outline";
-import { MacCommandIcon } from "components/icons";
+import { CommandIcon } from "components/icons";
 // ui
 import { Input } from "components/ui";
 
@@ -123,17 +123,23 @@ export const ShortcutsModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
                               <div key={shortcut.keys} className="flex w-full flex-col">
                                 <div className="flex flex-col gap-y-3">
                                   <div className="flex items-center justify-between">
-                                    <p className="text-sm text-brand-secondary">{shortcut.description}</p>
+                                    <p className="text-sm text-brand-secondary">
+                                      {shortcut.description}
+                                    </p>
                                     <div className="flex items-center gap-x-2.5">
                                       {shortcut.keys.split(",").map((key, index) => (
                                         <span key={index} className="flex items-center gap-1">
                                           {key === "Ctrl" ? (
-                                            <span className="flex h-full items-center rounded-sm border border-brand-base bg-brand-surface-1 p-2">
-                                              <MacCommandIcon />
+                                            <span className="flex h-full items-center rounded-sm border border-brand-base bg-brand-surface-1 p-1.5">
+                                              <CommandIcon className="h-4 w-4 fill-current text-brand-secondary" />
                                             </span>
+                                          ) : key === "Ctrl" ? (
+                                            <kbd className="rounded-sm border border-brand-base bg-brand-surface-1 p-1.5 text-sm font-medium text-brand-secondary">
+                                              <CommandIcon className="h-4 w-4 fill-current text-brand-secondary" />
+                                            </kbd>
                                           ) : (
-                                            <kbd className="rounded-sm border border-brand-base bg-brand-surface-1 px-2 py-1 text-sm font-medium text-gray-800">
-                                              {key === "Ctrl" ? <MacCommandIcon /> : key}
+                                            <kbd className="rounded-sm border border-brand-base bg-brand-surface-1 px-2 py-1 text-sm font-medium text-brand-secondary">
+                                              {key}
                                             </kbd>
                                           )}
                                         </span>
@@ -167,12 +173,16 @@ export const ShortcutsModal: React.FC<Props> = ({ isOpen, setIsOpen }) => {
                                       {keys.split(",").map((key, index) => (
                                         <span key={index} className="flex items-center gap-1">
                                           {key === "Ctrl" ? (
-                                            <span className="flex h-full items-center rounded-sm border border-brand-base text-brand-secondary bg-brand-surface-1 p-2">
-                                              <MacCommandIcon />
+                                            <span className="flex h-full items-center rounded-sm border border-brand-base bg-brand-surface-1 p-1.5 text-brand-secondary">
+                                              <CommandIcon className="h-4 w-4 fill-current text-brand-secondary" />
                                             </span>
+                                          ) : key === "Ctrl" ? (
+                                            <kbd className="rounded-sm border border-brand-base bg-brand-surface-1 p-1.5 text-sm font-medium text-brand-secondary">
+                                              <CommandIcon className="h-4 w-4 fill-current text-brand-secondary" />
+                                            </kbd>
                                           ) : (
                                             <kbd className="rounded-sm border border-brand-base bg-brand-surface-1 px-2 py-1 text-sm font-medium text-brand-secondary">
-                                              {key === "Ctrl" ? <MacCommandIcon /> : key}
+                                              {key}
                                             </kbd>
                                           )}
                                         </span>

diff --git a/apps/app/components/core/board-view/single-issue.tsx b/apps/app/components/core/board-view/single-issue.tsx
@@ -391,8 +391,8 @@ export const SingleBoardIssue: React.FC<Props> = ({
             {properties.link && (
               <div className="flex cursor-default items-center rounded-md border border-brand-base px-2.5 py-1 text-xs shadow-sm">
                 <Tooltip tooltipHeading="Link" tooltipContent={`${issue.link_count}`}>
-                  <div className="flex items-center gap-1 text-gray-500">
-                    <LinkIcon className="h-3.5 w-3.5 text-gray-500" />
+                  <div className="flex items-center gap-1 text-brand-secondary">
+                    <LinkIcon className="h-3.5 w-3.5 text-brand-secondary" />
                     {issue.link_count}
                   </div>
                 </Tooltip>
@@ -401,8 +401,8 @@ export const SingleBoardIssue: React.FC<Props> = ({
             {properties.attachment_count && (
               <div className="flex cursor-default items-center rounded-md border border-brand-base px-2.5 py-1 text-xs shadow-sm">
                 <Tooltip tooltipHeading="Attachment" tooltipContent={`${issue.attachment_count}`}>
-                  <div className="flex items-center gap-1 text-gray-500">
-                    <PaperClipIcon className="h-3.5 w-3.5 -rotate-45 text-gray-500" />
+                  <div className="flex items-center gap-1 text-brand-secondary">
+                    <PaperClipIcon className="h-3.5 w-3.5 -rotate-45 text-brand-secondary" />
                     {issue.attachment_count}
                   </div>
                 </Tooltip>

diff --git a/apps/app/components/core/existing-issues-list-modal.tsx b/apps/app/components/core/existing-issues-list-modal.tsx
@@ -160,7 +160,7 @@ export const ExistingIssuesListModal: React.FC<Props> = ({
                                   Select issues to add
                                 </h2>
                               )}
-                              <ul className="text-sm text-gray-700">
+                              <ul className="text-sm text-brand-base">
                                 {filteredIssues.map((issue) => (
                                   <Combobox.Option
                                     key={issue.id}

diff --git a/apps/app/components/core/issues-view-filter.tsx b/apps/app/components/core/issues-view-filter.tsx
@@ -246,7 +246,7 @@ export const IssuesFilterView: React.FC = () => {
                               type="button"
                               className={`rounded border px-2 py-1 text-xs capitalize ${
                                 properties[key as keyof Properties]
-                                  ? "border-brand-accent bg-brand-accent text-brand-base"
+                                  ? "border-brand-accent bg-brand-accent text-white"
                                   : "border-brand-base"
                               }`}
                               onClick={() => setProperties(key as keyof Properties)}

diff --git a/apps/app/components/core/list-view/single-issue.tsx b/apps/app/components/core/list-view/single-issue.tsx
@@ -313,8 +313,8 @@ export const SingleListIssue: React.FC<Props> = ({
           {properties.link && (
             <div className="flex cursor-default items-center rounded-md border border-brand-base px-2.5 py-1 text-xs shadow-sm">
               <Tooltip tooltipHeading="Links" tooltipContent={`${issue.link_count}`}>
-                <div className="flex items-center gap-1 text-gray-500">
-                  <LinkIcon className="h-3.5 w-3.5 text-gray-500" />
+                <div className="flex items-center gap-1 text-brand-secondary">
+                  <LinkIcon className="h-3.5 w-3.5 text-brand-secondary" />
                   {issue.link_count}
                 </div>
               </Tooltip>
@@ -323,8 +323,8 @@ export const SingleListIssue: React.FC<Props> = ({
           {properties.attachment_count && (
             <div className="flex cursor-default items-center rounded-md border border-brand-base px-2.5 py-1 text-xs shadow-sm">
               <Tooltip tooltipHeading="Attachments" tooltipContent={`${issue.attachment_count}`}>
-                <div className="flex items-center gap-1 text-gray-500">
-                  <PaperClipIcon className="h-3.5 w-3.5 -rotate-45 text-gray-500" />
+                <div className="flex items-center gap-1 text-brand-secondary">
+                  <PaperClipIcon className="h-3.5 w-3.5 -rotate-45 text-brand-secondary" />
                   {issue.attachment_count}
                 </div>
               </Tooltip>

diff --git a/apps/app/components/cycles/transfer-issues-modal.tsx b/apps/app/components/cycles/transfer-issues-modal.tsx
@@ -106,30 +106,30 @@ export const TransferIssuesModal: React.FC<Props> = ({ isOpen, handleClose }) =>
               <Dialog.Panel className="relative transform rounded-lg bg-brand-surface-1 py-5 text-left shadow-xl transition-all sm:w-full sm:max-w-2xl">
                 <div className="flex flex-col gap-4">
                   <div className="flex items-center justify-between px-5">
-                    <div className="flex items-center gap-2">
+                    <div className="flex items-center gap-3">
                       <TransferIcon className="h-4 w-5" color="#495057" />
-                      <h4 className="text-gray-700 font-medium text-[1.50rem]">Transfer Issues</h4>
+                      <h4 className="text-xl font-medium text-brand-base">Transfer Issues</h4>
                     </div>
                     <button onClick={handleClose}>
                       <XMarkIcon className="h-4 w-4" />
                     </button>
                   </div>
-                  <div className="flex items-center gap-2 pb-3 px-5 border-b border-brand-base">
+                  <div className="flex items-center gap-2 border-b border-brand-base px-5 pb-3">
                     <MagnifyingGlassIcon className="h-4 w-4 text-brand-secondary" />
                     <input
-                      className="outline-none"
+                      className="bg-brand-surface-1 outline-none"
                       placeholder="Search for a cycle..."
                       onChange={(e) => setQuery(e.target.value)}
                       value={query}
                     />
                   </div>
-                  <div className="flex flex-col items-start w-full gap-2 px-5">
+                  <div className="flex w-full flex-col items-start gap-2 px-5">
                     {filteredOptions ? (
                       filteredOptions.length > 0 ? (
                         filteredOptions.map((option: ICycle) => (
                           <button
                             key={option.id}
-                            className="flex items-center gap-4 px-4 py-3 text-gray-600 text-sm rounded w-full hover:bg-brand-surface-1"
+                            className="flex w-full items-center gap-4 rounded px-4 py-3 text-sm text-brand-secondary hover:bg-brand-surface-1"
                             onClick={() => {
                               transferIssue({
                                 new_cycle_id: option?.id,
@@ -138,16 +138,16 @@ export const TransferIssuesModal: React.FC<Props> = ({ isOpen, handleClose }) =>
                             }}
                           >
                             <ContrastIcon className="h-5 w-5" />
-                            <div className="flex justify-between w-full">
+                            <div className="flex w-full justify-between">
                               <span>{option?.name}</span>
-                              <span className=" flex bg-gray-200 capitalize px-2 rounded-full items-center">
+                              <span className=" flex items-center rounded-full bg-brand-surface-2  px-2 capitalize">
                                 {getDateRangeStatus(option?.start_date, option?.end_date)}
                               </span>
                             </div>
                           </button>
                         ))
                       ) : (
-                        <div className="flex items-center justify-center gap-4 p-5 text-sm w-full">
+                        <div className="flex w-full items-center justify-center gap-4 p-5 text-sm">
                           <ExclamationIcon height={14} width={14} />
                           <span className="text-center text-brand-secondary">
                             You don’t have any current cycle. Please create one to transfer the

diff --git a/apps/app/components/cycles/transfer-issues.tsx b/apps/app/components/cycles/transfer-issues.tsx
@@ -37,7 +37,7 @@ export const TransferIssues: React.FC<Props> = ({ handleClick }) => {
     ? cycleDetails.backlog_issues + cycleDetails.unstarted_issues + cycleDetails.started_issues
     : 0;
   return (
-    <div className="flex items-center justify-between -mt-4 mb-4">
+    <div className="-mt-2 mb-4 flex items-center justify-between">
       <div className="flex items-center gap-2 text-sm text-brand-secondary">
         <ExclamationIcon height={14} width={14} />
         <span>Completed cycles are not editable.</span>
@@ -46,7 +46,7 @@ export const TransferIssues: React.FC<Props> = ({ handleClick }) => {
       {transferableIssuesCount > 0 && (
         <div>
           <PrimaryButton onClick={handleClick} className="flex items-center gap-3 rounded-lg">
-            <TransferIcon className="h-4 w-4" color="white"/>
+            <TransferIcon className="h-4 w-4" color="white" />
             <span className="text-white">Transfer Issues</span>
           </PrimaryButton>
         </div>

diff --git a/apps/app/components/estimates/delete-estimate-modal.tsx b/apps/app/components/estimates/delete-estimate-modal.tsx
@@ -46,7 +46,7 @@ export const DeleteEstimateModal: React.FC<Props> = ({
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
+          <div className="fixed inset-0 bg-brand-backdrop bg-opacity-50 transition-opacity" />
         </Transition.Child>
 
         <div className="fixed inset-0 z-10 overflow-y-auto">
@@ -60,10 +60,10 @@ export const DeleteEstimateModal: React.FC<Props> = ({
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl">
+              <Dialog.Panel className="relative transform overflow-hidden rounded-lg border border-brand-base bg-brand-base text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl">
                 <div className="flex flex-col gap-6 p-6">
                   <div className="flex w-full items-center justify-start gap-6">
-                    <span className="place-items-center rounded-full bg-red-100 p-4">
+                    <span className="place-items-center rounded-full bg-red-500/20 p-4">
                       <ExclamationTriangleIcon
                         className="h-6 w-6 text-red-600"
                         aria-hidden="true"
@@ -74,9 +74,9 @@ export const DeleteEstimateModal: React.FC<Props> = ({
                     </span>
                   </div>
                   <span>
-                    <p className="break-all text-sm leading-7 text-gray-500">
+                    <p className="break-all text-sm leading-7 text-brand-secondary">
                       Are you sure you want to delete estimate-{" "}
-                      <span className="break-all font-semibold">{data.name}</span>
+                      <span className="break-all font-medium text-brand-base">{data.name}</span>
                       {""}? All of the data related to the estiamte will be permanently removed.
                       This action cannot be undone.
                     </p>

diff --git a/apps/app/components/icons/command-icon.tsx b/apps/app/components/icons/command-icon.tsx
@@ -0,0 +1,21 @@
+import React from "react";
+
+import type { Props } from "./types";
+
+export const CommandIcon: React.FC<Props> = ({
+  width = "81",
+  height = "80",
+  color = "#858E96",
+  className,
+}) => (
+  <svg
+    width={width}
+    height={height}
+    className={className}
+    viewBox="0 0 81 80"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="M21.4577 69.8924C18.4684 69.8924 15.922 68.8406 13.8184 66.737C11.7149 64.6335 10.6631 62.087 10.6631 59.0978C10.6631 56.1085 11.7149 53.562 13.8184 51.4585C15.922 49.3549 18.4684 48.3031 21.4577 48.3031H27.2702V31.696H21.4577C18.4684 31.696 15.922 30.6442 13.8184 28.5406C11.7149 26.437 10.6631 23.8906 10.6631 20.9013C10.6631 17.912 11.7149 15.3656 13.8184 13.262C15.922 11.1585 18.4684 10.1067 21.4577 10.1067C24.447 10.1067 26.9934 11.1585 29.097 13.262C31.2006 15.3656 32.2524 17.912 32.2524 20.9013V26.7138H48.8595V20.9013C48.8595 17.912 49.9113 15.3656 52.0149 13.262C54.1184 11.1585 56.6649 10.1067 59.6542 10.1067C62.6434 10.1067 65.1899 11.1585 67.2934 13.262C69.397 15.3656 70.4488 17.912 70.4488 20.9013C70.4488 23.8906 69.397 26.437 67.2934 28.5406C65.1899 30.6442 62.6434 31.696 59.6542 31.696H53.8417V48.3031H59.6542C62.6434 48.3031 65.1899 49.3549 67.2934 51.4585C69.397 53.562 70.4488 56.1085 70.4488 59.0978C70.4488 62.087 69.397 64.6335 67.2934 66.737C65.1899 68.8406 62.6434 69.8924 59.6542 69.8924C56.6649 69.8924 54.1184 68.8406 52.0149 66.737C49.9113 64.6335 48.8595 62.087 48.8595 59.0978V53.2853H32.2524V59.0978C32.2524 62.087 31.2006 64.6335 29.097 66.737C26.9934 68.8406 24.447 69.8924 21.4577 69.8924ZM21.4577 64.9103C23.0631 64.9103 24.4332 64.3428 25.568 63.208C26.7028 62.0732 27.2702 60.7031 27.2702 59.0978V53.2853H21.4577C19.8524 53.2853 18.4823 53.8527 17.3475 54.9875C16.2126 56.1223 15.6452 57.4924 15.6452 59.0978C15.6452 60.7031 16.2126 62.0732 17.3475 63.208C18.4823 64.3428 19.8524 64.9103 21.4577 64.9103ZM59.6542 64.9103C61.2595 64.9103 62.6296 64.3428 63.7644 63.208C64.8992 62.0732 65.4667 60.7031 65.4667 59.0978C65.4667 57.4924 64.8992 56.1223 63.7644 54.9875C62.6296 53.8527 61.2595 53.2853 59.6542 53.2853H53.8417V59.0978C53.8417 60.7031 54.4091 62.0732 55.5439 63.208C56.6787 64.3428 58.0488 64.9103 59.6542 64.9103ZM32.2524 48.3031H48.8595V31.696H32.2524V48.3031ZM21.4577 26.7138H27.2702V20.9013C27.2702 19.296 26.7028 17.9259 25.568 16.7911C24.4332 15.6562 23.0631 15.0888 21.4577 15.0888C19.8524 15.0888 18.4823 15.6562 17.3475 16.7911C16.2126 17.9259 15.6452 19.296 15.6452 20.9013C15.6452 22.5067 16.2126 23.8768 17.3475 25.0116C18.4823 26.1464 19.8524 26.7138 21.4577 26.7138ZM53.8417 26.7138H59.6542C61.2595 26.7138 62.6296 26.1464 63.7644 25.0116C64.8992 23.8768 65.4667 22.5067 65.4667 20.9013C65.4667 19.296 64.8992 17.9259 63.7644 16.7911C62.6296 15.6562 61.2595 15.0888 59.6542 15.0888C58.0488 15.0888 56.6787 15.6562 55.5439 16.7911C54.4091 17.9259 53.8417 19.296 53.8417 20.9013V26.7138Z" />
+  </svg>
+);
diff --git a/apps/app/components/icons/index.ts b/apps/app/components/icons/index.ts
@@ -43,7 +43,7 @@ export * from "./user-icon";
 export * from "./grid-view-icons";
 export * from "./assignment-clipboard-icon";
 export * from "./tick-mark-icon";
-export * from "./target-icon"
+export * from "./target-icon";
 export * from "./contrast-icon";
 export * from "./people-group-icon";
 export * from "./cmd-icon";
@@ -72,4 +72,5 @@ export * from "./svg-file-icon";
 export * from "./txt-file-icon";
 export * from "./default-file-icon";
 export * from "./video-file-icon";
-export * from "./audio-file-icon";
+export * from "./audio-file-icon";
+export * from "./command-icon";