Merge pull request #9 from Brahmware:add-koel-container

Update: Social logos

src/components/LanguageChanger/index.tsx

@@ -38,6 +38,7 @@ const ButtonText = styled(Typography)(({ theme }) => ({
   lineHeight: 1.5,
   fontSize: '0.875rem',
   color: theme.palette.error.contrastText,
+  fontWeight: theme.typography.fontWeightRegular,
   cursor: 'pointer',
   whiteSpace: 'nowrap',
 }));

src/components/Socials/index.tsx

@@ -2,7 +2,7 @@ import { Box, BoxProps, styled } from '@mui/material';
 import { SocialIconsProps } from '@interfaces/SocialIconsProps';
 import SocialLink from './SocialLink';
 import FacebookLogo from '@icons/socialMedia/FacebookLogo';
-import TwitterLogo from '@icons/socialMedia/TwitterLogo';
+import XLogo from '@icons/socialMedia/XLogo';
 import LinkedinLogo from '@icons/socialMedia/LinkedinLogo';
 import YoutubeLogo from '@icons/socialMedia/YoutubeLogo';
 import InstagramLogo from '@icons/socialMedia/InstagramLogo';
@@ -35,7 +35,7 @@ const Socials = ({ links, options }: SocialIconsProps) => {
   return (
     <SocialsWrapper {...options}>
       {links.facebook && <SocialLink href={links.facebook}><FacebookLogo /></SocialLink>}
-      {links.twitter && <SocialLink href={links.twitter}><TwitterLogo /></SocialLink>}
+      {links.twitter && <SocialLink href={links.twitter}><XLogo /></SocialLink>}
       {links.linkedin && <SocialLink href={links.linkedin}><LinkedinLogo /></SocialLink>}
       {links.youtube && <SocialLink href={links.youtube}><YoutubeLogo /></SocialLink>}
       {links.instagram && <SocialLink href={links.instagram}><InstagramLogo /></SocialLink>}

src/containers/Koel/Content/index.tsx

@@ -1,6 +1,6 @@
 import ContainedButton from '@components/Button/ContainedButton';
 import { ContentTitleDivider } from '@components/Dividers';
-import { Box, BoxProps, Divider, Typography, styled } from '@mui/material';
+import { Box, BoxProps, Divider, Typography, styled, useTheme } from '@mui/material';
 import Link from 'next/link';
 import React from 'react';
 
@@ -92,5 +92,25 @@ export default styled(Content)(({ theme, direction = 'ltr' }) => ({
 
   [theme.Breakpoints.down('xs')]: {
     gridRow: '9 / 21',
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center',
+
+    '& > *': {
+      textAlign: 'center',
+    },
+
+    '& hr': {
+      alignSelf: 'center',
+    },
+
+    '& br': {
+      display: 'none'
+    },
+
+    '& p > br': {
+      display: 'block'
+    }
   },
 }));

src/icons/socialMedia/FacebookLogo.tsx

@@ -21,11 +21,11 @@ const FacebookLogo = ({ hovered, ...props }: SocialMediaIconProps) => {
     >
       <defs>
         <style>
-          {`.ab530a55-7b8e-4d6a-957a-d196bf9814ae {
-            fill: url(#e6036cbc-9faa-4599-a3df-a90eac83ea55);
+          {`.ab530a55 {
+            fill: url(#ge6036cbc);
           }`}
         </style>
-        <linearGradient id="e6036cbc-9faa-4599-a3df-a90eac83ea55" x1="-956.95337" y1="133.77482" x2="-956.95337" y2="133.29375" gradientTransform="translate(38288.13477 -5301.99759) scale(40 39.7778)" gradientUnits="userSpaceOnUse">
+        <linearGradient id="ge6036cbc" x1="10" y1="19.13242" x2="10" y2="0.28178" gradientTransform="translate(0 0.1111) scale(1 0.99445)" gradientUnits="userSpaceOnUse">
           <stop
             offset="0"
             stopColor={!mouse ? alpha(theme.palette.text.secondary, 0.8) : "#0062e0"}
@@ -48,7 +48,7 @@ const FacebookLogo = ({ hovered, ...props }: SocialMediaIconProps) => {
           />
         </linearGradient>
       </defs>
-      <path className="ab530a55-7b8e-4d6a-957a-d196bf9814ae" d="M8.415,19.80254v-6.984H5.93841V10.04483H8.415V7.86543A3.58924,3.58924,0,0,1,12.27844,4.002a16.198,16.198,0,0,1,2.17939.19813v2.5261H13.17c-1.18877,0-1.486.59438-1.486,1.38687v1.93174h2.62517l-.4458,2.77375H11.68408v6.984l.00051.04043A9.92283,9.92283,0,1,0,.0937,10.04483a10.0464,10.0464,0,0,0,8.321,9.81662Z" />
+      <path className="ab530a55" d="M16.77173.28571H3.22827A2.94257,2.94257,0,0,0,.28571,3.22827V16.77173a2.94257,2.94257,0,0,0,2.94256,2.94256H8.25476L8.2514,12.72H5.82288V10H8.2514V7.86285A3.5197,3.5197,0,0,1,12.04,4.07428a15.89109,15.89109,0,0,1,2.13714.19427V6.74573H12.91431c-1.16571,0-1.45716.58282-1.45716,1.36V10h2.57428l-.43713,2.72H11.45715l.0033,6.99426h5.31128a2.94257,2.94257,0,0,0,2.94256-2.94256V3.22827A2.94257,2.94257,0,0,0,16.77173.28571Z" />
     </svg>
 
   )

src/icons/socialMedia/WhatsappLogo.tsx

@@ -23,8 +23,8 @@ const WhatsappLogo = ({ hovered, ...props }: SocialMediaIconProps) => {
         <style>
           {`
             .cls-1 {
-            fill: ${!mouse ? alpha(theme.palette.text.secondary, 0.8) : '#67c15e'};
-            fill-rule: evenodd;
+              fill: ${!mouse ? alpha(theme.palette.text.secondary, 0.8) : '#67c15e'};
+              fill-rule: evenodd;
             }
           `}
         </style>

src/icons/socialMedia/XLogo.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import svgCommonProps from '@utils/svgCommonProps';
+import { SocialMediaIconProps } from '@interfaces/SVGProps';
+import { styled, useTheme, alpha } from '@mui/material';
+
+const XLogo = ({ hovered, ...props }: SocialMediaIconProps) => {
+
+  const theme = useTheme();
+  const [mouse, setMouse] = React.useState(false);
+
+  return (
+    <svg
+      {...svgCommonProps}
+      data-name='X.com Logo'
+      width='20'
+      height='20'
+      viewBox='0 0 20 20'
+      onMouseEnter={() => setMouse(true)}
+      onMouseLeave={() => setMouse(false)}
+      {...props}
+    >
+      <defs>
+        <style>
+          {`
+            .x_com {
+              fill: ${!mouse ? alpha(theme.palette.background.default, 0.8) : '#fff'};
+            }
+            .x_square {
+              fill: ${!mouse ? alpha(theme.palette.text.secondary, 0.8) : '#000'};
+            }
+          `}
+        </style>
+      </defs>
+      <g>
+        <path className='x_square' d="M16.80345,19.71429H3.19655A2.91089,2.91089,0,0,1,.28571,16.80345V3.19655A2.91089,2.91089,0,0,1,3.19655.28571h13.6069a2.9108,2.9108,0,0,1,2.91084,2.91075v13.607A2.911,2.911,0,0,1,16.80345,19.71429Z" />
+        <path className="x_com" d="M3.88141,4.06221l4.92555,6.586L3.8503,16.00278H4.9658l4.33949-4.688,3.50619,4.688h3.79619L11.40494,9.04644l4.61357-4.98423H14.903L10.90645,8.37988,7.6773,4.06221Zm1.64052.82166H7.266L14.96714,15.181h-1.744Z" />
+      </g>
+    </svg>
+  )
+};
+
+export default styled(XLogo)(({ theme, hovered }) => ({
+  '& path, & circle': {
+    transition: theme.Transitions.createTransition([
+      {
+        property: 'fill',
+        duration: 'short'
+      }
+    ])
+  }
+}));

src/icons/socialMedia/YoutubeLogo.tsx

@@ -13,29 +13,23 @@ const YoutubeLogo = ({ hovered, ...props }: SocialMediaIconProps) => {
       {...svgCommonProps}
       data-name='Youtube Logo'
       height='20'
-      width='20'
-      viewBox='0 0 20 20'
+      width='28'
+      viewBox='0 0 28 20'
       onMouseEnter={() => setMouse(true)}
       onMouseLeave={() => setMouse(false)}
       {...props}
     >
       <defs>
         <style>
           {`
-            .b708bb15-0c44-4be1-aa70-cae10dda9a4e {
+            .b708bb15 {
               fill: ${!mouse ? alpha(theme.palette.text.secondary, 0.8) : '#ce1312'};
               fill-rule: evenodd;
             }
           `}
         </style>
       </defs>
-      <g id="b455d66a-ff5a-4361-826e-55dc3ce83f22" data-name="Icons">
-        <g id="a25a9e1c-d97f-48d3-9fba-3659746d5a18" data-name="Color-">
-          <path id="f4744a42-7df4-403f-8675-a7ab8b0f37c9"
-            data-name="Linkedin"
-            className="b708bb15-0c44-4be1-aa70-cae10dda9a4e" d="M7.935,12.61247,7.93437,6.95323l5.40376,2.83938ZM19.8,5.97257a4.37873,4.37873,0,0,0-.795-1.99908,2.84608,2.84608,0,0,0-2.00375-.85289c-2.79875-.20393-6.99688-.20393-6.99688-.20393H9.99563s-4.19813,0-6.99688.20393a2.84725,2.84725,0,0,0-2.00437.85289A4.37512,4.37512,0,0,0,.2,5.97257,30.68294,30.68294,0,0,0,0,9.23241v1.52827a30.6672,30.6672,0,0,0,.2,3.25983,4.37512,4.37512,0,0,0,.79438,1.99908A3.37553,3.37553,0,0,0,3.2,16.88066c1.6.15484,6.8.20267,6.8.20267s4.2025-.00629,7.00125-.21022a2.85043,2.85043,0,0,0,2.00375-.85352,4.37873,4.37873,0,0,0,.795-1.99908,30.6672,30.6672,0,0,0,.2-3.25983V9.23241a30.68294,30.68294,0,0,0-.2-3.25984Z" />
-        </g>
-      </g>
+      <path className="b708bb15" d="M11.36681,13.33127,11.366,6.11489l6.8906,3.62064ZM26.49647,4.86441a5.58369,5.58369,0,0,0-1.01375-2.54914,3.62915,3.62915,0,0,0-2.55509-1.08755c-3.56882-.26-8.92207-.26-8.92207-.26h-.01112s-5.35327,0-8.92213.26A3.63072,3.63072,0,0,0,2.51646,2.31527,5.57913,5.57913,0,0,0,1.50351,4.86441a39.12276,39.12276,0,0,0-.255,4.15678V10.97a39.10431,39.10431,0,0,0,.255,4.15678,5.579,5.579,0,0,0,1.013,2.54913A4.30444,4.30444,0,0,0,5.329,18.77386c2.04024.19744,8.671.25843,8.671.25843s5.35883-.008,8.92769-.26807a3.63466,3.63466,0,0,0,2.55508-1.08836,5.58346,5.58346,0,0,0,1.01375-2.54912,39.10465,39.10465,0,0,0,.255-4.15679V9.02119a39.12276,39.12276,0,0,0-.255-4.15678Z" />
     </svg>
   )
 };

src/pages/index.tsx

@@ -33,8 +33,8 @@ const Home: NextPage = () => {
           content={{
             title: 'ABOUT US',
             sloganHTML: `India, Explore! <br /> Dream! Lead!`,
-            descriptionHTML: `Indian Media Syndicate endeavours to be the global leader in Exploration, Scientific Communications, Real Life Entertainment, serving enthusiastic Explorers around the world generating scientific journalism that inspires, informs, and entertains every age, at grassroots level, soaring high. <br />
-            IMS is developing its’ unique voice AI for making real-time translation possible in all Indian languages. <br />
+            descriptionHTML: `Indian Media Syndicate endeavours to be the global leader in Exploration, Scientific Communications, Real Life Entertainment, serving enthusiastic Explorers around the world generating scientific journalism that inspires, informs, and entertains every age, at grassroots level, soaring high. <br /> <br />
+            IMS is developing its’ unique voice AI for making real-time translation possible in all Indian languages. <br /> <br />
             This is an Indian family of informational, educational, and entertainment-oriented Television, Applications and Websites offering value to how Education is developed and accessed by the world.`,
             button: {
               buttonText: 'VIEW MORE',
@@ -56,7 +56,7 @@ const Home: NextPage = () => {
             title: 'IMMERSIVE TEACHING',
             sloganHTML: `A Strategy to <br />
             Revolutionize Learning`,
-            descriptionHTML: `Grasping attention is easier, keeping learners engaged throughout the process and command action is a different story. We learn much faster visually, and retention is simply great if it is rewarding. In comes the array of Immersive education for new generation of India. <br />
+            descriptionHTML: `Grasping attention is easier, keeping learners engaged throughout the process and command action is a different story. We learn much faster visually, and retention is simply great if it is rewarding. In comes the array of Immersive education for new generation of India. <br /> <br />
             Putting our best foot forward, IMS resources are used in teaching the new wave of decision-makers. Integrating with schools and teaching organizations, creating the seamless streaming of knowledge like never before.`,
             button: {
               buttonText: 'VIEW MORE',