Profile Detail View UI

src/ignitus-Profile/ignitus-StudentProfile/Components/index.ts

@@ -0,0 +1 @@
+export { default as ProfileDetailView } from './profileDetailView';

src/ignitus-Profile/ignitus-StudentProfile/Components/profileDetailView.tsx

@@ -0,0 +1,170 @@
+import React from 'react';
+import {StyledHeading2, StyledHeading4, StyledHeading6} from '../../../ignitus-UserInterfaceBook/styles';
+import * as P from '../styles';
+import { AppIcon } from '../../../ignitus-Shared/types/iconsTypes/iconEnums';
+import { ButtonBottomRight, RoundedButton } from '../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/buttons';
+import {
+  AboutProps,
+  ContributionsProps,
+  EducationProps,
+  HeadingProps,
+  PublicationsProps,
+  RecommendationsProps,
+} from '../types';
+
+const ProfileDetailView = () => (
+  <P.MainContainer>
+
+    <P.TopSection>
+          <ButtonBottomRight size="large" category="primary" > Edit Profile</ButtonBottomRight>
+    </P.TopSection>
+    <P.MainSection>
+
+      <AboutSection
+        content="Well-versed in over a dozen literary genres and can teach to any range of students. Adept at creating a lesson plan that engages students helping students to see the beauty in literature and encouraging students to read on their own. Specializes in high school and junior college level classes."
+      />
+
+      <EducationSection
+        university="Graham Junior College"
+        address="New Parkland,CA"
+        batch="2015 – 2019"
+      />
+
+      <P.ElementContainer>
+        <HeadingIconContent heading="Research Fields" icon={AppIcon.LocalLibraryIcon}/>
+        <P.ContentContainer>
+          <RoundedButton size="medium" category="grey">Psycholinguistics </RoundedButton>
+          <RoundedButton size="medium" category="grey">Modernist Literature  </RoundedButton>
+        </P.ContentContainer>
+      </P.ElementContainer>
+
+      <P.ElementContainer>
+        <HeadingIconContent heading="Publications" icon={AppIcon.LibraryBooksIcon}/>
+        <P.ContentContainer>
+          <PublicationsIconContent
+            content="Shakespeare and Elizabethan Poetry: A Study of His Earlier Work in Relation to the Poetry of the Time"
+          />
+          <PublicationsIconContent
+            content="Practice in a second language: Perspectives from applied linguistics and cognitive psychology"
+          />
+        </P.ContentContainer>
+
+      </P.ElementContainer>
+
+      <ContributionsSection
+        articles="5"
+        polls="5"
+        publications="2"
+        videos="3"
+      />
+
+      <RecommendationsSection
+        name= "Nicholas Young"
+        designation="Professor"
+        date="December 19, 2018"
+        experience="I worked with Sophia in a research paper, for 2 years. She has the ability to understand toughest things effortlessly that skill often takes time to develop, but it seemed to come perfectly naturally to her. It's my privilege to recommend her even I found myself lucky that I got a chance to be in touch with Sophia."
+      />
+
+    </P.MainSection>
+    <P.BottomSection>
+      <RoundedButton size="medium" category="grey" >Download as PDF</RoundedButton>
+    </P.BottomSection>
+  </P.MainContainer>
+);
+
+const HeadingIconContent = ({ heading, icon }: HeadingProps) => (
+  <P.HeadingWrapper>
+    <P.HeadingStyledIcon name={icon} />
+    <P.HeadingText >{heading}</P.HeadingText>
+  </P.HeadingWrapper>
+);
+
+const AboutSection = ({ content }: AboutProps) => (
+  <P.ElementContainer>
+  <HeadingIconContent heading="About" icon={AppIcon.InfoIcon}/>
+  <P.ContentContainer>
+    <P.AboutWrapper>
+      <P.About >{content}</P.About>
+    </P.AboutWrapper>
+  </P.ContentContainer>
+  </P.ElementContainer>
+);
+
+const EducationSection = ({ university, address, batch }: EducationProps) => (
+  <P.ElementContainer>
+    <HeadingIconContent heading="Education" icon={AppIcon.GraduationCapIcon}/>
+    <P.ContentContainer>
+      <P.EducationWrapper>
+        <P.University>{university}</P.University>
+        <P.Address>{address}</P.Address>
+        <P.Batch>{batch}</P.Batch>
+      </P.EducationWrapper>
+    </P.ContentContainer>
+  </P.ElementContainer>
+);
+
+const PublicationsIconContent = ({ content }: PublicationsProps) => (
+  <P.PublicationsWrapper>
+    <P.PublicationsIconWrapper>
+    <P.PublicationsStyledIcon name={AppIcon.PdfIcon} />
+    </P.PublicationsIconWrapper>
+    <P.PublicationsText >{content}</P.PublicationsText>
+  </P.PublicationsWrapper>
+);
+
+const ContributionsSection = ({ articles, polls,publications,videos }: ContributionsProps) => (
+
+  <P.ElementContainer>
+    <HeadingIconContent heading="Contributions" icon={AppIcon.ContributionIcon}/>
+    <P.ContentContainer>
+    <P.ContributionsWrapper>
+      <P.ContributionsContainer>
+        <P.ContributionsIconWrapper>
+          <P.ContributionsStyledIcon name={AppIcon.LibraryBooksIcon} />
+        </P.ContributionsIconWrapper>
+        <P.ContributionsText > {articles} Articles</P.ContributionsText>
+      </P.ContributionsContainer>
+      <P.ContributionsContainer>
+        <P.ContributionsIconWrapper>
+          <P.ContributionsStyledIcon name={AppIcon.PollIcon} />
+        </P.ContributionsIconWrapper>
+        <P.ContributionsText >{polls} Polls</P.ContributionsText>
+      </P.ContributionsContainer>
+      <P.ContributionsContainer>
+        <P.ContributionsIconWrapper>
+          <P.ContributionsStyledIcon name={AppIcon.PdfIcon} />
+        </P.ContributionsIconWrapper>
+        <P.ContributionsText >{publications} Publications</P.ContributionsText>
+      </P.ContributionsContainer>
+      <P.ContributionsContainer>
+        <P.ContributionsIconWrapper>
+          <P.ContributionsStyledIcon name={AppIcon.VideoLibIcon} />
+        </P.ContributionsIconWrapper>
+        <P.ContributionsText >{videos} Videos</P.ContributionsText>
+      </P.ContributionsContainer>
+    </P.ContributionsWrapper>
+    </P.ContentContainer>
+  </P.ElementContainer>
+);
+
+const RecommendationsSection = ({ name, designation, date, experience }: RecommendationsProps) => (
+  <P.ElementContainer>
+    <HeadingIconContent heading="Recommendations" icon={AppIcon.StarCircleIcon}/>
+    <P.ContentContainer>
+    <P.RecommendationsWrapper>
+      <P.RecommendationsProfile>
+        <P.RecommendationsAvatar/>
+        <P.RecommendationsDetails>
+          <P.Name>{name}</P.Name>
+          <P.Designation>{designation}</P.Designation>
+          <P.Date>{date}</P.Date>
+        </P.RecommendationsDetails>
+      </P.RecommendationsProfile>
+      <P.Experience>{experience}</P.Experience>
+    </P.RecommendationsWrapper>
+    </P.ContentContainer>
+  </P.ElementContainer>
+);
+
+
+export default ProfileDetailView;

