fix(web): Update grant card list UI

apps/web/components/GrantCardsList/GrantCardsList.tsx

@@ -3,7 +3,7 @@ import localeEN from 'date-fns/locale/en-GB'
 import localeIS from 'date-fns/locale/is'
 import { useRouter } from 'next/router'
 
-import { ActionCard, Box, InfoCardGrid } from '@island.is/island-ui/core'
+import { ActionCard, Box, InfoCardGrid, Text } from '@island.is/island-ui/core'
 import { Locale } from '@island.is/shared/types'
 import { isDefined } from '@island.is/shared/utils'
 import {
@@ -20,6 +20,12 @@ interface SliceProps {
   slice: GrantCardsListSchema
 }
 
+const OPEN_GRANT_STATUSES = [
+  GrantStatus.AlwaysOpen,
+  GrantStatus.Open,
+  GrantStatus.OpenWithNote,
+]
+
 const formatDate = (
   date: Date,
   locale: Locale,
@@ -108,24 +114,48 @@ const GrantCardsList = ({ slice }: SliceProps) => {
     }
   }
 
-  if (slice.resolvedGrantsList?.items.length === 1) {
-    const grant = slice.resolvedGrantsList.items[0]
+  const grantItems = slice.resolvedGrantsList?.items ?? []
+
+  if (grantItems.length === 1) {
+    const grant = grantItems[0]
+
+    const cardText = `${getTranslationString(
+      grant?.status && OPEN_GRANT_STATUSES.includes(grant.status)
+        ? 'applicationOpen'
+        : 'applicationClosed',
+    )} / ${parseStatus(grant)}`
+
     return (
-      <ActionCard
-        heading={grant.name}
-        backgroundColor="blue"
-        cta={{
-          disabled: !grant.applicationUrl?.slug,
-          label: grant.applicationButtonLabel ?? getTranslationString('apply'),
-          onClick: () => router.push(grant.applicationUrl?.slug ?? ''),
-          icon: 'open',
-          iconType: 'outline',
-        }}
-      />
+      <>
+        {slice.displayTitle && (
+          <Box marginBottom={2}>
+            <Text variant="h3" as="span" color="dark400">
+              {slice.title}
+            </Text>
+          </Box>
+        )}
+        <ActionCard
+          heading={grant.name}
+          text={cardText}
+          backgroundColor="blue"
+          cta={{
+            disabled:
+              !grant?.status ||
+              grant.status === GrantStatus.Closed ||
+              grant.status === GrantStatus.Unknown,
+            size: 'small',
+            label:
+              grant.applicationButtonLabel ?? getTranslationString('apply'),
+            onClick: () => router.push(grant.applicationUrl?.slug ?? ''),
+            icon: 'open',
+            iconType: 'outline',
+          }}
+        />
+      </>
     )
   }
 
-  const cards = slice.resolvedGrantsList?.items
+  const cards = grantItems
     ?.map((grant) => {
       if (grant.id) {
         return {
@@ -182,16 +212,24 @@ const GrantCardsList = ({ slice }: SliceProps) => {
     })
     .filter(isDefined)
 
-  return (
-    <Box padding={1} borderColor="blue100" borderRadius="large">
-      <InfoCardGrid
-        columns={1}
-        cardsBorder="blue200"
-        variant="detailed"
-        cards={cards ?? []}
-      />
-    </Box>
-  )
+  if (slice.sorting)
+    return (
+      <>
+        {slice.displayTitle && (
+          <Box marginBottom={2}>
+            <Text variant="h3" as="span" color="dark400">
+              {slice.title}
+            </Text>
+          </Box>
+        )}
+        <InfoCardGrid
+          columns={1}
+          cardsBorder="blue200"
+          variant="detailed"
+          cards={cards ?? []}
+        />
+      </>
+    )
 }
 
 export default GrantCardsList

apps/web/screens/Grants/Grant/Grant.tsx

@@ -181,6 +181,24 @@ const GrantSinglePage: CustomScreen<GrantSingleProps> = ({ grant, locale }) => {
             </>
           ) : undefined}
 
+          {grant.answeringQuestions?.length ? (
+            <>
+              <Box>
+                <Text variant="h3">
+                  {formatMessage(m.single.answeringQuestions)}
+                </Text>
+                <Box className="rs_read">
+                  {webRichText(
+                    grant.answeringQuestions as SliceType[],
+                    undefined,
+                    locale,
+                  )}
+                </Box>
+              </Box>
+              <Divider />
+            </>
+          ) : undefined}
+
           {grant.applicationHints?.length ? (
             <Box className="rs_read">
               {webRichText(