Refs #2748: updating modal for notes

3 files changed, 40 insertions, 20 deletions

diff --git a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/NotesEditVehicleJourney.js b/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/NotesEditVehicleJourney.js
index 388b2c750..7c5df3333 100644
--- a/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/NotesEditVehicleJourney.js
+++ b/app/assets/javascripts/es6_browserified/vehicle_journeys/components/tools/NotesEditVehicleJourney.js
@@ -25,15 +25,15 @@ class NotesEditVehicleJourney extends Component {
     if(footnote_id){
       return <button
         type='button'
-        className='btn btn-primary btn-sm'
+        className='btn btn-outline-danger btn-xs'
         onClick={() => this.props.onToggleFootnoteModal(lf, false)}
-      >Retirer</button>
+      ><span className="fa fa-trash"></span></button>
     }else{
       return <button
         type='button'
-        className='btn btn-primary btn-sm'
+        className='btn btn-outline-primary btn-xs'
         onClick={() => this.props.onToggleFootnoteModal(lf, true)}
-      >Ajouter</button>
+      ><span className="fa fa-plus"></span></button>
     }
   }
 
@@ -70,18 +70,20 @@ class NotesEditVehicleJourney extends Component {
                             key={i}
                             className='panel panel-default'
                           >
-                            <div className='panel-heading'>{lf.label}</div>
-                            <div className='panel-body'><p>{lf.code}</p></div>
-                            <div className='panel-footer text-right'>
-                              {this.renderFootnoteButton(lf, this.props.modal.modalProps.vehicleJourney.footnotes)}
+                            <div className='panel-heading'>
+                              <h4 className='panel-title clearfix'>
+                                <div className='pull-left' style={{paddingTop: '3px'}}>{lf.label}</div>
+                                <div className='pull-right'>{this.renderFootnoteButton(lf, this.props.modal.modalProps.vehicleJourney.footnotes)}</div>
+                              </h4>
                             </div>
+                            <div className='panel-body'><p>{lf.code}</p></div>
                           </div>
                         )}
                       </div>
 
                       <div className='modal-footer'>
                         <button
-                          className='btn btn-default'
+                          className='btn btn-link'
                           data-dismiss='modal'
                           type='button'
                           onClick={this.props.onModalClose}
@@ -89,7 +91,7 @@ class NotesEditVehicleJourney extends Component {
                           Annuler
                         </button>
                         <button
-                          className='btn btn-danger'
+                          className='btn btn-primary'
                           type='button'
                           onClick={this.handleSubmit.bind(this)}
                           >
diff --git a/app/assets/stylesheets/application.sass b/app/assets/stylesheets/application.sass
index 4652de9f4..c2c9a58d4 100644
--- a/app/assets/stylesheets/application.sass
+++ b/app/assets/stylesheets/application.sass
@@ -11,14 +11,5 @@
 
 @import 'layout'
 
-@import 'components/buttons'
-@import 'components/modals'
-@import 'components/select2'
-@import 'components/forms'
-@import 'components/tables'
-@import 'components/pagination'
-@import 'components/main_nav'
-@import 'components/page_header'
-@import 'components/loader'
-
+@import 'components/*'
 @import 'modules/vj_collection'
diff --git a/app/assets/stylesheets/components/_panels.sass b/app/assets/stylesheets/components/_panels.sass
new file mode 100644
index 000000000..675faf899
--- /dev/null
+++ b/app/assets/stylesheets/components/_panels.sass
@@ -0,0 +1,27 @@
+//----------//
+//  Panels  //
+//----------//
+
+.panel
+  &.panel-default
+    border-color: rgba($grey, 0.5)
+    border-radius: 0
+    box-shadow: none
+
+    .panel-heading
+      font-size: $h2-size
+      font-weight: 700
+      color: $darkgrey
+      background-color: transparent
+      border-radius: 0
+      border-bottom: 2px solid $darkgrey
+      padding: 5px 15px
+
+      > h3, > h4
+        margin: 0
+
+    .panel-footer
+      padding: 5px 15px
+      background-color: transparent
+      border-radius: 0
+      border: none