CU-8692r6neh_Seperate-Footer_Patryk-Kosiski

frontend/src/Components/Footer/Footer.tsx

@@ -0,0 +1,28 @@
+import {Group, Text} from "@mantine/core";
+import {Languages} from "../../Services/Constants";
+import {useTranslation} from "react-i18next";
+
+export const Footer = () => {
+
+  const { t, i18n } = useTranslation('footer');
+
+  return(
+    <Group position={"apart"} p={"md"} sx={(theme) => ({
+      backgroundColor: (theme.colorScheme === "dark" ? "#191919" : "#efefef")
+    })}>
+      <Group>
+        {Languages().map((language, key) => {
+          return (
+            <Text key={key} sx={{cursor: 'pointer'}} onClick={() => {
+              i18n.changeLanguage(language.code);
+              localStorage.setItem('language', language.code)
+            }}>{language.name}</Text>
+          )
+        })}
+      </Group>
+      <Text>
+        {t('creators')}
+      </Text>
+    </Group>
+  );
+}

frontend/src/Components/Footer/index.tsx

@@ -0,0 +1 @@
+export * from './Footer';

frontend/src/Components/ParticleBg/ParticleBg.tsx

@@ -2,9 +2,12 @@ import React, {useCallback} from "react";
 import Particles from "react-tsparticles";
 import type { Engine } from "tsparticles-engine";
 import {loadFull} from "tsparticles";
+import {useMantineTheme} from "@mantine/core";
 
 export const ParticleBg = () => {
 
+  const theme = useMantineTheme();
+
   const customInit = useCallback(async (engine: Engine) => {
     await loadFull(engine);
   }, []);
@@ -39,10 +42,10 @@ export const ParticleBg = () => {
     },
     particles: {
       color: {
-        value: "#ffffff"
+        value: theme.colorScheme === 'dark' ? "#ffffff" : "#000000"
       },
       links: {
-        color: "#ffffff",
+        color: theme.colorScheme === 'dark' ? "#ffffff" : "#000000",
         distance: 60,
         enable: true,
         opacity: 0.6,
@@ -57,7 +60,7 @@ export const ParticleBg = () => {
         outModes: {
           default: "bounce"
         },
-        random: true,
+        random: false,
         speed: .7,
         straight: false
       },
@@ -66,7 +69,7 @@ export const ParticleBg = () => {
           enable: true,
           area: 800
         },
-        value: 80
+        value: 60
       },
       opacity: {
         value: 0.3

frontend/src/Pages/Login/Login.tsx

@@ -14,13 +14,13 @@ import {ContainerVhVw} from "../../Components/ContainerVhVw";
 import {useForm} from "@mantine/form";
 import {useNavigate} from "react-router-dom";
 import {IconAt, IconLock} from "@tabler/icons-react";
-import {Languages} from "../../Services/Constants";
 import { useTranslation } from "react-i18next";
 import {ParticleBg} from "../../Components/ParticleBg";
+import {Footer} from "../../Components/Footer";
 
 export const Login = () => {
 
-  const {t, i18n} = useTranslation('login');
+  const {t} = useTranslation('login');
   const navigate = useNavigate();
   const form = useForm({
     initialValues: {
@@ -42,7 +42,7 @@ export const Login = () => {
             <Stack spacing="xs">
               <Text size={92} fw={400} variant={"gradient"} ff={'Cabin Sketch'} sx={{lineHeight: 1}}
                     gradient={{from: 'hotpink', to: 'aqua', deg: 45}}>{t('title.label')}</Text>
-              <Text>{t('title.sublabel')}</Text>
+              <Text size={"lg"}>{t('title.sublabel')}</Text>
             </Stack>
             <Box>
               <Card w={300} radius={"md"} shadow={"md"}> {/*here is login form*/}
@@ -90,21 +90,7 @@ export const Login = () => {
           </Group>
         </Center>
       </ContainerVhVw>
-      <Group position={"apart"} p={"md"} sx={{backgroundColor: "#191919"}}>
-        <Group>
-          {Languages().map((language, key) => {
-            return (
-              <Text key={key} sx={{cursor: 'pointer'}} onClick={() => {
-                i18n.changeLanguage(language.code);
-                localStorage.setItem('language', language.code)
-              }}>{language.name}</Text>
-            )
-          })}
-        </Group>
-        <Text>
-          {t('creators')}
-        </Text>
-      </Group>
+      <Footer />
     </>
   )
 }

frontend/src/Providers/ThemeProvider.tsx

@@ -18,6 +18,9 @@ export const ThemeProvider = ({children}: { children: ReactNode }) => {
     <ColorSchemeProvider colorScheme={colorScheme} toggleColorScheme={toggleColorScheme}>
       <MantineProvider theme={{
         colorScheme: colorScheme,
+        colors: {
+          'footer-color': ['#191919', '#c0bdbd']
+        },
         fontFamily: 'Lato, sans-serif',
       }} withGlobalStyles withNormalizeCSS>
         {children}

frontend/src/Translations/en/footer.json

@@ -1,4 +1,5 @@
 {
+	"creators": "Created with ❤️ by MeowHub team",
 	"language": {
 		"english": "English",
 		"polish": "Polish"

frontend/src/Translations/en/login.json

@@ -13,7 +13,6 @@
 		"recovery": "Forgot password?",
 		"signup": "Sign up"
 	},
-	"creators": "Created with ❤️ by MeowHub team",
 	"title": {
 		"label": "MeowHub",
 		"sublabel": "Find your meme soulmate!"

frontend/src/Translations/main.babel

@@ -22,6 +22,21 @@
 					<file_node>
 						<name>footer</name>
 						<children>
+							<concept_node>
+								<name>creators</name>
+								<description/>
+								<comment/>
+								<translations>
+									<translation>
+										<language>en-US</language>
+										<approved>true</approved>
+									</translation>
+									<translation>
+										<language>pl-PL</language>
+										<approved>true</approved>
+									</translation>
+								</translations>
+							</concept_node>
 							<folder_node>
 								<name>language</name>
 								<children>
@@ -247,21 +262,6 @@
 									</concept_node>
 								</children>
 							</folder_node>
-							<concept_node>
-								<name>creators</name>
-								<description/>
-								<comment/>
-								<translations>
-									<translation>
-										<language>en-US</language>
-										<approved>true</approved>
-									</translation>
-									<translation>
-										<language>pl-PL</language>
-										<approved>true</approved>
-									</translation>
-								</translations>
-							</concept_node>
 							<folder_node>
 								<name>title</name>
 								<children>

frontend/src/Translations/pl/footer.json

@@ -1,4 +1,5 @@
 {
+	"creators": "Stworzone z ❤️ przez zespół MeowHub",
 	"language": {
 		"english": "Angielski",
 		"polish": "Polski"

frontend/src/Translations/pl/login.json

@@ -13,7 +13,6 @@
 		"recovery": "Zapomniałeś hasła?",
 		"signup": "Zarejestruj się"
 	},
-	"creators": "Stworzone z ❤️ przez zespół MeowHub",
 	"title": {
 		"label": "MeowHub",
 		"sublabel": "Znajdź swoją bratnią duszę do memienia!"