💄 fix : project ui

dev-madhurendra · Jan 18, 2024 · f0d7601 · f0d7601
1 parent 57eb689
commit f0d7601
Show file tree

Hide file tree

Showing 2 changed files with 111 additions and 84 deletions.
diff --git 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<string[]>([]);
+  const [selectedTag, setSelectedTag] = useState<string | null>(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 (
     <SkillTagDiv data-testid={SKILL_SECTION_TEST_ID}>
       <SkillTagButton
-        onClick={() => handlePageChange('prev')}
+        onClick={() => handlePageChange("prev")}
         disabled={pageState.startIndex === 0}
         children={<FontAwesomeIcon icon={faChevronCircleLeft} />}
         role={CHEVRON_LEFT_ROLE}
       />
       <SlillTagList>
-        {tags?.slice(pageState.startIndex, pageState.endIndex)
+        {tags
+          ?.slice(pageState.startIndex, pageState.endIndex)
           .map((tag, index) => (
             <SkillTagButton
               key={index}
               children={tag}
               role={SKILL_TAG + index}
-              onClick={() => props.onSkillTagClick(tag)}
+              onClick={() => handleTagClick(tag)}
+              selected={selectedTag === tag}
             />
           ))}
       </SlillTagList>
       <SkillTagButton
-        onClick={() => handlePageChange('next')}
+        onClick={() => handlePageChange("next")}
         disabled={pageState.endIndex >= tags.length}
         children={<FontAwesomeIcon icon={faChevronCircleRight} />}
         role={CHEVRON_RIGHT_ROLE}

diff --git 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%;