darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-08-20 14:29:51 -04:00
Code Issues Packages Projects Releases Wiki Activity

Fixing styling issues on the send message flow

Browse Source
This commit is contained in:
Jonathan Bobel
2023-09-15 12:26:31 -04:00
parent f16c7b6699
commit dedb41f67e
17 changed files with 52 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/assets/javascripts/fileUpload.js
View File

@@ -16,7 +16,7 @@
// The label gets styled like a button and is used to hide the native file upload control. This is so that
// users see a button that looks like the others on the site.
//
this.$form.find('label.file-upload-button').addClass('usa-button');
this.$form.find('label.file-upload-button').addClass('usa-button margin-bottom-1');
// Clear the form if the user navigates back to the page
$(window).on("pageshow", () => this.$form[0].reset());

20
app/assets/javascripts/radioSelect.js
View File

@@ -9,48 +9,48 @@
let states = {
'initial': Hogan.compile(`
{{#showNowAsDefault}}
<div class="radio-select__column">
<div class="radio-select__column margin-y-2">
<div class="usa-radio">
<input class="usa-radio__input" checked="checked" id="{{name}}-0" name="{{name}}" type="radio" value="">
<label class="usa-radio__label" for="{{name}}-0">Now</label>
</div>
</div>
{{/showNowAsDefault}}
<div class="radio-select__column">
<div class="radio-select__column margin-y-2">
{{#categories}}
<input type='button' class='govuk-button govuk-button--secondary radio-select__button--category' aria-expanded="false" value='{{.}}' />
<input type='button' class='usa-button usa-button--outline radio-select__button--category' aria-expanded="false" value='{{.}}' />
{{/categories}}
</div>
`),
'choose': Hogan.compile(`
{{#showNowAsDefault}}
<div class="radio-select__column">
<div class="radio-select__column margin-y-2">
<div class="usa-radio">
<input class="usa-radio__input" checked="checked" id="{{name}}-0" name="{{name}}" type="radio" value="">
<label class="usa-radio__label" for="{{name}}-0">Now</label>
</div>
</div>
{{/showNowAsDefault}}
<div class="radio-select__column">
<div class="radio-select__column margin-y-2">
{{#choices}}
<div class="usa-radio js-option">
<input class="usa-radio__input" type="radio" value="{{value}}" id="{{id}}" name="{{name}}" />
<label class="usa-radio__label" for="{{id}}">{{label}}</label>
</div>
{{/choices}}
<input type='button' class='govuk-button govuk-button--secondary radio-select__button--done' aria-expanded='true' value='Done' />
<input type='button' class='usa-button usa-button--outline radio-select__button--done' aria-expanded='true' value='Done' />
</div>
`),
'chosen': Hogan.compile(`
{{#showNowAsDefault}}
<div class="radio-select__column">
<div class="radio-select__column margin-y-2">
<div class="usa-radio">
<input class="usa-radio__input" id="{{name}}-0" name="{{name}}" type="radio" value="">
<label class="usa-radio__label" for="{{name}}-0">Now</label>
</div>
</div>
{{/showNowAsDefault}}
<div class="radio-select__column">
<div class="radio-select__column margin-y-2">
{{#choices}}
<div class="usa-radio">
<input class="usa-radio__input" checked="checked" type="radio" value="{{value}}" id="{{id}}" name="{{name}}" />
@@ -58,8 +58,8 @@
</div>
{{/choices}}
</div>
<div class="radio-select__column">
<input type='button' class='govuk-button govuk-button--secondary radio-select__button--reset' aria-expanded='false' value='Choose a different time' />
<div class="radio-select__column margin-y-2">
<input type='button' class='usa-button usa-button--outline radio-select__button--reset' aria-expanded='false' value='Choose a different time' />
</div>
`)
};

7
app/assets/sass/uswds/_uswds-theme-custom-styles.scss
View File

@@ -691,7 +691,7 @@ details form {
margin-bottom: 30px;
pointer-events: none;
& + .table-show-more-link {
margin-top: -28px;
margin-top: -20px;
}
}
}
@@ -755,13 +755,12 @@ $tail-angle: 20deg;
}
.sms-message-sender {
color: color('gray-cool-90');
margin: 0 0 -10px 0;
margin: units(1) 0 0;
}
.sms-message-recipient {
color: color('gray-cool-90');
margin: 10px 0 0 0;
margin: 0 0 units(1);
}
.sms-message-status {