Keep scroll-to-top styling inline with designs

Author: jacbn

src/app/components/site/ScrollToTop.tsx

@@ -1,5 +1,7 @@
 import React, { useCallback, useEffect } from "react";
 import classNames from "classnames";
+import { siteSpecific } from "../../services";
+import { Button } from "reactstrap";
 
 export const ScrollToTop = ({mainContent}: {mainContent: React.MutableRefObject<HTMLElement | null>}) => {
     const [sticky, setSticky] = React.useState(false);
@@ -15,10 +17,24 @@ export const ScrollToTop = ({mainContent}: {mainContent: React.MutableRefObject<
         };
     }, [isSticky]);
 
-    return <button 
-        onClick={() => mainContent.current?.scrollIntoView({behavior: 'smooth'})} 
-        className={classNames("scroll-btn d-print-none", {"is-sticky": sticky})}
-    >
-        <img src="/assets/common/icons/chevron-up.svg" alt="Scroll to top of page"/>
-    </button>;
-};
+    return siteSpecific(
+        <Button 
+            color="keyline" 
+            className={classNames("scroll-btn d-print-none p-2", {"is-sticky": sticky})}
+            onClick={() => mainContent.current?.scrollIntoView({behavior: 'smooth'})}
+            tabIndex={sticky ? 0 : -1}
+            aria-label="Scroll to top of page"
+            data-bs-theme="neutral"
+        >
+            <i className="icon icon-chevron-up"/>
+        </Button>,
+    
+        <button 
+            onClick={() => mainContent.current?.scrollIntoView({behavior: 'smooth'})} 
+            className={classNames("scroll-btn d-print-none", {"is-sticky": sticky})}
+            tabIndex={sticky ? 0 : -1}
+        >
+            <img src="/assets/common/icons/chevron-up.svg" alt="Scroll to top of page"/>
+        </button>
+    );
+};

src/scss/common/scroll-button.scss

@@ -1,24 +1,31 @@
-.scroll-btn {
+button.btn.scroll-btn {
   position: fixed;
-  display: none; // If not in use hide
+  opacity: 0;
   height: 45px;
   width: 45px;
   justify-content: center;
   align-items: center;
   bottom: 10px;
   right: 10px;
   box-shadow: 2px 2px 10px 0 #0004;
-  background-color: #fff !important;
+  background-color: #fff;
   border-radius: 50%;
   transition: opacity 0.1s linear;
   z-index: 101;
-  img {
+
+  &.is-sticky {
+    opacity: 1;
+    display: flex;
+    // TODO: animate opacity on destruction
+  }
+  
+  > img {
     margin-top: -4px;
     height: 80%;
     width: 80%;
   }
-}
 
-.is-sticky {
-  display: flex;
+  > i {
+    mask-size: 20px;
+  }
 }

src/scss/phy/header.scss

@@ -191,6 +191,7 @@ header {
     .accordion-body {
       background: $color-neutral-50;
       padding-top: 1rem;
+      padding-bottom: 1rem;
 
       > a:hover {
         background: $color-neutral-100;

src/scss/phy/icons.scss

@@ -115,6 +115,11 @@
   @include svg-icon('/assets/phy/icons/redesign/chevron-down.svg', 16px, 16px);
 }
 
+.icon-chevron-up {
+  @include svg-icon('/assets/phy/icons/redesign/chevron-down.svg', 16px, 16px);
+  transform: rotate(180deg);
+}
+
 .icon-question-pack {
   @include svg-icon-layered(
     '/assets/phy/icons/redesign/question-pack-fg.svg',