updates

the-kwisatz-haderach · Jan 8, 2024 · 69619de · 69619de
1 parent 687d878
commit 69619de
Show file tree

Hide file tree

Showing 10 changed files with 71 additions and 64 deletions.
diff --git a/components/Contained/Contained.tsx b/components/Contained/Contained.tsx
@@ -1,13 +1,14 @@
-import { Container, ContainerProps } from '@chakra-ui/react'
+import { Container, ContainerProps, forwardRef } from '@chakra-ui/react'
 import React, { ReactNode } from 'react'
 
 type Props = {
   children: ReactNode
 } & Omit<ContainerProps, 'px' | 'maxW' | 'maxWidth' | 'p'>
 
-export function Contained({ children, ...props }: Props) {
+export const Contained = forwardRef(({ children, ...props }: Props, ref) => {
   return (
     <Container
+      ref={ref}
       py={2}
       {...props}
       maxW="container.xl"
@@ -17,4 +18,4 @@ export function Contained({ children, ...props }: Props) {
       {children}
     </Container>
   )
-}
+})
diff --git a/components/EmptyState/EmptyState.tsx b/components/EmptyState/EmptyState.tsx
@@ -22,13 +22,9 @@ const getIcon = (icon: Props['icon']) => {
       )
     case 'no-results':
       return (
-        <div
-          style={{
-            opacity: 0.2,
-          }}
-        >
-          <Image alt="" src="/images/no-results.png" width={200} height={200} />
-        </div>
+        <Box opacity={0.15} width={[150, 180, 200]} height={[150, 180, 200]}>
+          <Image alt="" src="/images/no-results.png" fill />
+        </Box>
       )
     default:
       return undefined
@@ -42,14 +38,16 @@ export default function EmptyState({
   ...stackProps
 }: Props): ReactElement {
   return (
-    <VStack {...stackProps} spacing={0} color="blackAlpha.900">
+    <VStack {...stackProps} spacing={0} py={8} color="blackAlpha.500">
       {icon && (
-        <Box mb={4} position="relative">
+        <Box mb={5} position="relative">
           {getIcon(icon)}
         </Box>
       )}
-      <Text fontSize="4xl">{title}</Text>
-      <Text fontSize="lg">{description}</Text>
+      <Text fontWeight="500" fontSize={['lg', 'xl', '4xl']}>
+        {title}
+      </Text>
+      <Text fontSize={['md', 'md', 'lg']}>{description}</Text>
     </VStack>
   )
 }
diff --git a/components/Link/Link.tsx b/components/Link/Link.tsx
@@ -5,18 +5,21 @@ import { TranslatedLink } from '../TranslatedLink'
 
 type Props = LinkProps & {
   onClick?: () => void
+  bold?: boolean
 }
 
 export default function Link({
   children,
   href,
   onClick,
+  bold,
   ...props
 }: PropsWithChildren<Props>): ReactElement {
   return (
     <TranslatedLink {...props} href={href} passHref>
       <ChakraLink
         color="brand.500"
+        fontWeight={bold ? 600 : 400}
         onClick={
           onClick
             ? (e) => {

diff --git a/components/Obituary/components/Obituary.tsx b/components/Obituary/components/Obituary.tsx
@@ -229,6 +229,7 @@ export const Obituary: ObituaryRenderer = (props) => {
             onClick={openModal}
             href={`/${formattedType}/${_id}`}
             prefetch={false}
+            bold
           >
             {t('search-results-view_full')}
           </Link>

diff --git a/components/ObituaryGrid/ObituaryGrid.tsx b/components/ObituaryGrid/ObituaryGrid.tsx
@@ -1,11 +1,12 @@
 import React, { ReactElement } from 'react'
-import { Button, Container, Flex, GridItem, SimpleGrid } from '@chakra-ui/react'
+import { Button, Flex, GridItem, SimpleGrid } from '@chakra-ui/react'
 import { IObituary } from '../../lib/domain/types'
 import { Obituary, ObituarySkeleton, ObituaryContainer } from '../Obituary'
 import { EmptyState } from '../EmptyState'
 import { useTranslation } from 'next-i18next'
 import { ResultsDescription } from './ResultsDescription'
 import { isMultiObituary } from 'lib/domain/isMultiObituary'
+import { Contained } from 'components/Contained/Contained'
 
 interface Props {
   obituaries: IObituary[]
@@ -24,7 +25,7 @@ export default function ObituaryGrid({
 }: Props): ReactElement {
   const { t } = useTranslation()
   return (
-    <Container maxW="container.xl" my={8}>
+    <Contained my={{ base: 0, lg: 8 }}>
       <ResultsDescription resultsCount={obituaries.length} hasMore={hasMore} />
       {isLoading || obituaries.length > 0 ? (
         <SimpleGrid spacing={4} columns={[1, 2, 3, 4]}>
@@ -48,14 +49,13 @@ export default function ObituaryGrid({
         </SimpleGrid>
       ) : (
         <EmptyState
-          mt={24}
           title={t('search-results-empty-title')}
           description={t('search-results-empty-description')}
           icon="no-results"
         />
       )}
       {hasMore && (
-        <Flex justifyContent="center" mt={10}>
+        <Flex justifyContent="center" mt={[4, 6, 8, 10]}>
           <Button
             isLoading={isLoadingNext}
             colorScheme="brand"
@@ -67,6 +67,6 @@ export default function ObituaryGrid({
           </Button>
         </Flex>
       )}
-    </Container>
+    </Contained>
   )
 }
diff --git a/components/SearchInput/SearchInput.tsx b/components/SearchInput/SearchInput.tsx
@@ -51,8 +51,7 @@ export default function SearchInput({
     <Flex
       as="form"
       width="100%"
-      maxW={500}
-      px={[4, 0]}
+      maxW={{ base: 'unset', md: 500 }}
       flexDir={['column', 'row']}
     >
       <Input

diff --git a/components/TopScroll/TopScroll.module.css b/components/TopScroll/TopScroll.module.css
@@ -0,0 +1,14 @@
+.wrapper {
+  opacity: 0;
+  animation: fade-in 1s ease-in-out forwards;
+}
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
diff --git a/components/TopScroll/TopScroll.tsx b/components/TopScroll/TopScroll.tsx
@@ -1,7 +1,8 @@
 import React, { ReactElement } from 'react'
-import { Box, BoxProps, IconButton, Fade } from '@chakra-ui/react'
+import { Box, BoxProps, IconButton } from '@chakra-ui/react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faArrowUp as scrollTopIcon } from '@fortawesome/free-solid-svg-icons'
+import styles from './TopScroll.module.css'
 
 interface Props extends BoxProps {
   onClick: () => void
@@ -13,36 +14,25 @@ export default function TopScroll({
   show,
   ...boxProps
 }: Props): ReactElement {
-  return (
+  return show ? (
     <Box
       {...boxProps}
       textAlign="right"
       position="sticky"
       bottom={0}
       pointerEvents="none"
+      className={styles.wrapper}
+      px={3}
+      py={[3, 3, 5]}
     >
-      <Fade
-        in={show}
-        transition={{
-          enter: {
-            delay: 1,
-            duration: 1,
-          },
-          exit: {
-            delay: 1,
-            duration: 1,
-          },
-        }}
-      >
-        <IconButton
-          pointerEvents="all"
-          colorScheme="brand"
-          onClick={onClick}
-          aria-label="Scroll to top"
-          isRound
-          icon={<FontAwesomeIcon icon={scrollTopIcon} />}
-        />
-      </Fade>
+      <IconButton
+        pointerEvents="all"
+        colorScheme="brand"
+        onClick={onClick}
+        aria-label="Scroll to top"
+        isRound
+        icon={<FontAwesomeIcon icon={scrollTopIcon} />}
+      />
     </Box>
-  )
+  ) : null
 }
diff --git a/pages/index.tsx b/pages/index.tsx
@@ -25,6 +25,7 @@ import {
   StoryblokComponent,
   useStoryblokState,
 } from '@storyblok/react'
+import { Contained } from 'components/Contained/Contained'
 
 interface Props {
   story: PageStory
@@ -48,22 +49,24 @@ export default function Home({ story: initialStory }: Props): ReactElement {
   return (
     <div>
       <StoryblokComponent blok={story.content} />
-      <Flex
-        ref={ref}
-        backgroundColor="gray.300"
-        justifyContent="center"
-        height={32}
-        alignItems="center"
-      >
-        <SearchInput
-          title={t('search')}
-          value={query}
-          onChange={setQuery}
-          placeholder={t('search-placeholder')}
-        />
+      <Flex ref={ref} backgroundColor="gray.300">
+        <Contained
+          display="flex"
+          justifyContent="center"
+          height={32}
+          py={[2, 4, 6]}
+          alignItems="center"
+        >
+          <SearchInput
+            title={t('search')}
+            value={query}
+            onChange={setQuery}
+            placeholder={t('search-placeholder')}
+          />
+        </Contained>
       </Flex>
       <ProgressBar show={isLoading || isFetching} />
-      <Box my={14}>
+      <Box>
         <ObituaryGrid
           isLoading={isLoading}
           isLoadingNext={isFetchingNextPage}
@@ -76,8 +79,6 @@ export default function Home({ story: initialStory }: Props): ReactElement {
           margin="auto"
           maxW="container.xl"
           width="100%"
-          px={3}
-          py={[3, 3, 5]}
           onClick={scrollToTop}
         />
       </Box>

diff --git a/public/static/locales/hr/common.json b/public/static/locales/hr/common.json
@@ -15,8 +15,8 @@
   "search-results-result": "rezultata",
   "search-results-more": "Prikaži više",
   "search-results-view_full": "Pročitaj više",
-  "search-results-empty-title": "Nema rezultata.",
-  "search-results-empty-description": "Izmijenite pretragu.",
+  "search-results-empty-title": "Nema rezultata",
+  "search-results-empty-description": "Izmijenite pretragu",
   "address": "Adresa",
   "phone": "Broj telefona",
   "mail": "E-mail",