Merge pull request #63 from m-tartari/feat/projects/modular-link

♻️ refactor(projects): add modular external link

src/components/atoms/IconLinks/IconLinks.test.tsx

@@ -12,7 +12,8 @@ const labels: { [key: string]: string } = {
   LinkedInIconLink: 'LinkedIn-button',
   AcademyIconLink: 'Academy-button',
   VideoIconLink: 'Video-button',
-  ExtrernalIconLink: 'External-link-button',
+  ExternalIconLink: 'External-link-button',
+  ExternalAppIconLink: 'External-app-button',
 }
 
 vi.stubGlobal('open', vi.fn())

src/components/atoms/IconLinks/IconLinks.tsx

@@ -1,4 +1,4 @@
-import { Email, LinkedIn, GitHub, Description, OndemandVideo, School, OpenInNew } from '@mui/icons-material'
+import { Email, LinkedIn, GitHub, Description, OndemandVideo, School, OpenInNew, OpenInBrowser } from '@mui/icons-material'
 import { Badge, IconButtonProps, SvgIcon } from '@mui/material'
 
 import IconButton from '../IconButton'
@@ -41,4 +41,5 @@ export const GitHubIconLink = (props: IconLinkProps) => <IconWrapper aria-label=
 export const LinkedInIconLink = (props: IconLinkProps) => <IconWrapper aria-label="LinkedIn-button" Icon={LinkedIn} {...props} />
 export const AcademyIconLink = (props: IconLinkProps) => <IconWrapper aria-label="Academy-button" Icon={School} {...props} />
 export const VideoIconLink = (props: IconLinkProps) => <IconWrapper aria-label="Video-button" Icon={OndemandVideo} {...props} />
-export const ExtrernalIconLink = (props: IconLinkProps) => <IconWrapper aria-label="External-link-button" Icon={OpenInNew} {...props} />
+export const ExternalIconLink = (props: IconLinkProps) => <IconWrapper aria-label="External-link-button" Icon={OpenInNew} {...props} />
+export const ExternalAppIconLink = (props: IconLinkProps) => <IconWrapper aria-label="External-app-button" Icon={OpenInBrowser} {...props} />

