feat: style link like a back button

Dataport · Sep 3, 2024 · bc0a51e · bc0a51e
1 parent 828a5d2
commit bc0a51e
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 26 deletions.
diff --git a/src/app/plain-language/plain-language.component.ts b/src/app/plain-language/plain-language.component.ts
@@ -13,11 +13,7 @@ import {Location, NgOptimizedImage} from "@angular/common";
   ],
   template: `
     <div class="d-flex flex-column px-4">
-      <a class="back-link" href="#" (click)="location.back()">
-        <img ngSrc="../../assets/back-blue.svg" class="back-btn" aria-hidden="true" width="width" height="height" alt="chevron-left">
-        {{ 'accessibility.plainLanguage.backToTheFuture' | translate }}
-      </a>
-      <h2 class="mt-4">{{ 'accessibility.plainLanguage.header' | translate }}</h2>
+      <h2>{{ 'accessibility.plainLanguage.header' | translate }}</h2>
       <p class="multiline">{{ 'accessibility.plainLanguage.content' | translate }}</p>
       <h3>{{ 'accessibility.plainLanguage.about.header' | translate }}</h3>
       <p class="multiline">{{ 'accessibility.plainLanguage.about.content' | translate }}</p>
@@ -27,8 +23,14 @@ import {Location, NgOptimizedImage} from "@angular/common";
           : {{ 'accessibility.plainLanguage.howto.steps.' + step + '.header' | translate }}</h4>
         <p class="multiline" [innerHTML]="'accessibility.plainLanguage.howto.steps.' + step + '.content' | translate"></p>
       }
+
       <h3>{{ 'accessibility.plainLanguage.declarationOnAccessibility.header' | translate }}</h3>
-      <p class="multiline" [innerHTML]="'accessibility.plainLanguage.declarationOnAccessibility.content' | translate"></p>
+      <p class="multiline mb-4" [innerHTML]="'accessibility.plainLanguage.declarationOnAccessibility.content' | translate"></p>
+      <a class="back-link btn btn-secondary btn-with-image w-100 d-flex justify-content-between" href="#" (click)="location.back()">
+        <img ngSrc="../../assets/back.svg" class="back-btn" aria-hidden="true" width="width" height="2.75rem" alt="chevron-left">
+        {{ 'accessibility.plainLanguage.backToTheFuture' | translate }}
+        <div class="hidden"></div>
+      </a>
     </div>
   `,
   styleUrl: './plain-language.component.scss'

diff --git a/src/app/sign-language/sign-language.component.ts b/src/app/sign-language/sign-language.component.ts
@@ -15,12 +15,7 @@ import {DGoLiveVideoPlayerComponent} from "../shared/components/video-player/d-g
   ],
   template: `
     <div class="d-flex flex-column px-4">
-      <a class="back-link" href="#" (click)="location.back()">
-        <img ngSrc="../../assets/back-blue.svg" class="back-btn" aria-hidden="true" width="width" height="height"
-             alt="chevron-left">
-        {{ 'accessibility.signLanguage.backToTheFuture' | translate }}
-      </a>
-      <h2 class="mt-4">{{ 'accessibility.signLanguage.header' | translate }}</h2>
+      <h2>{{ 'accessibility.signLanguage.header' | translate }}</h2>
       <p>{{ 'accessibility.signLanguage.content' | translate }}</p>
 
       @for (video of videos; track video) {
@@ -29,6 +24,13 @@ import {DGoLiveVideoPlayerComponent} from "../shared/components/video-player/d-g
           <app-video-player [src]="video.src" [title]="video.titleTranslateString | translate"></app-video-player>
         </div>
       }
+
+      <a class="back-link btn btn-secondary btn-with-image w-100 d-flex justify-content-between" href="#" (click)="location.back()">
+        <img ngSrc="../../assets/back.svg" class="back-btn" aria-hidden="true" width="width" height="height"
+             alt="chevron-left">
+        {{ 'accessibility.signLanguage.backToTheFuture' | translate }}
+        <div class="hidden"></div>
+      </a>
     </div>
   `,
   styleUrl: './sign-language.component.scss'

diff --git a/src/assets/back-blue.svg b/src/assets/back-blue.svg