From 42413e460ec80fba0cd932f30fb265053b175bfc Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Fri, 14 Jun 2024 15:39:17 -0700
Subject: [PATCH] improve design of starter pack card

---
 src/components/StarterPack/NewskieDialog.tsx  |  19 +++-
 .../StarterPack/ProfileStarterPacks.tsx       |  34 +++---
 .../StarterPack/StarterPackCard.tsx           | 104 ++++++++----------
 src/screens/StarterPack/Wizard/index.tsx      |   2 +-
 4 files changed, 78 insertions(+), 81 deletions(-)

diff --git a/src/components/StarterPack/NewskieDialog.tsx b/src/components/StarterPack/NewskieDialog.tsx
index 7466386c2e..aea68bd509 100644
--- a/src/components/StarterPack/NewskieDialog.tsx
+++ b/src/components/StarterPack/NewskieDialog.tsx
@@ -8,11 +8,11 @@ import {HITSLOP_10} from 'lib/constants'
 import {ago} from 'lib/strings/time'
 import {isNative} from 'platform/detection'
 import {useSession} from 'state/session'
-import {atoms as a} from '#/alf'
+import {atoms as a, useTheme} from '#/alf'
 import * as Dialog from '#/components/Dialog'
 import {useDialogControl} from '#/components/Dialog'
 import {Newskie} from '#/components/icons/Newskie'
