Use mat-fab for the round button

src/app/dars/audit/audit.component.html

@@ -167,8 +167,8 @@
 
                 <div class="subrequirement-status-wrapper">
                   <p *ngIf="reqBody.contentType === 'okSubrequirementTLine' || reqBody.contentType === 'noSubrequirementTLine'">
-                      <cse-audit-symbol 
-                        *ngFor="let symbol of asLineBody(reqBody).lines | requirementSymbols" 
+                      <cse-audit-symbol
+                        *ngFor="let symbol of asLineBody(reqBody).lines | requirementSymbols"
                         [symbol]="symbol"
                       ></cse-audit-symbol>
                   </p>
@@ -258,12 +258,14 @@
 
     </mat-accordion>
   </section>
-  <button (click)="scrollTop();"
-        class="audit-scrolltop"
-        [hidden]="!scrolling"
-        aria-label="Scroll to top"
-        matTooltip="Scroll to top"
-        matTooltipPosition="above">
-        <i class="material-icons">arrow_upward</i>
-      </button>
+  <button
+    (click)="scrollTop();"
+    class="audit-scrolltop"
+    *ngIf="scrolling"
+    mat-fab
+    aria-label="Scroll to top"
+    matTooltip="Scroll to top"
+    matTooltipPosition="above">
+    <i class="material-icons">arrow_upward</i>
+  </button>
 </mat-card>
\ No newline at end of file

src/app/dars/metadata-mobile-view/metadata-mobile-view.component.html

@@ -38,14 +38,16 @@
           </button>
         </div>
       </mat-card-footer>
-      <button (click)="scrollTop();"
-        class="audit-scrolltop"
-        [hidden]="!scrolling"
-        aria-label="Scroll to top"
-        matTooltip="Scroll to top"
-        matTooltipPosition="above">
-        <i class="material-icons">arrow_upward</i>
-      </button>
     </mat-card>
+    <button
+      (click)="scrollTop();"
+      class="audit-scrolltop"
+      *ngIf="scrolling"
+      mat-fab
+      aria-label="Scroll to top"
+      matTooltip="Scroll to top"
+      matTooltipPosition="above">
+      <i class="material-icons">arrow_upward</i>
+    </button>
   </div>
 </div>

src/assets/sass/general.scss

@@ -423,24 +423,14 @@ main {
 
 // Scroll to the top
 .audit-scrolltop {
-  background-color: #c5050c;
-  width: 55px;
-  height: 55px;
-  position: fixed;
+  position: fixed !important;
   right: 24px;
   bottom: 30px;
-  color: #fff;
-  text-align: center;
-  font-weight: 800;
-  border-radius: 50%;
-  line-height: 6em;
-  border: none;
-  cursor: pointer;
   z-index: 999;
-  transform: translate(0, 20px);
   transition: all 0.5s;
-  &:hover {
-    background-color: #a70007;
+  &:hover,
+  &:focus {
+    background-color: #920309;
   }
 }