Merge pull request #40 from ZorrillosDev/fix/images/responsive

fix: responsive images and center footer, also added peertube to footer
WatchItDev · Apr 23, 2024 · 4e58adf · 4e58adf
2 parents 3ed7937 + 7f85c50
commit 4e58adf
Show file tree

Hide file tree

Showing 7 changed files with 44 additions and 41 deletions.
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
@@ -9,16 +9,19 @@ import Logo from '@assets/img/watchit_logo.svg'
 import Mastodon from '@assets/img/mastodon.svg'
 import { FooterSections } from '@src/config'
 import {
-  IconBrandDiscord,
-  IconBrandFacebook,
-  IconBrandInstagram, IconBrandMedium,
   IconBrandReddit,
-  IconBrandTelegram,
-  IconBrandTwitter
+  IconBrandTelegram
 } from '@tabler/icons'
-import { DISCORD, FACEBOOK, INSTAGRAM, MATRIX, MASTODON, MEDIUM, REDDIT, TELEGRAM, TWITTER } from '@navigation/CONSTANTS'
+import {
+  MATRIX,
+  MASTODON,
+  REDDIT,
+  TELEGRAM,
+  PEERTUBE
+} from '@navigation/CONSTANTS'
 import { IconBrandMatrix } from '@components/Icons'
 import { Random } from "@src/utils";
+import {IconPeertube} from "@components/Icons/custom/IconPeertube";
 
 // ===========================|| FOOTER ||=========================== //
 
@@ -37,26 +40,11 @@ const Footer: FC = (): JSX.Element => {
               mb: { xs: 3, sm: 0 }
             }}
           >
-            <Box display='flex' justifyContent='center' alignItems='center' flexDirection='column' sx={{ mr: 4 }}>
+            <Box display='flex' justifyContent='center' alignItems='center' flexDirection='column' sx={{ mr: { xs: 0, sm: 4 } }}>
               <FooterLogoWrapper>
                 <Logo />
               </FooterLogoWrapper>
               <Box display='flex' justifyContent='center' alignItems='center' flexWrap='nowrap' sx={{ mt: 1 }}>
-                {/* <Link href={FACEBOOK} target='_blank' rel='noreferrer'>
-                  <FooterSocialItem>
-                    <IconBrandFacebook stroke={1} />
-                  </FooterSocialItem>
-                </Link>
-                <Link href={TWITTER} target='_blank' rel='noreferrer'>
-                  <FooterSocialItem>
-                    <IconBrandTwitter stroke={1} />
-                  </FooterSocialItem>
-                </Link>
-                <Link href={INSTAGRAM} target='_blank' rel='noreferrer'>
-                  <FooterSocialItem>
-                    <IconBrandInstagram stroke={1} />
-                  </FooterSocialItem>
-                </Link> */}
                 <Link href={TELEGRAM} target='_blank' rel='noreferrer'>
                   <FooterSocialItem>
                     <IconBrandTelegram stroke={1} />
