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

amundsen-io · Dec 18, 2019 · dbb33e1 · dbb33e1
1 parent c74346b
commit dbb33e1
Show file tree

Hide file tree

Showing 10 changed files with 24 additions and 32 deletions.
diff --git a/...en_application/static/js/components/Feedback/FeedbackForm/BugReportFeedbackForm/index.tsx b/...en_application/static/js/components/Feedback/FeedbackForm/BugReportFeedbackForm/index.tsx
@@ -21,7 +21,7 @@ export class BugReportFeedbackForm extends AbstractFeedbackForm {
   constructor(props) {
     super(props);
   }
-  
+
   renderCustom() {
     return (
       <form id={AbstractFeedbackForm.FORM_ID} onSubmit={ this.submitForm }>
@@ -40,7 +40,7 @@ export class BugReportFeedbackForm extends AbstractFeedbackForm {
           <textarea name="repro-steps" className="form-control" rows={5} required={ true }
                     maxLength={ 2000 } placeholder={REPRO_STEPS_PLACEHOLDER}/>
         </div>
-        <button className="btn btn-default submit" type="submit">{SUBMIT_TEXT}</button>
+        <button className="btn btn-primary" type="submit">{SUBMIT_TEXT}</button>
       </form>
     );
   }

diff --git a/...ion/static/js/components/Feedback/FeedbackForm/BugReportFeedbackForm/tests/index.spec.tsx b/...ion/static/js/components/Feedback/FeedbackForm/BugReportFeedbackForm/tests/index.spec.tsx
@@ -106,7 +106,7 @@ describe('BugReportFeedbackForm', () => {
 
     it('renders submit button with correct props', () => {
       expect(form.find('button').props()).toMatchObject({
-        className: 'btn btn-default submit',
+        className: 'btn btn-primary',
         type: 'submit',
       });
     });

diff --git a/amundsen_application/static/js/components/Feedback/FeedbackForm/RatingFeedbackForm/index.tsx b/amundsen_application/static/js/components/Feedback/FeedbackForm/RatingFeedbackForm/index.tsx
@@ -19,7 +19,7 @@ export class RatingFeedbackForm extends AbstractFeedbackForm {
   constructor(props) {
     super(props);
   }
-  
+
   renderCustom() {
     const ratings = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
     const radioButtonSet = ratings.map(rating => (
@@ -46,7 +46,7 @@ export class RatingFeedbackForm extends AbstractFeedbackForm {
         </div>
         <textarea className="form-control form-group" name="comment" form={AbstractFeedbackForm.FORM_ID}
           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>
     );
   }

diff --git a/...cation/static/js/components/Feedback/FeedbackForm/RatingFeedbackForm/tests/index.spec.tsx b/...cation/static/js/components/Feedback/FeedbackForm/RatingFeedbackForm/tests/index.spec.tsx
@@ -110,7 +110,7 @@ describe('RatingFeedbackForm', () => {
 
     it('renders submit button with correct props as fourth child', () => {
       expect(form.children().at(3).find('button').props()).toMatchObject({
-        className: 'btn btn-default submit',
+        className: 'btn btn-primary',
         type: 'submit',
       });
     });

diff --git a/...dsen_application/static/js/components/Feedback/FeedbackForm/RequestFeedbackForm/index.tsx b/...dsen_application/static/js/components/Feedback/FeedbackForm/RequestFeedbackForm/index.tsx
@@ -21,7 +21,7 @@ export class RequestFeedbackForm extends AbstractFeedbackForm {
   constructor(props) {
     super(props);
   }
-  
+
   renderCustom() {
     return (
       <form id={AbstractFeedbackForm.FORM_ID} onSubmit={ this.submitForm }>
@@ -40,7 +40,7 @@ export class RequestFeedbackForm extends AbstractFeedbackForm {
           <textarea name="value-prop" className="form-control" rows={5} required={ true }
                     maxLength={ 2000 } placeholder={PROPOSITION_PLACEHOLDER} />
         </div>
-        <button className="btn btn-default submit" type="submit">{SUBMIT_TEXT}</button>
+        <button className="btn btn-primary" type="submit">{SUBMIT_TEXT}</button>
       </form>
     );
   }

diff --git a/...ation/static/js/components/Feedback/FeedbackForm/RequestFeedbackForm/tests/index.spec.tsx b/...ation/static/js/components/Feedback/FeedbackForm/RequestFeedbackForm/tests/index.spec.tsx
@@ -106,7 +106,7 @@ describe('RequestFeedbackForm', () => {
 
     it('renders submit button with correct props', () => {
       expect(form.find('button').props()).toMatchObject({
-        className: 'btn btn-default submit',
+        className: 'btn btn-primary',
         type: 'submit',
       });
     });

diff --git a/amundsen_application/static/js/components/Feedback/index.tsx b/amundsen_application/static/js/components/Feedback/index.tsx
@@ -80,9 +80,9 @@ export default class Feedback extends React.Component<FeedbackProps, FeedbackSta
             this.state.isOpen &&
             <div className="feedback-component">
               <div className="feedback-header">
-                <div className="title">
-                  {this.props.title.toUpperCase()}
-                </div>
+                <h3 className="title">
+                  {this.props.title}
+                </h3>
                 <button type="button" className="btn btn-close" aria-label={BUTTON_CLOSE_TEXT} onClick={this.toggle} />
               </div>
               <div className="text-center">

diff --git a/amundsen_application/static/js/components/Feedback/styles.scss b/amundsen_application/static/js/components/Feedback/styles.scss
@@ -40,34 +40,22 @@
 
   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 {
     display: flex;
     margin-bottom: 8px;
+    .title {
+      flex-grow: 1;
+    }
+
+    button {
+      margin: auto 0;
+    }
   }
 
   .btn-group {
     margin: 8px auto 16px;
   }
 
-  .submit {
-    float: right;
-    margin-top: 16px;
-  }
-
-  .submit:hover {
-    background-color: $gray-lighter;
-  }
-
   .radio-set {
     display: flex;
     margin-top: 8px;

diff --git a/amundsen_application/static/js/components/Feedback/tests/index.spec.tsx b/amundsen_application/static/js/components/Feedback/tests/index.spec.tsx
@@ -120,7 +120,7 @@ describe('Feedback', () => {
           button = header.children().at(1);
         });
         it('renders correct title', () => {
-          expect(title.text()).toEqual(props.title.toUpperCase());
+          expect(title.text()).toEqual(props.title);
         });
 
         it('renders close button with correct props', () => {

diff --git a/amundsen_application/static/js/components/TableDetail/RequestMetadataForm/styles.scss b/amundsen_application/static/js/components/TableDetail/RequestMetadataForm/styles.scss
@@ -22,6 +22,10 @@
 
     .request-header {
       display: flex;
+
+      button {
+        margin: auto 0;
+      }
     }
 
     .select-label {