Add a disclaimer in the application window for students (#854)

Author: krusche

client/src/components/TopicDisclaimerAlert/TopicDisclaimerAlert.tsx

@@ -0,0 +1,3 @@
+export const TOPIC_DISCLAIMER_TEXT =
+  'Topics are offered by different research groups. Please verify based on your study program that ' +
+  'you are eligible to write your thesis at the respective research group before submitting your application.'

client/src/pages/LandingPage/LandingPage.tsx

@@ -1,12 +1,12 @@
 import TopicsProvider from '../../providers/TopicsProvider/TopicsProvider'
 import TopicsTable from '../../components/TopicsTable/TopicsTable'
 import { TopicState } from '../../requests/responses/topic'
-import { Button, Group, Stack, Center } from '@mantine/core'
+import { Alert, Button, Group, Stack, Center } from '@mantine/core'
 import { Link, useParams, useSearchParams } from 'react-router'
 import PublishedTheses from './components/PublishedTheses/PublishedTheses'
 import { usePageTitle } from '../../hooks/theme'
 import LandingPageHeader from './components/LandingPageHeader/LandingPageHeader'
-import { ListIcon, SquaresFourIcon } from '@phosphor-icons/react'
+import { InfoIcon, ListIcon, SquaresFourIcon } from '@phosphor-icons/react'
 import { useEffect, useMemo, useState } from 'react'
 import { useDebouncedValue } from '@mantine/hooks'
 import { GLOBAL_CONFIG } from '../../config/global'
@@ -16,6 +16,7 @@ import { doRequest } from '../../requests/request'
 import { showSimpleError } from '../../utils/notification'
 import { getApiResponseErrorMessage } from '../../requests/handler'
 import TopicSearchFilters from '../../components/TopicSearchFilters/TopicSearchFilters'
+import { TOPIC_DISCLAIMER_TEXT } from '../../components/TopicDisclaimerAlert/TopicDisclaimerAlert'
 
 const LandingPage = () => {
   usePageTitle('Find a Thesis Topic')
@@ -135,6 +136,10 @@ const LandingPage = () => {
         }
       />
 
+      <Alert variant='light' color='blue' icon={<InfoIcon />} style={{ flexShrink: 0 }}>
+        {TOPIC_DISCLAIMER_TEXT}
+      </Alert>
+
       <TopicSearchFilters
         searchKey={searchKey}
         setSearchKey={setSearchKey}

client/src/pages/LandingPage/components/LandingPageHeader/LandingPageHeader.tsx

@@ -38,7 +38,7 @@ const LandingPageHeader = ({ researchGroupId }: LandingPageHeaderProps) => {
     <Card
       radius='md'
       bg={computedColorScheme === 'dark' ? 'dark.6' : 'gray.1'}
-      p='xl'
+      p='md'
       style={{ flexShrink: 0 }}
     >
       <Flex justify='flex-start' align='center' gap='xl' wrap='nowrap'>
@@ -55,7 +55,7 @@ const LandingPageHeader = ({ researchGroupId }: LandingPageHeaderProps) => {
           </Title>
         </Flex>
 
-        <LogoCircle size={100} logoSize={80} visibleFrom='sm' />
+        <LogoCircle size={80} logoSize={60} visibleFrom='sm' />
       </Flex>
     </Card>
   )

client/src/pages/ReplaceApplicationPage/components/SelectTopicStep/SelectTopicStep.tsx

@@ -1,6 +1,8 @@
 import { ITopic } from '../../../../requests/responses/topic'
-import { Stack } from '@mantine/core'
+import { Alert, Stack } from '@mantine/core'
+import { InfoIcon } from '@phosphor-icons/react'
 import React, { useEffect, useState } from 'react'
+import { TOPIC_DISCLAIMER_TEXT } from '../../../../components/TopicDisclaimerAlert/TopicDisclaimerAlert'
 import { GLOBAL_CONFIG } from '../../../../config/global'
 import { useSearchParams } from 'react-router'
 import { useDebouncedValue } from '@mantine/hooks'
@@ -64,6 +66,9 @@ const SelectTopicStep = (props: ISelectTopicStepProps) => {
 
   return (
     <Stack gap={'0rem'} pt={'1rem'}>
+      <Alert variant='light' color='blue' icon={<InfoIcon />} mb='md'>
+        {TOPIC_DISCLAIMER_TEXT}
+      </Alert>
       <TopicSearchFilters
         searchKey={searchKey}
         setSearchKey={setSearchKey}