feat(web): Grant - Mobile view and sidemenu refactor

apps/web/screens/Grants/Grant/Grant.css.ts

@@ -0,0 +1,7 @@
+import { globalStyle, style } from '@vanilla-extract/css'
+
+export const noUnderline = style({})
+
+globalStyle(`${noUnderline} span`, {
+  boxShadow: 'none',
+})

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

@@ -1,3 +1,4 @@
+import { useMemo } from 'react'
 import { useIntl } from 'react-intl'
 import NextLink from 'next/link'
 import { useRouter } from 'next/router'
@@ -8,11 +9,12 @@ import {
   Box,
   Breadcrumbs,
   Divider,
+  Hidden,
   Stack,
   Text,
 } from '@island.is/island-ui/core'
 import { Locale } from '@island.is/shared/types'
-import { GrantWrapper } from '@island.is/web/components'
+import { GrantWrapper, InstitutionPanel } from '@island.is/web/components'
 import {
   ContentLanguage,
   CustomPageUniqueIdentifier,
@@ -32,7 +34,10 @@ import {
 import SidebarLayout from '../../Layouts/SidebarLayout'
 import { GET_GRANT_QUERY } from '../../queries'
 import { m } from '../messages'
-import { GrantSidebar } from './GrantSidebar'
+import { generateStatusTag, parseStatus } from '../utils'
+import DetailPanel from './GrantSidebar/DetailPanel'
+import ExtraPanel from './GrantSidebar/ExtraPanel'
+import { GrantSidebar } from './GrantSidebar/GrantSidebar'
 
 const GrantSinglePage: CustomScreen<GrantSingleProps> = ({ grant, locale }) => {
   const { formatMessage } = useIntl()
@@ -67,6 +72,11 @@ const GrantSinglePage: CustomScreen<GrantSingleProps> = ({ grant, locale }) => {
     },
   ]
 
+  const status = useMemo(
+    () => (grant ? parseStatus(grant, formatMessage, locale) : null),
+    [grant, formatMessage, locale],
+  )
+
   if (!grant) {
     return null
   }
@@ -100,21 +110,37 @@ const GrantSinglePage: CustomScreen<GrantSingleProps> = ({ grant, locale }) => {
             </Text>
             <Text variant="default">{grant.description}</Text>
           </Box>
-          <ActionCard
-            heading={grant.name}
-            backgroundColor="blue"
-            cta={{
-              disabled: !grant.applicationUrl?.slug,
-              label:
-                grant.applicationButtonLabel ?? formatMessage(m.single.apply),
-              onClick: () => router.push(grant.applicationUrl?.slug ?? ''),
-              icon: 'open',
-              iconType: 'outline',
-            }}
-          />
+          <Hidden above="sm">
+            <DetailPanel grant={grant} locale={locale} button />
+          </Hidden>
+          <Hidden below="md">
+            <ActionCard
+              heading={grant.name}
+              text={
+                status
+                  ? generateStatusTag(status.applicationStatus, formatMessage)
+                      ?.label +
+                    (status.deadlineStatus ? ' / ' + status.deadlineStatus : '')
+                  : ''
+              }
+              backgroundColor="blue"
+              cta={{
+                disabled:
+                  status?.applicationStatus === 'closed' ||
+                  status?.applicationStatus === 'unknown',
+                size: 'small',
+                label:
+                  grant.applicationButtonLabel ?? formatMessage(m.single.apply),
+                onClick: () => router.push(grant.applicationUrl?.slug ?? ''),
+                icon: 'open',
+                iconType: 'outline',
+              }}
+            />
+          </Hidden>
           {grant.specialEmphasis?.length ? (
             <>
               <Box className="rs_read">
+                {status?.note && <Text fontWeight="medium">{status.note}</Text>}
                 {webRichText(
                   grant.specialEmphasis as SliceType[],
                   undefined,
@@ -164,6 +190,20 @@ const GrantSinglePage: CustomScreen<GrantSingleProps> = ({ grant, locale }) => {
               )}
             </Box>
           ) : undefined}
+          <Hidden above="md">
+            <ExtraPanel grant={grant} />
+          </Hidden>
+          <Hidden above="md">
+            <InstitutionPanel
+              institutionTitle={formatMessage(m.single.provider)}
+              institution={
+                grant.fund?.parentOrganization.title ??
+                formatMessage(m.single.unknownInstitution)
+              }
+              img={grant.fund?.parentOrganization.logo?.url}
+              locale={locale}
+            />
+          </Hidden>
         </Stack>
       </SidebarLayout>
     </GrantWrapper>