5389: style button as link

Author: Sine Jespersen

src/stories/Library/Lists/list-reservation/ListReservationsAndLoans.tsx

@@ -46,17 +46,17 @@ export const ListReservationsAndLoans = (
                 {material.description}
               </p>
             </div>
-            <a
-              href={material.noteUrl}
+            <button
+              type="button"
               aria-label="note about material"
-              className={`list-reservation__note-desktop text-small-caption ${
+              className={`list-reservation__note-desktop ${
                 material.noteAsWarning
                   ? "color-signal-alert"
                   : "color-secondary-gray"
               }`}
             >
               {material.noteLabel}
-            </a>
+            </button>
           </div>
         </div>
 
@@ -83,7 +83,7 @@ export const ListReservationsAndLoans = (
               <p className="text-small-caption">{statusNotes}</p>
               <a
                 href={material.noteUrl}
-                className={`list-reservation__note-mobile text-small-caption ${
+                className={`list-reservation__note-mobile ${
                   material.noteAsWarning
                     ? "color-signal-alert"
                     : "color-secondary-gray"

src/stories/Library/Lists/list-reservation/list-reservation.scss

@@ -27,18 +27,25 @@ $list-reservation-space-desktop: 24px;
 }
 
 .list-reservation__note-mobile {
+  all: unset;
   display: block;
   margin-top: 4px;
   white-space: break-spaces;
-  font-size: 12px;
+  text-decoration: underline;
+  @extend .text-small-caption;
+  @extend .color-secondary-gray;
 
   @include breakpoint-s {
     display: none;
   }
 }
 
 .list-reservation__note-desktop {
+  all: unset;
   display: none;
+  text-decoration: underline;
+  @extend .text-small-caption;
+  @extend .color-secondary-gray;
 
   @include breakpoint-s {
     display: block;