src/ignitus-Profile/ignitus-StudentProfile/styles.ts

@@ -0,0 +1,222 @@
+import styled from '@emotion/styled';
+import { Container, flexibleColDiv, flexibleRowDiv } from '../../ignitus-Shared/ignitus-DesignSystem/shared';
+import Icon from '../../ignitus-Shared/ignitus-Utilities/Components/icon';
+import * as C from '../../ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/colors';
+import * as F from '../../ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/fonts';
+import {Avatar} from '../../ignitus-AboutPage/ignitus-Team/Styles';
+
+export const MainContainer = styled(Container)`
+  margin: 10rem auto;
+  background: ${C.White};
+  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
+  padding: 0 0 5rem 2rem;
+  border-radius: 2.5rem;
+`;
+
+export const TopSection = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-items: flex-end;
+  align-items: flex-end;
+`;
+
+export const MainSection = styled.div`
+`;
+
+export const ElementContainer = styled(Container)`
+`;
+
+export const HeadingText = styled.div`
+  padding: 0.5rem;
+  margin: 0 0 0 0.5rem;
+  flex: 10;
+  color: ${C.IgnitusBlue};
+  font-size: ${F.XXL};
+  font-weight: ${F.SemiBold};
+`;
+
+export const HeadingWrapper = styled.div`
+  display: flex;
+  margin: 0.6rem 0;
+  flex-direction: row;
+  justify-items: flex-start;
+  align-items: baseline;
+`;
+
+export const HeadingStyledIcon = styled(Icon)`
+  height: 2rem;
+  width: 2rem;
+  fill: ${C.IgnitusBlue};
+  transition: 0.3s;
+  flex: 1;
+`;
+
+export const ContentContainer = styled(Container)`
+  margin: 0 2rem 0 7rem;
+`;
+
+export const AboutWrapper = styled.div`
+  margin: 0.6rem 0;
+`;
+
+export const About = styled.p`
+  font-size: ${F.MD};
+  color: ${C.GreySecondaryText};
+`;
+
+export const EducationWrapper = styled.div`
+  display: flex;
+  margin: 0.6rem 0;
+  flex-direction: column;
+  justify-items: flex-start;
+  align-items: baseline;
+`;
+
+export const University = styled.p`
+  font-size: ${F.MD};
+  font-weight: ${F.SemiBold};
+  color: ${C.GreyOne}
+  width: 15rem;
+  margin: 0;
+`;
+
+export const Address = styled.p`
+  font-size: ${F.MD};
+  width: 15rem;
+  color: ${C.GreySecondaryText};
+  margin: 0;
+`;
+
+export const Batch = styled.p`
+    font-size: ${F.MD};
+    width: 15rem;
+    color: ${C.GreySecondaryText};
+    margin:0;
+`;
+
+export const PublicationsText = styled.div`
+  flex: 20;
+  color: ${C.GreySecondaryText};
+  font-size: ${F.XS};
+  font-weight: ${F.SemiBold};
+`;
+
+export const PublicationsWrapper = styled.div`
+  display: flex;
+  margin: 0.7rem 0;
+  flex-direction: row;
+  justify-items: flex-start;
+`;
+export const PublicationsIconWrapper = styled.div`
+  height: 1.3rem;
+  width: 1.3rem;
+  margin: 0 0.2rem 0 0;
+  flex: 1;
+`;
+export const PublicationsStyledIcon = styled(Icon)`
+  height: 1.3rem;
+  width: 1.3rem;
+  fill: ${C.IgnitusBlue};
+  transition: 0.3s;
+`;
+
+export const ContributionsContainer = styled.div`
+  display: flex;
+  margin: 0.7rem 0;
+  flex-direction: row;
+  justify-items: flex-start;
+  flex:1;
+`;
+
+export const ContributionsWrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-items: space-around;
+  flex-wrap:wrap;
+`;
+
+export const ContributionsText = styled.div`
+  flex: 5;
+  color: ${C.GreySecondaryText};
+  font-size: ${F.SM};
+`;
+
+export const ContributionsIconWrapper = styled.div`
+  height: 1.3rem;
+  width: 1.3rem;
+  flex: 1;
+`;
+
+export const ContributionsStyledIcon = styled(Icon)`
+  height: 1.3rem;
+  width: 1.3rem;
+  fill: ${C.IgnitusBlue};
+  transition: 0.3s;
+
+`;
+
+export const RecommendationsWrapper = styled.div`
+  display: flex;
+  margin: 0.7rem 0;
+  flex-direction: row;
+  justify-items: space-evenly;
+`;
+
+export const RecommendationsProfile = styled(flexibleRowDiv)`
+  flex-wrap:wrap;
+  align-items: space-evenly;
+  flex:1;
+`;
+
+export const RecommendationsAvatar = styled(Avatar)`
+  border-radius: 50%;
+  border:none;
+  margin:2rem;
+  flex:1;
+`;
+
+export const RecommendationsDetails = styled(flexibleColDiv)`
+  flex:1;
+  align-items: flex-start;
+`;
+
+export const Name = styled.p`
+  color: ${C.IgnitusBlue};
+  font-weight: ${F.Bold};
+  font-size: ${F.XL};
+  margin: 0;
+  flex:1;
+`;
+
+export const Designation = styled.p`
+  color: ${C.IgnitusBlue};
+  font-weight: ${F.Normal};
+  font-size: ${F.MD};
+  flex:1;
+  margin: 0;
+`;
+
+export const Date = styled.p`
+  color: ${C.GreyOne};
+  font-weight: ${F.Normal};
+  font-size: ${F.MD};
+  margin: 1rem 0 0 0;
+  flex:2;
+`;
+
+export const Experience = styled.p`
+  padding: 0.5rem;
+  color: ${C.GreySecondaryText};
+  font-weight: ${F.Normal};
+  background: transparent;
+  font-size: ${F.SM};
+  flex:1;
+`;
+
+export const BottomSection = styled.div`
+  display:flex;
+  flex-direction: column;
+  justify-items: flex-start;
+  align-items: center;
+  margin: 1rem;
+`;