Pressroom about #297

DiogoSoaress · 2024-03-27T11:04:24Z

Implements the remaining sections of the Pressroom

Figma https://www.figma.com/file/zNUgOvD1WcFankfXfBiAfs/Press-room?type=design&node-id=9929-4249&mode=design&t=W7LHmouFpLwvwqpW-0

github-actions · 2024-03-27T11:04:37Z

Branch preview

✅ Deployed successfully in branch deployment:

https://pressroom_about--homepage.review.5afe.dev

github-actions · 2024-03-27T11:05:40Z

ESLint Summary View Full Report

Annotations are provided inline on the Files Changed tab. You can also see all annotations that were generated on the annotations page.

Type	Occurrences	Fixable
Errors	0	0
Warnings	0	0
Ignored	0	N/A

Result: ✅ success
Annotations: 0 total

^{Report generated by eslint-plus-action}

iamacook · 2024-04-02T07:43:56Z

public/images/great-than.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.15845 6.17415C9.36972 5.94195 9.71225 5.94195 9.92352 6.17415L14.8415 11.5796C15.0528 11.8118 15.0528 12.1882 14.8415 12.4204L9.92351 17.8258C9.71225 18.0581 9.36972 18.0581 9.15845 17.8258C8.94718 17.5936 8.94718 17.2172 9.15845 16.985L13.6939 12L9.15845 7.01504C8.94718 6.78283 8.94718 6.40636 9.15845 6.17415Z" fill="#12FF80" stroke="#12FF80" stroke-linecap="round" stroke-linejoin="round"/>


I'd suggest setting the fill and stroke to be "currentColor" and assigning the colour in situ instead.

iamacook · 2024-04-02T07:44:13Z

public/images/less-than.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.8415 17.8258C14.6303 18.0581 14.2878 18.0581 14.0765 17.8258L9.15845 12.4204C8.94718 12.1882 8.94718 11.8118 9.15845 11.5796L14.0765 6.17415C14.2878 5.94195 14.6303 5.94195 14.8416 6.17415C15.0528 6.40636 15.0528 6.78283 14.8416 7.01504L10.3061 12L14.8415 16.985C15.0528 17.2172 15.0528 17.5936 14.8415 17.8258Z" fill="#12FF80" stroke="#12FF80" stroke-linecap="round" stroke-linejoin="round"/>


As above regarding fill and stroke values.

iamacook · 2024-04-02T07:44:38Z

src/components/Pressroom/AboutUs/index.tsx

+const TOTAL_ASSETS_STORED = 'https://dune.com/queries/2893829/4821383'
+
+const AboutUs = ({ totalAssets }: { totalAssets: number }) => {
+  const totalAssetsStr = `~$${totalAssets ? formatValue(totalAssets) : '120B'}`


Nit: let's move "120B" to a constant.

iamacook · 2024-04-02T07:45:37Z

src/components/Pressroom/AboutUs/index.tsx

+  )
+
+  return (
+    <Box mt="140px" id={PressroomAnchors.ABOUT_US.slice(1)} width={{ xs: '100%', md: 9 / 12 }}>


I'd suggest changing PressroomAnchors to something like PressroomIds as that what they inherently are. You can then add the hash inline. What do you think?

iamacook · 2024-04-02T07:46:17Z

src/components/Pressroom/ContentsNavigation/index.tsx

+]
+
+const ContentsNavigation = () => {
+  const handleContentTableClick = (e: React.MouseEvent<HTMLAnchorElement>, target: string) => {


You can get the target from the event.

iamacook · 2024-04-02T07:51:24Z

src/components/Pressroom/FeaturedVideos/index.tsx

+const VideoCard = ({ title, url }: { title?: string; url: string }) => (
+  <div className={css.card}>
+    <MediaPlayer url={url} />
+    <div className={css.cardBody}>
+      {title ? <Typography variant="h3">{title}</Typography> : null}
+      <SafeLink href={url}>
+        <LinkButton>Watch now</LinkButton>
+      </SafeLink>
    </div>
-  )
-}
+  </div>
+)


In the future, I'd suggest doing things like this in a seperate PR as it's unrelated (I almost missed the change below). No need to change it back.

iamacook · 2024-04-02T07:54:06Z

