Merge pull request #88 from kjannette/preprod2

Preprod2
This commit is contained in:
S Jannette
2024-02-05 19:23:35 -06:00
committed by GitHub
4 changed files with 109 additions and 7 deletions

View File

@@ -47,7 +47,7 @@ const SignupPage = () => {
const [showSelectPlan, setShowSelectPlan] = useState( const [showSelectPlan, setShowSelectPlan] = useState(
isUpgrade ? true : false isUpgrade ? true : false
); );
*/ */
const [showSelectPlan, setShowSelectPlan] = useState(true); const [showSelectPlan, setShowSelectPlan] = useState(true);
const [activeRadioOption, setActiveRadioOption] = useState("partner"); const [activeRadioOption, setActiveRadioOption] = useState("partner");
const [selectedPlan, setSelectedPlan] = useState([signupRadioFields[1]]); const [selectedPlan, setSelectedPlan] = useState([signupRadioFields[1]]);
@@ -430,9 +430,12 @@ const SignupPage = () => {
Object.keys(signupFields).slice(0, -2), Object.keys(signupFields).slice(0, -2),
fieldsChunkSize fieldsChunkSize
).map((names, j) => ( ).map((names, j) => (
<Row key={`row${j}`}> <Row key={`row${j}`} className="signup-form-row">
{names.map((name, i) => ( {names.map((name, i) => (
<Col key={`${name}${i + fieldsChunkSize * j}`} className="mb-3"> <Col
key={`${name}${i + fieldsChunkSize * j}`}
className="mb-3 signup-form-column"
>
<TextInput <TextInput
name={name} name={name}
value={data[name].value} value={data[name].value}
@@ -447,12 +450,13 @@ const SignupPage = () => {
type={signupFields[name].type} type={signupFields[name].type}
values={signupFields[name].values} values={signupFields[name].values}
disabled={isBusy} disabled={isBusy}
inputClassName="mobile-text-input"
/> />
</Col> </Col>
))} ))}
</Row> </Row>
))} ))}
<Row> <Row className="signup-password-row">
<Col className="mb-3"> <Col className="mb-3">
<TextInput <TextInput
id="signupPassword" id="signupPassword"
@@ -470,7 +474,7 @@ const SignupPage = () => {
/> />
</Col> </Col>
</Row> </Row>
<Row> <Row className="signup-password-row">
<Col className="mb-3"> <Col className="mb-3">
<TextInput <TextInput
id="confirmPassword" id="confirmPassword"

View File

@@ -69,7 +69,11 @@ p {
/*** Media Queries **/ /*** Media Queries **/
@media only screen and (max-width: 430px) { @media only screen and (max-width: 420px) {
.main-container {
max-width: 390px;
}
.mobile-content-container { .mobile-content-container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;

View File

@@ -114,7 +114,7 @@
.features-top-wrapper { .features-top-wrapper {
flex-direction: column; flex-direction: column;
height: 468px; height: 480px;
margin-bottom: 12px; margin-bottom: 12px;
} }

View File

@@ -286,3 +286,97 @@
.signup-proceed-btn { .signup-proceed-btn {
width: 240px; width: 240px;
} }
//
@media only screen and (max-width: 420px) {
.signup-super-container {
width: 360px !important;
}
.signup-sub-container {
width: 360px !important;
}
.signup-header {
width: 340px !important;
}
.signup-header-text-trial {
display: none;
}
.signup-sub-container {
width: 360px;
}
.signup-header-text {
font-size: 1.35rem;
&.trial {
font-size: 0.89rem;
display: none;
}
}
.signup-form {
width: 350px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: auto;
}
.signup-form-row {
width: 340px !important;
display: flex;
flex-direction: column;
}
.signup-form-column {
width: 350px;
}
.mobile-text-input {
width: 320px;
}
.signup-password-row {
width: 345px !important;
}
.select-plan-container {
width: 360px;
}
.select-plan-header {
width: 350px;
flex-direction: column;
height: 90px;
}
.plan-header-right {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
margin-bottom: 0px;
width: 350px;
padding: 0px;
}
.plan-header-left {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
margin-bottom: 0px;
width: 350px;
padding: 0px;
}
.radio-group-box {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
margin-bottom: 0px;
}
}