Feature: add footer, sidetag for feedback form (#48)

* add footer, sidetag for feedback form

* add envar to test

* use default feedback form url if not exist in env

* move the tag down on mobile to unobstruct bridge card

web/.env.example

@@ -12,3 +12,4 @@ REACT_APP_SWAP_URL=https://flame.astria.org/swap
 REACT_APP_POOL_URL=https://flame.astria.org/pool
 
 REACT_APP_GA_TRACKING_ID=
+REACT_APP_FEEDBACK_FORM_URL=

web/package.json

@@ -42,11 +42,7 @@
     "lint-apply-unsafe": "biome lint --apply-unsafe ./src ./public"
   },
   "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
+    "production": [">0.2%", "not dead", "not op_mini all"],
     "development": [
       "last 1 chrome version",
       "last 1 firefox version",

web/public/index.html

@@ -25,7 +25,7 @@
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
 
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" />
 
     <style>
       @font-face {

web/src/components/Footer/Footer.tsx

@@ -0,0 +1,13 @@
+import type React from "react";
+
+export default function Footer(): React.ReactElement {
+  return (
+    <footer className="footer is-flex-align-items-flex-end mt-auto">
+      <div className="content has-text-centered">
+        <p>
+          Powered by <a href="https://www.astria.org/">Astria</a>
+        </p>
+      </div>
+    </footer>
+  );
+}

web/src/components/SideTag/SideTag.tsx

@@ -0,0 +1,30 @@
+import type React from "react";
+
+interface SideTagProps {
+  label: string;
+  url: string;
+  iconClass: string;
+}
+
+/**
+ * SideTag component to render a side tag with an icon and label.
+ * @param label
+ * @param url
+ * @param iconClass
+ */
+export default function SideTag({
+  label,
+  url,
+  iconClass,
+}: SideTagProps): React.ReactElement {
+  return (
+    <div className="side-tag">
+      <a href={url} target="_blank" rel="noreferrer" className="side-tag-link">
+        <span className="icon is-small">
+          <i className={`fas ${iconClass}`} />
+        </span>
+        <span className="label">{label}</span>
+      </a>
+    </div>
+  );
+}

web/src/config/contexts/ConfigContext.tsx

@@ -26,6 +26,13 @@ export const ConfigContextProvider: React.FC<ConfigContextProps> = ({
   const swapURL = getEnvVariable("REACT_APP_SWAP_URL");
   const poolURL = getEnvVariable("REACT_APP_POOL_URL");
 
+  let feedbackFormURL: string;
+  try {
+    feedbackFormURL = getEnvVariable("REACT_APP_FEEDBACK_FORM_URL");
+  } catch (e) {
+    feedbackFormURL = brandURL;
+  }
+
   // retrieves the EVM chain with the given chain ID.
   const getEvmChainById = (chainIdHex: string): EvmChainInfo => {
     const chainIdNum = Number.parseInt(chainIdHex, 16);
@@ -46,6 +53,7 @@ export const ConfigContextProvider: React.FC<ConfigContextProps> = ({
         bridgeURL,
         swapURL,
         poolURL,
+        feedbackFormURL,
         getEvmChainById,
       }}
     >

web/src/config/env.ts

@@ -10,6 +10,7 @@ export const ENV = {
   REACT_APP_BRIDGE_URL: process.env.REACT_APP_BRIDGE_URL,
   REACT_APP_SWAP_URL: process.env.REACT_APP_SWAP_URL,
   REACT_APP_POOL_URL: process.env.REACT_APP_POOL_URL,
+  REACT_APP_FEEDBACK_FORM_URL: process.env.REACT_APP_FEEDBACK_FORM_URL,
 };
 
 /**

web/src/config/index.ts

@@ -32,6 +32,7 @@ export type AppConfig = {
   bridgeURL: string;
   swapURL: string;
   poolURL: string;
+  feedbackFormURL: string;
   getEvmChainById(chainIdHex: string): EvmChainInfo;
 };
 

web/src/pages/BridgePage/BridgePage.tsx

@@ -41,7 +41,7 @@ export default function BridgePage(): React.ReactElement {
   return (
     <section className="">
       <div className="container px-2">
-        <div className="columns is-centered is-vcentered is-fullheight-with-navbar">
+        <div className="columns is-centered is-vcentered is-fullheight-with-navbar-and-footer">
           <div className="column is-12-mobile is-8-tablet is-8-desktop is-6-widescreen">
             <div className="card">
               <div className="tabs is-fullwidth">

web/src/pages/Layout.tsx

@@ -1,22 +1,31 @@
 import type React from "react";
-import { Outlet } from "react-router-dom";
+import { Outlet, ScrollRestoration } from "react-router-dom";
 
 import Navbar from "components/Navbar/Navbar";
+import Footer from "components/Footer/Footer";
+import SideTag from "components/SideTag/SideTag";
+import { useConfig } from "config";
 import { Notification, useNotifications } from "features/Notifications";
 
 /**
  * Layout component with Navbar and footer.
  * Uses `<Outlet />` to render children.
+ * Layout is also where notifications are rendered.
  */
 export default function Layout(): React.ReactElement {
+  const { feedbackFormURL } = useConfig();
   const { notifications, removeNotification } = useNotifications();
 
   return (
     <div>
       <Navbar />
-
       <Outlet />
-
+      <SideTag
+        iconClass="fa-up-right-from-square"
+        label="Get Help"
+        url={feedbackFormURL}
+      />
+      <Footer />
       {notifications.map((notification) => (
         <Notification
           key={notification.id}

web/src/styles/footer-customizations.scss

@@ -0,0 +1,9 @@
+@import 'astria-colors';
+
+.footer {
+  .content {
+    a {
+      color: $astria-orange-soft;
+    }
+  }
+}

web/src/styles/footer-overrides.scss

@@ -0,0 +1,5 @@
+@import 'astria-colors';
+
+$footer-background-color: $astria-black;
+$footer-color: $astria-white;
+$footer-padding: 16px;

web/src/styles/index.scss

@@ -1,6 +1,5 @@
 html, body {
   height: 100vh;
-
 }
 
 // fonts
@@ -15,6 +14,7 @@ html, body {
 @import 'button-overrides';
 @import 'card-overrides';
 @import 'dropdown-overrides';
+@import 'footer-overrides';
 @import 'form-overrides';
 @import 'modal-overrides';
 
@@ -24,7 +24,7 @@ html, body {
 @import '../../node_modules/bulma/sass/components/navbar';
 @import '../../node_modules/@creativebulma/bulma-tooltip/dist/bulma-tooltip';
 // NOTE - responsive-spacing-mixins weren't needed for v0, but i'm leaving them b/c
-  // i think they'll quickly be needed for v1
+// i think they'll quickly be needed for v1
 //@import 'responsive-spacing-mixins';
 @import 'fixed-widths';
 
@@ -34,6 +34,7 @@ html, body {
 @import 'card-customizations';
 @import 'columns-customizations';
 @import 'dropdown-customizations';
+@import 'footer-customizations';
 @import 'form-customizations';
 @import 'modal-customizations';
 @import 'navbar-customizations';
@@ -46,15 +47,58 @@ body {
   background-color: $astria-black;
 }
 
-.is-fullheight-with-navbar {
-  // viewport height minus navbar height
-  min-height: calc(100vh - 85px)
+.is-fullheight-with-navbar-and-footer {
+  // viewport height minus navbar and footer height
+  min-height: calc(100vh - 85px - 56px);
+}
+
+// custom styles for the side tag component
+.side-tag {
+  position: absolute;
+  top: 50%;
+  right: 0;
+  background-color: $astria-orange-soft;
+  color: $astria-white;
+  font-size: 0.75rem;
+  font-weight: 700;
+  transform: translateX(40px) rotate(-90deg);
+  overflow: hidden;
+
+  @include mobile {
+    top: 75%;
+  }
+
+  .side-tag-link {
+    display: flex;
+    align-items: center;
+    padding: 0.5rem 0.75rem;
+    color: $astria-white;
+    transition: background-color 0.2s ease;
+
+    &:hover {
+      background-color: rgba(0, 0, 0, 0.1);
+      color: $astria-white;
+    }
+  }
+
+  .icon {
+    margin-right: 0.5rem;
+
+    i {
+      font-size: 1rem;
+    }
+  }
+
+  .label {
+    white-space: nowrap;
+  }
 }
 
 .notifications-toast-container {
   position: fixed;
   z-index: 9999;
   padding: 1rem;
+
   &.mid {
     top: 50%;
     left: 50%;