Merge pull request #626 from pennlabs/aag/footer

Add footer with feedback link to PDP
pennlabs · Apr 9, 2024 · 39c89c4 · 39c89c4
2 parents 9816982 + bc8c3d6
commit 39c89c4
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 1 deletion.
diff --git a/frontend/degree-plan/components/Footer.tsx b/frontend/degree-plan/components/Footer.tsx
@@ -0,0 +1,37 @@
+import styled from "@emotion/styled";
+
+const Wrapper = styled.div`
+    color: #999999;
+    font-size: 0.8rem;
+    text-align: center;
+    bottom: 15px;
+    width: 100%;
+    padding-bottom: 1rem;
+    line-height: 1.5;
+`;
+
+const Link = styled.a`
+    color: rgb(50, 115, 220);
+`
+
+const Footer = () => (
+    <Wrapper>
+        Made with{" "}
+        <span className="icon is-small">
+            <i className="fa fa-heart" style={{ color: "red" }} />
+        </span>{" "}
+        by{" "}
+        <Link href="http://pennlabs.org" rel="noopener noreferrer" target="_blank">
+            Penn Labs
+        </Link>
+        . 
+        Have feedback about Penn Degree Plan? Let us know: {" "}
+        <Link href="mailto:[email protected]">[email protected]</Link>
+        {
+        // TODO: uncomment once out of beta
+        // <Link href="https://airtable.com/appFRa4NQvNMEbWsA/shrzXeuiEFF8OD89P">here!</Link>
+        }
+    </Wrapper>
+);
+
+export default Footer;
diff --git a/frontend/degree-plan/components/FourYearPlanPage.tsx b/frontend/degree-plan/components/FourYearPlanPage.tsx
@@ -16,6 +16,7 @@ import SplitPane, { Pane } from "react-split-pane";
 import Dock from "@/components/Dock/Dock";
 import useWindowDimensions from "@/hooks/window";
 import OnboardingPage from "../pages/OnboardingPage";
+import Footer from "./Footer";
 
 const PageContainer = styled.div`
   height: 100vh;
@@ -162,7 +163,8 @@ const FourYearPlanPage = ({
                   maxSize={windowWidth ? windowWidth * 0.65 : 1000}
                   defaultSize="50%"
                   style={{
-                    padding: "1.5rem"
+                    padding: "1.5rem",
+                    paddingBottom: "1rem" // less padding on bottom for penn labs footer
                   }}
                 >
                   {/*
@@ -205,6 +207,7 @@ const FourYearPlanPage = ({
               </Row>
             )}
           </BodyContainer>
+          <Footer />
           <Dock user={user} login={updateUser} logout={() => updateUser(null)} activeDegreeplanId={activeDegreeplan ? activeDegreeplan.id : null} />
         </PageContainer>
       </ReviewPanelContext.Provider>