-import {StarterPackCard} from '#/components/StarterPack/StarterPackCard'
+import {Default as StarterPackCard} from '#/components/StarterPack/StarterPackCard'
 import {Text} from '#/components/Typography'
 
 export function NewskieDialog({
@@ -22,6 +22,7 @@ export function NewskieDialog({
 }) {
   const {_} = useLingui()
   const {currentAccount} = useSession()
+  const t = useTheme()
   const control = useDialogControl()
   const {joinedViaStarterPack} = profile
   const profileName = profile.displayName || `@${profile.handle}`
@@ -69,10 +70,16 @@ export function NewskieDialog({
               )}
             </Text>
             {joinedViaStarterPack && (
-              <StarterPackCard
-                starterPack={joinedViaStarterPack}
-                type="dialog"
-              />
+              <View
+                style={[
+                  a.border,
+                  a.rounded_sm,
+                  t.atoms.border_contrast_low,
+                  a.px_sm,
+                  a.py_md,
+                ]}>
+                <StarterPackCard starterPack={joinedViaStarterPack} />
+              </View>
             )}
           </View>
         </Dialog.ScrollableInner>
diff --git a/src/components/StarterPack/ProfileStarterPacks.tsx b/src/components/StarterPack/ProfileStarterPacks.tsx
index ecc9b20243..af84c5a6e2 100644
--- a/src/components/StarterPack/ProfileStarterPacks.tsx
+++ b/src/components/StarterPack/ProfileStarterPacks.tsx
@@ -17,9 +17,9 @@ import {useNavigation} from '@react-navigation/native'
 import {InfiniteData, UseInfiniteQueryResult} from '@tanstack/react-query'
 
 import {logger} from '#/logger'
-import {isWeb} from '#/platform/detection'
 import {generateStarterpack} from 'lib/generate-starterpack'
 import {useBottomBarOffset} from 'lib/hooks/useBottomBarOffset'
+import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
 import {NavigationProp} from 'lib/routes/types'
 import {useAgent} from 'state/session'
 import {List, ListRef} from 'view/com/util/List'
@@ -30,7 +30,7 @@ import {useDialogControl} from '#/components/Dialog'
 import {LinearGradientBackground} from '#/components/LinearGradientBackground'
 import {Loader} from '#/components/Loader'
 import * as Prompt from '#/components/Prompt'
-import {StarterPackCard} from '#/components/StarterPack/StarterPackCard'
+import {Default as StarterPackCard} from '#/components/StarterPack/StarterPackCard'
 
 interface SectionRef {
   scrollToTop: () => void
@@ -49,19 +49,6 @@ interface ProfileFeedgensProps {
   setScrollViewTag: (tag: number | null) => void
 }
 
-function renderItem({
-  item,
-  index,
-}: ListRenderItemInfo<AppBskyGraphDefs.StarterPackView>) {
-  return (
-    <StarterPackCard
-      starterPack={item}
-      type="list"
-      hideTopBorder={!isWeb && index === 0}
-    />
-  )
-}
-
 function keyExtractor(item: AppBskyGraphDefs.StarterPackView) {
   return item.uri
 }
@@ -85,6 +72,7 @@ export const ProfileStarterPacks = React.forwardRef<
   const bottomBarOffset = useBottomBarOffset(100)
   const [isPTRing, setIsPTRing] = React.useState(false)
   const {data, refetch, isFetching, hasNextPage, fetchNextPage} = query
+  const {isTabletOrDesktop} = useWebMediaQueries()
 
   const items = data?.pages.flatMap(page => page.starterPacks)
 
@@ -119,6 +107,22 @@ export const ProfileStarterPacks = React.forwardRef<
     }
   }, [enabled, scrollElRef, setScrollViewTag])
 
+  const renderItem = ({
+    item,
+    index,
+  }: ListRenderItemInfo<AppBskyGraphDefs.StarterPackView>) => {
+    return (
+      <View
+        style={[
+          a.p_lg,
+          (isTabletOrDesktop || index !== 0) && a.border_t,
+          t.atoms.border_contrast_low,
+        ]}>
+        <StarterPackCard starterPack={item} />
+      </View>
+    )
+  }
+
   return (
     <View testID={testID} style={style}>
       <List
diff --git a/src/components/StarterPack/StarterPackCard.tsx b/src/components/StarterPack/StarterPackCard.tsx
index 49d33dab84..c80e794cc0 100644
--- a/src/components/StarterPack/StarterPackCard.tsx
+++ b/src/components/StarterPack/StarterPackCard.tsx
@@ -1,89 +1,75 @@
 import React from 'react'
 import {View} from 'react-native'
-import {AppBskyGraphStarterpack, AtUri} from '@atproto/api'
+import {AppBskyActorDefs, AppBskyGraphStarterpack, AtUri} from '@atproto/api'
 import {StarterPackViewBasic} from '@atproto/api/dist/client/types/app/bsky/graph/defs'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
 import {sanitizeHandle} from 'lib/strings/handles'
-import {isWeb} from 'platform/detection'
 import {useSession} from 'state/session'
 import {atoms as a, useTheme} from '#/alf'
 import {StarterPackIcon} from '#/components/icons/StarterPackIcon'
 import {Link} from '#/components/Link'
 import {Text} from '#/components/Typography'
 
-export function StarterPackCard({
-  starterPack,
-  type,
-  hideTopBorder,
-  hideBy,
-}: {
-  starterPack: StarterPackViewBasic
-  hideTopBorder?: boolean
-  type: 'list' | 'notification' | 'dialog'
-  hideBy?: boolean
-}) {
+export function Default({starterPack}: {starterPack: StarterPackViewBasic}) {
+  const rkey = new AtUri(starterPack.uri).rkey
+  const {record, creator, joinedAllTimeCount} = starterPack
+
   const {_} = useLingui()
   const t = useTheme()
   const {currentAccount} = useSession()
-  const {uri, record, creator, joinedAllTimeCount} = starterPack
-  const rkey = new AtUri(uri).rkey
 
   if (!AppBskyGraphStarterpack.isRecord(record)) {
     return null
   }
 
+  return (
+    <Wrapper creator={starterPack.creator} rkey={rkey}>
+      <View style={[a.flex_row, a.gap_md]}>
+        <StarterPackIcon width={36} height={36} />
+        <View>
+          <Text style={[a.text_md, a.font_bold, a.leading_snug]}>
+            {record.name}
+          </Text>
+          <Text style={[a.leading_snug, t.atoms.text_contrast_medium]}>
+            <Trans>
+              Starter pack by{' '}
+              {creator?.did === currentAccount?.did
+                ? _(msg`you`)
+                : `@${sanitizeHandle(creator.handle)}`}
+            </Trans>
+          </Text>
+        </View>
+      </View>
+      {record.description && (
+        <Text numberOfLines={3}>{record.description}</Text>
+      )}
+      {!!joinedAllTimeCount && joinedAllTimeCount >= 50 && (
+        <Text style={[a.font_bold, t.atoms.text_contrast_medium]}>
+          {joinedAllTimeCount} users have joined!
+        </Text>
+      )}
+    </Wrapper>
+  )
+}
+
+function Wrapper({
+  creator,
+  children,
+  rkey,
+}: {
+  creator: AppBskyActorDefs.ProfileViewBasic
+  rkey: string
+  children: React.ReactNode
+}) {
   return (
     <Link
       to={{
         screen: 'StarterPack',
         params: {name: creator.handle || creator.did, rkey},
       }}>
-      <View
-        style={[
-          a.flex_row,
-          a.w_full,
-          a.px_xl,
-          a.py_lg,
-          a.gap_md,
-          t.atoms.border_contrast_low,
-          !hideTopBorder &&
-            type !== 'notification' &&
-            type !== 'dialog' &&
-            a.border_t,
-          (type === 'notification' || type === 'dialog') && [
-            a.mt_sm,
-            a.py_md,
-            a.border,
-            a.rounded_sm,
-          ],
-        ]}>
-        {type !== 'notification' && <StarterPackIcon width={36} height={36} />}
-        <View style={[a.flex_1, a.gap_xs]}>
-          <View style={[isWeb && a.gap_xs]}>
-            <Text style={[a.font_bold, a.text_md]}>{record.name}</Text>
-            {!hideBy && (
-              <Text style={[t.atoms.text_contrast_medium]}>
-                <Trans>
-                  Starter pack by{' '}
-                  {creator?.did === currentAccount?.did
-                    ? _(msg`you`)
-                    : `@${sanitizeHandle(creator.handle)}`}
-                </Trans>
-              </Text>
-            )}
-          </View>
-          {!!joinedAllTimeCount && joinedAllTimeCount >= 50 && (
-            <Text style={[a.font_bold, t.atoms.text_contrast_medium]}>
-              {joinedAllTimeCount} users have joined!
-            </Text>
-          )}
-          {record.description && (
-            <Text numberOfLines={3}>{record.description}</Text>
-          )}
-        </View>
-      </View>
+      <View style={[a.flex_1, a.gap_md]}>{children}</View>
     </Link>
   )
 }
diff --git a/src/screens/StarterPack/Wizard/index.tsx b/src/screens/StarterPack/Wizard/index.tsx
index c445c3a0cb..a456867752 100644
--- a/src/screens/StarterPack/Wizard/index.tsx
+++ b/src/screens/StarterPack/Wizard/index.tsx
@@ -559,7 +559,7 @@ function Footer({
         t.atoms.bg,
         t.atoms.border_contrast_medium,
         {
-          height: isNative ? 224 : 200,
+          height: 190 + bottomInset,
           paddingBottom: 20 + bottomInset,
         },
         isNative && [