careers page, various minor fixes #784

app/components/Button/index.tsx

@@ -48,7 +48,7 @@ const Button = ({
   const LinkComponent = !action.startsWith('http')
     ? Link
     : ({to, children, ...props}: {[k: string]: any}) => (
-        <a href={to} {...props}>
+        <a href={to} rel="noreferrer" target="_blank" {...props}>
           {children}
         </a>
       )

app/components/Card/card.css

@@ -4,7 +4,10 @@
   display: flex;
   background-color: var(--colors-cool-grey-100);
   border-radius: var(--border-radius);
-  box-shadow: 0px var(--spacing-16) var(--spacing-40) rgba(175, 183, 194, 0.2);
+}
+
+.card:hover {
+  border-color: var(--colors-teal-200);
 }
 
 .card-content {
@@ -25,18 +28,6 @@
   flex-shrink: 0;
 }
 
-.card-impact {
-  color: var(--colors-teal-500);
-  height: fit-content;
-  width: fit-content;
-  padding-left: 10px;
-  padding-top: 2px;
-  padding-bottom: 2px;
-  padding-right: 10px;
-  background-color: var(--colors-teal-50);
-  border-radius: var(--border-radius);
-}
-
 @media (max-width: 780px) {
   .card {
     flex-direction: column;

app/components/Card/index.tsx

@@ -18,9 +18,9 @@ export default function Card({title, description, impact, icon, action, classNam
     <Button action={action} className={className}>
       <div className="card-icon">{icon({})}</div>
       <div className="card-content">
-        <h3 className="large-bold padding-bottom-8">{title}</h3>
+        <p className="large-bold padding-bottom-8">{title}</p>
         <p className="grey padding-bottom-16">{description}</p>
-        <p className="card-impact small">{impact}</p>
+        <p className="tag xs">{impact}</p>
       </div>
     </Button>
   )

app/components/CardSmall/cardsmall.css

@@ -1,11 +1,16 @@
 .card-small {
   padding: var(--spacing-24);
   align-items: start;
+  justify-content: start;
   display: flex;
   flex-direction: column;
   background-color: var(--colors-cool-grey-100);
+  border: 1px solid var(--colors-cool-grey-200);
   border-radius: var(--border-radius);
-  box-shadow: 0px var(--spacing-16) var(--spacing-40) rgba(175, 183, 194, 0.2);
+}
+
+.card-small:hover {
+  border-color: var(--colors-teal-200);
 }
 
 .card-small-icon {

app/components/CardSmall/index.tsx

@@ -26,7 +26,7 @@ export default function CardSmall({
       <div style={{backgroundColor: iconColor}} className="card-small-icon">
         {icon({})}
       </div>
-      <h3 className="large-bold padding-bottom-8">{title}</h3>
+      <p className="large-bold padding-bottom-8">{title}</p>
       <p className="grey">{description}</p>
     </Button>
   )

app/components/DropDown/dropdown.css

@@ -1,6 +1,6 @@
 .drop-down {
-  border-top: 1px solid var(--colors-teal-500);
-  border-bottom: 1px solid var(--colors-teal-500);
+  border-top: 1px solid var(--colors-teal-200);
+  border-bottom: 1px solid var(--colors-teal-200);
 }
 
 .drop-down-header {

app/components/DropDown/index.tsx

@@ -15,8 +15,8 @@ export default function DropDown({title, children}: DropDownProps) {
       <button onClick={() => setIsOpen(!isOpen)} className="drop-down-header">
         <p className="large-bold teal-500">{title}</p>
         <ChevronRight
-          height={22}
-          width={22}
+          height={24}
+          width={24}
           className={`${isOpen ? 'rotate-90' : ''} drop-down-chevron`}
         />
       </button>

app/components/HowCanIHelp/HelpItem.tsx

@@ -5,16 +5,21 @@ type HelpItemProps = {
   title?: ReactNode
   children: ReactNode
   links?: Link[]
+  titleFont?: 'large-bold' | 'default-bold'
 }
-const HelpItem = ({title, children, links}: HelpItemProps) => {
+const HelpItem = ({title, children, links, titleFont = 'large-bold'}: HelpItemProps) => {
   return (
     <div className="section-split padding-bottom-40">
       <div>
-        {title && <p className="default-bold padding-bottom-16">{title}</p>}
+        {title && <p className={`padding-bottom-16 ${titleFont}`}>{title}</p>}
         <p className="grey default padding-bottom-16"> {children} </p>
       </div>
       <div>
-        {links?.map((link) => <LinkCard key={link.title} action={link.action || '#'} {...link} />)}
+        {links?.map((link) => (
+          <div key={link.title} className="padding-bottom-16">
+            <LinkCard action={link.action || '#'} {...link} />
+          </div>
+        ))}
       </div>
     </div>
   )

app/components/HowCanIHelp/category-carousel.css

@@ -36,7 +36,7 @@
   align-items: start;
   justify-content: start;
   width: 100%;
-  max-width: 300px;
+  max-width: 400px;
   height: 230px;
   padding: var(--spacing-40);
   text-align: left;

app/components/HowCanIHelp/howcanihelp.css

@@ -30,4 +30,10 @@
   .paths-grid {
     grid-template-columns: 1fr;
   }
+  .section-grid {
+    grid-template-columns: 1fr;
+  }
+  .section-split {
+    grid-template-columns: 1fr;
+  }
 }

app/components/LinkCard/linkcard.css

@@ -4,20 +4,18 @@
   display: flex;
   flex-direction: column;
   justify-content: center;
-  background-color: #ffffff;
-  border: 1px solid #e0e0e0;
-  border-radius: var(--spacing-8);
+  border: 1px solid var(--colors-cool-grey-200);
+  border-radius: var(--border-radius);
   padding: var(--spacing-16);
   position: relative;
   cursor: pointer;
   transition: box-shadow 0.3s ease;
   width: 100%;
   align-items: start;
-  box-shadow: 0 0 0 0 transparent;
 }
 
 .link-card:hover {
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  border-color: var(--colors-teal-200);
 }
 
 .link-card .tag {

app/components/Testimonial/index.tsx

@@ -0,0 +1,45 @@
+import React from 'react'
+import './testimonial.css'
+import useIsMobile from '../../hooks/isMobile'
+
+interface TestimonialProps {
+  className?: string
+  title: string
+  description: string
+  src: string
+  layout?: 'expanded' | 'squeezed'
+}
+
+const Testimonial: React.FC<TestimonialProps> = ({
+  className,
+  title,
+  description,
+  src,
+  layout = 'squeezed',
+}) => {
+  const isMobile = useIsMobile()
+  const finalLayout = isMobile ? 'squeezed' : layout
+  className = `testimonial ${finalLayout} ${className || ''}`
+
+  return finalLayout === 'squeezed' ? (
+    <div className={className}>
+      <div className="padding-bottom-24 testimonial-header">
+        <img width={80} height={80} className="rounded" src={src} alt="Testimonial's Face" />
+        <p className="default-bold padding-left-24">{title}</p>
+      </div>
+      <p className="default grey">{description}</p>
+    </div>
+  ) : (
+    <div className={className}>
+      <div className="flex-container">
+        <img width={151} height={151} className="rounded" src={src} alt="Testimonial's Face" />
+        <div className="padding-left-40">
+          <p className="large-bold padding-bottom-16">{title}</p>
+          <p className="default grey">{description}</p>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Testimonial

app/components/Testimonial/testimonial.css

@@ -0,0 +1,20 @@
+.testimonial {
+  border: 1px solid var(--colors-cool-grey-200);
+  border-radius: var(--border-radius);
+}
+
+.testimonial.expanded {
+  padding: var(--spacing-40);
+  max-width: 875px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.testimonial.squeezed {
+  padding: var(--spacing-32);
+}
+
+.testimonial-header {
+  display: flex;
+  align-items: center;
+}

app/root.css

@@ -336,6 +336,40 @@ h2 {
   padding-left: var(--spacing-80) !important;
 }
 
+/* padding right */
+
+.padding-right-4 {
+  padding-right: var(--spacing-4) !important;
+}
+
+.padding-right-8 {
+  padding-right: var(--spacing-8) !important;
+}
+
+.padding-right-16 {
+  padding-right: var(--spacing-16) !important;
+}
+
+.padding-right-24 {
+  padding-right: var(--spacing-24) !important;
+}
+
+.padding-right-32 {
+  padding-right: var(--spacing-32) !important;
+}
+
+.padding-right-40 {
+  padding-right: var(--spacing-40) !important;
+}
+
+.padding-right-56 {
+  padding-right: var(--spacing-56) !important;
+}
+
+.padding-right-80 {
+  padding-right: var(--spacing-80) !important;
+}
+
 /* width classes. please turn the grid on in figma and then define widths based on how many columns there are! */
 /* note I may change these to vars later */
 
@@ -556,6 +590,15 @@ svg {
   stroke: var(--colors-teal-600);
 }
 
+.tag {
+  color: var(--colors-teal-500);
+  height: fit-content;
+  width: fit-content;
+  padding: 4px 8px;
+  background-color: var(--colors-teal-50);
+  border-radius: var(--border-radius);
+}
+
 @media (min-width: 780px) {
   .mobile-only {
     display: none !important;