fix(public-search): unify renew button appearance with pro view

Co-Authored-by: Nathan Python <nathan.python@hes-so.ch

Author: Nathan Python

projects/public-search/src/app/patron-profile/patron-profile-loans/patron-profile-loan/patron-profile-loan.component.html

@@ -27,9 +27,12 @@
       </dl>
       </public-search-patron-profile-document>
       <dl class="ui:md:hidden">
-        <dt translate>Due date</dt>
-        <dd [ngClass]="{ 'ui:font-bold text-success': actionSuccess}">{{ record.metadata.end_date | dateTranslate :'shortDate' }}</dd>
-      </dl>
+            <dt>
+              <span translate>ITEM_ON_LOAN</span>
+              <i class="fa fa-arrow-right" aria-hidden="true"></i>
+            </dt>
+      <dd>{{ record.metadata.end_date | dateTranslate :'shortDate' }}</dd>
+          </dl>
       <div class="ui:md:hidden">
         <ng-container [ngTemplateOutlet]="tags" />
       </div>
@@ -38,17 +41,35 @@
   <!-- DUE DATE & BADGES -->
   <div class="ui:md:col-span-2 ui:col-span-12 ui:hidden ui:md:block">
     <div>
-      <span [ngClass]="{ 'ui:font-bold text-success': actionSuccess}">
-        {{ record.metadata.end_date | dateTranslate :'shortDate' }}
-      </span>
+      <div class="ui:flex ui:items-center ui:gap-2">
+        <span translate>ITEM_ON_LOAN</span>
+        <i class="fa fa-arrow-right" aria-hidden="true"></i>
+        <span>
+          {{ record.metadata.end_date | dateTranslate :'shortDate' }}
+        </span>
+      </div>
     </div>
     <ng-container [ngTemplateOutlet]="tags" />
   </div>
   <!-- ACTION BUTTONS COLUMN -->
   <div class="ui:md:col-span-2 ui:col-span-12 ui:flex ui:justify-end">
-    <p-button
+   
+    <p-button *ngIf="actionDone"
+      size="small"
+      class="ui:pointer-events-auto p-disabled"
+      disabled="true"
+      severity="secondary"
+      [outlined]="true"
+      [label]="'prolongé'"
+      [icon]="'fa fa-refresh text-success'"
+    ></p-button>
+
+    <!-- SHOW RENEW BUTTON WHEN NOT DONE -->
+    <p-button *ngIf="!actionDone"
       size="small"
       class="ui:pointer-events-auto"
+      severity="secondary"
+      [outlined]="true"
       [pTooltip]="canExtend.reasons | arrayTranslate | join:' / '"
       tooltipPosition="top"
       [tooltipDisabled]="canExtend.can"
@@ -64,7 +85,7 @@
   @if (record.metadata.extension_count && record.metadata.extension_count > 0) {
     <p-tag  styleClass="ui:mt-1" severity="secondary">
       {{ record.metadata.extension_count }}
-      {{ record.metadata.extension_count | i18nPlural: {'=1': 'renewal', 'other': 'renewals'} | translate }}
+      <i class="fa fa-refresh ui:ml-1" aria-hidden="true"></i>
     </p-tag>
   }
   @if (record.metadata.overdue) {