Restyle project deletion and restoration containers

Changed the project deletion container to use a new danger UI and
updated the project restoration container to use gl-alert whilst moving
it to the top of the advanced section

Changelog: changed
MR: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/82313
EE: true

app/assets/stylesheets/utilities.scss

@@ -366,3 +366,8 @@ to @gitlab/ui by https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1709
   /* stylelint-disable property-no-vendor-prefix */
   -webkit-backdrop-filter: blur(2px); // still required by Safari
 }
+
+// Will be moved to @gitlab/ui by https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/2708
+.gl-inset-border-l-3-red-600 {
+  box-shadow: inset $gl-border-size-3 0 0 0 $red-600;
+}

app/views/projects/edit.html.haml

@@ -66,6 +66,8 @@
     %p= s_('ProjectSettings|Housekeeping, export, archive, change path, transfer, and delete.')
 
   .settings-content
+    = render_if_exists 'projects/settings/restore', project: @project
+
     .sub-section
       %h4= _('Housekeeping')
       %p

ee/app/helpers/ee/projects_helper.rb

@@ -99,7 +99,7 @@ module EE
     end
 
     def permanent_delete_message(project)
-      message = _('This action deletes %{codeOpen}%{project_path_with_namespace}%{codeClose} and everything this project contains. %{strongOpen}There is no going back%{strongClose}')
+      message = _('This action deletes %{codeOpen}%{project_path_with_namespace}%{codeClose} and everything this project contains. %{strongOpen}There is no going back.%{strongClose}')
       html_escape(message) % remove_message_data(project)
     end
 

ee/app/views/projects/_remove.html.haml

@@ -8,8 +8,8 @@
 - forks_count = Projects::ForksCountService.new(project).count
 
 - unless project.marked_for_deletion?
-  .sub-section
-    %h4.danger-title= _('Delete this project')
+  .gl-bg-red-50.gl-inset-border-l-3-red-600.gl-py-5.gl-px-6
+    %h4.gl-font-lg.gl-mt-0= _('Delete this project')
     - if adjourned_deletion && can_delay_project_deletions
       = render 'projects/settings/marked_for_removal'
     - else
@@ -20,5 +20,4 @@
     - else
       #js-project-delete-button{ data: { form_path: project_path(project), confirm_phrase: delete_confirm_phrase(project), is_fork: project.forked?.to_s, issues_count: number_with_delimiter(issues_count), merge_requests_count: number_with_delimiter(merge_requests_count), forks_count: number_with_delimiter(forks_count), stars_count: number_with_delimiter(project.star_count) } }
 - else
-  = render 'projects/settings/restore', project: project
   = render 'projects/settings/permanently_delete', project: project

ee/app/views/projects/settings/_permanently_delete.html.haml

@@ -2,7 +2,7 @@
 - issues_count = Projects::AllIssuesCountService.new(project).count
 - forks_count = Projects::ForksCountService.new(project).count
 
-.sub-section
-  %h4.danger-title= _('Delete this project')
+.gl-bg-red-50.gl-inset-border-l-3-red-600.gl-py-5.gl-px-6
+  %h4.gl-font-lg.gl-mt-0= _('Delete this project')
   %p= permanent_delete_message(project)
   #js-project-delete-button{ data: { form_path: project_path(project, permanently_delete: true), confirm_phrase: delete_confirm_phrase(project), is_fork: project.forked?.to_s, issues_count: number_with_delimiter(issues_count), merge_requests_count: number_with_delimiter(merge_requests_count), forks_count: number_with_delimiter(forks_count), stars_count: number_with_delimiter(project.star_count) } }

ee/app/views/projects/settings/_restore.html.haml

+- return unless @project.marked_for_deletion?
 - return unless project.feature_available?(:adjourned_deletion_for_projects_and_groups)
 
 - date = permanent_deletion_date(project.marked_for_deletion_at)
-.sub-section
-  %h4= _('Restore project')
-  %p
-    %strong= _('This project will be deleted on %{date}') %{ date: date }
-  %p
-    = _("Restoring the project will prevent the project from being removed on this date and restore people's ability to make changes to it.")
-    = _("The repository can be committed to, and issues, comments and other entities can be created.")
-    %strong= _('Only active projects show up in the search and on the dashboard.')
-  = link_to _('Restore project'), namespace_project_restore_path(project.namespace, project),
-      method: :post, class: "gl-button btn"
+
+.gl-alert.gl-alert-warning.gl-mb-7{ role: 'alert' }
+  .gl-alert-container
+    = sprite_icon('warning', css_class: "gl-icon gl-alert-icon")
+    .gl-alert-content
+      %h4.gl-alert-title= _('This project will be deleted on %{date}') %{ date: date }
+      .gl-alert-body
+        %p
+          = _("Restoring the project will prevent the project from being removed on this date and restore people's ability to make changes to it.")
+          = _("The repository can be committed to, and issues, comments and other entities can be created.")
+          = _('Only active projects show up in the search and on the dashboard.')
+        = link_to _('Restore project'), namespace_project_restore_path(project.namespace, project),
+            method: :post, class: "gl-button btn btn-confirm"

locale/gitlab.pot

@@ -37482,7 +37482,7 @@ msgstr ""
 msgid "This action cannot be undone, and will permanently delete the %{key} SSH key"
 msgstr ""
 
-msgid "This action deletes %{codeOpen}%{project_path_with_namespace}%{codeClose} and everything this project contains. %{strongOpen}There is no going back%{strongClose}"
+msgid "This action deletes %{codeOpen}%{project_path_with_namespace}%{codeClose} and everything this project contains. %{strongOpen}There is no going back.%{strongClose}"
 msgstr ""
 
 msgid "This action deletes %{codeOpen}%{project_path_with_namespace}%{codeClose} on %{date} and everything this project contains."