Unverified Commit dbb33e1d authored by Tamika Tannis's avatar Tamika Tannis Committed by GitHub

Consolidate look&feel of request/feedback forms (#359)

parent c74346bd
...@@ -40,7 +40,7 @@ export class BugReportFeedbackForm extends AbstractFeedbackForm { ...@@ -40,7 +40,7 @@ export class BugReportFeedbackForm extends AbstractFeedbackForm {
<textarea name="repro-steps" className="form-control" rows={5} required={ true } <textarea name="repro-steps" className="form-control" rows={5} required={ true }
maxLength={ 2000 } placeholder={REPRO_STEPS_PLACEHOLDER}/> maxLength={ 2000 } placeholder={REPRO_STEPS_PLACEHOLDER}/>
</div> </div>
<button className="btn btn-default submit" type="submit">{SUBMIT_TEXT}</button> <button className="btn btn-primary" type="submit">{SUBMIT_TEXT}</button>
</form> </form>
); );
} }
......
...@@ -106,7 +106,7 @@ describe('BugReportFeedbackForm', () => { ...@@ -106,7 +106,7 @@ describe('BugReportFeedbackForm', () => {
it('renders submit button with correct props', () => { it('renders submit button with correct props', () => {
expect(form.find('button').props()).toMatchObject({ expect(form.find('button').props()).toMatchObject({
className: 'btn btn-default submit', className: 'btn btn-primary',
type: 'submit', type: 'submit',
}); });
}); });
......
...@@ -46,7 +46,7 @@ export class RatingFeedbackForm extends AbstractFeedbackForm { ...@@ -46,7 +46,7 @@ export class RatingFeedbackForm extends AbstractFeedbackForm {
</div> </div>
<textarea className="form-control form-group" name="comment" form={AbstractFeedbackForm.FORM_ID} <textarea className="form-control form-group" name="comment" form={AbstractFeedbackForm.FORM_ID}
rows={ 8 } maxLength={ 2000 } placeholder={COMMENTS_PLACEHOLDER}/> rows={ 8 } maxLength={ 2000 } placeholder={COMMENTS_PLACEHOLDER}/>
<button className="btn btn-default submit" type="submit">{SUBMIT_TEXT}</button> <button className="btn btn-primary" type="submit">{SUBMIT_TEXT}</button>
</form> </form>
); );
} }
......
...@@ -110,7 +110,7 @@ describe('RatingFeedbackForm', () => { ...@@ -110,7 +110,7 @@ describe('RatingFeedbackForm', () => {
it('renders submit button with correct props as fourth child', () => { it('renders submit button with correct props as fourth child', () => {
expect(form.children().at(3).find('button').props()).toMatchObject({ expect(form.children().at(3).find('button').props()).toMatchObject({
className: 'btn btn-default submit', className: 'btn btn-primary',
type: 'submit', type: 'submit',
}); });
}); });
......
...@@ -40,7 +40,7 @@ export class RequestFeedbackForm extends AbstractFeedbackForm { ...@@ -40,7 +40,7 @@ export class RequestFeedbackForm extends AbstractFeedbackForm {
<textarea name="value-prop" className="form-control" rows={5} required={ true } <textarea name="value-prop" className="form-control" rows={5} required={ true }
maxLength={ 2000 } placeholder={PROPOSITION_PLACEHOLDER} /> maxLength={ 2000 } placeholder={PROPOSITION_PLACEHOLDER} />
</div> </div>
<button className="btn btn-default submit" type="submit">{SUBMIT_TEXT}</button> <button className="btn btn-primary" type="submit">{SUBMIT_TEXT}</button>
</form> </form>
); );
} }
......
...@@ -106,7 +106,7 @@ describe('RequestFeedbackForm', () => { ...@@ -106,7 +106,7 @@ describe('RequestFeedbackForm', () => {
it('renders submit button with correct props', () => { it('renders submit button with correct props', () => {
expect(form.find('button').props()).toMatchObject({ expect(form.find('button').props()).toMatchObject({
className: 'btn btn-default submit', className: 'btn btn-primary',
type: 'submit', type: 'submit',
}); });
}); });
......
...@@ -80,9 +80,9 @@ export default class Feedback extends React.Component<FeedbackProps, FeedbackSta ...@@ -80,9 +80,9 @@ export default class Feedback extends React.Component<FeedbackProps, FeedbackSta
this.state.isOpen && this.state.isOpen &&
<div className="feedback-component"> <div className="feedback-component">
<div className="feedback-header"> <div className="feedback-header">
<div className="title"> <h3 className="title">
{this.props.title.toUpperCase()} {this.props.title}
</div> </h3>
<button type="button" className="btn btn-close" aria-label={BUTTON_CLOSE_TEXT} onClick={this.toggle} /> <button type="button" className="btn btn-close" aria-label={BUTTON_CLOSE_TEXT} onClick={this.toggle} />
</div> </div>
<div className="text-center"> <div className="text-center">
......
...@@ -40,32 +40,20 @@ ...@@ -40,32 +40,20 @@
color: $text-primary; color: $text-primary;
.title {
color: $text-secondary;
flex-grow: 1;
font-size: 12px;
font-family: $font-family-header;
font-weight: $font-weight-header-regular;
height: 24px;
line-height: 32px;
}
.feedback-header { .feedback-header {
display: flex; display: flex;
margin-bottom: 8px; margin-bottom: 8px;
.title {
flex-grow: 1;
} }
.btn-group { button {
margin: 8px auto 16px; margin: auto 0;
} }
.submit {
float: right;
margin-top: 16px;
} }
.submit:hover { .btn-group {
background-color: $gray-lighter; margin: 8px auto 16px;
} }
.radio-set { .radio-set {
......
...@@ -120,7 +120,7 @@ describe('Feedback', () => { ...@@ -120,7 +120,7 @@ describe('Feedback', () => {
button = header.children().at(1); button = header.children().at(1);
}); });
it('renders correct title', () => { it('renders correct title', () => {
expect(title.text()).toEqual(props.title.toUpperCase()); expect(title.text()).toEqual(props.title);
}); });
it('renders close button with correct props', () => { it('renders close button with correct props', () => {
......
...@@ -22,6 +22,10 @@ ...@@ -22,6 +22,10 @@
.request-header { .request-header {
display: flex; display: flex;
button {
margin: auto 0;
}
} }
.select-label { .select-label {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment