Merge pull request #1181 from akh4rf/testimony-hit-ui

Bringing Testimony Hit UI in line with Figma

components/ProfilePage/StyledProfileComponents.tsx

@@ -92,12 +92,14 @@ export const StyledContainer = styled(Container)`
  width: 100%;
  }
 
- .view-edit-profile {
+ .view-edit-profile,
+ .follow-button {
  width: 100%;
  text-decoration: none;
  }
 
- .view-edit-profile > button {
+ .view-edit-profile > button,
+ .follow-button > button {
  width: 100%;
  }
 
@@ -123,5 +125,9 @@ export const StyledContainer = styled(Container)`
  .view-edit-profile > button {
  width: auto;
  }
+
+ .follow-button > button {
+ width: unset;
+ }
  }
 `

components/search/testimony/TestimonyHit.tsx

@@ -5,6 +5,8 @@ import { Testimony } from "components/db/testimony"
 import { trimContent } from "components/TestimonyCallout/TestimonyCallout"
 import { formatBillId } from "components/formatting"
 import { useBill } from "components/db/bills"
+import { FollowButton } from "components/shared/FollowButton"
+import { Image } from "react-bootstrap"
 
 export const TestimonyHit = ({ hit }: { hit: Hit<Testimony> }) => {
  const url = maple.testimony({ publishedId: hit.id })
@@ -28,6 +30,12 @@ const TestimonyResult = ({ hit }: { hit: Hit<Testimony> }) => {
  })
  const { loading, error, result: bill } = useBill(hit.court, hit.billId)
  const committee = bill?.currentCommittee
+ const isOrg = hit.authorRole === "organization"
+ const writtenBy = isOrg ? (
+ <Link href={`/profile?id=${hit.authorUid}`}>{hit.authorDisplayName}</Link>
+ ) : (
+ hit.authorDisplayName
+ )
  return (
  <div
  style={{
@@ -37,10 +45,25 @@ const TestimonyResult = ({ hit }: { hit: Hit<Testimony> }) => {
  marginBottom: "0.75rem"
  }}
  >
- <span>
- Written by {hit.authorDisplayName}
- -- {hit.authorRole}
- </span>
+ <div
+ style={{
+ display: "flex",
+ justifyContent: "space-between",
+ alignItems: "center",
+ gap: "10px"
+ }}
+ >
+ <Image
+ src={isOrg ? "/profile-org-icon.svg" : "/profile-individual-icon.svg"}
+ alt="profile icon"
+ height="30px"
+ width="30px"
+ />
+ <span style={{ flexGrow: 1 }}>
+ <b>Written by {writtenBy}</b>
+ </span>
+ {isOrg && <FollowButton profileid={hit.authorUid} />}
+ </div>
  <hr />
  <div style={{ display: "flex", alignItems: "center" }}>
  <div style={{ marginRight: "10px" }}>

components/shared/FollowButton.tsx

@@ -82,16 +82,16 @@ function FollowOrg({
  text: string
 }) {
  return (
- <Col className={`d-flex w-100 justify-content-start`}>
+ <div>
  <div>
- <div className="view-edit-profile">
+ <div className="follow-button">
  <Button onClick={clickFunction} className={`btn btn-lg py-1`}>
  {text}
  {checkmark}
  </Button>
  </div>
  </div>
- </Col>
+ </div>
  )
 }