Merge pull request #9809 from overleaf/ii-dashboard-mobile-view-improvements-2

[web] Projects dashboard improvements 2

GitOrigin-RevId: c34e91d55785564638ac1d54412a7e5c350fd410

services/web/frontend/js/features/project-list/components/current-plan-widget/commons-plan.tsx

@@ -6,24 +6,29 @@ type CommonsPlanProps = Pick<CommonsPlanSubscription, 'subscription' | 'plan'>
 
 function CommonsPlan({ subscription, plan }: CommonsPlanProps) {
   const { t } = useTranslation()
+  const currentPlanLabel = (
+    <Trans i18nKey="premium_plan_label" components={{ b: <strong /> }} />
+  )
 
   return (
-    <Tooltip
-      description={t('commons_plan_tooltip', {
-        plan: plan.name,
-        institution: subscription.name,
-      })}
-      id="commons-plan"
-      overlayProps={{ placement: 'bottom' }}
-    >
-      <a
-        href="/learn/how-to/Overleaf_premium_features"
-        className="current-plan-label"
+    <>
+      <span className="current-plan-label visible-xs">{currentPlanLabel}</span>
+      <Tooltip
+        description={t('commons_plan_tooltip', {
+          plan: plan.name,
+          institution: subscription.name,
+        })}
+        id="commons-plan"
+        overlayProps={{ placement: 'bottom' }}
       >
-        <Trans i18nKey="premium_plan_label" components={{ b: <strong /> }} />{' '}
-        <span className="info-badge" />
-      </a>
-    </Tooltip>
+        <a
+          href="/learn/how-to/Overleaf_premium_features"
+          className="current-plan-label hidden-xs"
+        >
+          {currentPlanLabel} <span className="info-badge" />
+        </a>
+      </Tooltip>
+    </>
   )
 }
 

services/web/frontend/js/features/project-list/components/current-plan-widget/free-plan.tsx

