Merge pull request #10342 from overleaf/ds-buttons-project-page

New buttons on project dashboard

GitOrigin-RevId: 6e6a93a1ca1264dd214ccaf7976b665e45e7b10b

services/web/app/views/project/list/modals.pug

@@ -24,7 +24,7 @@ script(type='text/ng-template', id='newTagModalTemplate')
 			span.text-danger.error(ng-show="state.error") #{translate("generic_something_went_wrong")}
 		//- We stop propagation to stop the clicks from closing the
 		//- 'move to folder' menu.
-		button.btn.btn-default(
+		button.btn.btn-secondary(
 			ng-click="cancel()"
 			stop-propagation="click"
 		) #{translate("cancel")}
@@ -54,7 +54,7 @@ script(type='text/ng-template', id='deleteTagModalTemplate')
 	.modal-footer
 		.modal-footer-left
 			span.text-danger.error(ng-show="state.error") #{translate("generic_something_went_wrong")}
-		button.btn.btn-default(
+		button.btn.btn-secondary(
 			ng-click="cancel()"
 		) #{translate("cancel")}
 		button.btn.btn-danger(
@@ -87,7 +87,7 @@ script(type='text/ng-template', id='renameTagModalTemplate')
 	.modal-footer
 		.modal-footer-left
 			span.text-danger.error(ng-show="state.error") #{translate("generic_something_went_wrong")}
-		button.btn.btn-default(ng-click="cancel()") #{translate("cancel")}
+		button.btn.btn-secondary(ng-click="cancel()") #{translate("cancel")}
 		button.btn.btn-primary(
 			ng-click="rename()",
 			ng-disabled="renameTagForm.$invalid || state.inflight"
@@ -118,7 +118,7 @@ script(type='text/ng-template', id='renameProjectModalTemplate')
 				focus-on="open"
 			)
 	.modal-footer
-		button.btn.btn-default(ng-click="cancel()") #{translate("cancel")}
+		button.btn.btn-secondary(ng-click="cancel()") #{translate("cancel")}
 		button.btn.btn-primary(
 			ng-click="rename()",
 			ng-disabled="renameProjectForm.$invalid || state.inflight"
@@ -151,7 +151,7 @@ script(type='text/ng-template', id='cloneProjectModalTemplate')
 					focus-on="open"
 				)
 	.modal-footer
-		button.btn.btn-default(
+		button.btn.btn-secondary(
 			ng-disabled="state.inflight"
 			ng-click="cancel()"
 		) #{translate("cancel")}
@@ -185,7 +185,7 @@ script(type='text/ng-template', id='newProjectModalTemplate')
 				focus-on="open"
 			)
 	.modal-footer
-		button.btn.btn-default(
+		button.btn.btn-secondary(
 			ng-disabled="state.inflight"
 			ng-click="cancel()"
 		) #{translate("cancel")}
@@ -249,7 +249,7 @@ script(type='text/ng-template', id='archiveTrashLeaveOrDeleteProjectsModalTempla
 				i.fa.fa-fw.fa-exclamation-triangle
 				.project-action-alert-msg #{translate("this_action_cannot_be_undone")}
 	.modal-footer
-		button.btn.btn-default(
+		button.btn.btn-secondary(
 			ng-click="cancel()"
 		) #{translate("cancel")}
 		button.btn.btn-danger(
@@ -300,4 +300,4 @@ script(type="text/ng-template", id="uploadProjectModalTemplate")
 		on-complete-callback="onComplete"
 	)
 	.modal-footer
-		button.btn.btn-default(ng-click="cancel()") #{translate("cancel")}
+		button.btn.btn-secondary(ng-click="cancel()") #{translate("cancel")}

services/web/app/views/project/list/project-list.pug

@@ -30,7 +30,7 @@ include ./_current_plan_mixins
 				+current_plan()
 			.btn-toolbar
 				.btn-group(ng-hide="selectedProjects.length < 1")
-					a.btn.btn-default(
+					a.btn.btn-secondary(
 						href,
 						aria-label=translate('download'),
 						tooltip=translate('download'),
@@ -39,7 +39,7 @@ include ./_current_plan_mixins
 						ng-click="downloadSelectedProjects()"
 					)
 						i.fa.fa-cloud-download(aria-hidden="true")
-					a.btn.btn-default(
+					a.btn.btn-secondary(
 						href,
 						ng-if="filter !== 'archived'"
 						aria-label=translate("archive"),
@@ -49,7 +49,7 @@ include ./_current_plan_mixins
 						ng-click="openArchiveProjectsModal()"
 					)
 						i.fa.fa-inbox(aria-hidden="true")
-					a.btn.btn-default(
+					a.btn.btn-secondary(
 						href,
 						ng-if="filter !== 'trashed'"
 						aria-label=translate("trash"),
@@ -63,7 +63,7 @@ include ./_current_plan_mixins
 					ng-hide="selectedProjects.length < 1 || filter === 'archived' || filter === 'trashed'", 
 					dropdown
 				)
-					a.btn.btn-default.dropdown-toggle(
+					a.btn.btn-secondary.dropdown-toggle(
 						href,
 						data-toggle="dropdown",
 						dropdown-toggle,
@@ -102,7 +102,7 @@ include ./_current_plan_mixins
 					ng-hide="selectedProjects.length != 1  || filter === 'archived' || filter === 'trashed'", 
 					dropdown
 				)
-					a.btn.btn-default.dropdown-toggle(
+					a.btn.btn-secondary.dropdown-toggle(
 						href,
 						data-toggle="dropdown",
 						dropdown-toggle
@@ -121,7 +121,7 @@ include ./_current_plan_mixins
 							) #{translate("make_copy")}
 
 				.btn-group(ng-show="filter === 'archived' && selectedProjects.length > 0")
-					a.btn.btn-default(
+					a.btn.btn-secondary(
 						href,
 						data-original-title=translate("unarchive"),
 						data-toggle="tooltip",
@@ -130,7 +130,7 @@ include ./_current_plan_mixins
 					) #{translate("unarchive")}
 
 				.btn-group(ng-show="filter === 'trashed' && selectedProjects.length > 0")
-					a.btn.btn-default(
+					a.btn.btn-secondary(
 						href,
 						data-original-title=translate("untrash"),
 						data-toggle="tooltip",

services/web/frontend/js/features/project-list/components/modals/projects-action-modal.tsx

@@ -127,7 +127,7 @@ function ProjectsActionModal({
               {getUserFacingMessage(e.error)}
             </Alert>
           ))}
-        <button className="btn btn-default" onClick={handleCloseModal}>
+        <button className="btn btn-secondary" onClick={handleCloseModal}>
           {t('cancel')}
         </button>
         <button

services/web/frontend/js/features/project-list/components/table/project-tools/buttons/archive-projects-button.tsx

@@ -45,7 +45,7 @@ function ArchiveProjectsButton() {
         overlayProps={{ placement: 'bottom', trigger: ['hover', 'focus'] }}
       >
         <button
-          className="btn btn-default"
+          className="btn btn-secondary"
           aria-label={text}
           onClick={handleOpenModal}
         >

services/web/frontend/js/features/project-list/components/table/project-tools/buttons/download-projects-button.tsx

@@ -35,7 +35,7 @@ function DownloadProjectsButton() {
       overlayProps={{ placement: 'bottom', trigger: ['hover', 'focus'] }}
     >
       <button
-        className="btn btn-default"
+        className="btn btn-secondary"
         aria-label={text}
         onClick={handleDownloadProjects}
       >

services/web/frontend/js/features/project-list/components/table/project-tools/buttons/project-tools-more-dropdown-button.tsx

@@ -9,7 +9,9 @@ function ProjectToolsMoreDropdownButton() {
   const { t } = useTranslation()
   return (
     <ControlledDropdown id="project-tools-more-dropdown">
-      <Dropdown.Toggle>{t('more')}</Dropdown.Toggle>
+      <Dropdown.Toggle bsStyle={null} className="btn-secondary">
+        {t('more')}
+      </Dropdown.Toggle>
       <Dropdown.Menu className="dropdown-menu-right">
         <RenameProjectMenuItem />
         <CopyProjectMenuItem />

services/web/frontend/js/features/project-list/components/table/project-tools/buttons/tags-dropdown.tsx

@@ -84,7 +84,8 @@ function TagsDropdown() {
     <>
       <ControlledDropdown id="tags">
         <Dropdown.Toggle
-          bsStyle="default"
+          bsStyle={null}
+          className="btn-secondary"
           title={t('tags')}
           aria-label={t('tags')}
         >

services/web/frontend/js/features/project-list/components/table/project-tools/buttons/trash-projects-button.tsx

@@ -45,7 +45,7 @@ function TrashProjectsButton() {
         overlayProps={{ placement: 'bottom', trigger: ['hover', 'focus'] }}
       >
         <button
-          className="btn btn-default"
+          className="btn btn-secondary"
           aria-label={text}
           onClick={handleOpenModal}
         >

services/web/frontend/js/features/project-list/components/table/project-tools/buttons/unarchive-projects-button.tsx

@@ -15,7 +15,15 @@ function UnarchiveProjectsButton() {
     }
   }
 
-  return <Button onClick={handleUnarchiveProjects}>{t('unarchive')}</Button>
+  return (
+    <Button
+      bsStyle={null}
+      className="btn-secondary"
+      onClick={handleUnarchiveProjects}
+    >
+      {t('unarchive')}
+    </Button>
+  )
 }
 
 export default memo(UnarchiveProjectsButton)

services/web/frontend/js/features/project-list/components/table/project-tools/buttons/untrash-projects-button.tsx

@@ -15,7 +15,15 @@ function UntrashProjectsButton() {
     }
   }
 
-  return <Button onClick={handleUntrashProjects}>{t('untrash')}</Button>
+  return (
+    <Button
+      bsStyle={null}
+      className="btn-secondary"
+      onClick={handleUntrashProjects}
+    >
+      {t('untrash')}
+    </Button>
+  )
 }
 
 export default memo(UntrashProjectsButton)