add icon buttons, misc styling on venue pages

web/src/components/layout/Footer.tsx

@@ -3,6 +3,7 @@ import styles from "./footer.module.scss";
 import { NeonChillPig } from "../general/pigs/fun/NeonChillPig";
 import { ToTop } from "./ToTop";
 import { LogoNeuf } from "../general/Logo";
+import Icon from "../general/Icon";
 
 export const Footer = () => {
   return (
@@ -11,23 +12,27 @@ export const Footer = () => {
         <h2 className="suphead">Følg oss</h2>
         <ul>
           <li>
-            <a href="#" target="_blank">
-              Instagram
+            <a href="#" target="_blank" className="button tertiary">
+              <span>Instagram</span>
+              <Icon />
             </a>
           </li>
           <li>
-            <a href="#" target="_blank">
-              Facebook
+            <a href="#" target="_blank" className="button tertiary">
+              <span>Facebook</span>
+              <Icon />
             </a>
           </li>
           <li>
-            <a href="#" target="_blank">
-              Twitter
+            <a href="#" target="_blank" className="button tertiary">
+              <span>Twitter</span>
+              <Icon />
             </a>
           </li>
           <li>
-            <a href="#" target="_blank">
-              Flickr
+            <a href="#" target="_blank" className="button tertiary">
+              <span>Flickr</span>
+              <Icon />
             </a>
           </li>
         </ul>

web/src/components/layout/footer.module.scss

@@ -94,12 +94,11 @@
   position: relative;
   top: 0;
   right: 0;
-  transform: translate(1vw, 40%);
   z-index: 800;
 }
 
 .toTop {
   position: absolute;
-  right: 0;
-  bottom: 0;
+  right: var(--spacing-sitepadding);
+  bottom: var(--spacing-sitepadding);
 }