Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Account tab styles #2005

Merged
merged 3 commits into from
Jun 8, 2022
Merged

Account tab styles #2005

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
926308d
Add button styles and make account sign up and new user sign up tabs …
deathbearbrown Jun 8, 2022
f0cec9c
Update the account sign up to have same tab styling as sign up step 1…
deathbearbrown Jun 8, 2022
54f9b10
update the buttons in the account modals to be pill buttons
deathbearbrown Jun 8, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
79 changes: 23 additions & 56 deletions www/css/account.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,43 +16,11 @@
content: '*';
}

.fg-modal .save-button button {
background-color: #2c97ff;
border-radius: 2px;
appearance: none;
border: 1px solid rgb(0, 120, 212);
color: white;
font-size: 1rem;
height: 30px;
padding: 0 17px;
}

.fg-modal .save-button,
.fg-modal .cancel-button {
display: inline-flex;
}

.fg-modal .cancel-button button {
border-radius: 2px;
appearance: none;
font-size: 1rem;
height: 30px;
padding: 0 17px;
border: 1px solid rgb(102, 102, 102);
}

.fg-modal .cancel-subscription-button button {
background-color: red;
border-radius: 2px;
appearance: none;
border: 1px solid rgb(212, 0, 0);
color: white;
font-size: 1rem;
height: 30px;
padding: 0 17px;
font-weight: 600;
}

.fg-modal label {
display: block;
}
Expand Down Expand Up @@ -306,17 +274,6 @@ body.theme-b {
display: block;
}

.add-subscription-button-wrapper button {
appearance: none;
box-shadow: none;
display: block;
text-align: center;
padding: 0.5em 0.8125rem;
background-color: rgb(67, 129, 229);
color: rgb(255, 255, 255);
border: 1px solid rgb(0, 120, 212);
}

.billing-container {
width: 70%;
}
Expand Down Expand Up @@ -379,18 +336,17 @@ body.theme-b {
overflow: hidden;
}

.wpt-plans input[name=plan-type][value=monthly]:checked~.radiobutton-group label[for=monthly-plans],
.wpt-plans input[name=plan-type][value=annual]:checked~.radiobutton-group label[for=annual-plans] {
background-color: #3881E5;
color: #FFF;
box-shadow: none;
}

.wpt-plan-set {
display: none;
flex-wrap: wrap;
align-content: center;
justify-content: space-between;
text-align: center;
}

.wpt-plan-set .pill-button {
margin-top: 1rem;
}

.wpt-plans input[name=plan-type][value=monthly]:checked~.wpt-plan-set.monthly-plans,
Expand Down Expand Up @@ -1487,24 +1443,35 @@ tr.custom-plan-mobile {
}
}

