[37262] Fix modal header icons (#9285)

* [37262] Fix modal header icons

https://community.openproject.org/work_packages/37262

* Add autoheight to onboarding modal

* Render avatar of the user

* Fix different padding for header and align all center

This allows to render different things, not just icons (avatar) while

centering all correctly

app/helpers/users_helper.rb

@@ -99,12 +99,6 @@ module UsersHelper
     result
   end
 
-  ##
-  # Returns the user avatar or a default image
-  def user_avatar_icon
-    op_icon('op-icon icon-context icon-user')
-  end
-
   def change_user_status_buttons(user)
     build_change_user_status_action(user) do |title, name|
       submit_tag(title, name: name, class: 'button')

app/views/layouts/base.html.erb

@@ -169,7 +169,7 @@ See docs/COPYRIGHT.rdoc for more details.
       <% if show_onboarding_modal? %>
         <section data-augmented-model-wrapper
                  data-modal-initialize-now="true"
-                 data-modal-class-name="onboarding-modal -highlight">
+                 data-modal-class-name="onboarding-modal op-modal_autoheight -highlight">
           <%= render partial: '/onboarding/configuration_modal' %>
         </section>
       <% end %>

app/views/onboarding/_configuration_modal.html.erb

@@ -30,7 +30,7 @@ See docs/COPYRIGHT.rdoc for more details.
 <div class="modal-delivery-element">
   <%= labelled_tabular_form_for current_user, url: { action: 'user_settings', controller: 'onboarding' }, html: { id: 'user-form' } do |f| %>
     <div class="op-modal--header op-modal--header_highlight">
-      <%= user_avatar_icon %>
+      <%= avatar(current_user) %>
       <h1 class="op-modal--title">
         <%= I18n.t('onboarding.welcome') %>, <%= current_user.name %>
       </h1>

app/views/onboarding/_menu_item.html.erb

@@ -30,7 +30,7 @@ See docs/COPYRIGHT.rdoc for more details.
   class="op-menu--item"
   data-augmented-model-wrapper
   data-modal-iframe-url="<%= OpenProject::Configuration.onboarding_video_url %>"
-  data-modal-class-name="onboarding-modal -highlight"
+  data-modal-class-name="onboarding-modal op-modal_autoheight -highlight"
 >
   <%= link_to t(:label_introduction_video),
               '',

frontend/src/app/modules/modal/modal-header.component.html

@@ -1,6 +1,6 @@
 <op-icon
   *ngIf="icon"
-  [icon-classes]="icon"
+  icon-classes="{{ icon }} icon-context"
 ></op-icon>
 <h1 class="op-modal--title">
   <ng-content></ng-content>

frontend/src/app/modules/modal/modal.sass

@@ -32,9 +32,10 @@
 
   &--header
     display: flex
-    padding: var(--modal-padding) var(--modal-padding) calc(0.5 * var(--modal-padding)) var(--modal-padding)
+    padding: calc(0.5 * var(--modal-padding)) var(--modal-padding) calc(0.5 * var(--modal-padding)) var(--modal-padding)
     position: relative
     border-bottom: 1px solid #eee
+    align-items: center
 
     &_highlight
       background-color: var(--header-bg-color)
@@ -44,14 +45,6 @@
       *
         color: var(--header-item-font-color)
 
-    .op-icon
-      height: 100%
-      width: 3rem
-      padding: 0.45rem 0
-      display: flex
-      justify-content: center
-      align-items: center
-
   &--body
     display: flex
     flex-direction: column

frontend/src/app/modules/time_entries/shared/modal/base.modal.html

@@ -2,7 +2,11 @@
   class="op-modal op-modal_autoheight loading-indicator--location"
   data-indicator-name="modal"
 >
-  <op-modal-header (close)="closeMe($event)">{{text.title}}</op-modal-header>
+  <op-modal-header
+    icon="icon-log_time"
+    (close)="closeMe($event)">
+    {{text.title}}
+  </op-modal-header>
 
   <div class="ngdialog-body op-modal--body">
     <te-form #editForm