Update edit file buttons and spacing

MR: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/60318

app/assets/stylesheets/pages/editor.scss

@@ -37,10 +37,6 @@
 
   .file-title {
     @include gl-font-monospace;
-    line-height: 35px;
-    padding-top: 7px;
-    padding-bottom: 7px;
-    display: flex;
   }
 
   .editor-ref {
@@ -69,19 +65,15 @@
   }
 
   .file-buttons {
-    display: flex;
     flex: 1;
-    justify-content: flex-end;
   }
 
   .soft-wrap-toggle {
-    display: inline-block;
-    vertical-align: top;
     font-family: $regular-font;
-    margin: 0 $btn-side-margin;
+    margin-left: $gl-padding-8;
 
     .soft-wrap {
-      display: block;
+      display: inline-flex;
     }
 
     .no-wrap {
@@ -94,7 +86,7 @@
       }
 
       .no-wrap {
-        display: block;
+        display: inline-flex;
       }
     }
   }
@@ -111,17 +103,21 @@
     .new-file-path {
       max-width: none;
       width: 100%;
-      margin-bottom: 3px;
+      margin-top: $gl-padding-8;
     }
 
     .file-buttons {
-      display: block;
+      display: flex;
+      flex-direction: column;
       width: 100%;
-      margin-bottom: 10px;
+
+      .md-header-toolbar {
+        margin: $gl-padding 0;
+      }
 
       .soft-wrap-toggle {
         width: 100%;
-        margin: 3px 0;
+        margin-left: 0;
       }
 
       @media(max-width: map-get($grid-breakpoints, md)-1) {

app/views/projects/_commit_button.html.haml

-.form-actions
+.form-actions.gl-display-flex
   = button_tag 'Commit changes', id: 'commit-changes', class: 'gl-button btn btn-confirm js-commit-button  qa-commit-button'
 
   = link_to 'Cancel', cancel_path,
-            class: 'gl-button btn btn-default btn-cancel', data: {confirm: leave_edit_message}
+            class: 'gl-button btn btn-default gl-ml-3', data: {confirm: leave_edit_message}
 
   = render 'shared/projects/edit_information'

app/views/projects/blob/_editor.html.haml

@@ -3,7 +3,7 @@
 - is_markdown = Gitlab::MarkupHelper.gitlab_markdown?(file_name)
 
 .file-holder-bottom-radius.file-holder.file.gl-mb-3
-  .js-file-title.file-title.align-items-center.clearfix{ data: { current_action: action } }
+  .js-file-title.file-title.gl-display-flex.gl-align-items-center.clearfix{ data: { current_action: action } }
     .editor-ref.block-truncated.has-tooltip{ title: ref }
       = sprite_icon('fork', size: 12)
       = ref
@@ -26,16 +26,18 @@
           dismiss_key: @project.id,
           human_access: human_access } }
 
-    .file-buttons
+    .file-buttons.gl-display-flex.gl-align-items-center.gl-justify-content-end
       - if is_markdown
         = render 'shared/blob/markdown_buttons', show_fullscreen_button: false
-      = button_tag class: 'soft-wrap-toggle btn gl-button', type: 'button', tabindex: '-1' do
-        %span.no-wrap
-          = custom_icon('icon_no_wrap')
-          No wrap
-        %span.soft-wrap
-          = custom_icon('icon_soft_wrap')
-          Soft wrap
+      = button_tag class: 'soft-wrap-toggle btn gl-button btn-default', type: 'button', tabindex: '-1' do
+        .no-wrap
+          = sprite_icon('soft-unwrap', css_class: 'gl-button-icon')
+          %span.gl-button-text
+            No wrap
+        .soft-wrap
+          = sprite_icon('soft-wrap', css_class: 'gl-button-icon')
+          %span.gl-button-text
+            Soft wrap
 
   .file-editor.code
     .js-edit-mode-pane.qa-editor#editor{ data: { 'editor-loading': true } }<

changelogs/unreleased/273316-update-edit-file-buttons.yml

+---
+title: Update edit file buttons and spacing
+merge_request: 60318
+author:
+type: changed