Further cleanup

js/components/ascribe_buttons/acl_button.js

@@ -169,7 +169,9 @@ let AclButton = React.createClass({
             return (
                 <ModalWrapper
                     trigger={
-                        <button className={shouldDisplay ? 'btn btn-default btn-sm ' + buttonClassName : 'hidden'}>
+                        <button
+                            className={'btn btn-default btn-sm ' + buttonClassName}
+                            disabled={!shouldDisplay}>
                             {this.sanitizeAction()}
                         </button>
                     }

js/components/ascribe_buttons/acl_button_list.js

@@ -43,7 +43,7 @@ let AclButtonList = React.createClass({
 
     render() {
         return (
-            <div id='aclbuttonlist' className={this.props.className}>
+            <div className={this.props.className}>
                 <span style={this.props.buttonsStyle}>
                     <AclButton
                         availableAcls={this.props.availableAcls}

js/components/ascribe_buttons/acl_information.js

@@ -3,8 +3,6 @@
 import React from 'react';
 import classnames from 'classnames';
 
-import Button from 'react-bootstrap/lib/Button';
-
 import { InformationTexts } from '../../constants/information_text';
 import { replaceSubstringAtIndex, sanitize } from '../../utils/general_utils';
 import { intersectAcls } from '../../utils/acl_utils';
@@ -22,23 +20,6 @@ let AclInformation = React.createClass({
         return { isVisible: false };
     },
 
-    componentDidMount() {
-        this.dropdownButtonStyle = {
-                background: 'none',
-                color: 'black',
-                padding: 0,
-                border: 'none'
-            };
-
-        this.dropdownListStyle = {
-                textAlign: 'justify',
-                width: '80.8%',
-                border: '1px solid #CCC',
-                backgroundColor: 'white',
-                padding: '0.5em'
-            };
-    },
-
     onOff() {
         if(!this.state.isVisible) {
             this.setState({ isVisible: true });
@@ -49,46 +30,33 @@ let AclInformation = React.createClass({
     },
 
     getInfoText(title, info, example){
-        let titleStyle = {
-            color: '#02B6A3',
-            fontSize: '11px',
-            lineHeight: '3px'
-        };
-
-        let infoStyle = {
-            color: '#333333',
-            fontSize: '11px',
-            lineHeight: '3px'
-        };
-
-        let exampleStyle = {
-            color: '#B2B2B2',
-            fontSize: '11px',
-            lineHeight: '3px'
-        };
-
-        let paragraphStyle = {
-            margin: '.5em',
-            lineHeight: '15px',
-            align: 'justify'
-        };
-
         let aim = this.props.aim;
 
         if (aim) {
             if (aim === 'form') {
                 return (
-                    <p style={paragraphStyle}>
+                    <p>
-                        <span style={infoStyle}> {replaceSubstringAtIndex(info.slice(2), 's ', ' ')} <br/> </span>
+                        <span className="info">
-                        <span style={exampleStyle}> {example} </span>
+                            {replaceSubstringAtIndex(info.slice(2), 's ', ' ')} <br/>
+                        </span>
+                        <span className="example">
+                            {example}
+                        </span>
                     </p>
                 );
             }
             else if (aim === 'button') {
                 return (
-                    <p style={paragraphStyle}><span style={titleStyle}> {title} </span>
+                    <p>
-                        <span style={infoStyle}> {info} <br/> </span>
+                        <span className="title">
-                        <span style={exampleStyle}> {example} </span>
+                            {title}
+                        </span>
+                        <span className="info">
+                            {info} <br/>
+                        </span>
+                        <span className="example">
+                            {example}
+                        </span>
                     </p>
                 );
             }
@@ -124,17 +92,21 @@ let AclInformation = React.createClass({
 
     getButton() {
         return this.props.aim === 'button' ?
-            <Button style = {this.dropdownButtonStyle} className="glyphicon glyphicon-question-sign" onClick={this.onOff} /> :
+            <button
+                style={{ marginTop: 0 }}
+                className="btn btn-transparent glyphicon glyphicon-question-sign" onClick={this.onOff} /> :
             null;
     },
 
     render() {
+        const { aim } = this.props;
+        const { isVisible } = this.state;
+
         return (
             <span >
                 {this.getButton()}
                 <div
-                    style={this.dropdownListStyle}
+                    className={classnames({'acl-information-dropdown-list': true, 'hidden': aim === 'button' && !isVisible})}>
-                    className={classnames({'hidden': this.props.aim === 'button' && !this.state.isVisible})}>
                     <span>{this.produceInformationBlock()}</span>
                 </div>
             </span>

js/components/ascribe_modal/modal_wrapper.js

@@ -17,7 +17,7 @@ let ModalWrapper = React.createClass({
         children: React.PropTypes.oneOfType([
             React.PropTypes.arrayOf(React.PropTypes.element),
             React.PropTypes.element
-        ]),
+        ])
     },
 
     getInitialState() {
@@ -55,19 +55,7 @@ let ModalWrapper = React.createClass({
         // this adds the onClick method show of modal_wrapper to the trigger component
         // which is in most cases a button.
         let trigger = React.cloneElement(this.props.trigger, {onClick: this.show});
-        let modalHeaderAscribe = {
+
-            paddingTop: '15px',
-            paddingBottom: '0px',
-            borderBottom: 'none',
-            minHeight: '16.42857px'
-        };
-        let modalBodyAscribe = {
-            paddingTop: '5px',
-            paddingBottom: '10px',
-            paddingRight: '15px',
-            paddingLeft: '15px',
-            position: 'relative'
-        };
         return (
             <span>
                 {trigger}

sass/ascribe_acl_information.scss

@@ -0,0 +1,28 @@
+.acl-information-dropdown-list {
+    text-align: justify;
+    background-color: white;
+    padding: .5em .5em .5em 0;
+
+    p {
+        margin: .5em .5em .5em 0;
+        line-height: 15px;
+        align: justify;
+    }
+
+    span {
+        font-size: 11px;
+        line-height: 3px;
+    }
+
+    .title {
+        color: #02B6A3;
+    }
+
+    .info {
+        color: #333333;
+    }
+
+    .example {
+        color: #B2B2B2;
+    }
+}

sass/lib/buttons.scss

@@ -0,0 +1,8 @@
+.btn-transparent {
+    color: black;
+    background-color: transparent;
+
+    &:hover, &:active, &:focus {
+        color:#424242;
+    }
+}

sass/lib/modals.scss

@@ -0,0 +1,4 @@
+.modal-header {
+    padding: 15px 15px 0 15px;
+    border-bottom: none;
+}

sass/main.scss

@@ -34,6 +34,9 @@ $BASE_URL: '<%= BASE_URL %>';
 @import 'ascribe_form';
 @import 'ascribe_panel';
 @import 'ascribe_collapsible';
+@import 'ascribe_acl_information';
+
+@import 'lib/buttons';
 
 @import 'whitelabel/index';
 
@@ -298,10 +301,6 @@ hr {
     height: 13em !important;
 }
 
-.textarea-ascribe-info {
-    text-align: left;
-}
-
 .input-checkbox-ascribe {
     line-height: 1.6;
     margin-left: 1.6em;
@@ -485,11 +484,6 @@ hr {
     }
 }
 
-.modal-header {
-    padding: 15px 15px 0 15px;
-    border-bottom: none;
-}
-
 .error-wrapper {
     width: 100%;
     text-align: center;