This commit is contained in:
Kenneth Jannette
2024-02-23 05:24:03 -06:00
parent 715c15221c
commit 0cc5985f69
5 changed files with 16 additions and 9 deletions

View File

@@ -63,7 +63,7 @@ const SignupPage = () => {
const [issueText, setIssueText] = useState(""); const [issueText, setIssueText] = useState("");
const [isAnnual, setIsAnnual] = useState(1); const [isAnnual, setIsAnnual] = useState(1);
const [valX, setValX] = useState(0); const [valX, setValX] = useState(0);
const [valY, setValY] = useState(2); const [valY, setValY] = useState(3);
const handleChangeInput = (e, name) => { const handleChangeInput = (e, name) => {
const newData = handleFormDataChange(e, name, data, signupFields); const newData = handleFormDataChange(e, name, data, signupFields);
@@ -612,7 +612,7 @@ const SignupPage = () => {
</div> </div>
</div> </div>
<div className="radio-group-box"> <div className="radio-group-box">
{signupRadioFields?.slice(0, 3).map((option, index) => ( {signupRadioFields?.slice(valX, valY).map((option, index) => (
<div className="signup-radio-container"> <div className="signup-radio-container">
<Radio <Radio
onClick={handleChangeRadioInput} onClick={handleChangeRadioInput}

View File

@@ -26,7 +26,7 @@ export const signupRadioFields = [
"Documents conform with state rules", "Documents conform with state rules",
"Intellidraft AI - downloadable document in minutes", "Intellidraft AI - downloadable document in minutes",
"24/7 support", "24/7 support",
"First month free!", "First month is free!",
], ],
details: "", details: "",
docsAllowedPerMonth: 1, docsAllowedPerMonth: 1,

View File

@@ -34,11 +34,11 @@ const Radio = (props) => {
> >
{value == activeRadioOption && !isUpgrade ? ( {value == activeRadioOption && !isUpgrade ? (
<div className="radio-circle-box"> <div className="radio-circle-box">
<CircleFill color="#1a76c7" size="20px" /> <CircleFill color="#1a76c7" size="14px" />
</div> </div>
) : ( ) : (
<div className="radio-circle-box"> <div className="radio-circle-box">
<Circle color="#1a76c7" size="15px" /> <Circle color="#1a76c7" size="14px" />
</div> </div>
)} )}
<div className="radio-name-box"> {`${name}`} </div> <div className="radio-name-box"> {`${name}`} </div>
@@ -58,7 +58,7 @@ const Radio = (props) => {
<div className="radio-description-box"> <div className="radio-description-box">
{description.map((item, i) => { {description.map((item, i) => {
const el = const el =
item == "First month free!" && !isUpgrade ? ( item == "First month is free!" && !isUpgrade ? (
<div className="offer-div"> <div className="offer-div">
<p className="signup-feat-item-bold">{item}</p> <p className="signup-feat-item-bold">{item}</p>
</div> </div>

View File

@@ -1,6 +1,9 @@
.radio-circle-container { .radio-circle-container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center;
margin-right: auto;
margin-left: auto;
&.upgrade { &.upgrade {
background-color: rgb(149, 149, 149); background-color: rgb(149, 149, 149);
} }
@@ -8,17 +11,19 @@
background-color: #fff; background-color: #fff;
} }
height: 345px; height: 345px;
margin: 10px 8px 0px 8px;
border-radius: 5px; border-radius: 5px;
border: 1px solid #d4d4d4; border: 1px solid #d4d4d4;
} }
.radio-circle-top { .radio-circle-top {
width: 248px;
height: 40px; height: 40px;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
margin-top: 12px; margin-top: 18px;
margin-left: 2px; margin-left: 2px;
border: 1px solid var(--accent-orange-light);
border-radius: 10px;
} }
.radio-circle-lower { .radio-circle-lower {

View File

@@ -214,11 +214,13 @@
.offer-div { .offer-div {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center;
height: 30px; height: 30px;
border: 1px solid #fdbe72; border: 1px solid #fdbe72;
border-radius: 10px; border-radius: 10px;
margin-top: 25px; margin-top: 25px;
margin-left: auto;
margin-right: auto;
width: 220px;
} }
.show-addaccount-wrapper { .show-addaccount-wrapper {