applied variables and buttons styles

components/footer.js

@@ -20,6 +20,18 @@ export default function Footer(props) {
 
     return (
         <footer className="govuk-footer " role="contentinfo">
+            <div class="sharebar" id="sharebar">
+                <div class="sharebar__components container-fluid">
+                    <div class="main__sharebar">
+                        <div
+                            id="sharebar__backtotop"
+                            class="btn--outlined btn--arrow-up"
+                        >
+                            <a href="#page_wrapper">Back to top</a>
+                        </div>
+                    </div>
+                </div>
+            </div>
             <div className="govuk-width-container ">
                 <div className="govuk-footer__meta">
                     <div className="govuk-footer__meta-item govuk-footer__meta-item--grow">

components/header.js

@@ -15,7 +15,7 @@ export default function Header({ courseName }) {
             data-module="govuk-header"
         >
             <div className="govuk-header__container govuk-width-container">
-                <div className="govuk-header__logo">
+                <div className="govuk-header__logo govuk-!-width-one-quarter">
                     <a
                         href="/"
                         className="govuk-header__link govuk-header__link--homepage"
@@ -61,7 +61,7 @@ export default function Header({ courseName }) {
                     </a>
                 </div>
 
-                <div className="govuk-header__content govuk-!-width-one-half govuk-!-margin-top-3">
+                <div className="govuk-header__content govuk-!-width-two-thirds govuk-!-margin-top-3">
                     <a
                         href="/"
                         onClick={() => {