@@ -67,16 +55,6 @@ const Footer: FC = (): JSX.Element => {
                     <IconBrandReddit stroke={1} />
                   </FooterSocialItem>
                 </Link>
-                {/* <Link href={DISCORD} target='_blank' rel='noreferrer'>
-                  <FooterSocialItem>
-                    <IconBrandDiscord stroke={1} />
-                  </FooterSocialItem>
-                </Link> */}
-                {/* <Link href={MEDIUM} target='_blank' rel='noreferrer'>
-                  <FooterSocialItem>
-                    <IconBrandMedium stroke={1} />
-                  </FooterSocialItem>
-                </Link> */}
                 <Link href={MATRIX} target='_blank' rel='noreferrer'>
                   <FooterSocialItem>
                     <IconBrandMatrix sx={{ width: '1.8em' }} />
@@ -87,18 +65,23 @@ const Footer: FC = (): JSX.Element => {
                     <Mastodon />
                   </FooterSocialItem>
                 </Link>
+                <Link href={PEERTUBE} target='_blank' rel='noreferrer'>
+                  <FooterSocialItem>
+                    <IconPeertube />
+                  </FooterSocialItem>
+                </Link>
               </Box>
             </Box>
           </Grid>
           <Grid item xs={12} sm={2} sx={{ display: { xs: 'none', md: 'block' } }} />
           <Grid item xs={12} sm={5}>
-            <Grid container spacing={1} justifyContent={'end'}>
+            <Grid container spacing={1} sx={{ justifyContent: { xs: 'center', sm: 'end' } }}>
               {
                 Object.keys(FooterSections).map((sectionKey) => {
                   const section = FooterSections[sectionKey]
 
                   return (
-                    <Grid item xs={4} key={Random.getRandomNumberBetween(0,1000)}>
+                    <Grid item xs={4} sm={4} key={Random.getRandomNumberBetween(0,1000)}>
                       <Grid container spacing={0.3}>
                         <Grid item xs={12}>
                           <Typography

diff --git a/src/components/Icons/custom/IconPeertube.tsx b/src/components/Icons/custom/IconPeertube.tsx
@@ -0,0 +1,16 @@
+// react imports
+import React, { FC, ReactElement } from 'react'
+
+// mui imports
+import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon'
+
+// ===========================|| CUSTOM ICON PEERTUBE ||=========================== //
+
+export const IconPeertube: FC<SvgIconProps> = (props): ReactElement => {
+  return (
+    <SvgIcon {...props} viewBox="0 0 758 654">
+      <path d="M245.985 556.239L243.531 91.1902L647.503 321.59L245.985 556.239Z" fill="transparent" stroke="white" strokeWidth="16"/>
+      <path d="M256.703 324.876L438.548 215.184L442.621 427.512L256.703 324.876Z" fill="white" stroke="white" strokeWidth="16"/>
+    </SvgIcon>
+  )
+}
diff --git a/src/config/footer.tsx b/src/config/footer.tsx
@@ -28,7 +28,7 @@ export const FooterSections: FooterSection = {
     "Help": [
         {
             obj: {
-                "name": "Support",
+                "name": "Customer Support",
                 "url": "https://matrix.to/#/#watchitsupport:matrix.org",
             }
         }

diff --git a/src/navigation/CONSTANTS.ts b/src/navigation/CONSTANTS.ts
@@ -12,3 +12,4 @@ export const MEDIUM = 'https://medium.com/@watchit.app'
 export const MATRIX = 'https://matrix.to/#/#watchit:matrix.org'
 export const MASTODON = 'https://fosstodon.org/web/@watchit#'
 export const FACEBOOK = 'https://www.facebook.com/profile.php?id=100078489280150'
+export const PEERTUBE = 'https://fediverse.tv/c/watchit/videos'
diff --git a/src/pages/Landing/components/LandingDistribution.tsx b/src/pages/Landing/components/LandingDistribution.tsx
@@ -23,7 +23,10 @@ const LandingDistribution: FC = (): JSX.Element => {
 
   return (
     <Container sx={{ zIndex: 2 }}>
-      <Grid container spacing={3} justifyContent='center' alignItems='center'>
+      <Grid
+        container spacing={3} justifyContent='center' alignItems='center'
+        sx={{ flexDirection: { xs: 'column-reverse', sm: 'row' }, flexWrap: { xs: 'nowrap', sm: 'wrap' } }}
+      >
         <Grid item xs={12} sm={6} zIndex={10} width='100%'>
           <AnimationOnScroll animateIn='animate__bounceInLeft' animateOut='animate__fadeOut'>
             <LandingInfo
@@ -32,7 +35,7 @@ const LandingDistribution: FC = (): JSX.Element => {
             />
           </AnimationOnScroll>
         </Grid>
-        <Grid item xs={12} sm={6} zIndex={10} sx={{ position: 'relative' }}>
+        <Grid item xs={12} sm={6} zIndex={10} width='100%' sx={{ position: 'relative' }}>
           <AnimationOnScroll
             animateIn='animate__fadeIn' animateOut='animate__fadeOut'
             style={{ width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}

diff --git a/src/pages/Landing/components/LandingMission.tsx b/src/pages/Landing/components/LandingMission.tsx
@@ -24,9 +24,9 @@ const LandingMission: FC = (): JSX.Element => {
     <Container sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: '50vh' }}>
       <LandingMissionWrapper
         container spacing={3}
-        sx={{ flexDirection: { xs: 'column-reverse', sm: 'row' }, flexWrap: { xs: 'nowrap', sm: 'wrap' } }}
+        sx={{ flexDirection: { xs: 'column', sm: 'row' }, flexWrap: { xs: 'nowrap', sm: 'wrap' } }}
       >
-        <Grid item xs={12} sm={6} zIndex={10}>
+        <Grid item width='100%' xs={12} sm={6} zIndex={10}>
           <AnimationOnScroll
             style={{ width: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center' }}
             animateIn='animate__fadeIn' animateOut='animate__fadeOut'

diff --git a/src/pages/Landing/components/LandingRenting.tsx b/src/pages/Landing/components/LandingRenting.tsx
@@ -25,9 +25,9 @@ const LandingRenting: FC = (): JSX.Element => {
     <Container sx={{ zIndex: 2 }}>
       <Grid
         container spacing={3} justifyContent='center' alignItems='center'
-        sx={{ flexDirection: { xs: 'column-reverse', sm: 'row' }, flexWrap: { xs: 'nowrap', sm: 'wrap' } }}
+        sx={{ flexDirection: { xs: 'column', sm: 'row' }, flexWrap: { xs: 'nowrap', sm: 'wrap' } }}
       >
-        <Grid item xs={12} sm={6} zIndex={10}>
+        <Grid item width='100%' xs={12} sm={6} zIndex={10}>
           <AnimationOnScroll
             animateIn='animate__fadeIn' animateOut='animate__fadeOut'
             style={{ width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}