Merge pull request #35 from Brahmware:add-rajhans

Add-rajhans

src/components/Copyright/index.tsx

@@ -10,6 +10,10 @@ const CopyRightText = styled(Typography)<CopyrightTextProps>(({ theme }) => ({
   '@media (max-width: 580px)': {
     whiteSpace: 'unset',
   },
+
+  '@media screen and (max-width: 510px)': {
+    textAlign: 'center',
+  },
 }));
 
 const CopyrightYear = styled('span')(({ theme }) => ({

src/containers/Chatak/BillBoard/index.tsx

@@ -103,4 +103,27 @@ export default styled(BillBoard)(({ theme, active = true }) => ({
     minHeight: '30rem',
   },
 
+  '@media screen and (max-width: 760px)': {
+    borderRadius: '0 0 0.75rem 0.75rem',
+    gridColumn: '2 / 20',
+    gridRow: '15 / 21',
+    transform: active ? 'translate(0, 0)' : `translate(0, -90%)`,
+    minHeight: 'unset',
+  },
+
+  '@media screen and (max-width: 510px)': {
+    gridRow: '14 / 21',
+  },
+
+  '@media screen and (max-width: 470px)': {
+    gridRow: '13 / 21',
+  },
+
+  '@media screen and (max-width: 420px)': {
+    gridRow: '12 / 21',
+  },
+
+  '@media screen and (max-width: 400px)': {
+    gridRow: '11 / 21',
+  },
 }));

src/containers/Chatak/PhotoFrame/index.tsx

@@ -86,4 +86,29 @@ export default styled(PhotoFrame)(({ theme }) => ({
     gridColumn: '1 / 13',
     gridRow: '1 / 21',
   },
+
+  '@media screen and (max-width: 760px)': {
+    gridColumn: '1 / 21',
+    gridRow: '1 / 15',
+  },
+
+  '@media screen and (max-width: 510px)': {
+    gridColumn: '1 / 21',
+    gridRow: '1 / 14',
+  },
+
+  '@media screen and (max-width: 470px)': {
+    gridColumn: '1 / 21',
+    gridRow: '1 / 13',
+  },
+
+  '@media screen and (max-width: 420px)': {
+    gridColumn: '1 / 21',
+    gridRow: '1 / 12',
+  },
+
+  '@media screen and (max-width: 400px)': {
+    gridColumn: '1 / 21',
+    gridRow: '1 / 11',
+  },
 }));

src/containers/Chatak/index.tsx

@@ -4,6 +4,19 @@ import { Box, BoxProps, styled } from '@mui/material';
 import PhotoFrame from './PhotoFrame';
 import BillBoard from './BillBoard';
 
+const StyledDivider = styled(Box)(({ theme }) => ({
+  gridColumn: '6 / 16',
+  gridRow: '20 / 21',
+  alignSelf: 'end',
+  height: '1px',
+  width: '100%',
+  backgroundColor: theme.palette.divider,
+
+  '@media screen and (min-width: 761px)': {
+    display: 'none',
+  },
+}));
+
 interface ChatakProps extends BoxProps {
   countDown?: number;
   transitionTime?: number;
@@ -36,6 +49,7 @@ const Chatak: React.FC<ChatakProps> = ({
         alt='Hungry Bengal'
       />
       <BillBoard active={active}/>
+      <StyledDivider />
     </Box>
   )
 };
@@ -47,4 +61,24 @@ export default styled(Chatak)(({ theme }) => ({
   display: 'grid',
   gridTemplateColumns: 'repeat(20, 1fr)',
   gridTemplateRows: 'repeat(20, 1fr)',
+
+  '@media screen and (max-width: 760px)': {
+    gridTemplateRows: `repeat(20, 3rem)`,
+  },
+
+  '@media screen and (max-width: 510px)': {
+    gridTemplateRows: `repeat(20, 2.6rem)`,
+  },
+
+  '@media screen and (max-width: 470px)': {
+    gridTemplateRows: `repeat(20, 2.4rem)`,
+  },
+
+  '@media screen and (max-width: 420px)': {
+    gridTemplateRows: `repeat(20, 2.2rem)`,
+  },
+
+  '@media screen and (max-width: 400px)': {
+    gridTemplateRows: `repeat(20, 2rem)`,
+  },
 }));

src/containers/Flamingo/NavMenu/Contact/index.tsx

@@ -40,5 +40,6 @@ export default styled(Contact)(({ theme }) => ({
     gridColumn: '1 / 25',
     gridRow: ' 19 / 21',
     justifyContent: 'start',
+    alignItems: 'center',
   }
 }));

src/containers/Flamingo/NavMenu/Copyright/index.tsx

@@ -19,4 +19,9 @@ export default styled(Copyright) (({ theme }) => ({
   '& *': {
     textShadow: `${alpha(theme.Colors.black, 0.25)} 1px 0 10px`,
   },
+
+  '@media screen and (max-width: 440px)': {
+    gridColumn: '1 / 25',
+    justifySelf: 'center',
+  },
 }));

src/containers/Flamingo/NavMenu/Legal/index.tsx

@@ -35,6 +35,10 @@ const LegalSection = styled('section')(({ theme }) => ({
     gridRow: '24 / 25',
     justifyContent: 'start',
   },
+
+  '@media (max-width: 440px)': {
+    justifyContent: 'center',
+  }
 }));
 
 const Legal = () => {

src/containers/Flamingo/NavMenu/Settings/index.tsx

@@ -28,7 +28,7 @@ const SettingsSection = styled('section')(({ theme }) => ({
   '@media (max-width: 440px)': {
     gridColumn: '1 / 25',
     gridRow: '22 / 23',
-    justifyContent: 'start',
+    justifyContent: 'center',
   }
 }));
 

src/containers/Footer/Contact/index.tsx

@@ -26,8 +26,15 @@ export default styled(Contact)(({ theme }) => ({
   },
 
   '@media screen and (max-width: 960px)': {
-    gridColumn: '2 / 10',
-    gridRow: '8 / 9',
+    gridColumn: '1 / 10',
+    gridRow: '7 / 8',
     alignItems: 'start',
   },
+
+  '@media screen and (max-width: 840px)': {
+    gridColumn: '1 / 21',
+    gridRow: '9 / 10',
+    justifySelf: 'center',
+    alignItems: 'center',
+  },
 }));

