Merge pull request #699 from abhu-A-J/pure_footer

Pure footer ★☘️🚀🎯
Ignitus · Mar 28, 2020 · f9b2308 · f9b2308
2 parents 030c595 + c58999f
commit f9b2308
Show file tree

Hide file tree

Showing 29 changed files with 316 additions and 440 deletions.
diff --git a/src/ignitus-AboutPage/ignitus-About/Styles/index.ts b/src/ignitus-AboutPage/ignitus-About/Styles/index.ts
@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
 import * as F from '../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/fonts';
-import { mq } from '../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/media';
+import { minimumWidthQuery } from '../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/media';
 import { Heading3 } from '../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/typography';
 
 export const AboutSection = styled.section`
@@ -20,16 +20,16 @@ export const AboutContainer = styled.div`
   margin-right: auto;
   margin-left: auto;
 
-  ${mq[0]} {
+  ${minimumWidthQuery[0]} {
     max-width: 540px;
   }
-  ${mq[1]} {
+  ${minimumWidthQuery[1]} {
     max-width: 720px;
   }
-  ${mq[2]} {
+  ${minimumWidthQuery[2]} {
     max-width: 960px;
   }
-  ${mq[3]} {
+  ${minimumWidthQuery[3]} {
     max-width: 1140px;
   }
 `;

diff --git a/src/ignitus-AboutPage/ignitus-CoreTeam/Styles/index.ts b/src/ignitus-AboutPage/ignitus-CoreTeam/Styles/index.ts
@@ -3,7 +3,7 @@ import styled from '@emotion/styled';
 import * as C from '../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/colors';
 import * as T from '../../../ignitus-Shared/ignitus-DesignSystem/shared';
 import Icon from '../../../ignitus-Shared/ignitus-Utilities/Components/icon';
-import {mq} from '../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/media';
+import {minimumWidthQuery} from '../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/media';
 import {Heading6} from '../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/typography';
 
 type LinkWrapperProps = {
@@ -77,15 +77,15 @@ export const TeamCardContainer = styled.div`
     flex: 0 0 50%;
     max-width: 50%;
   }
-  ${mq[0]} {
+  ${minimumWidthQuery[0]} {
     flex: 0 0 33.33333%;
     max-width: 33.33333%;
   }
-  ${mq[1]} {
+  ${minimumWidthQuery[1]} {
     flex: 0 0 26%;
     max-width: 26%;
   }
-  ${mq[2]} {
+  ${minimumWidthQuery[2]} {
     flex: 0 0 22%;
     max-width: 22%;
   }

diff --git a/src/ignitus-Authentication/ignitus-StudentSignUpFlow/ignitus-InterestFlow/Styles/style.ts b/src/ignitus-Authentication/ignitus-StudentSignUpFlow/ignitus-InterestFlow/Styles/style.ts
@@ -1,5 +1,5 @@
 import styled from '@emotion/styled';
-import { mq } from '../../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/media';
+import { minimumWidthQuery } from '../../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/media';
 
 export const InterestImage = styled.img``;
 
@@ -8,31 +8,31 @@ export const CheckboxContainer = styled.div`
 `;
 
 export const LeftSection = styled.div`
-  ${mq[0]} {
+  ${minimumWidthQuery[0]} {
     margin-right: none;
   }
-  ${mq[1]} {
+  ${minimumWidthQuery[1]} {
     margin-right: 3rem;
   }
-  ${mq[2]} {
+  ${minimumWidthQuery[2]} {
     margin-right: 3rem;
   }
-  ${mq[3]} {
+  ${minimumWidthQuery[3]} {
     margin-right: 3rem;
   }
 `;
 
 export const RightSection = styled.div`
-  ${mq[0]} {
+  ${minimumWidthQuery[0]} {
     margin-left: none;
   }
-  ${mq[1]} {
+  ${minimumWidthQuery[1]} {
     margin-left: 4rem;
   }
-  ${mq[2]} {
+  ${minimumWidthQuery[2]} {
     margin-left: 4rem;
   }
-  ${mq[3]} {
+  ${minimumWidthQuery[3]} {
     margin-left: 4rem;
   }
 `;
diff --git a/src/ignitus-Authentication/ignitus-StudentSignUpFlow/ignitus-WelcomeFlow/Styles/style.ts b/src/ignitus-Authentication/ignitus-StudentSignUpFlow/ignitus-WelcomeFlow/Styles/style.ts
@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
 import {flexibleColDiv} from '../../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/atoms';
-import { mq } from '../../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/media';
+import { minimumWidthQuery } from '../../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/media';
 
 export const WelcomeContainer = styled(flexibleColDiv)`
   background: white;
@@ -34,30 +34,30 @@ export const BottomSection = styled(flexibleColDiv)`
 `;
 
 export const LeftSection = styled(flexibleColDiv)`
-  ${mq[0]} {
+  ${minimumWidthQuery[0]} {
     margin-right: none;
   }
-  ${mq[1]} {
+  ${minimumWidthQuery[1]} {
     margin-right: none;
   }
-  ${mq[2]} {
+  ${minimumWidthQuery[2]} {
     margin-right: 1rem;
   }
-  ${mq[3]} {
+  ${minimumWidthQuery[3]} {
     margin-right: 1rem;
   }
 `;
 export const RightSection = styled.div`
-  ${mq[0]} {
+  ${minimumWidthQuery[0]} {
     margin-left: none;
   }
-  ${mq[1]} {
+  ${minimumWidthQuery[1]} {
     margin-left: none;
   }
-  ${mq[2]} {
+  ${minimumWidthQuery[2]} {
     margin-left: 1rem;
   }
-  ${mq[3]} {
+  ${minimumWidthQuery[3]} {
     margin-left: 1rem;
   }
 `;
diff --git a/src/ignitus-HomePage/ignitus-Contributors/Styles/index.ts b/src/ignitus-HomePage/ignitus-Contributors/Styles/index.ts
@@ -3,7 +3,7 @@ import styled from '@emotion/styled';
 import * as C from '../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/colors';
 import * as T from '../../../ignitus-Shared/ignitus-DesignSystem/shared';
 import HeartIcon from '../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Assets/ignitus-Icons/heartIcon/heartIcon';
-import { mq } from '../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/media';
+import { minimumWidthQuery } from '../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/media';
 
 export const Icon = styled.span`
   i { color: ${C.Red};}
@@ -26,15 +26,15 @@ export const Card = styled.div`
   align-items: center;
   background: ${C.White};
 
-  ${mq[0]} {
+  ${minimumWidthQuery[0]} {
     flex: 0 0 43%;
     max-width: 43%;
   }
-  ${mq[1]} {
+  ${minimumWidthQuery[1]} {
     flex: 0 0 28.33333%;
     max-width: 28.33333%;
   }
-  ${mq[2]} {
+  ${minimumWidthQuery[2]} {
     flex: 0 0 30.33333%;
     max-width: 30.33333%;
   }

diff --git a/src/ignitus-HomePage/ignitus-WhatWeDo/Styles/index.ts b/src/ignitus-HomePage/ignitus-WhatWeDo/Styles/index.ts
@@ -2,7 +2,7 @@
 import styled from '@emotion/styled';
 import * as C from '../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/colors';
 import * as F from '../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/fonts';
-import { mq } from '../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/media';
+import { minimumWidthQuery } from '../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/media';
 
 export const Icon = styled.span`
   i { color: ${C.IgnitusBlue};}
@@ -20,15 +20,15 @@ export const Card = styled.div`
   flex-direction: column;
   background: ${C.White};;
 
-  ${mq[0]} {
+  ${minimumWidthQuery[0]} {
     flex: 0 0 85%;
     max-width: 85%;
   }
-  ${mq[1]} {
+  ${minimumWidthQuery[1]} {
     flex: 0 0 45.33333%;
     max-width: 45.33333%;
   }
-  ${mq[2]} {
+  ${minimumWidthQuery[2]} {
     flex: 0 0 30.33333%;
     max-width: 30.33333%;
   }

diff --git a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/atoms.ts b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/atoms.ts
@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
 import * as C from './colors';
-import { mq } from './media';
+import { minimumWidthQuery } from './media';
 
 export const Separator = styled.hr`
   display: block;
@@ -41,16 +41,16 @@ export const BottomSection = styled.section`
   padding: 0 15px 0 15px;
   margin: 0 auto 0 auto;
 
-  ${mq[0]} {
+  ${minimumWidthQuery[0]} {
     max-width: 540px;
   }
-  ${mq[1]} {
+  ${minimumWidthQuery[1]} {
     max-width: 720px;
   }
-  ${mq[2]} {
+  ${minimumWidthQuery[2]} {
     max-width: 960px;
   }
-  ${mq[3]} {
+  ${minimumWidthQuery[3]} {
     max-width: 1140px;
   }
 `;
@@ -64,16 +64,16 @@ export const BottomRow = styled.div`
 
 // We plan to use Container as parent element of in lot of components.
 export const Container = styled.div`
-  ${mq[0]} {
+  ${minimumWidthQuery[0]} {
     max-width: 540px;
   }
-  ${mq[1]} {
+  ${minimumWidthQuery[1]} {
     max-width: 720px;
   }
-  ${mq[2]} {
+  ${minimumWidthQuery[2]} {
     max-width: 960px;
   }
-  ${mq[3]} {
+  ${minimumWidthQuery[3]} {
     max-width: 1140px;
   }
 `;

diff --git a/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/media.ts b/src/ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/media.ts
@@ -1,4 +1,9 @@
 export const breakpoints: number[] = [576, 768, 992, 1200];
-export const mq: string[] = breakpoints.map(
+
+export const minimumWidthQuery: string[] = breakpoints.map(
   bp => `@media (min-width: ${bp}px)`,
 );
+
+export const maximumWidthQuery: string[] = breakpoints.map(
+  bp => `@media (max-width: ${bp}px)`,
+);
diff --git a/...itus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-Footer/Components/Constants.js b/...itus-Shared/ignitus-DesignSystem/ignitus-Organisms/ignitus-Footer/Components/Constants.js