Feature/terms and conditions (#76)

* socials are part of the graph footer

* terms and conditions

src/components/footer/Footer.tsx

@@ -0,0 +1,16 @@
+import { FC } from "react";
+import Socials from "./socials";
+import TermsAndConditions from "./terms_and_conditions";
+
+const Footer: FC = () => {
+    return (
+        <footer className="flex absolute bottom-0 z-10 h-fit w-full justify-between items-center transition-all duration-300 ease-in-out mb-3">
+            <Socials className="flex-none ml-3 items-center" />
+            <TermsAndConditions className="text-gray-500" />
+            {/* Keep this div to maintain the spacing */}
+            <div className="flex-none w-20"></div>
+        </footer>
+    )
+}
+
+export default Footer;

src/components/socials/Socials.tsx → src/components/footer/socials/Socials.tsx

@@ -37,7 +37,7 @@ const SocialButton: FC<Social> = ({ name, Icon, link }) => {
     <a href={link} target="_blank" rel="noreferrer">
       <Icon
         aria-label={`${name} Icon`}
-        className="h-8 w-8 p-1 opacity-50 backdrop-blur-sm transition-all duration-200 hover:opacity-70"
+        className="h-8 w-8 p-1 opacity-50 transition-all duration-200 hover:opacity-70"
       />
     </a>
   );

src/components/footer/terms_and_conditions/TermsAndConditions.tsx

@@ -0,0 +1,18 @@
+import { FC } from "react";
+import termsAndConditionsPDF from "../../../assets/WardAnalytics-Terms-and-Conditions.pdf";
+
+interface TermsAndConditionsProps {
+    className?: string;
+}
+
+const TermsAndConditions: FC<TermsAndConditionsProps> = ({
+    className
+}) => {
+    return (
+        <div className={className}>
+            <a href={termsAndConditionsPDF} target="_blank">Terms & Conditions</a>
+        </div>
+    )
+}
+
+export default TermsAndConditions;

src/components/footer/terms_and_conditions/index.ts

@@ -0,0 +1,3 @@
+import TermsAndConditions from "./TermsAndConditions";
+
+export default TermsAndConditions;

src/components/graph/Graph.tsx

@@ -47,7 +47,7 @@ import {
 } from "./graph_calculations";
 
 import { PersonalGraphInfo } from "../../services/firestore/user/graph_saving";
-import Socials from "../socials";
+import Footer from "../footer/Footer";
 import TransactionTooltip, { TransactionTooltipProps } from "./TransactionTooltip";
 import DraggableWindow from "./analysis_window/AnalysisWindow";
 import Hotbar from "./hotbar";
@@ -918,7 +918,6 @@ const GraphProvided: FC<GraphProvidedProps> = ({
             analysisData={focusedAddressData}
             onExit={onAddressFocusOff}
           />
-          <Socials className="absolute bottom-0 z-10 mb-3 ml-3 transition-all duration-300 ease-in-out" />
           <ReactFlow
             nodes={nodes}
             onNodesChange={onNodesChange}
@@ -963,6 +962,7 @@ const GraphProvided: FC<GraphProvidedProps> = ({
               <Hotbar />
             </Panel>
           </ReactFlow>
+          <Footer />
         </div>
       </GraphContext.Provider>
     </>