From f0d7601e858036f5654c674d9a14ffcbad8827eb Mon Sep 17 00:00:00 2001 From: madhuredra Date: Thu, 18 Jan 2024 14:29:13 +0530 Subject: [PATCH] :lipstick: fix : project ui --- .../components/organisms/SkillsTag/index.tsx | 66 ++++++--- frontend/src/utils/styled.ts | 129 +++++++++--------- 2 files changed, 111 insertions(+), 84 deletions(-) diff --git a/frontend/src/components/organisms/SkillsTag/index.tsx b/frontend/src/components/organisms/SkillsTag/index.tsx index 61a7abda..2cf559cf 100644 --- a/frontend/src/components/organisms/SkillsTag/index.tsx +++ b/frontend/src/components/organisms/SkillsTag/index.tsx @@ -1,15 +1,28 @@ -import React, { useEffect, useState } from 'react'; -import { getSkillsTags } from '../../../services/apicalls/getcall'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { faChevronCircleLeft, faChevronCircleRight } from '@fortawesome/free-solid-svg-icons'; -import { SkillTagButton, SkillTagDiv, SlillTagList } from '../../../utils/styled'; -import { itemsPerPage } from '../../../services/mocks/mocks'; -import { CHEVRON_LEFT_ROLE, CHEVRON_RIGHT_ROLE, SKILL_SECTION_TEST_ID, SKILL_TAG } from '../../../services/mocks/testMocks'; -import { updateIndices } from '../../../services/functions/functions'; -import { ISkillProps } from '../../../interfaces/types'; +import React, { useEffect, useState } from "react"; +import { getSkillsTags } from "../../../services/apicalls/getcall"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { + faChevronCircleLeft, + faChevronCircleRight, +} from "@fortawesome/free-solid-svg-icons"; +import { + SkillTagButton, + SkillTagDiv, + SlillTagList, +} from "../../../utils/styled"; +import { itemsPerPage } from "../../../services/mocks/mocks"; +import { + CHEVRON_LEFT_ROLE, + CHEVRON_RIGHT_ROLE, + SKILL_SECTION_TEST_ID, + SKILL_TAG, +} from "../../../services/mocks/testMocks"; +import { updateIndices } from "../../../services/functions/functions"; +import { ISkillProps } from "../../../interfaces/types"; const SkillsTag = (props: ISkillProps) => { const [tags, setTags] = useState([]); + const [selectedTag, setSelectedTag] = useState(null); const [pageState, setPageState] = useState({ startIndex: 0, endIndex: itemsPerPage.laptop, @@ -19,31 +32,33 @@ const SkillsTag = (props: ISkillProps) => { let mounted = true; if (window.innerWidth >= 1000) { - setPageState((prevState) => ({ + setPageState(prevState => ({ ...prevState, endIndex: itemsPerPage.laptop, })); } else if (window.innerWidth >= 768) { - setPageState((prevState) => ({ + setPageState(prevState => ({ ...prevState, endIndex: itemsPerPage.tablet, })); - } else if (window.innerWidth <=468) { - setPageState((prevState) => ({ + } else if (window.innerWidth <= 468) { + setPageState(prevState => ({ ...prevState, endIndex: itemsPerPage.mobile, })); } getSkillsTags() - .then((res) => { + .then(res => { if (mounted) { setTags(res); + if (res.length > 0) { + setSelectedTag(res[0]); + } } - }) - .catch((err) => { - throw new Error("Error while fetching skills tag : " + err) + .catch(err => { + throw new Error("Error while fetching skills tag : " + err); }); return () => { @@ -52,7 +67,7 @@ const SkillsTag = (props: ISkillProps) => { }, []); const handlePageChange = (direction: string) => { - setPageState((prevState) => { + setPageState(prevState => { const { newStartIndex, newEndIndex } = updateIndices( prevState.startIndex, prevState.endIndex, @@ -66,27 +81,34 @@ const SkillsTag = (props: ISkillProps) => { }); }; + const handleTagClick = (tag: string) => { + setSelectedTag(tag); + props.onSkillTagClick(tag); + }; + return ( handlePageChange('prev')} + onClick={() => handlePageChange("prev")} disabled={pageState.startIndex === 0} children={} role={CHEVRON_LEFT_ROLE} /> - {tags?.slice(pageState.startIndex, pageState.endIndex) + {tags + ?.slice(pageState.startIndex, pageState.endIndex) .map((tag, index) => ( props.onSkillTagClick(tag)} + onClick={() => handleTagClick(tag)} + selected={selectedTag === tag} /> ))} handlePageChange('next')} + onClick={() => handlePageChange("next")} disabled={pageState.endIndex >= tags.length} children={} role={CHEVRON_RIGHT_ROLE} diff --git a/frontend/src/utils/styled.ts b/frontend/src/utils/styled.ts index 44bdfdaf..86de09e5 100644 --- a/frontend/src/utils/styled.ts +++ b/frontend/src/utils/styled.ts @@ -472,72 +472,75 @@ export const EductionsDetailsDiv = styled('div')({ }, }) -export const SkillTagButton = styled(MuiButton)({ - alignItems: 'center', - appearance: 'none', - backgroundColor: '#fff', - borderRadius: '24px', - borderStyle: 'none', - boxShadow: 'rgba(0, 0, 0, .2) 0 3px 5px -1px, rgba(0, 0, 0, .14) 0 6px 10px 0, rgba(0, 0, 0, .12) 0 1px 18px 0', - boxSizing: 'border-box', - color: '#3c4043', - cursor: 'pointer', - display: 'inline-flex', - fill: 'currentcolor', - fontFamily: '"Google Sans", Roboto, Arial, sans-serif', - fontWeight: '500', - height: '48px', - justifyContent: 'center', - letterSpacing: '.25px', - lineHeight: 'normal', - maxWidth: '90%', - overflow: 'visible', - position: 'relative', - textAlign: 'center', - textTransform: 'none', - transition: 'box-shadow 280ms cubic-bezier(.4, 0, .2, 1), opacity 15ms linear 30ms, transform 270ms cubic-bezier(0, 0, .2, 1) 0ms', - userSelect: 'none', - WebkitUserSelect: 'none', - touchAction: 'manipulation', - width: 'auto', - willChange: 'transform, opacity', - zIndex: '0', - - '&:hover': { - background: '#F6F9FE', - color: '#174ea6', - }, +export const SkillTagButton = styled(MuiButton)<{ selected?: boolean }>({ + alignItems: 'center', + appearance: 'none', + backgroundColor: '#fff', + borderRadius: '24px', + borderStyle: 'none', + boxShadow: 'rgba(0, 0, 0, .2) 0 3px 5px -1px, rgba(0, 0, 0, .14) 0 6px 10px 0, rgba(0, 0, 0, .12) 0 1px 18px 0', + boxSizing: 'border-box', + color: '#3c4043', + cursor: 'pointer', + display: 'inline-flex', + fill: 'currentcolor', + fontFamily: '"Google Sans", Roboto, Arial, sans-serif', + fontWeight: '500', + height: '48px', + justifyContent: 'center', + letterSpacing: '.25px', + lineHeight: 'normal', + maxWidth: '90%', + overflow: 'visible', + position: 'relative', + textAlign: 'center', + textTransform: 'none', + transition: 'box-shadow 280ms cubic-bezier(.4, 0, .2, 1), opacity 15ms linear 30ms, transform 270ms cubic-bezier(0, 0, .2, 1) 0ms', + userSelect: 'none', + WebkitUserSelect: 'none', + touchAction: 'manipulation', + width: 'auto', + willChange: 'transform, opacity', + zIndex: '0', + '&:hover': { + background: '#F6F9FE', + color: '#174ea6', + }, - '&:active': { - boxShadow: '0 4px 4px 0 rgb(60 64 67 / 30%), 0 8px 12px 6px rgb(60 64 67 / 15%)', - outline: 'none', - }, + '&:active': { + boxShadow: '0 4px 4px 0 rgb(60 64 67 / 30%), 0 8px 12px 6px rgb(60 64 67 / 15%)', + outline: 'none', + }, - '&:focus': { - outline: 'none', - border: '2px solid #4285f4', - }, + '&:focus': { + outline: 'none', + border: '2px solid #4285f4', + }, - '&:not(:disabled)': { - boxShadow: 'rgba(60, 64, 67, .3) 0 1px 3px 0, rgba(60, 64, 67, .15) 0 4px 8px 3px', - }, + '&:not(:disabled)': { + boxShadow: 'rgba(60, 64, 67, .3) 0 1px 3px 0, rgba(60, 64, 67, .15) 0 4px 8px 3px', + }, - '&:not(:disabled):hover': { - boxShadow: 'rgba(60, 64, 67, .3) 0 2px 3px 0, rgba(60, 64, 67, .15) 0 6px 10px 4px', - }, + '&:not(:disabled):hover': { + boxShadow: 'rgba(60, 64, 67, .3) 0 2px 3px 0, rgba(60, 64, 67, .15) 0 6px 10px 4px', + }, - '&:not(:disabled):focus': { - boxShadow: 'rgba(60, 64, 67, .3) 0 1px 3px 0, rgba(60, 64, 67, .15) 0 4px 8px 3px', - }, + '&:not(:disabled):focus': { + boxShadow: 'rgba(60, 64, 67, .3) 0 1px 3px 0, rgba(60, 64, 67, .15) 0 4px 8px 3px', + }, - '&:not(:disabled):active': { - boxShadow: 'rgba(60, 64, 67, .3) 0 4px 4px 0, rgba(60, 64, 67, .15) 0 8px 12px 6px', - }, + '&:not(:disabled):active': { + boxShadow: 'rgba(60, 64, 67, .3) 0 4px 4px 0, rgba(60, 64, 67, .15) 0 8px 12px 6px', + }, - '&:disabled': { - boxShadow: 'rgba(60, 64, 67, .3) 0 1px 3px 0, rgba(60, 64, 67, .15) 0 4px 8px 3px', + '&:disabled': { + boxShadow: 'rgba(60, 64, 67, .3) 0 1px 3px 0, rgba(60, 64, 67, .15) 0 4px 8px 3px', + }, }, -}); + (props) => props.selected && { + border: '2px solid #4285f4', + } +); export const DefaultClickedTagButton = styled(MuiButton)({ alignItems: 'center', @@ -657,6 +660,7 @@ export const StyledProjectContainer = styled('div')({ padding: "0 1.25rem 1.25rem 1.25rem", width: "25rem", borderRadius: "0.625rem", + height:"100%", '@media (max-width: 468px)': { width: "90vw", justifyContent: "center", @@ -665,8 +669,8 @@ export const StyledProjectContainer = styled('div')({ export const StyledProjectImageDiv = styled('div')({ '& img': { width: "100%", - height: "50%", - objectFit:"contain" + height: "100%", + objectFit: "cover", }, }) export const StyledProjectInfoDiv = styled('div')({ @@ -698,7 +702,7 @@ export const StyledProjectDiv = styled('div')({ export const StyledProjectSection = styled('div')<{ id: string }>({ display: 'flex', - justifyContent: 'center', + justifyContent: 'space-evenly', alignItems: 'center', flexDirection: 'column', height: '100vh', @@ -880,6 +884,7 @@ export const StyledContactSection = styled.div` justify-content: center; flex-direction: column; align-items: center; + height:100%; @media (max-width: 468px) { width:90vw; height:100%; @@ -892,7 +897,7 @@ export const ContactGrid = styled.div` align-items:center; gap: 20px; width:70%; - height:600px; + height:80%; @media (max-width: 468px) { width:90vw; height:100%;