Unread messages, review and complete dividers (#360)

* add NewMessages divider

* add DividerDate

* unify dividers

* fix NewMessages gradient

* NewMessages -> DividerNewMessages

packages/components/package.json

@@ -42,6 +42,7 @@
     "@tamagui/shorthands": "1.7.7",
     "@tamagui/theme-base": "1.7.7",
     "expo-blur": "~12.0.1",
+    "expo-linear-gradient": "^12.1.2",
     "tamagui": "1.7.7",
     "zustand": "^4.3.6"
   },

packages/components/src/divider-label/divider-label.tsx

@@ -1,29 +0,0 @@
-import { Stack } from '@tamagui/core'
-
-import { Text } from '../text'
-
-type Props = {
-  label: string
-  tight?: boolean
-}
-
-const DividerLabel = (props: Props) => {
-  const { label, tight = true } = props
-
-  return (
-    <Stack
-      paddingHorizontal={16}
-      paddingTop={tight ? 8 : 16}
-      paddingBottom={8}
-      borderColor="$neutral-10"
-      borderTopWidth={1}
-    >
-      <Text size={13} color="$neutral-50" weight="medium">
-        {label}
-      </Text>
-    </Stack>
-  )
-}
-
-export { DividerLabel }
-export type { Props as DividerLabelProps }

packages/components/src/divider/divider.tsx

@@ -1,33 +0,0 @@
-import { Stack, styled } from '@tamagui/core'
-
-export const Divider = styled(Stack, {
-  name: 'Divider',
-  backgroundColor: '$neutral-80-opa-10',
-  flexShrink: 0,
-  // borderWidth: 0,
-  flex: 1,
-  height: '100%',
-  // maxHeight: 0,
-  maxWidth: 1,
-  width: 1,
-  marginHorizontal: 12,
-  // y: -0.5,
-
-  variants: {
-    // vertical: {
-    //   true: {
-    //     y: 0,
-    //     x: -0.5,
-    //     height: isWeb ? 'initial' : 'auto',
-    //     // maxHeight auto WILL BE passed to style attribute, but for some reason not used?
-    //     // almost seems like a react or browser bug, but for now `initial` works
-    //     // also, it doesn't happen for `height`, but for consistency using the same values
-    //     maxHeight: isWeb ? 'initial' : 'auto',
-    //     width: 0,
-    //     maxWidth: 0,
-    //     borderBottomWidth: 0,
-    //     borderRightWidth: 1,
-    //   },
-    // },
-  } as const,
-})

packages/components/src/divider/index.tsx

@@ -1 +0,0 @@
-export * from './divider'

packages/components/src/dividers/divider-date/divider-date.stories.tsx

@@ -0,0 +1,25 @@
+import { DividerDate } from './divider-date'
+
+import type { Meta, StoryObj } from '@storybook/react'
+
+// More on how to set up stories at: https://storybook.js.org/docs/7.0/react/writing-stories/introduction
+const meta: Meta<typeof DividerDate> = {
+  component: DividerDate,
+  argTypes: {},
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/IBmFKgGL1B4GzqD8LQTw6n/Design-System-for-Desktop%2FWeb?node-id=5626-159384&t=OkwNsSt1XE3TE2SS-11',
+    },
+  },
+}
+
+type Story = StoryObj<typeof DividerDate>
+
+export const Default: Story = {
+  args: {
+    label: 'Today',
+  },
+}
+
+export default meta

packages/components/src/dividers/divider-date/divider-date.tsx

@@ -0,0 +1,32 @@
+import { Stack } from '@tamagui/core'
+
+import { Text } from '../../text'
+import { DividerLine } from '../divider-line'
+
+type Props = {
+  label: string
+}
+
+const DividerDate = (props: Props) => {
+  const { label } = props
+
+  return (
+    <Stack
+      paddingTop={8}
+      marginBottom={12}
+      marginLeft={48}
+      marginRight={8}
+      gap={4}
+      // borderBottomWidth={1}
+      // borderColor="$neutral-10"
+    >
+      <Text size={11} color="$neutral-50" weight="medium">
+        {label}
+      </Text>
+      <DividerLine />
+    </Stack>
+  )
+}
+
+export { DividerDate }
+export type { Props as DividerLabelProps }

packages/components/src/dividers/divider-date/index.tsx

@@ -0,0 +1 @@
+export * from './divider-date'

