Sync the class change of Edit Column Button to JS code (#23400)gitea

In #22767, we changed the class of `Edit Column` button from `red` to
`primary`
But `red` is used to find this button in js.....

---------

Co-authored-by: techknowlogick <techknowlogick@gitea.io>
Co-authored-by: zeripath <art27@cantab.net>

2 files changed, 23 insertions, 27 deletions

diff --git a/templates/projects/view.tmpl b/templates/projects/view.tmpl
index 474b22a2f..06192f630 100644
--- a/templates/projects/view.tmpl
+++ b/templates/projects/view.tmpl
@@ -128,7 +128,7 @@
 
 											<div class="text right actions">
 												<div class="ui cancel button">{{$.locale.Tr "settings.cancel"}}</div>
-												<button data-url="{{$.Link}}/{{.ID}}" class="ui primary button">{{$.locale.Tr "repo.projects.column.edit"}}</button>
+												<button data-url="{{$.Link}}/{{.ID}}" class="ui primary button edit-column-button">{{$.locale.Tr "repo.projects.column.edit"}}</button>
 											</div>
 										</form>
 									</div>
diff --git a/web_src/js/features/repo-projects.js b/web_src/js/features/repo-projects.js
index 534f51785..a1e177e46 100644
--- a/web_src/js/features/repo-projects.js
+++ b/web_src/js/features/repo-projects.js
@@ -95,39 +95,35 @@ export function initRepoProject() {
   $('.edit-project-board').each(function () {
     const projectHeader = $(this).closest('.board-column-header');
     const projectTitleLabel = projectHeader.find('.board-label');
-    const projectTitleInput = $(this).find(
-      '.content > .form > .field > .project-board-title',
-    );
-    const projectColorInput = $(this).find('.content > .form > .field  #new_board_color');
+    const projectTitleInput = $(this).find('.project-board-title');
+    const projectColorInput = $(this).find('#new_board_color');
     const boardColumn = $(this).closest('.board-column');
 
     if (boardColumn.css('backgroundColor')) {
       setLabelColor(projectHeader, rgbToHex(boardColumn.css('backgroundColor')));
     }
 
-    $(this)
-      .find('.content > .form > .actions > .red')
-      .on('click', function (e) {
-        e.preventDefault();
-
-        $.ajax({
-          url: $(this).data('url'),
-          data: JSON.stringify({title: projectTitleInput.val(), color: projectColorInput.val()}),
-          headers: {
-            'X-Csrf-Token': csrfToken,
-          },
-          contentType: 'application/json',
-          method: 'PUT',
-        }).done(() => {
-          projectTitleLabel.text(projectTitleInput.val());
-          projectTitleInput.closest('form').removeClass('dirty');
-          if (projectColorInput.val()) {
-            setLabelColor(projectHeader, projectColorInput.val());
-          }
-          boardColumn.attr('style', `background: ${projectColorInput.val()}!important`);
-          $('.ui.modal').modal('hide');
-        });
+    $(this).find('.edit-column-button').on('click', function (e) {
+      e.preventDefault();
+
+      $.ajax({
+        url: $(this).data('url'),
+        data: JSON.stringify({title: projectTitleInput.val(), color: projectColorInput.val()}),
+        headers: {
+          'X-Csrf-Token': csrfToken,
+        },
+        contentType: 'application/json',
+        method: 'PUT',
+      }).done(() => {
+        projectTitleLabel.text(projectTitleInput.val());
+        projectTitleInput.closest('form').removeClass('dirty');
+        if (projectColorInput.val()) {
+          setLabelColor(projectHeader, projectColorInput.val());
+        }
+        boardColumn.attr('style', `background: ${projectColorInput.val()}!important`);
+        $('.ui.modal').modal('hide');
       });
+    });
   });
 
   $(document).on('click', '.set-default-project-board', async function (e) {