[WV-320] fixes

ivanko22 · Apr 8, 2024 · 1472dbd · 1472dbd
1 parent 4ad35ec
commit 1472dbd
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 27 deletions.
diff --git a/src/js/components/CompleteYourProfile/CompleteYourProfile2024.jsx b/src/js/components/CompleteYourProfile/CompleteYourProfile2024.jsx
@@ -160,7 +160,7 @@ class CompleteYourProfile2024 extends Component {
           description: '',
           onClick: this.openHowItWorksModal,
           titleCanBeClicked: true,
-          width: '29%',
+          width: '33.33%',
         },
         {
           id: stepIdPersonalizedScore,
@@ -170,7 +170,7 @@ class CompleteYourProfile2024 extends Component {
           description: '',
           onClick: this.openPersonalizedScoreIntroModal,
           titleCanBeClicked: true,
-          width: '29%',
+          width: '33.33%',
         },
         {
           id: stepIdSignInToSave,
@@ -180,7 +180,7 @@ class CompleteYourProfile2024 extends Component {
           description: '',
           onClick: this.toggleShowSignInModal,
           titleCanBeClicked: !voterIsSignedIn,
-          width: '42%',
+          width: '33.33%',
         },
       ],
     }, () => this.setCompletedStatus());
@@ -365,7 +365,7 @@ const HowItWorksContainer = styled('div')`
   alignItems: 'center';
   // height: 168px;
   border-radius: 10px;
-  border: 1px solid ${Colors.lightGrey};
+  border: 1px solid #B0B0B0;
   background: ${Colors.primary50};
   margin-bottom: 22px;
   overflow: hidden;
@@ -397,7 +397,6 @@ const HowItWorksStepsContainer = styled('div')`
   display: flex;
   flex-direction: row;
   justify-content: space-evenly;
-  padding-top: 16px;
 `;
 
 export default CompleteYourProfile2024;
diff --git a/src/js/components/CompleteYourProfile/Step.jsx b/src/js/components/CompleteYourProfile/Step.jsx
@@ -4,15 +4,20 @@ import styled from 'styled-components';
 import Colors from '../../common/components/Style/Colors';
 import StepIcon from './StepIcon';
 
-const Step = ({ onClick, step, label, completed, width }) => (
-  <HowItWorksStep completed={completed} onClick={onClick} width={width}>
-    <StepIcon
+const Step = ({ onClick, step, label, completed, width }) => {
+  console.log('Step', step);
+
+  return (
+    <HowItWorksStep completed={completed} onClick={onClick} width={width}>
+      <StepIcon
        number={step}
        completed={completed}
-    />
-    <p>{label}</p>
-  </HowItWorksStep>
-);
+      />
+      <p>{label}</p>
+    </HowItWorksStep>
+  );
+};
+
 
 Step.propTypes = {
   onClick: PropTypes.func.isRequired,
@@ -22,22 +27,32 @@ Step.propTypes = {
   width: PropTypes.string,
 };
 
+
 const HowItWorksStep = styled.div`
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    width: ${({ width }) => width};
-    padding: 0 12px;
-    cursor: pointer;
-
-    ${({ completed }) => `
-    p {
-        color: ${completed ? '#007800' : Colors.primary2024};
-        text-align: center;
-        font-size: 16px;
-        font-weight: 400;
-        margin-top: 6px;
-    }
+  display: flex;
+  width: 33.33%;
+  flex-direction: column;
+  align-items: center;
+  // width: ${({ width }) => width};
+  padding: 0 12px;
+  padding-top: 18px;
+  cursor: pointer;
+  border-right: 0.5px solid #B0B0B0;
+  border-left: 0.5px solid #B0B0B0;
+
+  &:hover {
+    background-color: #EEEEEE;
+  }
+
+  ${({ completed }) => `
+  p {
+    color: ${completed ? '#007800' : Colors.primary2024};
+    text-align: center;
+    font-size: 16px;
+    font-weight: 400;
+    margin-top: 6px;
+  }
+
 `}
 `;
 export default Step;