move footer content to left sidebar

Author: Veikkosuhonen

src/client/App.tsx

@@ -129,7 +129,6 @@ const Layout = () => {
         <Box sx={{ flex: 1 }}>
           <Outlet />
         </Box>
-        {!isEmbedded && <Footer />}
         <Feedback />
       </Box>
       <AdminLoggedInAsBanner />

src/client/components/ChatV2/ChatV2.tsx

@@ -34,6 +34,7 @@ import EmailButton from './EmailButton'
 import { MenuBookTwoTone, Tune } from '@mui/icons-material'
 import { useChatScroll } from '../../hooks/useChatScroll'
 import { TestUseInfoV2 } from './TestUseInfo'
+import Footer from '../Footer'
 
 function useLocalStorageStateWithURLDefault(key: string, defaultValue: string, urlKey: string) {
   const [value, setValue] = useLocalStorageState(key, defaultValue)
@@ -366,7 +367,6 @@ export const ChatV2 = () => {
               sx={{}}
               course={course}
               handleReset={handleReset}
-              user={user}
               t={t}
               setSettingsModalOpen={setSettingsModalOpen}
               setDisclaimerStatus={setDisclaimerStatus}
@@ -381,7 +381,6 @@ export const ChatV2 = () => {
             sx={{ display: { xs: 'none', lg: 'block' }, position: 'sticky', bottom: '0px' }}
             course={course}
             handleReset={handleReset}
-            user={user}
             t={t}
             setSettingsModalOpen={setSettingsModalOpen}
             setDisclaimerStatus={setDisclaimerStatus}
@@ -596,7 +595,6 @@ const LeftMenu = ({
   sx,
   course,
   handleReset,
-  user,
   t,
   setSettingsModalOpen,
   setDisclaimerStatus,
@@ -607,32 +605,34 @@ const LeftMenu = ({
   messages,
 }) => {
   return (
-    <Box sx={sx}>
-      <Box
-        sx={{
-          flex: 1,
-          minWidth: 300,
-          maxWidth: { xs: 300, md: 400 },
-          position: 'relative',
-          height: '100%',
-          borderRight: '1px solid rgba(0, 0, 0, 0.12)',
-        }}
-      >
-        <Box sx={{ position: 'sticky', top: 70, padding: '2rem 1.5rem' }}>
-          {course && <ChatInfo course={course} />}
-          <Box sx={{ display: 'flex', flexDirection: 'column', gap: '0.6rem', mb: '2rem' }}>
-            <OutlineButtonBlack startIcon={<RestartAltIcon />} onClick={handleReset} id="empty-conversation-button">
-              {t('chat:emptyConversation')}
-            </OutlineButtonBlack>
-
-            <EmailButton messages={messages} disabled={!messages?.length} />
-            <OutlineButtonBlack startIcon={<Tune />} onClick={() => setSettingsModalOpen(true)} id="settings-button">
-              {t('chat:settings')}
-            </OutlineButtonBlack>
-            <OutlineButtonBlack startIcon={<HelpIcon />} onClick={() => setDisclaimerStatus(true)} id="help-button">
-              {t('info:title')}
-            </OutlineButtonBlack>
-          </Box>
+    <Box
+      sx={{
+        flex: 1,
+        minWidth: 300,
+        maxWidth: { xs: 300, md: 400 },
+        position: 'relative',
+        height: '100vh',
+        borderRight: '1px solid rgba(0, 0, 0, 0.12)',
+        paddingTop: '4rem',
+
+        display: 'flex',
+        flexDirection: 'column',
+      }}
+    >
+      <Box px="1rem">
+        {course && <ChatInfo course={course} />}
+        <Box sx={{ display: 'flex', flexDirection: 'column', gap: '0.6rem', mb: '2rem' }}>
+          <OutlineButtonBlack startIcon={<RestartAltIcon />} onClick={handleReset} id="empty-conversation-button">
+            {t('chat:emptyConversation')}
+          </OutlineButtonBlack>
+
+          <EmailButton messages={messages} disabled={!messages?.length} />
+          <OutlineButtonBlack startIcon={<Tune />} onClick={() => setSettingsModalOpen(true)} id="settings-button">
+            {t('chat:settings')}
+          </OutlineButtonBlack>
+          <OutlineButtonBlack startIcon={<HelpIcon />} onClick={() => setDisclaimerStatus(true)} id="help-button">
+            {t('info:title')}
+          </OutlineButtonBlack>
           {course && showRagSelector && (
             <>
               <Typography variant="h6" sx={{ mb: 1, display: 'flex', gap: 1, alignItems: 'center' }} fontWeight="bold">
@@ -646,7 +646,8 @@ const LeftMenu = ({
             </>
           )}
         </Box>
-      </Box>{' '}
+      </Box>
+      <Footer />
     </Box>
   )
 }

src/client/components/Footer/index.tsx

@@ -4,7 +4,7 @@ import { Trans, useTranslation } from 'react-i18next'
 import toskaColor from '../../assets/toscalogo_color.svg'
 import { useQuery } from '@tanstack/react-query'
 import { maxBy } from 'lodash'
-import { Release } from '../../../shared/types'
+import type { Release } from '../../../shared/types'
 import { formatDistanceToNow } from 'date-fns'
 import { locales } from '../../locales/locales'
 
@@ -13,7 +13,7 @@ const supportEmail = '[email protected]'
 const styles = {
   supportBox: {
     py: '1rem',
-    px: '3rem',
+    px: '1rem',
     display: 'flex',
     justifyContent: 'space-between',
     alignItems: 'center',
@@ -42,12 +42,10 @@ const Footer = () => {
   return (
     <Box
       component="footer"
-      sx={(theme) => ({
-        backgroundColor: theme.palette.toskaDark.main,
-        color: theme.palette.toskaDark.contrastText,
+      sx={{
         mt: 'auto',
         width: '100%',
-      })}
+      }}
     >
       <Box sx={styles.supportBox}>
         <Box>
@@ -65,7 +63,7 @@ const Footer = () => {
 
         <Box sx={styles.imageBox}>
           <Link href="https://toska.dev" target="_blank" rel="noopener" underline="hover">
-            <img src={toskaColor} alt="Toska" width="70" />
+            <img src={toskaColor} alt="Toska" width="40" />
           </Link>
         </Box>
       </Box>