src/components/Pressroom/News/index.tsx


 type NewsProps = { news: Entry<TypeExternalUrlSkeleton, undefined, string>[] }

 export const News = ({ news }: NewsProps) => (
-  <>
-    <Typography variant="h2" textAlign="center" mt={{ xs: '80px', md: '200px' }}>
+  <Box id={PressroomAnchors.SAFE_IN_THE_NEWS.slice(1)} mt={{ xs: '80px', md: '140px' }}>


As before regarding changing anchors to ids.

iamacook · 2024-04-02T07:55:22Z

src/components/Pressroom/PressReleases/index.tsx


 const categories = ['Safe{Core}', 'Safe{Wallet}', 'Safe{DAO}', 'Ecosystem', 'Institutional', 'Internal']

 const PAGE_LENGTH = 4

 const PressReleases = ({ allPosts }: { allPosts: BlogPostEntry[] }) => {
  const router = useRouter()
-  const selectedCategory = router.query.category
+  const selectedTag = router.query.category as string


You can use the getPage helper here instead of casting.

Can I address this refactor in other PR? I will leave a comment

iamacook · 2024-04-02T07:55:40Z

src/components/Pressroom/PressReleases/index.tsx

-      <Typography variant="h2" mt={{ xs: '80px', md: '200px' }}>
-        Press releases
-      </Typography>
+    <Box id={PressroomAnchors.PRESS_RELEASES.slice(1)} mt={{ xs: '80px', md: '250px' }}>


As before regarding changing anchors to ids.

iamacook · 2024-04-02T07:57:29Z

src/components/Pressroom/Timeline/index.tsx

+const Timeline = ({ items }: TimelineProps) => {
+  const [activeStep, setActiveStep] = useState(0)
+  const isSmallScreen = useMediaQuery((theme: Theme) => theme.breakpoints.down('sm'))
+  const STEPS_PER_DOT = useMemo(() => (isSmallScreen ? 1 : 3), [isSmallScreen])


If you want to mark this as a constant, I'd move the values to the top of the file and use them here, e.g.

Suggested change

const STEPS_PER_DOT = useMemo(() => (isSmallScreen ? 1 : 3), [isSmallScreen])

const stepsPerDot = useMemo(() => (isSmallScreen ? STEPS_PER_DOT_SM : STEPS_PER_DOT_LG), [isSmallScreen])

src/components/Pressroom/ContentsNavigation/index.tsx

src/components/Pressroom/Timeline/index.tsx

Co-authored-by: Aaron Cook <[email protected]>

DiogoSoaress added 2 commits March 26, 2024 23:42

refactor: abstract the quick category filter to a /common component

7370396

feat: PressReleases section

3ec505b

DiogoSoaress changed the base branch from main to pressroom-releases March 28, 2024 15:28

DiogoSoaress added 15 commits March 28, 2024 16:29

Merge remote-tracking branch 'origin/main' into pressroom-releases

0733032

feat: contents navigation

e511aac

AboutUs

5131896

Safe in numbers marquee

079f811

fix marquee overflow

c11e846

Milestones stepper

da1726f

animate slide the carousel

5a26466

fix scroll to anchor

57fa209

fix CategoryFilter wrap

35556aa

mobile timeline

8ff8c4b

fix quick filter wrapping

5857bd8

styles: improve layout

215cc92

pull Safe numbers from CMS

cf519f4

fix filter by tags

a418ecb

pull milestones items from CMS

1d8ba8f

DiogoSoaress force-pushed the pressroom-about branch from a2ad56d to 1d8ba8f Compare March 28, 2024 15:30

iamacook reviewed Apr 2, 2024

View reviewed changes

Base automatically changed from pressroom-releases to main April 2, 2024 13:59

DiogoSoaress added 3 commits April 2, 2024 16:08

Merge remote-tracking branch 'origin/main' into pressroom-about

3f9ab7d

refactor: assign ids instead of anchors

359122d

refactor: add root level scroll behaviour and offset

8ff3273

DiogoSoaress requested a review from iamacook April 2, 2024 15:32

iamacook reviewed Apr 2, 2024

View reviewed changes

src/components/Pressroom/ContentsNavigation/index.tsx Outdated Show resolved Hide resolved

src/components/Pressroom/Timeline/index.tsx Outdated Show resolved Hide resolved

Apply suggestions from code review

cb30e05

Co-authored-by: Aaron Cook <[email protected]>

DiogoSoaress requested a review from iamacook April 2, 2024 16:21

finx lint

a98b436

iamacook approved these changes Apr 2, 2024

View reviewed changes

DiogoSoaress merged commit c475ee2 into main Apr 2, 2024
5 checks passed

DiogoSoaress deleted the pressroom-about branch April 2, 2024 16:49

github-actions bot locked and limited conversation to collaborators Apr 2, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Pressroom about #297

Pressroom about #297

DiogoSoaress commented Mar 27, 2024

github-actions bot commented Mar 27, 2024 •

edited

Loading

github-actions bot commented Mar 27, 2024 •

edited

Loading

iamacook Apr 2, 2024

iamacook Apr 2, 2024

iamacook Apr 2, 2024

iamacook Apr 2, 2024

iamacook Apr 2, 2024

iamacook Apr 2, 2024

iamacook Apr 2, 2024

iamacook Apr 2, 2024

DiogoSoaress Apr 2, 2024

iamacook Apr 2, 2024

iamacook Apr 2, 2024

		@@ -0,0 +1,3 @@
		<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
		<path fill-rule="evenodd" clip-rule="evenodd" d="M9.15845 6.17415C9.36972 5.94195 9.71225 5.94195 9.92352 6.17415L14.8415 11.5796C15.0528 11.8118 15.0528 12.1882 14.8415 12.4204L9.92351 17.8258C9.71225 18.0581 9.36972 18.0581 9.15845 17.8258C8.94718 17.5936 8.94718 17.2172 9.15845 16.985L13.6939 12L9.15845 7.01504C8.94718 6.78283 8.94718 6.40636 9.15845 6.17415Z" fill="#12FF80" stroke="#12FF80" stroke-linecap="round" stroke-linejoin="round"/>

	const STEPS_PER_DOT = useMemo(() => (isSmallScreen ? 1 : 3), [isSmallScreen])
	const stepsPerDot = useMemo(() => (isSmallScreen ? STEPS_PER_DOT_SM : STEPS_PER_DOT_LG), [isSmallScreen])

Pressroom about #297

Pressroom about #297

Conversation

DiogoSoaress commented Mar 27, 2024

github-actions bot commented Mar 27, 2024 • edited Loading

Branch preview

github-actions bot commented Mar 27, 2024 • edited Loading

ESLint Summary View Full Report

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

github-actions bot commented Mar 27, 2024 •

edited

Loading

github-actions bot commented Mar 27, 2024 •

edited

Loading