Update 'See more' buttons on About us page (#1207)

* Updated Show more button

* Update haredcoded value

src/components/about/AboutPage.styled.tsx

@@ -47,8 +47,6 @@ export const LinkedInText = styled(Typography)(() => ({
 
 export const Description = styled(Typography)(() => ({
   textAlign: 'initial',
-  marginBottom: theme.spacing(3),
-  overflow: 'hidden',
 }))
 
 export const AboutWrapper = styled(Grid)(() => ({

src/components/about/sections/ManagementBoardSection/ManagementBoardSection.tsx

@@ -16,7 +16,7 @@ import {
   LinkedInIcon,
   LinkedInText,
 } from 'components/about/AboutPage.styled'
-import { ManagementBoardDescription } from './ManagementBoardDescription'
+import { TeamMemberDescription } from './TeamMemberDescription'
 
 export default function ManagementBoardSection() {
   const { t } = useTranslation('about')
@@ -33,9 +33,9 @@ export default function ManagementBoardSection() {
             <TeamMemberName variant="subtitle1" height={50}>
               {teamMember.name}
             </TeamMemberName>
-            <ManagementBoardDescription description={teamMember.description} />
+            <TeamMemberDescription description={teamMember.description} />
             {teamMember.linkedInProfile ? (
-              <LinkedInButton height={50} href={teamMember.linkedInProfile} target="_blank">
+              <LinkedInButton href={teamMember.linkedInProfile} target="_blank">
                 <LinkedInIcon color="action" fontSize="large" />
                 <LinkedInText variant="subtitle1">{t('about.linkedIn')}</LinkedInText>
               </LinkedInButton>

src/components/about/sections/ManagementBoardSection/ManagementBoardsection.styled.tsx

@@ -1,5 +1,5 @@
 import { styled } from '@mui/material/styles'
-import { Grid, Link, Typography } from '@mui/material'
+import { Button, Grid, Link, Typography } from '@mui/material'
 
 import theme from 'common/theme'
 
@@ -43,3 +43,19 @@ export const LinkedInButton = styled(Link)(() => ({
     float: 'left',
   },
 }))
+
+export const ShowMoreButton = styled(Button)(() => ({
+  display: 'inherit',
+  padding: 0,
+
+  '&:hover': {
+    backgroundColor: 'transparent',
+    textDecoration: 'underline',
+  },
+}))
+
+export const Description = styled(Typography)(() => ({
+  textAlign: 'initial',
+  marginBottom: theme.spacing(3),
+  overflow: 'hidden',
+}))

src/components/about/sections/ManagementBoardSection/TeamMemberDescription.tsx

@@ -0,0 +1,27 @@
+import { useState } from 'react'
+
+import { useTranslation } from 'next-i18next'
+
+import theme from 'common/theme'
+
+import { ShowMoreButton, Description } from './ManagementBoardsection.styled'
+
+type Props = {
+  description: string
+}
+export function TeamMemberDescription({ description }: Props) {
+  const { t } = useTranslation('about')
+
+  const [show, setShow] = useState(false)
+
+  return (
+    <>
+      <Description variant="body2" height={show ? 'auto' : theme.spacing(25)}>
+        {description}
+      </Description>
+      <ShowMoreButton onClick={() => setShow(!show)}>
+        {show ? t('about.see-less') : t('about.see-more')}
+      </ShowMoreButton>
+    </>
+  )
+}