src/components/atoms/Publication/Publication.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { Box, SxProps, Theme, Typography, TypographyProps } from '@mui/material'
-import { ExtrernalIconLink } from '..'
+import { ExternalIconLink } from '..'
 
 type AwardEntryProps = {
   year: string | number
@@ -26,9 +26,7 @@ const Publication = ({ Component = Box, ...props }: AwardEntryProps) => {
             <b>{props.title}</b>
           </Typography>
           , In: {props.location}
-          {typeof props.link !== 'undefined' && (
+          {typeof props.link !== 'undefined' && <ExternalIconLink size="small" fontSize="small" href={props.link} sx={{ color: 'text.secondary' }} />}
-            <ExtrernalIconLink size="small" fontSize="small" href={props.link} sx={{ color: 'text.secondary' }} />
-          )}
         </Typography>
       </Box>
     </Component>

src/components/pages/MainPage/MainPage.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { Box, Typography } from '@mui/material'
 
 import { ViewportProvider } from 'components/utils/viewport'
-import { AcademyIconLink, DescriptionIconLink, GitHubIconLink, VideoIconLink } from 'components/atoms'
+import { AcademyIconLink, DescriptionIconLink, ExternalAppIconLink, GitHubIconLink, VideoIconLink } from 'components/atoms'
 import { Footer, Hero, Toobar, ProjectSpotlight } from 'components/molecules'
 
 const MainPage = () => {
@@ -30,7 +30,7 @@ const MainPage = () => {
           caption={
             <>
               <VideoIconLink size="small" fontSize="small" href="https://www.linkedin.com/feed/update/urn:li:activity:7034480841569284096/" />
-              <Typography component="span" variant="caption">
+              <Typography component="span" color="text.secondary" ml={1}>
                 Software Engineer @ IIT
               </Typography>
             </>
@@ -54,7 +54,8 @@ const MainPage = () => {
           caption={
             <>
               <GitHubIconLink size="small" fontSize="small" href="https://github.com/ADVRHumanoids/motor_calibration" />
-              <Typography component="span" variant="caption">
+              <ExternalAppIconLink size="small" fontSize="small" href="https://modular.alberobotics.it" />
+              <Typography component="span" color="text.secondary" ml={1}>
                 Software Engineer @ IIT
               </Typography>
             </>
@@ -76,7 +77,7 @@ const MainPage = () => {
           caption={
             <>
               <GitHubIconLink size="small" fontSize="small" href="https://github.com/ADVRHumanoids/motor_calibration" />
-              <Typography component="span" variant="caption">
+              <Typography component="span" color="text.secondary" ml={1}>
                 Embedded Engineer @ IIT
               </Typography>
             </>
@@ -103,7 +104,7 @@ const MainPage = () => {
                 fontSize="small"
                 href="https://drive.google.com/file/d/1wBfvAzy9N8uChNxNj9Kd_hcvI0Qq3uQj/view?usp=sharing"
               />
-              <Typography component="span" variant="caption" color="text.secondary">
+              <Typography component="span" color="text.secondary" ml={1}>
                 Master Thesis @ WUT
               </Typography>
             </>

src/components/pages/ProjectsPage/ProjectsPage.tsx

@@ -1,6 +1,6 @@
 import { Box, Divider, Link, Typography } from '@mui/material'
 
-import { GitHubIconLink, DescriptionIconLink, VideoIconLink, AcademyIconLink } from 'components/atoms'
+import { GitHubIconLink, DescriptionIconLink, VideoIconLink, AcademyIconLink, ExternalAppIconLink } from 'components/atoms'
 import { Project } from 'components/molecules'
 import { Page } from 'components/templates'
 
@@ -28,7 +28,7 @@ const ProjectsPage = () => {
                 sx={{ color: 'text.secondary' }}
               />
               {/* <Typography color="text.secondary" display="inline-block"> */}
-              <Typography color="text.secondary" display={{ xs: 'none', sm: 'inline' }}>
+              <Typography color="text.secondary" ml={1} display={{ xs: 'none', sm: 'inline' }}>
                 Software Engineer @ IIT
               </Typography>
             </>
@@ -50,7 +50,8 @@ const ProjectsPage = () => {
                 Software Engineer @ IIT
               </Typography>
               <GitHubIconLink size="small" fontSize="small" href="https://github.com/ADVRHumanoids/modular_hhcm/" sx={{ color: 'text.secondary' }} />
-              <Typography color="text.secondary" display={{ xs: 'none', sm: 'inline' }}>
+              <ExternalAppIconLink size="small" fontSize="small" href="https://modular.alberobotics.it" sx={{ color: 'text.secondary' }} />
+              <Typography color="text.secondary" ml={1} display={{ xs: 'none', sm: 'inline' }}>
                 Software Engineer @ IIT
               </Typography>
             </>
@@ -76,7 +77,7 @@ const ProjectsPage = () => {
                 href="https://drive.google.com/file/d/1wBfvAzy9N8uChNxNj9Kd_hcvI0Qq3uQj/view?usp=sharing"
                 sx={{ color: 'text.secondary' }}
               />
-              <Typography color="text.secondary" display={{ xs: 'none', sm: 'inline' }}>
+              <Typography color="text.secondary" ml={1} display={{ xs: 'none', sm: 'inline' }}>
                 Master Thesis @ WUT
               </Typography>
             </>
@@ -245,7 +246,7 @@ const ProjectsPage = () => {
                 href="https://github.com/ADVRHumanoids/motor_calibration"
                 sx={{ color: 'text.secondary' }}
               />
-              <Typography color="text.secondary" display={{ xs: 'none', sm: 'inline' }}>
+              <Typography color="text.secondary" ml={1} display={{ xs: 'none', sm: 'inline' }}>
                 Embedded Engineer @ IIT
               </Typography>
             </>
@@ -272,7 +273,7 @@ const ProjectsPage = () => {
                 href="https://drive.google.com/file/d/0B1z42QMR-0UtYzBYSVhRV3ZPWk0/view?usp=sharing"
                 sx={{ color: 'text.secondary' }}
               />
-              <Typography color="text.secondary" display={{ xs: 'none', sm: 'inline' }}>
+              <Typography color="text.secondary" ml={1} display={{ xs: 'none', sm: 'inline' }}>
                 Bachelor Thesis @ TONGJI
               </Typography>
             </>
@@ -294,7 +295,7 @@ const ProjectsPage = () => {
                 href="https://drive.google.com/file/d/0B1z42QMR-0UtSkxRVzJPTk1IX0k/view?usp=sharing"
                 sx={{ color: 'text.secondary' }}
               />
-              <Typography color="text.secondary" display={{ xs: 'none', sm: 'inline' }}>
+              <Typography color="text.secondary" ml={1} display={{ xs: 'none', sm: 'inline' }}>
                 Bachelor Thesis @ UNIBO
               </Typography>
             </>