packages/components/src/dividers/divider-label/divider-label.stories.tsx

@@ -9,7 +9,7 @@ const meta: Meta<typeof DividerLabel> = {
   parameters: {
     design: {
       type: 'figma',
-      url: '',
+      url: 'https://www.figma.com/file/IBmFKgGL1B4GzqD8LQTw6n/Design-System-for-Desktop%2FWeb?node-id=5626-159384&t=OkwNsSt1XE3TE2SS-11',
     },
   },
 }

packages/components/src/dividers/divider-label/divider-label.tsx

@@ -0,0 +1,29 @@
+import { Stack } from '@tamagui/core'
+
+import { Text } from '../../text'
+import { DividerLine } from '../divider-line'
+
+type Props = {
+  label: string
+  tight?: boolean
+  count?: number
+}
+
+// TODO: Add counter after PR #355 lands
+const DividerLabel = (props: Props) => {
+  const { label, tight = true } = props
+
+  return (
+    <Stack paddingBottom={8} gap={tight ? 8 : 16}>
+      <DividerLine />
+      <Stack paddingHorizontal={16}>
+        <Text size={13} color="$neutral-50" weight="medium">
+          {label}
+        </Text>
+      </Stack>
+    </Stack>
+  )
+}
+
+export { DividerLabel }
+export type { Props as DividerLabelProps }

packages/components/src/dividers/divider-line/divider-line.tsx

@@ -0,0 +1,22 @@
+import { Stack, styled } from '@tamagui/core'
+
+export const DividerLine = styled(Stack, {
+  name: 'DividerLine',
+  backgroundColor: '$neutral-10',
+  variants: {
+    orientation: {
+      horizontal: {
+        width: '100%',
+        height: '1px',
+      },
+      vertical: {
+        height: '100%',
+        width: '1px',
+      },
+    },
+  } as const,
+
+  defaultVariants: {
+    orientation: 'horizontal',
+  },
+})

packages/components/src/dividers/divider-line/index.tsx

@@ -0,0 +1 @@
+export * from './divider-line'

packages/components/src/dividers/divider-new-messages/divider-new-messages.stories.tsx

@@ -0,0 +1,42 @@
+import { Stack } from 'tamagui'
+
+import { DividerNewMessages } from './divider-new-messages'
+
+import type { Meta, StoryObj } from '@storybook/react'
+
+const meta: Meta<typeof DividerNewMessages> = {
+  component: DividerNewMessages,
+  argTypes: {},
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/IBmFKgGL1B4GzqD8LQTw6n/Design-System-for-Desktop%2FWeb?node-id=5626-159391&t=mgkcemjDOjfGvZZ2-11',
+    },
+  },
+}
+
+type Story = StoryObj<typeof DividerNewMessages>
+
+export const Default: Story = {
+  args: {},
+  render: () => {
+    return (
+      <Stack gap={24}>
+        <DividerNewMessages color="$primary-50" />
+        <DividerNewMessages color="$yellow-50" />
+        <DividerNewMessages color="$turquoise-50" />
+        {/* <NewMessages color="$cooper-50" /> */}
+        {/* <NewMessages color="$sky-50" /> */}
+        {/* <NewMessages color="$camel-50" /> */}
+        <DividerNewMessages color="$orange-50" />
+        {/* <NewMessages color="$army-50" /> */}
+        <DividerNewMessages color="$pink-50" />
+        <DividerNewMessages color="$purple-50" />
+        {/* <NewMessages color="$magenta-50" /> */}
+        {/* <NewMessages color="$yin-50" /> */}
+      </Stack>
+    )
+  },
+}
+
+export default meta

packages/components/src/dividers/divider-new-messages/divider-new-messages.tsx

@@ -0,0 +1,28 @@
+import { Stack } from '@tamagui/core'
+import { LinearGradient } from '@tamagui/linear-gradient'
+
+import { Text } from '../../text'
+
+import type { ColorTokens } from '@tamagui/core'
+
+type Props = {
+  color: ColorTokens
+}
+
+const DividerNewMessages = (props: Props) => {
+  const { color } = props
+
+  return (
+    <Stack position="relative" height={42} backgroundColor={color}>
+      <LinearGradient height={42} colors={['$white-95', '$white-100']}>
+        <Stack paddingHorizontal={56} paddingVertical={12} zIndex={10}>
+          <Text size={13} weight="medium" color={color}>
+            New Messages
+          </Text>
+        </Stack>
+      </LinearGradient>
+    </Stack>
+  )
+}
+
+export { DividerNewMessages }