@@ -5,17 +5,18 @@ import * as eventTracking from '../../../../infrastructure/event-tracking'
 
 function FreePlan() {
   const { t } = useTranslation()
+  const currentPlanLabel = (
+    <Trans i18nKey="free_plan_label" components={{ b: <strong /> }} />
+  )
 
-  function handleClick() {
+  const handleClick = () => {
     eventTracking.send('subscription-funnel', 'dashboard-top', 'upgrade')
     eventTracking.sendMB('upgrade-button-click', { source: 'dashboard-top' })
   }
 
   return (
     <>
-      <span className="current-plan-label visible-xs">
-        <Trans i18nKey="free_plan_label" components={{ b: <strong /> }} />
-      </span>
+      <span className="current-plan-label visible-xs">{currentPlanLabel}</span>
       <Tooltip
         description={t('free_plan_tooltip')}
         id="free-plan"
@@ -25,8 +26,7 @@ function FreePlan() {
           href="/learn/how-to/Overleaf_premium_features"
           className="current-plan-label hidden-xs"
         >
-          <Trans i18nKey="free_plan_label" components={{ b: <strong /> }} />{' '}
-          <span className="info-badge" />
+          {currentPlanLabel} <span className="info-badge" />
         </a>
       </Tooltip>{' '}
       <Button

services/web/frontend/js/features/project-list/components/current-plan-widget/group-plan.tsx

@@ -9,38 +9,42 @@ type GroupPlanProps = Pick<
 
 function GroupPlan({ subscription, plan, remainingTrialDays }: GroupPlanProps) {
   const { t } = useTranslation()
+  const currentPlanLabel =
+    remainingTrialDays >= 0 ? (
+      remainingTrialDays === 1 ? (
+        <Trans i18nKey="trial_last_day" components={{ b: <strong /> }} />
+      ) : (
+        <Trans
+          i18nKey="trial_remaining_days"
+          components={{ b: <strong /> }}
+          values={{ days: remainingTrialDays }}
+        />
+      )
+    ) : (
+      <Trans i18nKey="premium_plan_label" components={{ b: <strong /> }} />
+    )
 
   return (
-    <Tooltip
-      description={t(
-        subscription.teamName != null
-          ? 'group_plan_with_name_tooltip'
-          : 'group_plan_tooltip',
-        { plan: plan.name, groupName: subscription.teamName }
-      )}
-      id="group-plan"
-      overlayProps={{ placement: 'bottom' }}
-    >
-      <a
-        href="/learn/how-to/Overleaf_premium_features"
-        className="current-plan-label"
+    <>
+      <span className="current-plan-label visible-xs">{currentPlanLabel}</span>
+      <Tooltip
+        description={t(
+          subscription.teamName != null
+            ? 'group_plan_with_name_tooltip'
+            : 'group_plan_tooltip',
+          { plan: plan.name, groupName: subscription.teamName }
+        )}
+        id="group-plan"
+        overlayProps={{ placement: 'bottom' }}
       >
-        {remainingTrialDays >= 0 ? (
-          remainingTrialDays === 1 ? (
-            <Trans i18nKey="trial_last_day" components={{ b: <strong /> }} />
-          ) : (
-            <Trans
-              i18nKey="trial_remaining_days"
-              components={{ b: <strong /> }}
-              values={{ days: remainingTrialDays }}
-            />
-          )
-        ) : (
-          <Trans i18nKey="premium_plan_label" components={{ b: <strong /> }} />
-        )}{' '}
-        <span className="info-badge" />
-      </a>
-    </Tooltip>
+        <a
+          href="/learn/how-to/Overleaf_premium_features"
+          className="current-plan-label hidden-xs"
+        >
+          {currentPlanLabel} <span className="info-badge" />
+        </a>
+      </Tooltip>
+    </>
   )
 }
 

services/web/frontend/js/features/project-list/components/current-plan-widget/individual-plan.tsx

@@ -9,33 +9,37 @@ type IndividualPlanProps = Pick<
 
 function IndividualPlan({ plan, remainingTrialDays }: IndividualPlanProps) {
   const { t } = useTranslation()
+  const currentPlanLabel =
+    remainingTrialDays >= 0 ? (
+      remainingTrialDays === 1 ? (
+        <Trans i18nKey="trial_last_day" components={{ b: <strong /> }} />
+      ) : (
+        <Trans
+          i18nKey="trial_remaining_days"
+          components={{ b: <strong /> }}
+          values={{ days: remainingTrialDays }}
+        />
+      )
+    ) : (
+      <Trans i18nKey="premium_plan_label" components={{ b: <strong /> }} />
+    )
 
   return (
-    <Tooltip
-      description={t('plan_tooltip', { plan: plan.name })}
-      id="individual-plan"
-      overlayProps={{ placement: 'bottom' }}
-    >
-      <a
-        href="/learn/how-to/Overleaf_premium_features"
-        className="current-plan-label"
+    <>
+      <span className="current-plan-label visible-xs">{currentPlanLabel}</span>
+      <Tooltip
+        description={t('plan_tooltip', { plan: plan.name })}
+        id="individual-plan"
+        overlayProps={{ placement: 'bottom' }}
       >
-        {remainingTrialDays >= 0 ? (
-          remainingTrialDays === 1 ? (
-            <Trans i18nKey="trial_last_day" components={{ b: <strong /> }} />
-          ) : (
-            <Trans
-              i18nKey="trial_remaining_days"
-              components={{ b: <strong /> }}
-              values={{ days: remainingTrialDays }}
-            />
-          )
-        ) : (
-          <Trans i18nKey="premium_plan_label" components={{ b: <strong /> }} />
-        )}{' '}
-        <span className="info-badge" />
-      </a>
-    </Tooltip>
+        <a
+          href="/learn/how-to/Overleaf_premium_features"
+          className="current-plan-label hidden-xs"
+        >
+          {currentPlanLabel} <span className="info-badge" />
+        </a>
+      </Tooltip>
+    </>
   )
 }
 

services/web/frontend/js/features/project-list/components/modals/edit-tag-modal.tsx

@@ -98,24 +98,32 @@ export default function EditTagModal({
           <div className="modal-footer-left">
             <Button
               onClick={() => runDeleteTag(tag._id)}
-              bsStyle="primary"
+              bsStyle="danger"
               disabled={isDeleteLoading || isRenameLoading}
             >
-              {isDeleteLoading ? <>{t('deleting')} &hellip;</> : t('delete')}
+              {isDeleteLoading ? (
+                <>{t('deleting')} &hellip;</>
+              ) : (
+                t('delete_folder')
+              )}
             </Button>
           </div>
           <Button
             onClick={onClose}
             disabled={isDeleteLoading || isRenameLoading}
           >
-            {t('cancel')}
+            {t('save_or_cancel-cancel')}
           </Button>
           <Button
             onClick={() => runRenameTag(tag._id)}
             bsStyle="primary"
             disabled={isRenameLoading || isDeleteLoading || !newTagName?.length}
           >
-            {isRenameLoading ? <>{t('saving')} &hellip;</> : t('save_changes')}
+            {isRenameLoading ? (
+              <>{t('saving')} &hellip;</>
+            ) : (
+              t('save_or_cancel-save')
+            )}
           </Button>
         </div>
         {(isDeleteError || isRenameError) && (