feat(native-app): app update inbox UI

apps/native/app/src/screens/inbox/inbox.tsx

@@ -51,6 +51,8 @@ type ListItem =
   | { id: string; type: 'skeleton' | 'empty' }
   | (Document & { type: undefined })
 
+const DEFAULT_PAGE_SIZE = 50
+
 const { useNavigationOptions, getNavigationOptions } =
   createNavigationOptionHooks(
     (theme, intl, initialized) => ({
@@ -94,8 +96,10 @@ const PressableListItem = React.memo(
     const { getOrganizationLogoUrl } = useOrganizationsStore()
     const [starred, setStarred] = useState<boolean>(!!item.bookmarked)
     useEffect(() => setStarred(!!item.bookmarked), [item.bookmarked])
+    const theme = useTheme()
     return (
       <PressableHighlight
+        highlightColor={theme.shade.shade400}
         onPress={() =>
           navigateTo(`/inbox/${item.id}`, {
             title: item.senderName,
@@ -113,13 +117,7 @@ const PressableListItem = React.memo(
             toggleAction(!item.bookmarked ? 'bookmark' : 'unbookmark', item.id)
             setStarred(!item.bookmarked)
           }}
-          icon={
-            <Image
-              source={getOrganizationLogoUrl(item.senderName, 75)}
-              resizeMode="contain"
-              style={{ width: 25, height: 25 }}
-            />
-          }
+          icon={getOrganizationLogoUrl(item.senderName, 75)}
         />
       </PressableHighlight>
     )
@@ -178,7 +176,7 @@ function useInboxQuery(incomingFilters?: Filters) {
   const [refetching, setRefetching] = useState(true)
   const [loading, setLoading] = useState(false)
   const [refetcher, setRefetcher] = useState(0)
-  const pageSize = 50
+  const pageSize = DEFAULT_PAGE_SIZE
 
   const [getListDocument] = useListDocumentsLazyQuery({
     query: ListDocumentsDocument,
@@ -285,14 +283,12 @@ export const InboxScreen: NavigationFunctionComponent<{
   const intl = useIntl()
   const scrollY = useRef(new Animated.Value(0)).current
   const flatListRef = useRef<FlatList>(null)
-  const keyboardRef = useRef(false)
   const [query, setQuery] = useState('')
   const queryString = useThrottleState(query)
   const theme = useTheme()
   const unreadCount = useUnreadCount()
   const [visible, setVisible] = useState(false)
   const [refetching, setRefetching] = useState(false)
-  const dynamicColor = useDynamicColor()
 
   const res = useInboxQuery({
     opened,

apps/native/app/src/screens/notifications/notifications.tsx

@@ -211,9 +211,6 @@ export const NotificationsScreen: NavigationFunctionComponent = ({
             uri: `${item.sender.logoUrl}?w=64&h=64&fit=pad&fm=png`,
           }
         }
-        underlayColor={
-          theme.isDark ? theme.shade.shade400 : theme.color.blue100
-        }
         unread={!item.metadata.read}
         onPress={() => onNotificationPress(item)}
         testID={testIDs.NOTIFICATION_CARD_BUTTON}

apps/native/app/src/stores/organizations-store.ts

@@ -59,13 +59,17 @@ export const organizationsStore = create<OrganizationsStore>(
             orgs.find((o) => o.logo?.title === 'Skjaldarmerki')
           c = match?.logo?.url
           if (c) {
-            logoCache.set(forName, c)
+            if (!c.startsWith('https://')) {
+              logoCache.set(forName, `https:${c}`)
+            } else {
+              logoCache.set(forName, c)
+            }
           }
         }
         const url =
           c ??
           'https://images.ctfassets.net/8k0h54kbe6bj/6XhCz5Ss17OVLxpXNVDxAO/d3d6716bdb9ecdc5041e6baf68b92ba6/coat_of_arms.svg'
-        const uri = `${url}?w=${size}&h=${size}&fit=pad&bg=white&fm=png`
+        const uri = `${url}?w=${size}&h=${size}&fit=pad&fm=png`
         return { uri }
       },
       actions: {

apps/native/app/src/ui/lib/card/notification-card.tsx

@@ -80,13 +80,10 @@ export function NotificationCard({
   testID,
 }: CardProps) {
   const theme = useTheme()
-
   return (
     <Host
       onPress={() => onPress(id)}
-      underlayColor={
-        underlayColor ?? theme.isDark ? theme.shade.shade400 : '#EBEBFA'
-      }
+      underlayColor={underlayColor ?? theme.shade.shade400}
       unread={unread}
       testID={testID}
     >

apps/native/app/src/ui/lib/detail/header.tsx

@@ -2,11 +2,11 @@ import React from 'react'
 import { ImageSourcePropType } from 'react-native'
 import styled from 'styled-components/native'
 import { dynamicColor } from '../../utils/dynamic-color'
-import { font } from '../../utils/font'
 import { Skeleton } from '../skeleton/skeleton'
+import { Typography } from '../typography/typography'
 
 const Host = styled.View<{ hasBorder?: boolean }>`
-  padding-bottom: 16px;
+  padding-bottom: ${({ theme }) => theme.spacing[2]}px;
   border-bottom-width: ${({ hasBorder }) => (hasBorder ? '1px' : 0)};
   border-bottom-color: ${dynamicColor(
     (props) => ({
@@ -16,52 +16,41 @@ const Host = styled.View<{ hasBorder?: boolean }>`
     true,
   )};
   margin-bottom: ${({ hasBorder }) => (hasBorder ? '16px' : 0)};
-  margin-top: 16px;
+  margin-top: ${({ theme }) => theme.spacing[2]}px;
 `
 
 const Logo = styled.Image`
   width: 16px;
   height: 16px;
-  margin-right: 8px;
+`
+
+const LogoBackground = styled.View`
+  background-color: ${dynamicColor(
+    (props) => ({
+      dark: props.theme.color.white,
+      light: props.theme.color.blue100,
+    }),
+    true,
+  )};
+  height: 24px;
+  width: 24px;
+  justify-content: center;
+  align-items: center;
+  border-radius: ${({ theme }) => theme.border.radius.circle};
+  margin-right: ${({ theme }) => theme.spacing[1]}px;
 `
 
 const Row = styled.View`
   flex-direction: row;
   justify-content: space-between;
-  padding-bottom: 8px;
+  padding-bottom: ${({ theme }) => theme.spacing[1]}px;
 `
 
 const Wrapper = styled.View`
   flex-direction: row;
   align-items: center;
   flex: 1;
-  padding-right: 8px;
-`
-
-const Title = styled.Text`
-  flex: 1;
-  ${font({
-    fontWeight: '600',
-    fontSize: 13,
-    lineHeight: 17,
-  })}
-`
-
-const Date = styled.Text<{ unread?: boolean }>`
-  ${font({
-    fontWeight: (props) => (props.unread ? '600' : '300'),
-    fontSize: 13,
-    lineHeight: 17,
-  })}
-`
-
-const Message = styled.Text`
-  padding-bottom: 8px;
-  ${font({
-    fontWeight: '300',
-    fontSize: 16,
-    lineHeight: 24,
-  })}
+  padding-right: ${({ theme }) => theme.spacing[1]}px;
 `
 
 interface HeaderProps {
@@ -89,21 +78,31 @@ export function Header({
         ) : (
           <>
             <Wrapper>
-              {logo && <Logo source={logo} />}
+              {logo && (
+                <LogoBackground>
+                  <Logo source={logo} />
+                </LogoBackground>
+              )}
               {title && (
-                <Title numberOfLines={1} ellipsizeMode="tail">
+                <Typography
+                  variant="body3"
+                  numberOfLines={1}
+                  ellipsizeMode="tail"
+                >
                   {title}
-                </Title>
+                </Typography>
               )}
             </Wrapper>
-            <Date>{date}</Date>
+            <Typography variant="body3">{date}</Typography>
           </>
         )}
       </Row>
       {message && isLoading ? (
         <Skeleton active style={{ borderRadius: 4 }} height={32} />
       ) : message && !isLoading ? (
-        <Message>{message}</Message>
+        <Typography style={{ paddingBottom: 8, fontWeight: '600' }}>
+          {message}
+        </Typography>
       ) : null}
     </Host>
   )