packages/components/src/dividers/divider-new-messages/index.tsx

@@ -0,0 +1 @@
+export { DividerNewMessages } from './divider-new-messages'

packages/components/src/dividers/index.tsx

@@ -0,0 +1,4 @@
+export { DividerDate } from './divider-date'
+export { DividerLabel } from './divider-label'
+export { DividerLine } from './divider-line'
+export { DividerNewMessages } from './divider-new-messages'

packages/components/src/index.tsx

@@ -1,8 +1,7 @@
 export * from './anchor-actions'
 export * from './button'
 export * from './composer'
-export * from './divider'
+export * from './dividers'
-export * from './divider-label'
 export * from './dynamic-button'
 export * from './icon-button'
 export * from './image'

packages/components/src/messages/index.tsx

@@ -1,3 +1,6 @@
+import { Stack } from '@tamagui/core'
+
+import { DividerDate, DividerNewMessages } from '../dividers'
 import { PinAnnouncement } from '../system-messages'
 import { Message } from './message'
 
@@ -78,6 +81,9 @@ export const Messages = () => {
         reply
         id="1234-1242"
       />
+      <Stack marginHorizontal={-8} marginVertical={8}>
+        <DividerNewMessages color="$blue-50" />
+      </Stack>
       <Message
         text="Morbi a metus. Phasellus enim erat, vestibulum vel, aliquam a, posuere eu, velit. Nullam sapien sem, ornare ac, nonummy non, lobortis a, enim.sit"
         reactions={reactions}
@@ -92,6 +98,7 @@ export const Messages = () => {
         reactions={{}}
         id="1234-1244"
       />
+      <DividerDate label="Today" />
       <Message
         images={[
           {

packages/components/src/sidebar-members/sidebar-members.tsx

@@ -1,6 +1,6 @@
 import { Stack } from '@tamagui/core'
 
-import { DividerLabel } from '../divider-label'
+import { DividerLabel } from '../dividers'
 import { UserList } from '../user-list'
 
 import type { USerListProps } from '../user-list'

packages/components/src/topbar/topbar.tsx

@@ -13,7 +13,6 @@ import {
 import { Stack, Text as RNText } from '@tamagui/core'
 import { BlurView } from 'expo-blur'
 
-import { Divider } from '../divider'
 import { DropdownMenu } from '../dropdown-menu'
 import { IconButton } from '../icon-button'
 import { PinnedMessage } from '../pinned-message'
@@ -85,7 +84,13 @@ const Topbar = (props: Props) => {
             )}
 
             <LockedIcon color="$neutral-80-opa-40" />
-            <Divider height={16} $sm={{ display: 'none' }} />
+            <Stack
+              backgroundColor="$neutral-80-opa-10"
+              marginHorizontal={12}
+              height={16}
+              width={1}
+              $sm={{ display: 'none' }}
+            />
           </Stack>
 
           <Stack

yarn.lock

@@ -9550,6 +9550,11 @@ expo-linear-gradient@^12.0.1:
   resolved "https://registry.yarnpkg.com/expo-linear-gradient/-/expo-linear-gradient-12.0.1.tgz#452f793b0463ddf313aad431552f23acc85f5d64"
   integrity sha512-TMl/wBTVQOliL4S3DS5Aa3UFfVySr0mdJEHLG6kfBdMCLkr+tfLI2rGyJ+scS7xgMsvhTIaurhf1+Z0sL3aLCg==
 
+expo-linear-gradient@^12.1.2:
+  version "12.1.2"
+  resolved "https://registry.yarnpkg.com/expo-linear-gradient/-/expo-linear-gradient-12.1.2.tgz#25e352b179a73fb7c2de3c1bc48186557e445348"
+  integrity sha512-e1d6Hq5qsRL8sWutrOuQhuir4vHiRJ1PmvDIL8P33mt51Y8VFTQjTG/mr5qJlT8lUD/ADJfaBLzV7SNqSuDTLQ==
+
 expo-manifests@~0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/expo-manifests/-/expo-manifests-0.4.0.tgz#6fd44b6427e113f2eb9409ca46df95cbbea068df"