.signup-step-1-content input[type="radio"]:nth-of-type(1):focus~.radiobutton-group .radio-button:nth-of-type(1) label,
.signup-step-1-content input[type="radio"]:nth-of-type(2):focus~.radiobutton-group .radio-button:nth-of-type(2) label {
.radiobutton-tab-container {
position: relative;
}

.radiobutton-tab-container input[type="radio"]:nth-of-type(1):focus~.radiobutton-group .radio-button:nth-of-type(1) label,
.radiobutton-tab-container input[type="radio"]:nth-of-type(2):focus~.radiobutton-group .radio-button:nth-of-type(2) label {
animation: highlight 1s;
}

.signup-step-1-content input[type="radio"]:nth-of-type(1):checked~.radiobutton-group .radio-button:nth-of-type(1) label,
.signup-step-1-content input[type="radio"]:nth-of-type(2):checked~.radiobutton-group .radio-button:nth-of-type(2) label {
.radiobutton-tab-container input[type="radio"]:nth-of-type(1):checked~.radiobutton-group .radio-button:nth-of-type(1) label,
.radiobutton-tab-container input[type="radio"]:nth-of-type(2):checked~.radiobutton-group .radio-button:nth-of-type(2) label {
background-color: #3881E5;
color: white;
font-weight: 600;
}

.signup-step-1-content input[type="radio"]:nth-of-type(1):checked~.comparison-table .plan-selector .plan.annual,
.signup-step-1-content input[type="radio"]:nth-of-type(2):checked~.comparison-table .plan-selector .plan.monthly {
/* sign up step 1 */
.radiobutton-tab-container input[type="radio"]:nth-of-type(1):checked~.comparison-table .plan-selector .plan.annual,
.radiobutton-tab-container input[type="radio"]:nth-of-type(2):checked~.comparison-table .plan-selector .plan.monthly {
display: block;
}

.signup-step-1-content input[type=radio] {
/* account page sign up */
.radiobutton-tab-container input[type="radio"]:nth-of-type(1):checked~.annual-plans,
.radiobutton-tab-container input[type="radio"]:nth-of-type(2):checked~.monthly-plans {
display: flex;
}

.radiobutton-tab-container input[type=radio] {
position: absolute;
opacity: 0;
top: 0;
Expand Down
53 changes: 51 additions & 2 deletions www/css/button.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,59 @@
.yellow-pill-button {
.pill-button {
appearance: none;
width: auto;
background-color: #F9D856;
background-color: #F4F4F4;
border: 0;
border-radius: 2rem;
cursor: pointer;
display: inline-block;
padding: 0.7em 2.2em;
text-decoration: none;
color: #111;
font-size: 1rem;
}

.box-button {
border-radius: 4px;
height: 100%;
font-size: 1.25em;
padding: 0.9em 1.5em;
align-self: flex-start;
margin-left: 0;
cursor: pointer;
-webkit-appearance: none;
justify-self: flex-end;
text-decoration: none;
border: 0;
}


/** TODO
update all the yellow buttons on the site
**/
.yellow {
background-color: #F9D856;
}

.blue {
background-color: #3881E5;
color: #fff;
}

/**
TODO update the NEW buttons on signup to this green
**/
.green {
background-color: #80BC06;
}

.red {
color: #d02424;
}

.purple {
background-color: #6b25cf
}

.grey-outline {
border: 1px solid rgb(204, 204, 204)
}
66 changes: 34 additions & 32 deletions www/templates/account/includes/modals/contact-info.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,33 +1,35 @@
<fg-modal id="contact-info-modal" class="contact-info-modal fg-modal">
<form method="POST" action="/account">
<fieldset>
<legend class="modal_title">Contact Information</legend>
<div class="input-set">
<div class="section">
<div>
<label class="required" for="first-name">First Name</label>
<input type="text" name="first-name" maxlength=32 pattern="<?= $validation_pattern; ?>" value="<?= htmlspecialchars($first_name); ?>" title="Do not use <, >, or &#" required />
</div>
<div>
<label class="required" for="last-name">Last Name</label>
<input type="text" name="last-name" maxlength=32 pattern="<?= $validation_pattern; ?>" title="Do not use <, >, or &#" value="<?= htmlspecialchars($last_name); ?>" required />
</div>
</div>
<div class="section">
<label for="company-name">Company Name</label>
<input type="text" name="company-name" maxlength=32 pattern="<?= $validation_pattern; ?>" title="Do not use <, >, or &#" value="<?= htmlspecialchars($company_name); ?>" />
</div>
<div class="section">
<label class="required disabled" for="email">Email</label>
<input type="email" name="email" disabled required value="<?= htmlspecialchars($email); ?>" />
</div>
<input type="hidden" name="id" value="<?= $id; ?>" />
<input type="hidden" name="type" value="contact_info" />
<input type="hidden" name="csrf_token" value="<?= $csrf_token ?>" />
<div class="save-button">
<button type="submit">Save</button>
</div>
</div>
</fieldset>
</form>
</fg-modal>
<form method="POST" action="/account">
<fieldset>
<legend class="modal_title">Contact Information</legend>
<div class="input-set">
<div class="section">
<div>
<label class="required" for="first-name">First Name</label>
<input type="text" name="first-name" maxlength=32 pattern="<?= $validation_pattern; ?>" value="<?= htmlspecialchars($first_name); ?>" title="Do not use <, >, or &#" required />
</div>
</div>
<div class="section">
<div>
<label class="required" for="last-name">Last Name</label>
<input type="text" name="last-name" maxlength=32 pattern="<?= $validation_pattern; ?>" title="Do not use <, >, or &#" value="<?= htmlspecialchars($last_name); ?>" required />
</div>
</div>
<div class="section">
<label for="company-name">Company Name</label>
<input type="text" name="company-name" maxlength=32 pattern="<?= $validation_pattern; ?>" title="Do not use <, >, or &#" value="<?= htmlspecialchars($company_name); ?>" />
</div>
<div class="section">
<label class="required disabled" for="email">Email</label>
<input type="email" name="email" disabled required value="<?= htmlspecialchars($email); ?>" />
</div>
<input type="hidden" name="id" value="<?= $id; ?>" />
<input type="hidden" name="type" value="contact_info" />
<input type="hidden" name="csrf_token" value="<?= $csrf_token ?>" />
<div class="save-button">
<button type="submit" class="pill-button blue">Save</button>
</div>
</div>
</fieldset>
</form>
</fg-modal>
64 changes: 32 additions & 32 deletions www/templates/account/includes/modals/password.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,33 +1,33 @@
<fg-modal id="password-modal" class="password-modal fg-modal">
<form method="POST" action="/account">
<fieldset>
<legend class="modal_title">Change your password</legend>
<p class="details">The requirements are at least 8 characters, including a number, lowercase letter, uppercase letter and symbol. No &lt;, &gt;.</p>
<div class="input-set">
<div class="section">
<label class="required" for="current-password">Current Password</label>
<input type="password" name="current-password" required />
</div>
<div class="section">
<label class="required" for="new-password">New Password</label>
<input type="password" name="new-password" minlength="8" title="The requirements are at least 8 characters, including a number, lowercase letter, uppercase letter and symbol. No &lt;, &gt;." pattern="<?= $validation_pattern_password ?>" required />
</div>
<div class="section">
<label class="required" for="confirm-new-password">New Password</label>
<input type="password" name="confirm-new-password" minlength="8" title="The requirements are at least 8 characters, including a number, lowercase letter, uppercase letter and symbol. No &lt;, &gt;." pattern="<?= $validation_pattern_password ?>" required />
</div>
<div class="section">
<div class="save-button">
<button type="submit">Save</button>
</div>
<div class="cancel-button">
<button>Cancel</button>
</div>
</div>
</div>
<input type="hidden" name="type" value="password" />
<input type="hidden" name="id" value="<?= $id ?>" />
<input type="hidden" name="csrf_token" value="<?= $csrf_token ?>" />
</fieldset>
</form>
</fg-modal>
<form method="POST" action="/account">
<fieldset>
<legend class="modal_title">Change your password</legend>
<p class="details">The requirements are at least 8 characters, including a number, lowercase letter, uppercase letter and symbol. No &lt;, &gt;.</p>
<div class="input-set">
<div class="section">
<label class="required" for="current-password">Current Password</label>
<input type="password" name="current-password" required />
</div>
<div class="section">
<label class="required" for="new-password">New Password</label>
<input type="password" name="new-password" minlength="8" title="The requirements are at least 8 characters, including a number, lowercase letter, uppercase letter and symbol. No &lt;, &gt;." pattern="<?= $validation_pattern_password ?>" required />
</div>
<div class="section">
<label class="required" for="confirm-new-password">New Password</label>
<input type="password" name="confirm-new-password" minlength="8" title="The requirements are at least 8 characters, including a number, lowercase letter, uppercase letter and symbol. No &lt;, &gt;." pattern="<?= $validation_pattern_password ?>" required />
</div>
<div class="section">
<div class="save-button">
<button type="submit" class="pill-button blue">Save</button>
</div>
<div class="cancel-button">
<button class="pill-button grey-outline">Cancel</button>
</div>
</div>
</div>
<input type="hidden" name="type" value="password" />
<input type="hidden" name="id" value="<?= $id ?>" />
<input type="hidden" name="csrf_token" value="<?= $csrf_token ?>" />
</fieldset>
</form>
</fg-modal>
46 changes: 23 additions & 23 deletions www/templates/account/includes/modals/payment-info.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@
<label for="country">Country</label>
<select name="country">
<?php foreach ($country_list as $country) : ?>
<option value="<?= $country["key"] ?>"><?= $country["text"]; ?></option>
<option value="<?= $country["key"] ?>"><?= $country["text"]; ?></option>
<?php endforeach; ?>
</select>
</div>
Expand All @@ -42,7 +42,7 @@
<input type="hidden" name="csrf_token" value="<?= $csrf_token ?>" />

<div class="save-button">
<button type="submit">Save</button>
<button type="submit" class="pill-button blue">Save</button>
</div>
</fieldset>
</form>
Expand All @@ -53,31 +53,31 @@


<script>
braintree.dropin.create({
authorization: "<?= $bt_client_token ?>",
container: '#braintree-container',
card: {
cardholderName: {
required: true
braintree.dropin.create({
authorization: "<?= $bt_client_token ?>",
container: '#braintree-container',
card: {
cardholderName: {
required: true
}
}
}
}, (error, dropinInstance) => {
var hiddenNonceInput = document.querySelector('#hidden-nonce-input');
var form = document.querySelector("#update-payment-form");
}, (error, dropinInstance) => {
var hiddenNonceInput = document.querySelector('#hidden-nonce-input');
var form = document.querySelector("#update-payment-form");

form.addEventListener('submit', function(event) {
event.preventDefault();
form.addEventListener('submit', function(event) {
event.preventDefault();

dropinInstance.requestPaymentMethod(function(err, payload) {
if (err) {
// handle error
console.error(err);
return;
}
dropinInstance.requestPaymentMethod(function(err, payload) {
if (err) {
// handle error
console.error(err);
return;
}

hiddenNonceInput.value = payload.nonce;
form.submit();
hiddenNonceInput.value = payload.nonce;
form.submit();
});
});
});
});
</script>
Loading