DM-5349: Change edit profile button from icon to button (#1135)

Co-authored-by: Camille Villa <[email protected]>

app/assets/stylesheets/dm/components/_profile.scss

@@ -38,17 +38,6 @@
   position: relative;
 }
 
-.edit-profile-link {
-  @extend .usa-link;
-  text-decoration: none !important;
-
-  .edit-profile-icon {
-    &:after {
-      text-decoration: none;
-    }
-  }
-}
-
 .cancel-edit-profile-link {
   &:hover {
     text-decoration: none !important;

app/views/users/show.html.erb

@@ -17,11 +17,6 @@
         </div>
         <div class="usa-layout-docs__main desktop:grid-col-fill">
           <h1 class='profile-h1 font-sans-2xl display-inline-block margin-bottom-1 margin-top-0'><%= @user.full_name %></h1>
-          <div class="display-inline-block margin-left-2">
-            <% if current_user == @user %>
-              <%= link_to '', edit_profile_path, class: 'edit-profile-link fas fa-edit display-inline-block text-no-underline' %>
-            <% end %>
-          </div>
           <div class='profile-job-title font-sans-lg margin-top-1'><%= @user.job_title %></div>
           <% unless @user.location.blank? %>
             <p class="margin-top-205">
@@ -47,6 +42,9 @@
               </span>
             </p>
           <% end %>
+          <% if current_user == @user %>
+              <%= link_to 'Edit profile', edit_profile_path, class: 'usa-button usa-button--outline display-inline-block margin-top-2' %>
+            <% end %>
         </div>
       </div>
       <div class="grid-row margin-bottom-8">

spec/features/users/user_profile_spec.rb

@@ -27,7 +27,7 @@
   it 'should have edit profile button for logged in user' do
     login_as(@user, scope: :user, run_callbacks: false)
     visit "/users/#{@user.id}"
-    expect(page).to have_selector('.edit-profile-link')
+    expect(page).to have_content('Edit profile')
   end
 
   it 'if not logged in, should be redirected to landing page when accessing account edit' do