Add ucsf partner logo (#1307)

* Add UCSF partner logo * Move DC Nav logo to general assets folder * Add Acute Care logo to home page and LinkSF and SFSG partner pages. Restyle CSS/JSX to better fit all the logos * Tweak partner lists width on home page to more elegantly render logos * Prettier * Fix mobile stylings * Update app/pages/AboutPage/AboutPageMarkup/SfServiceGuide.tsx Co-authored-by: Richard Xia <[email protected]> * PR refactors --------- Co-authored-by: Brian Schroer <[email protected]> Co-authored-by: Richard Xia <[email protected]>
ShelterTechSF · Oct 23, 2023 · 0d34be3 · 0d34be3
1 parent db08de9
commit 0d34be3
Show file tree

Hide file tree

Showing 6 changed files with 93 additions and 68 deletions.
diff --git a/app/assets/img/ucsf-acute-care-innovation-center-logo.png b/app/assets/img/ucsf-acute-care-innovation-center-logo.png
diff --git a/app/pages/AboutPage/AboutPage.module.scss b/app/pages/AboutPage/AboutPage.module.scss
@@ -60,10 +60,15 @@
   display: flex;
   flex-wrap: wrap;
   justify-content: flex-start;
+  align-items: center;
   li {
     flex-shrink: 0;
     margin: 20px;
   }
+
+  img {
+    max-height: 84px;
+  }
 }
 
 .our415Logo {

diff --git a/app/pages/AboutPage/AboutPageMarkup/LinkSf.tsx b/app/pages/AboutPage/AboutPageMarkup/LinkSf.tsx
@@ -9,12 +9,12 @@ import BenetechLogo from "../assets/BenetechLogo.png";
 import Our415Logo from "../../../assets/img/Our415_logo-hori.svg";
 import BridgeLogo from "../assets/BridgeLogo.png";
 import LarkinLogo from "../assets/LarkinLogo.png";
-import WeworkLogo from "../assets/WeworkLogo.png";
 import CompassLogo from "../assets/Compass.png";
 import EDCLogo from "../assets/EDC.png";
 import HomeownershipSFLogo from "../assets/HomeownershipSF.png";
 import ZenDeskLogo from "../assets/ZenDeskLogo.jpg";
 import TLTechLabLogo from "../assets/TLTechLabLogo.png";
+import AcuteCareLogo from "../../../assets/img/ucsf-acute-care-innovation-center-logo.png";
 
 export const LinkSf = () => (
   <div className={styles.about}>
@@ -154,17 +154,17 @@ export const LinkSf = () => (
           </li>
           <li>
             <a href="http://evictiondefense.org/" rel="noopener">
-              <img src={EDCLogo} alt="WeWork" />
+              <img src={EDCLogo} alt="Eviction Defense Collaborative" />
             </a>
           </li>
           <li>
             <a href="https://homeownershipsf.org/" rel="noopener">
-              <img src={HomeownershipSFLogo} alt="WeWork" />
+              <img src={HomeownershipSFLogo} alt="Homeownership SF" />
             </a>
           </li>
           <li>
             <a href="https://www.compass-sf.org/" rel="noopener">
-              <img src={CompassLogo} alt="WeWork" />
+              <img src={CompassLogo} alt="Compass SF" />
             </a>
           </li>
           <li>
@@ -182,12 +182,12 @@ export const LinkSf = () => (
             </a>
           </li>
           <li>
-            <img src={BridgeLogo} alt="Bridge" />
+            <a href="https://acutecare.ucsf.edu/" rel="noopener">
+              <img src={AcuteCareLogo} alt="Acute Care Innovation Center" />
+            </a>
           </li>
           <li>
-            <a href="https://www.wework.com" rel="noopener">
-              <img src={WeworkLogo} alt="WeWork" />
-            </a>
+            <img src={BridgeLogo} alt="Bridge" />
           </li>
         </ul>
       </section>

diff --git a/app/pages/AboutPage/AboutPageMarkup/SfServiceGuide.tsx b/app/pages/AboutPage/AboutPageMarkup/SfServiceGuide.tsx
@@ -11,9 +11,9 @@ import BenetechLogo from "../assets/BenetechLogo.png";
 import Our415Logo from "../../../assets/img/Our415_logo-hori.svg";
 import BridgeLogo from "../assets/BridgeLogo.png";
 import LarkinLogo from "../assets/LarkinLogo.png";
-import WeworkLogo from "../assets/WeworkLogo.png";
 import CompassLogo from "../assets/Compass.png";
 import EDCLogo from "../assets/EDC.png";
+import AcuteCareLogo from "../../../assets/img/ucsf-acute-care-innovation-center-logo.png";
 import HomeownershipSFLogo from "../assets/HomeownershipSF.png";
 
 const { aboutPageText, aboutPageTitle } = whiteLabel;
@@ -88,17 +88,17 @@ export const SfServiceGuide = () => (
           </li>
           <li>
             <a href="http://evictiondefense.org/" rel="noopener">
-              <img src={EDCLogo} alt="WeWork" />
+              <img src={EDCLogo} alt="Eviction Defense Collaborative" />
             </a>
           </li>
           <li>
             <a href="https://homeownershipsf.org/" rel="noopener">
-              <img src={HomeownershipSFLogo} alt="WeWork" />
+              <img src={HomeownershipSFLogo} alt="Homeownership SF" />
             </a>
           </li>
           <li>
             <a href="https://www.compass-sf.org/" rel="noopener">
-              <img src={CompassLogo} alt="WeWork" />
+              <img src={CompassLogo} alt="Compass SF" />
             </a>
           </li>
           <li>
@@ -116,12 +116,12 @@ export const SfServiceGuide = () => (
             </a>
           </li>
           <li>
-            <img src={BridgeLogo} alt="Bridge" />
+            <a href="https://acutecare.ucsf.edu/" rel="noopener">
+              <img src={AcuteCareLogo} alt="Acute Care Innovation Center" />
+            </a>
           </li>
           <li>
-            <a href="https://www.wework.com" rel="noopener">
-              <img src={WeworkLogo} alt="WeWork" />
-            </a>
+            <img src={BridgeLogo} alt="Bridge" />
           </li>
         </ul>
       </section>

diff --git a/app/pages/HomePage/components/Partners/Partners.scss b/app/pages/HomePage/components/Partners/Partners.scss
@@ -8,13 +8,20 @@
   margin-top: 70px;
 }
 
+.partnersLists {
+  display: flex;
+  gap: 20px;
+  width: 90%;
+  max-width: 1600px;
+  @media screen and (max-width: 767px) {
+    flex-direction: column;
+  }
+}
+
 .partners ul {
   display: flex;
-  justify-content: space-around;
   flex-wrap: wrap;
   margin-bottom: 50px;
-  width: 90%;
-  max-width: 1600px;
   @media screen and (max-width: 767px) {
     flex-direction: column;
     align-items: center;
@@ -27,13 +34,21 @@
   margin: 15px;
 }
 
+.partners li:not(:first-child) {
+  padding-top: 30px;
+}
+
 .partners li header {
   font-size: 11px;
   font-weight: bold;
   margin-bottom: 15px;
   color: rgba(0, 0, 0, 0.38);
 }
 
+.partners img {
+  max-height: 100%;
+}
+
 .our415Logo {
   width: 120px;
   height: auto;

diff --git a/app/pages/HomePage/components/Partners/Partners.tsx b/app/pages/HomePage/components/Partners/Partners.tsx
@@ -7,59 +7,64 @@ import JDCLogo from "./assets/JDCLogo.png";
 import MOHCDLogo from "./assets/MOHCDLogo.png";
 import BenetechLogo from "./assets/BenetechLogo.png";
 import Our415Logo from "../../../../assets/img/Our415_logo-hori.svg";
-
 import BridgeLogo from "./assets/BridgeLogo.png";
+import AcuteCareLogo from "../../../../assets/img/ucsf-acute-care-innovation-center-logo.png";
 
 export const Partners = () => (
   <div className="partners">
-    <ul>
-      <li>
-        <header>Powered By:</header>
-        <a
-          href="http://sheltertech.org"
-          rel="noopener"
-          className="image-container"
-        >
-          <img src={STLogo} alt="ShelterTech" />
-        </a>
-      </li>
-      <li>
-        <header>In Partnership With:</header>
-        <a
-          href="https://sfmohcd.org/"
-          rel="noopener"
-          className="image-container"
-        >
-          <img src={MOHCDLogo} alt="MOHCD" />
-        </a>
-      </li>
-      <li>
-        <header />
-        <a
-          href="https://www.sfbar.org/jdc/jdc-legal-services-programs/hap/"
-          rel="noopener"
-          className="image-container"
-        >
-          <img src={JDCLogo} alt="JDC" />
-        </a>
-      </li>
-      <li>
-        <header />
-        <a href="https://benetech.org/" rel="noopener">
-          <img src={BenetechLogo} alt="Benetech" />
-        </a>
-      </li>
-      <li>
-        <header />
-        <a href="https://www.our415.org/" rel="noopener">
-          <img src={Our415Logo} alt="Our 415" className="our415Logo" />
-        </a>
-      </li>
-      <li>
-        <header />
-        <img src={BridgeLogo} alt="Bridge" />
-      </li>
-    </ul>
+    <div className="partnersLists">
+      <ul>
+        <li>
+          <header>Powered By:</header>
+          <a
+            href="http://sheltertech.org"
+            rel="noopener"
+            className="image-container"
+          >
+            <img src={STLogo} alt="ShelterTech" />
+          </a>
+        </li>
+      </ul>
+      <ul>
+        <li>
+          <header>In Partnership With:</header>
+          <a
+            href="https://sfmohcd.org/"
+            rel="noopener"
+            className="image-container"
+          >
+            <img src={MOHCDLogo} alt="MOHCD" />
+          </a>
+        </li>
+        <li>
+          <a
+            href="https://www.sfbar.org/jdc/jdc-legal-services-programs/hap/"
+            rel="noopener"
+            className="image-container"
+          >
+            <img src={JDCLogo} alt="JDC" />
+          </a>
+        </li>
+        <li>
+          <a href="https://benetech.org/" rel="noopener">
+            <img src={BenetechLogo} alt="Benetech" />
+          </a>
+        </li>
+        <li>
+          <a href="https://www.our415.org/" rel="noopener">
+            <img src={Our415Logo} alt="Our 415" className="our415Logo" />
+          </a>
+        </li>
+        <li>
+          <a href="https://acutecare.ucsf.edu/" rel="noopener">
+            <img src={AcuteCareLogo} alt="Acute Care Innovation Center" />
+          </a>
+        </li>
+        <li>
+          <img src={BridgeLogo} alt="Bridge" />
+        </li>
+      </ul>
+    </div>
     <Link to="/about">View all our strategic partners</Link>
   </div>
 );