[WEB-2312] chore: minor UI and UX copy improvements. (#5438)

web/ce/constants/project/settings/features.tsx

@@ -16,18 +16,20 @@ export type TFeatureList = {
 export type TProjectFeatures = {
   [key: string]: {
     title: string;
+    description: string;
     featureList: TFeatureList;
   };
 };
 
 export const PROJECT_FEATURES_LIST: TProjectFeatures = {
   project_features: {
-    title: "Features",
+    title: "Projects and issues",
+    description: "Toggle these on or off this project.",
     featureList: {
       cycles: {
         property: "cycle_view",
         title: "Cycles",
-        description: "Time-box issues and boost momentum, similar to sprints in scrum.",
+        description: "Timebox work as you see fit per project and change frequency from one period to the next.",
         icon: <ContrastIcon className="h-5 w-5 flex-shrink-0 rotate-180 text-custom-text-300" />,
         isPro: false,
         isEnabled: true,
@@ -35,7 +37,7 @@ export const PROJECT_FEATURES_LIST: TProjectFeatures = {
       modules: {
         property: "module_view",
         title: "Modules",
-        description: "Group multiple issues together and track the progress.",
+        description: "Group work into sub-project-like set-ups with their own leads and assignees.",
         icon: <DiceIcon width={20} height={20} className="flex-shrink-0 text-custom-text-300" />,
         isPro: false,
         isEnabled: true,
@@ -43,7 +45,7 @@ export const PROJECT_FEATURES_LIST: TProjectFeatures = {
       views: {
         property: "issue_views_view",
         title: "Views",
-        description: "Apply filters to issues and save them to analyse and investigate work.",
+        description: "Save sorts, filters, and display options for later or share them.",
         icon: <Layers className="h-5 w-5 flex-shrink-0 text-custom-text-300" />,
         isPro: false,
         isEnabled: true,
@@ -51,7 +53,7 @@ export const PROJECT_FEATURES_LIST: TProjectFeatures = {
       pages: {
         property: "page_view",
         title: "Pages",
-        description: "Document ideas, feature requirements, discussions within your project.",
+        description: "Write anything like you write anything.",
         icon: <FileText className="h-5 w-5 flex-shrink-0 text-custom-text-300" />,
         isPro: false,
         isEnabled: true,
@@ -59,7 +61,7 @@ export const PROJECT_FEATURES_LIST: TProjectFeatures = {
       inbox: {
         property: "inbox_view",
         title: "Intake",
-        description: "Capture external inputs, move valid issues to workflow.",
+        description: "Consider and discuss issues before you add them to your project.",
         icon: <Intake className="h-5 w-5 flex-shrink-0 text-custom-text-300" />,
         isPro: false,
         isEnabled: true,
@@ -67,12 +69,13 @@ export const PROJECT_FEATURES_LIST: TProjectFeatures = {
     },
   },
   project_others: {
-    title: "Others",
+    title: "Work management",
+    description: "Available only on some plans as indicated by the label next to the feature below.",
     featureList: {
       is_time_tracking_enabled: {
         property: "is_time_tracking_enabled",
         title: "Time Tracking",
-        description: "Keep the work logs of the users in track ",
+        description: "Log time, see timesheets, and download full CSVs for your entire workspace.",
         icon: <Timer className="h-5 w-5 flex-shrink-0 text-custom-text-300" />,
         isPro: true,
         isEnabled: false,

web/core/components/pages/editor/header/options-dropdown.tsx

@@ -166,7 +166,7 @@ export const PageOptionsDropdown: React.FC<Props> = observer((props) => {
   ];
 
   return (
-    <CustomMenu maxHeight="md" placement="bottom-start" verticalEllipsis closeOnSelect>
+    <CustomMenu maxHeight="lg" placement="bottom-start" verticalEllipsis closeOnSelect>
       <CustomMenu.MenuItem
         className="hidden md:flex w-full items-center justify-between gap-2"
         onClick={() => handleFullWidth(!isFullWidth)}

web/core/components/project/project-feature-update.tsx

@@ -28,14 +28,10 @@ export const ProjectFeatureUpdate: FC<Props> = observer((props) => {
 
   return (
     <>
-      <div className="px-4 py-2">
-        <h3 className="text-base font-medium leading-6">Toggle project features</h3>
-        <div className="text-sm tracking-tight text-custom-text-200 leading-5">
-          Turn on features which help you manage and run your project.
-        </div>
+      <div className="p-2">
+        <ProjectFeaturesList workspaceSlug={workspaceSlug} projectId={projectId} isAdmin />
       </div>
-      <ProjectFeaturesList workspaceSlug={workspaceSlug} projectId={projectId} isAdmin />
-      <div className="flex items-center justify-between gap-2 mt-4 px-4 pt-4 pb-2 border-t border-custom-border-100">
+      <div className="flex items-center justify-between gap-2 mt-4 px-6 py-4 border-t border-custom-border-100">
         <div className="flex gap-1 text-sm text-custom-text-300 font-medium">
           Congrats! Project <Logo logo={currentProjectDetails.logo_props} />{" "}
           <p className="break-all">{currentProjectDetails.name}</p> created.

web/core/components/project/settings/features-list.tsx

@@ -61,8 +61,9 @@ export const ProjectFeaturesList: FC<Props> = observer((props) => {
         const feature = PROJECT_FEATURES_LIST[featureSectionKey];
         return (
           <div key={featureSectionKey} className="">
-            <div className="flex items-center border-b border-custom-border-100 py-3.5">
+            <div className="flex flex-col justify-center border-b border-custom-border-100 py-3">
               <h3 className="text-xl font-medium">{feature.title}</h3>
+              <h4 className="text-sm leading-5 text-custom-text-200">{feature.description}</h4>
             </div>
             {Object.keys(feature.featureList).map((featureItemKey) => {
               const featureItem = feature.featureList[featureItemKey];