From 4bd73630d1cf2822a1ae991d7068a474a253ba12 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Tue, 17 Oct 2023 15:59:11 +0530
Subject: [PATCH] fix: font sizes and sidebar icons (#2461)

* fix: font sizes

* fix: sidebar icons
---
 .../tailwind-config-custom/tailwind.config.js | 21 ++++++++++++-------
 .../issue-layouts/properties/assignee.tsx     |  2 +-
 web/components/labels/single-label-group.tsx  |  2 +-
 .../notifications/notification-popover.tsx    |  2 +-
 web/components/pages/single-page-block.tsx    |  4 ++--
 .../project/publish-project/modal.tsx         |  2 +-
 web/components/project/sidebar-list-item.tsx  |  2 +-
 web/components/project/sidebar-list.tsx       | 10 ++++-----
 web/components/web-view/issue-attachments.tsx |  2 +-
 web/components/web-view/issue-link-list.tsx   |  4 ++--
 web/components/web-view/sub-issues.tsx        |  4 ++--
 web/components/workspace/sidebar-menu.tsx     |  2 +-
 .../workspace-views/issues.tsx                |  2 +-
 13 files changed, 32 insertions(+), 27 deletions(-)

diff --git a/packages/tailwind-config-custom/tailwind.config.js b/packages/tailwind-config-custom/tailwind.config.js
index e9d5ff44b..0b8fbe7a8 100644
--- a/packages/tailwind-config-custom/tailwind.config.js
+++ b/packages/tailwind-config-custom/tailwind.config.js
@@ -18,14 +18,19 @@ module.exports = {
   theme: {
     // scale down font sizes to 90% of default
     fontSize: {
-      xs: "0.65rem",
-      sm: "0.7rem",
-      base: "0.8rem",
-      xl: "1rem",
-      "2xl": "1.25rem",
-      "3xl": "1.563rem",
-      "4xl": "1.953rem",
-      "5xl": "2.441rem",
+      xs: "0.675rem",
+      sm: "0.7875rem",
+      base: "0.9rem",
+      lg: "1.0125rem",
+      xl: "1.125rem",
+      "2xl": "1.35rem",
+      "3xl": "1.6875rem",
+      "4xl": "2.25rem",
+      "5xl": "2.7rem",
+      "6xl": "3.375rem",
+      "7xl": "4.05rem",
+      "8xl": "5.4rem",
+      "9xl": "7.2rem",
     },
     // scale down spacing to 90% of default
     padding: {
diff --git a/web/components/issues/issue-layouts/properties/assignee.tsx b/web/components/issues/issue-layouts/properties/assignee.tsx
index 6cd1f78d2..6ce84de8b 100644
--- a/web/components/issues/issue-layouts/properties/assignee.tsx
+++ b/web/components/issues/issue-layouts/properties/assignee.tsx
@@ -220,7 +220,7 @@ export const IssuePropertyAssignee: React.FC<IIssuePropertyAssignee> = observer(
                                 }
                               >
                                 <div className="flex items-center gap-1 w-full px-1">
-                                  <div className="flex-shrink-0 w-[18px] h-[18px] rounded-sm flex justify-center items-center text-white capitalize relative overflow-hidden">
+                                  <div className="flex-shrink-0 w-4 h-4 rounded-sm flex justify-center items-center text-white capitalize relative overflow-hidden">
                                     {option && option.avatar ? (
                                       <img
                                         src={option.avatar}
diff --git a/web/components/labels/single-label-group.tsx b/web/components/labels/single-label-group.tsx
index 74442d6c1..277fd3ed6 100644
--- a/web/components/labels/single-label-group.tsx
+++ b/web/components/labels/single-label-group.tsx
@@ -163,7 +163,7 @@ export const SingleLabelGroup: React.FC<Props> = ({
 
                       <div className="flex items-center">
                         <button className="flex items-center justify-start gap-2" onClick={handleLabelDelete}>
-                          <X className="h-[18px] w-[18px] text-custom-sidebar-text-400 flex-shrink-0" />
+                          <X className="h-4 w-4 text-custom-sidebar-text-400 flex-shrink-0" />
                         </button>
                       </div>
                     </div>
diff --git a/web/components/notifications/notification-popover.tsx b/web/components/notifications/notification-popover.tsx
index cc0c5344e..bcdb0c9f1 100644
--- a/web/components/notifications/notification-popover.tsx
+++ b/web/components/notifications/notification-popover.tsx
@@ -75,7 +75,7 @@ export const NotificationPopover = () => {
                       : "text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80"
                   } ${store?.theme?.sidebarCollapsed ? "justify-center" : ""}`}
                 >
-                  <Bell className="h-[18px] w-[18px]" />
+                  <Bell className="h-4 w-4" />
                   {store?.theme?.sidebarCollapsed ? null : <span>Notifications</span>}
                   {totalNotificationCount && totalNotificationCount > 0 ? (
                     store?.theme?.sidebarCollapsed ? (
diff --git a/web/components/pages/single-page-block.tsx b/web/components/pages/single-page-block.tsx
index a9b16be96..84c33e5fb 100644
--- a/web/components/pages/single-page-block.tsx
+++ b/web/components/pages/single-page-block.tsx
@@ -303,8 +303,8 @@ export const SinglePageBlock: React.FC<Props> = ({ block, projectDetails, showBl
                 className="absolute top-4 -left-0 hidden rounded p-0.5 group-hover:!flex"
                 {...provided.dragHandleProps}
               >
-                <MoreVertical className="h-[18px]" />
-                <MoreVertical className="-ml-2.5 h-[18px]" />
+                <MoreVertical className="h-4" />
+                <MoreVertical className="-ml-2.5 h-4" />
               </button>
               <div
                 ref={actionSectionRef}
diff --git a/web/components/project/publish-project/modal.tsx b/web/components/project/publish-project/modal.tsx
index caa88c250..85f8c4171 100644
--- a/web/components/project/publish-project/modal.tsx
+++ b/web/components/project/publish-project/modal.tsx
@@ -390,7 +390,7 @@ export const PublishProjectModal: React.FC<Props> = observer(() => {
                                       }}
                                     >
                                       <div className="text-sm">{option.label}</div>
-                                      <div className={`w-[18px] h-[18px] relative flex justify-center items-center`}>
+                                      <div className={`w-4 h-4 relative flex justify-center items-center`}>
                                         {value.length > 0 && value.includes(option.key) && (
                                           <Check className="h-5 w-5" />
                                         )}
diff --git a/web/components/project/sidebar-list-item.tsx b/web/components/project/sidebar-list-item.tsx
index e02ce7fb6..6f5e3b137 100644
--- a/web/components/project/sidebar-list-item.tsx
+++ b/web/components/project/sidebar-list-item.tsx
@@ -298,7 +298,7 @@ export const ProjectSidebarListItem: React.FC<Props> = observer((props) => {
               leaveFrom="transform scale-100 opacity-100"
               leaveTo="transform scale-95 opacity-0"
             >
-              <Disclosure.Panel className={`space-y-2 mt-1 ${isCollapsed ? "" : "ml-[2.25rem]"}`}>
+              <Disclosure.Panel className={`space-y-1 mt-1 ${isCollapsed ? "" : "ml-[2.25rem]"}`}>
                 {navigation(workspaceSlug as string, project?.id).map((item) => {
                   if (
                     (item.name === "Cycles" && !project.cycle_view) ||
diff --git a/web/components/project/sidebar-list.tsx b/web/components/project/sidebar-list.tsx
index 36cf24992..93d7dcc55 100644
--- a/web/components/project/sidebar-list.tsx
+++ b/web/components/project/sidebar-list.tsx
@@ -116,7 +116,7 @@ export const ProjectSidebarList: FC = observer(() => {
       />
       <div
         ref={containerRef}
-        className={`h-full overflow-y-auto px-4 space-y-3 pt-3 ${
+        className={`h-full overflow-y-auto px-4 space-y-2 ${
           isScrolled ? "border-t border-custom-sidebar-border-300" : ""
         }`}
       >
@@ -125,7 +125,7 @@ export const ProjectSidebarList: FC = observer(() => {
             {(provided) => (
               <div ref={provided.innerRef} {...provided.droppableProps}>
                 {orderedFavProjects && orderedFavProjects.length > 0 && (
-                  <Disclosure as="div" className="flex flex-col space-y-2" defaultOpen={true}>
+                  <Disclosure as="div" className="flex flex-col" defaultOpen={true}>
                     {({ open }) => (
                       <>
                         {!isCollapsed && (
@@ -133,7 +133,7 @@ export const ProjectSidebarList: FC = observer(() => {
                             <Disclosure.Button
                               as="button"
                               type="button"
-                              className="group flex items-center gap-1 px-1.5 text-xs font-semibold text-custom-sidebar-text-400 text-left hover:bg-custom-sidebar-background-80 rounded w-full whitespace-nowrap"
+                              className="group flex items-center gap-1 px-1.5 text-sm font-semibold text-custom-sidebar-text-400 text-left hover:bg-custom-sidebar-background-80 rounded w-full whitespace-nowrap"
                             >
                               Favorites
                               {open ? (
@@ -190,7 +190,7 @@ export const ProjectSidebarList: FC = observer(() => {
             {(provided) => (
               <div ref={provided.innerRef} {...provided.droppableProps}>
                 {orderedJoinedProjects && orderedJoinedProjects.length > 0 && (
-                  <Disclosure as="div" className="flex flex-col space-y-2" defaultOpen={true}>
+                  <Disclosure as="div" className="flex flex-col" defaultOpen={true}>
                     {({ open }) => (
                       <>
                         {!isCollapsed && (
@@ -198,7 +198,7 @@ export const ProjectSidebarList: FC = observer(() => {
                             <Disclosure.Button
                               as="button"
                               type="button"
-                              className="group flex items-center gap-1 px-1.5 text-xs font-semibold text-custom-sidebar-text-400 text-left hover:bg-custom-sidebar-background-80 rounded w-full whitespace-nowrap"
+                              className="group flex items-center gap-1 px-1.5 text-sm font-semibold text-custom-sidebar-text-400 text-left hover:bg-custom-sidebar-background-80 rounded w-full whitespace-nowrap"
                             >
                               Projects
                               {open ? (
diff --git a/web/components/web-view/issue-attachments.tsx b/web/components/web-view/issue-attachments.tsx
index d04f59fcd..2be53cfdd 100644
--- a/web/components/web-view/issue-attachments.tsx
+++ b/web/components/web-view/issue-attachments.tsx
@@ -189,7 +189,7 @@ export const IssueAttachments: React.FC<Props> = (props) => {
                   setAttachmentDeleteModal(true);
                 }}
               >
-                <X className="w-[18px] h-[18px] text-custom-text-400" />
+                <X className="w-4 h-4 text-custom-text-400" />
               </button>
             )}
           </div>
diff --git a/web/components/web-view/issue-link-list.tsx b/web/components/web-view/issue-link-list.tsx
index fe90bda3b..d091d77aa 100644
--- a/web/components/web-view/issue-link-list.tsx
+++ b/web/components/web-view/issue-link-list.tsx
@@ -115,7 +115,7 @@ export const IssueLinks: React.FC<Props> = (props) => {
                     setSelectedLink(link.id);
                   }}
                 >
-                  <Pencil className="w-[18px] h-[18px] text-custom-text-400" />
+                  <Pencil className="w-4 h-4 text-custom-text-400" />
                 </button>
                 <button
                   type="button"
@@ -123,7 +123,7 @@ export const IssueLinks: React.FC<Props> = (props) => {
                     setDeleteSelected(link.id);
                   }}
                 >
-                  <X className="w-[18px] h-[18px] text-custom-text-400" />
+                  <X className="w-4 h-4 text-custom-text-400" />
                 </button>
               </div>
             )}
diff --git a/web/components/web-view/sub-issues.tsx b/web/components/web-view/sub-issues.tsx
index 87736fc62..f5e82ebfe 100644
--- a/web/components/web-view/sub-issues.tsx
+++ b/web/components/web-view/sub-issues.tsx
@@ -135,7 +135,7 @@ export const SubIssueList: React.FC<Props> = (props) => {
                 setIssueSelectedForDelete(subIssue);
               }}
             >
-              <X className="w-[18px] h-[18px] text-custom-text-400" />
+              <X className="w-4 h-4 text-custom-text-400" />
             </button>
           </div>
         ))}
@@ -146,7 +146,7 @@ export const SubIssueList: React.FC<Props> = (props) => {
         onClick={() => setIsBottomSheetOpen(true)}
         className="flex items-center gap-x-1 mt-3"
       >
-        <PlusIcon className="w-[18px] h-[18px] text-custom-text-400" />
+        <PlusIcon className="w-4 h-4 text-custom-text-400" />
         <p className="text-sm text-custom-text-400">Add sub issue</p>
       </button>
     </div>
diff --git a/web/components/workspace/sidebar-menu.tsx b/web/components/workspace/sidebar-menu.tsx
index d84c9e053..360277d5a 100644
--- a/web/components/workspace/sidebar-menu.tsx
+++ b/web/components/workspace/sidebar-menu.tsx
@@ -60,7 +60,7 @@ export const WorkspaceSidebarMenu = observer(() => {
                       : "text-custom-sidebar-text-200 hover:bg-custom-sidebar-background-80 focus:bg-custom-sidebar-background-80"
                   } ${themeStore?.sidebarCollapsed ? "justify-center" : ""}`}
                 >
-                  {<link.Icon className="h-[18px] w-[18px]" />}
+                  {<link.Icon className="h-4 w-4" />}
                   {!themeStore?.sidebarCollapsed && link.name}
                 </div>
               </Tooltip>
diff --git a/web/pages/[workspaceSlug]/workspace-views/issues.tsx b/web/pages/[workspaceSlug]/workspace-views/issues.tsx
index d17008338..ef81e86a9 100644
--- a/web/pages/[workspaceSlug]/workspace-views/issues.tsx
+++ b/web/pages/[workspaceSlug]/workspace-views/issues.tsx
@@ -12,7 +12,7 @@ const WorkspaceView = () => (
   <WorkspaceAuthorizationLayout
     breadcrumbs={
       <div className="flex gap-2 items-center">
-        <CheckCircle className="h-[18px] w-[18px] stroke-[1.5]" />
+        <CheckCircle className="h-4 w-4 stroke-[1.5]" />
         <span className="text-sm font-medium">Workspace issues</span>
       </div>
     }