src/containers/Footer/Copyright/index.tsx

@@ -18,8 +18,15 @@ export default styled(Copyright)(({ theme }) => ({
   margin: theme.Spaces.xxs + ' 0',
 
   '@media screen and (max-width: 960px)': {
-    gridColumn: '2 / 20',
-    gridRow: '10 / 11',
+    gridColumn: '1 / 21',
+    gridRow: '11 / 12',
+    alignSelf: 'end',
+    justifyContent: 'center',
+  },
+
+  '@media screen and (max-width: 840px)': {
+    gridColumn: '1 / 21',
+    gridRow: '13 / 14',
     alignSelf: 'end',
     justifyContent: 'center',
   },

src/containers/Footer/Display/index.tsx

@@ -35,7 +35,21 @@ export default styled(Display) (({ theme }) => ({
   },
 
   '@media screen and (max-width: 960px)': {
-    gridRow: '2 / 3',
+    gridRow: '1 / 2',
+    gridColumn: '1 / 21',
+  },
+
+  '@media screen and (max-width: 760px)': {
+    gridColumn: '3 / 19',
+    maxHeight: 'none',
+  },
+
+  '@media screen and (max-width: 700px)': {
     gridColumn: '2 / 20',
   },
+
+  '@media screen and (max-width: 600px)': {
+    gridColumn: '1 / 21',
+  },
+
 }));

src/containers/Footer/Privacy/index.tsx

@@ -67,7 +67,15 @@ export default styled(Privacy)(({ theme }) => ({
   },
 
   '@media screen and (max-width: 960px)': {
-    gridColumn: '2 / 20',
+    gridColumn: '1 / 21',
+    gridRow: '9 / 10',
+    justifyContent: 'center',
+    alignSelf: 'center',
+    marginTop: 0,
+  },
+
+  '@media screen and (max-width: 840px)': {
+    gridColumn: '1 / 21',
     gridRow: '11 / 12',
     justifyContent: 'center',
     alignSelf: 'center',

src/containers/Footer/Subscribe/InputSubscription/index.tsx

@@ -38,4 +38,8 @@ export default styled(InputSubscription)(({ theme }) => ({
   '@media screen and (max-width: 1360px)': {
     width: '28rem',
   },
+
+  '@media screen and (max-width: 510px)': {
+    width: '100%',
+  },
 }));

src/containers/Footer/Subscribe/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Box, BoxProps, styled } from '@mui/material';
+import { Box, BoxProps, Divider, styled } from '@mui/material';
 import InputSubscription from './InputSubscription';
 import ButtonSubscription from './ButtonSubscription';
 
@@ -10,6 +10,28 @@ const SubscribeWrapper = styled(Box)<BoxProps>(({ theme }) => ({
   position: 'relative',
   margin: 0,
   padding: 0,
+
+  '@media screen and (max-width: 510px)': {
+    width: '100%'
+  },
+}));
+
+const StyledDivider = styled(Divider)(({ theme }) => ({
+  display: 'none',
+  width: '100%',
+  height: '0.01px',
+  backgroundColor: theme.palette.divider,
+  margin: '0 auto',
+  marginTop: theme.Spaces.lg,
+  marginBottom: theme.Spaces.lg,
+
+  '@media screen and (max-width: 960px)': {
+    display: 'flex',
+    gridColumn: '1 / 21',
+    gridRow: '5 / 6',
+    marginTop: theme.Spaces.xl,
+    marginBottom: theme.Spaces.xl,
+  },
 }));
 
 interface SubscribeProps extends BoxProps {
@@ -18,12 +40,15 @@ interface SubscribeProps extends BoxProps {
 
 const Subscribe: React.FC<SubscribeProps> = (props) => {
   return (
-    <Box {...props}>
-      <SubscribeWrapper>
-        <InputSubscription />
-        <ButtonSubscription />
-      </SubscribeWrapper>
-    </Box>
+    <React.Fragment>
+      <Box {...props}>
+        <SubscribeWrapper>
+          <InputSubscription />
+          <ButtonSubscription />
+        </SubscribeWrapper>
+      </Box>
+      <StyledDivider />
+    </React.Fragment>
   )
 };
 
@@ -52,10 +77,15 @@ export default styled(Subscribe)(({ theme }) => ({
   },
 
   '@media screen and (max-width: 960px)': {
-    gridColumn: '2 / 20',
-    gridRow: '6 / 7',
+    gridColumn: '1 / 21',
+    gridRow: '5 / 6',
     alignItems: 'center',
     justifySelf: 'center',
   },
 
+  '@media screen and (max-width: 510px)': {
+    width: '100%',
+    justifyContent: 'center',
+  },
+
 }));

src/containers/Footer/TechProvider/index.tsx

@@ -10,6 +10,11 @@ const StyledWrapper = styled(Box)(({ theme }) => ({
   flexDirection: 'column',
   alignItems: 'start',
   justifyContent: 'end',
+
+  '@media screen and (max-width: 510px)': {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
 }));
 
 const StyledTitleText = styled(TitleText)(({ theme }) => ({
@@ -40,6 +45,10 @@ const StyledDivider = styled(Divider)(({ theme }) => ({
   '@media screen and (max-width: 960px)': {
     display: 'flex',
   },
+
+  '@media screen and (max-width: 510px)': {
+    display: 'none',
+  },
 }));
 
 interface TechProviderProps extends BoxProps {
@@ -112,11 +121,25 @@ export default styled(TechProvider)(({ theme }) => ({
   },
 
   '@media screen and (max-width: 960px)': {
-    gridColumn: '2 / 20',
-    gridRow: '8 / 9',
+    gridColumn: '11 / 21',
+    gridRow: '7 / 8',
     justifySelf: 'end',
     alignSelf: 'center',
     flexDirection: 'row',
     gap: theme.Spaces.xxs,
   },
+
+  '@media screen and (max-width: 840px)': {
+    gridColumn: '1 / 21',
+    gridRow: '7 / 8',
+    justifySelf: 'center',
+  },
+
+  '@media screen and (max-width: 510px)': {
+    justifySelf: 'center',
+    alignSelf: 'center',
+    justifyContent: 'center',
+    flexDirection: 'column',
+    gap: theme.Spaces.xxs,
+  },
 }));