fix(ZNTA-2143) WIP: covert frontend css to SUITCSS where it won't cau…

…se overrides with react-bootstrap components
zanata · Sep 7, 2017 · 8b4c880 · 8b4c880
1 parent 565bc74
commit 8b4c880
Show file tree

Hide file tree

Showing 62 changed files with 1,161 additions and 1,192 deletions.
diff --git a/...rontend/src/frontend/app/components/DraggableVersionPanels/DraggableVersionPanels.test.js b/...rontend/src/frontend/app/components/DraggableVersionPanels/DraggableVersionPanels.test.js
@@ -25,12 +25,12 @@ describe('DraggableVersionPanels', () => {
     const expected = ReactDOMServer.renderToStaticMarkup(
       <ListGroupItem className='v' >
         <DragHandle />
-        {'ver1'} <span className='text-muted'> {'meikai1'}
+        {'ver1'} <span className='u-textMuted'> {'meikai1'}
         </span> <LockIcon status={'ACTIVE'} />
         {" "}
         <Button bsSize='xsmall' className='close rm-version-btn'
           onClick={callback}>
-          <Icon name='cross' className='n2 crossicon' title='remove version' />
+          <Icon name='cross' className='n2 iconCross' title='remove version' />
         </Button>
       </ListGroupItem>
     )
@@ -63,7 +63,7 @@ describe('DraggableVersionPanels', () => {
           <span className="vmerge-adjtitle vmerge-title">
           Adjust priority of selected versions
           </span><br />
-          <span className="text-muted vmerge-adjsub">(best first)</span>
+          <span className="u-textMuted vmerge-adjsub">(best first)</span>
           <OverlayTrigger placement='top' overlay={tooltipSort}>
             <Icon name='info' className='s0 info-icon' />
           </OverlayTrigger>

diff --git a/server/zanata-frontend/src/frontend/app/components/DraggableVersionPanels/index.js b/server/zanata-frontend/src/frontend/app/components/DraggableVersionPanels/index.js
@@ -39,12 +39,12 @@ export class Item extends Component {
     const { value: { version, projectSlug } } = this.props
     return <ListGroupItem className='v' >
       <DragHandle />
-      {version.id} <span className='text-muted'> {projectSlug}
+      {version.id} <span className='u-textMuted'> {projectSlug}
       </span> <LockIcon status={version.status} />
       {" "}
       <Button bsSize='xsmall' className='close rm-version-btn'
         onClick={this.removeVersion}>
-        <Icon name='cross' className='n2 crossicon' title='remove version' />
+        <Icon name='cross' className='n2 iconCross' title='remove version' />
       </Button>
     </ListGroupItem>
   }
@@ -67,7 +67,7 @@ class Items extends Component {
         <span className='vmerge-adjtitle vmerge-title'>
         Adjust priority of selected versions
         </span><br />
-        <span className='text-muted vmerge-adjsub'>
+        <span className='u-textMuted vmerge-adjsub'>
         (best first)
         </span>
         <OverlayTrigger placement='top' overlay={tooltipSort}>

diff --git a/server/zanata-frontend/src/frontend/app/components/EditableText/EditableText.story.js b/server/zanata-frontend/src/frontend/app/components/EditableText/EditableText.story.js
@@ -5,7 +5,7 @@ import { EditableText } from '../'
 storiesOf('EditableText', module)
     .add('editing', () => (
         <EditableText
-            className='editable textInput text-state-classes'
+            className='editable textInput textState'
             maxLength={255}
             editable={true}
             editing={true}
@@ -16,7 +16,7 @@ storiesOf('EditableText', module)
     ))
     .add('not editing', () => (
         <EditableText
-            className='editable textInput text-state-classes'
+            className='editable textInput textState'
             maxLength={255}
             editable={true}
             editing={false}

diff --git a/server/zanata-frontend/src/frontend/app/components/EditableText/index.js b/server/zanata-frontend/src/frontend/app/components/EditableText/index.js
@@ -83,9 +83,9 @@ class EditableText extends Component {
     }
     const emptyText = editable ? placeholder : emptyReadOnlyText
     const content = children ||
-      <span className='text-muted'>{emptyText}</span>
+      <span className='u-textMuted'>{emptyText}</span>
     return (
-      <Row className='text-input text-state-classes text'
+      <Row className='textInput textState text'
         onClick={this.handleClick} title={title}>
         {content}
       </Row>

diff --git a/server/zanata-frontend/src/frontend/app/components/LoaderText/index.js b/server/zanata-frontend/src/frontend/app/components/LoaderText/index.js
@@ -9,7 +9,7 @@ const LoaderText = ({
   ...props
 }) => {
   return (
-    <span className='loader-text' {...props}>
+    <span className='loaderText' {...props}>
           {loading
             ? <span>{loadingText}<Loader /></span>
             : children

diff --git a/server/zanata-frontend/src/frontend/app/components/LogoLoader/index.js b/server/zanata-frontend/src/frontend/app/components/LogoLoader/index.js
@@ -31,14 +31,14 @@ class LogoLoader extends React.Component {
     /* eslint-disable max-len  */
     return (
       <span className={className} title='Zanata'>
-        <span className='LogoLoader-logo'>
+        <span className='logoLoader-logo'>
-          <svg className='LogoLoader-svg LogoLoader-circle' viewBox='0 0 512 512'>
+          <svg className='logoLoader-svg LogoLoader-circle' viewBox='0 0 512 512'>
             <g><path d='M256.040517,26.9020538 C129.377614,26.9020538 26.4050036,130.259367 26.4050036,257.280952 C26.4050036,384.302988 129.377614,487.660302 256.040517,487.660302 C382.703464,487.660302 485.676029,384.302988 485.676075,257.280952 C485.676029,130.259367 382.703464,26.9020538 256.040517,26.9020538 Z M256.040517,66.3898734 C361.786714,66.3898734 447.229385,152.099354 447.229431,258.282844 C447.229385,364.466785 361.786714,450.176266 256.040517,450.176266 C150.294319,450.176266 64.8516476,364.466785 64.8516476,258.282844 C64.8516476,152.099354 150.294319,66.3898734 256.040517,66.3898734 Z' id='Circle'></path></g>
           </svg>
-          <svg className='LogoLoader-svg LogoLoader-circlePulse' viewBox='0 0 512 512'>
+          <svg className='logoLoader-svg LogoLoader-circlePulse' viewBox='0 0 512 512'>
             <g><path d='M256.040517,26.9020538 C129.377614,26.9020538 26.4050036,130.259367 26.4050036,257.280952 C26.4050036,384.302988 129.377614,487.660302 256.040517,487.660302 C382.703464,487.660302 485.676029,384.302988 485.676075,257.280952 C485.676029,130.259367 382.703464,26.9020538 256.040517,26.9020538 Z M256.040517,66.3898734 C361.786714,66.3898734 447.229385,152.099354 447.229431,258.282844 C447.229385,364.466785 361.786714,450.176266 256.040517,450.176266 C150.294319,450.176266 64.8516476,364.466785 64.8516476,258.282844 C64.8516476,152.099354 150.294319,66.3898734 256.040517,66.3898734 Z' id='Circle'></path></g>
           </svg>
-          <svg className='LogoLoader-svg LogoLoader-z' viewBox='0 0 512 512'>
+          <svg className='logoLoader-svg logoLoader-z' viewBox='0 0 512 512'>
             <g>
               <g id='Shadow' transform='translate(26.377192, 25.222456)'>
                 <mask id='mask-2' fill='white'>

diff --git a/server/zanata-frontend/src/frontend/app/components/Modal/Modal.story.js b/server/zanata-frontend/src/frontend/app/components/Modal/Modal.story.js
@@ -234,7 +234,7 @@ storiesOf('Modal', module)
               </Button>
             </OverlayTrigger>
           </p>
-          <p className='text-warning'>* All translations of documents for
+          <p className='u-textWarning'>* All translations of documents for
             the selected source language will be included.
           </p>
         </span>

diff --git a/server/zanata-frontend/src/frontend/app/components/Nav/NavItem.jsx b/server/zanata-frontend/src/frontend/app/components/Nav/NavItem.jsx
@@ -28,7 +28,7 @@ const NavItem = ({
   cssClass += (small ? ' small' : '')
   cssClass += (isSearchLink ? ' search' : '')
 
-  const text = isLogo ? (<span className='nav-logo'>{title}</span>) : title
+  const text = isLogo ? (<span className='navBar-navLogo'>{title}</span>) : title
   const inverted = false
 
   const child = isLogo

diff --git a/server/zanata-frontend/src/frontend/app/components/Nav/index.jsx b/server/zanata-frontend/src/frontend/app/components/Nav/index.jsx
@@ -137,7 +137,7 @@ const Nav = ({
       {...props}
       id='nav'
       name={username}
-      className='nav-bar'>
+      className='navBar'>
       {items.map((item, itemId) => {
         if (((item.auth === 'public') || (item.auth === auth) ||
           (item.auth === 'loggedin' && admin))) {

diff --git a/server/zanata-frontend/src/frontend/app/components/Notification/component.js b/server/zanata-frontend/src/frontend/app/components/Notification/component.js
@@ -58,8 +58,8 @@ class Notification extends Component {
           <Modal.Title>
             <Row
               bsStyle={severityClass}
-              className='notify-row'>
+              className='rowNotify'>
-              <Icon name={icon} className='s2 list-inline' />
+              <Icon name={icon} className='s2 listInline' />
               <span>Notification</span>
             </Row>
           </Modal.Title>
@@ -69,7 +69,7 @@ class Notification extends Component {
             {message}
           </div>
           {!isEmpty(details) &&
-            (<div className='notification-modal-content'>
+            (<div className='modalNotification-content'>
               {details}
             </div>)}
         </Modal.Body>

diff --git a/server/zanata-frontend/src/frontend/app/components/RejectionsForm/index.js b/server/zanata-frontend/src/frontend/app/components/RejectionsForm/index.js
@@ -33,7 +33,7 @@ class RejectionsForm extends Component {
         <span className={this.props.textState}>{this.props.priority}</span>
     )
     return (
-        <Form className='rejections' inline>
+        <Form className='rejectionsForm' inline>
           <FormGroup className='flex-grow1' controlId='formInlineCriteria'>
             <ControlLabel>Criteria</ControlLabel><br/>
             <TextInput multiline={true}  editable={this.props.editable}
@@ -43,18 +43,18 @@ class RejectionsForm extends Component {
             <ControlLabel>Priority</ControlLabel><br/>
             <DropdownButton bsStyle='default' title={title}
                id='dropdown-basic'>
-              <MenuItem><span className='text-info'>Minor</span></MenuItem>
+              <MenuItem><span className='u-textInfo'>Minor</span></MenuItem>
-              <MenuItem><span className='text-warning'>Major</span></MenuItem>
+              <MenuItem><span className='u-textWarning'>Major</span></MenuItem>
-              <MenuItem><span className='text-danger'>Critical</span></MenuItem>
+              <MenuItem><span className='u-textDanger'>Critical</span></MenuItem>
             </DropdownButton>
           </FormGroup>
           <FormGroup controlId='formInlineButtonEdit'>
             <ControlLabel>&nbsp;</ControlLabel><br/>
             <Button bsStyle='primary' className={this.props.className}>
-              <Icon name='edit' className='s0 editicon'/>
+              <Icon name='edit' className='s0 iconEdit'/>
             </Button>
             <Button bsStyle='danger' className={this.props.className}>
-              <Icon name='trash' className='s0 editicon'/>
+              <Icon name='trash' className='s0 iconEdit'/>
             </Button>
           </FormGroup>
         </Form>

diff --git a/server/zanata-frontend/src/frontend/app/components/Sidebar/Sidebar.story.js b/server/zanata-frontend/src/frontend/app/components/Sidebar/Sidebar.story.js
@@ -6,7 +6,7 @@ storiesOf('Sidebar', module)
     .add('default', () => (
         <div>
           <Sidebar />
-          <div className='flextab'>
+          <div className='flexTab'>
             <p>This sidebar example has the active tag applied to both the People
               and Languages pages to provide examples of how this design handles
               sidebar links.</p>

diff --git a/server/zanata-frontend/src/frontend/app/components/Sidebar/index.jsx b/server/zanata-frontend/src/frontend/app/components/Sidebar/index.jsx
@@ -78,13 +78,13 @@ class Sidebar extends Component {
                     <p><span className='percent'>10%</span> translated</p>
                   </div>
                   <ProgressBar>
-                    <ProgressBar className='progress-bar-translated'
+                    <ProgressBar className='progressBar-translated'
                       now={10} key={1} />
-                    <ProgressBar className='progress-bar-fuzzy'
+                    <ProgressBar className='progressBar-fuzzy'
                       now={7} key={2} />
-                    <ProgressBar className='progress-bar-rejected'
+                    <ProgressBar className='progressBar-rejected'
                       now={3} key={3} />
-                    <ProgressBar className='progress-bar-approved'
+                    <ProgressBar className='progressBar-approved'
                       now={10} key={4} />
                   </ProgressBar>
                   <Nav className='v-links'

diff --git a/server/zanata-frontend/src/frontend/app/components/TMX/TMXExportModal.js b/server/zanata-frontend/src/frontend/app/components/TMX/TMXExportModal.js
@@ -163,7 +163,7 @@ class TMXExportModal extends Component {
                 {srcLangRows}
               </tbody>
             </Table>
-            <p className='text-warning'>
+            <p className='u-textWarning'>
               {warningText}
             </p>
           </span>

diff --git a/...ata-frontend/src/frontend/app/components/VersionTMMergeModal/VersionTMMergeModal.story.js b/...ata-frontend/src/frontend/app/components/VersionTMMergeModal/VersionTMMergeModal.story.js
@@ -54,7 +54,7 @@ storiesOf('VersionTMMergeModal', module)
             show={true}
             onHide={action('onHide')}>
           <Modal.Header>
-            <Modal.Title><span className="text-new-blue">Version TM Merge</span></Modal.Title>
+            <Modal.Title><span className="u-textNewBlue">Version TM Merge</span></Modal.Title>
           </Modal.Header>
           <Modal.Body>
             <p className="intro">
@@ -103,7 +103,7 @@ storiesOf('VersionTMMergeModal', module)
             </Col>
             <Col xs={12} className='vmerge-row'>
               <p className="lead">For every potential translation:</p>
-              <span className="text-new-blue">If text is less than </span>
+              <span className="u-textNewBlue">If text is less than </span>
               <DropdownButton bsStyle='default' title='80%'
                               id='language-dropdown-basic'
                               className='vmerge-ddown'>
@@ -113,7 +113,7 @@ storiesOf('VersionTMMergeModal', module)
                           eventKey='1'>90%</MenuItem>
                 <MenuItem onClick={action('onClick')}
                           eventKey='1'>80%</MenuItem>
-              </DropdownButton><span className="text-new-blue"> &nbsp;similar, don't use it.
+              </DropdownButton><span className="u-textNewBlue"> &nbsp;similar, don't use it.
             </span>
             </Col>
             <Col xs={12} className='vmerge-boxes'>
@@ -203,7 +203,7 @@ storiesOf('VersionTMMergeModal', module)
                    <span className="vmerge-adjtitle vmerge-title">
           Adjust priority of selected versions
           </span><br/>
-                  <span className="text-muted vmerge-adjsub">(best first)
+                  <span className="u-textMuted vmerge-adjsub">(best first)
                    <OverlayTrigger placement='right' overlay={tooltip2}>
                       <Button bsStyle="link" className="tooltip-btn">
                         <Icon name="info" className="s0 info-icon"/>
@@ -214,22 +214,22 @@ storiesOf('VersionTMMergeModal', module)
                     <ListGroupItem className='v'>
                       <Icon name='menu' className='n1 drag-handle'/>
                       Version 1 <Icon name='locked' className='s0 icon-locked'/>
-                      <br/><span className='text-muted'>  Project A
+                      <br/><span className='u-textMuted'>  Project A
                        </span>
                       {" "}
                       <Button bsSize='xsmall' className='close rm-version-btn'>
-                        <Icon name='cross' className='n2 crossicon'
+                        <Icon name='cross' className='n2 iconCross'
                               title='remove version'/>
                       </Button>
                     </ListGroupItem>
                     <ListGroupItem className='v'>
                       <Icon name='menu' className='n1 drag-handle'/>
                       Version 2 <Icon name='locked' className='s0 icon-locked'/>
-                      <br/><span className='text-muted'>  Project A
+                      <br/><span className='u-textMuted'>  Project A
                        </span>
                       {" "}
                       <Button bsSize='xsmall' className='close rm-version-btn'>
-                        <Icon name='cross' className='n2 crossicon'
+                        <Icon name='cross' className='n2 iconCross'
                               title='remove version'/>
                       </Button>
                     </ListGroupItem>
@@ -294,7 +294,7 @@ storiesOf('VersionTMMergeModal', module)
                 <Col xs={12}>
                   <Well>
                     <p>Translations which satisfy all conditions will copy as
-                      <span className="text-bold text-success"> translated</span>.
+                      <span className="text-bold u-textSuccess"> translated</span>.
                     </p>
                   </Well>
                 </Col>
@@ -357,7 +357,7 @@ storiesOf('VersionTMMergeModal', module)
             show={true}
             onHide={action('onHide')}>
           <Modal.Header>
-            <Modal.Title><span className="text-new-blue">Version TM Merge</span></Modal.Title>
+            <Modal.Title><span className="u-textNewBlue">Version TM Merge</span></Modal.Title>
           </Modal.Header>
           <Modal.Body>
             <p className="intro">
@@ -406,7 +406,7 @@ storiesOf('VersionTMMergeModal', module)
             </Col>
             <Col xs={12} className='vmerge-row'>
               <p className="lead">For every potential translation:</p>
-              <span className="text-new-blue">If text is less than </span>
+              <span className="u-textNewBlue">If text is less than </span>
               <DropdownButton bsStyle='default' title='80%'
                               id='language-dropdown-basic'
                               className='vmerge-ddown'>
@@ -416,7 +416,7 @@ storiesOf('VersionTMMergeModal', module)
                           eventKey='1'>90%</MenuItem>
                 <MenuItem onClick={action('onClick')}
                           eventKey='1'>80%</MenuItem>
-              </DropdownButton><span className="text-new-blue"> &nbsp;similar, don't use it.
+              </DropdownButton><span className="u-textNewBlue"> &nbsp;similar, don't use it.
             </span>
             </Col>
             <Col xs={12} className='vmerge-boxes'>
@@ -503,7 +503,7 @@ storiesOf('VersionTMMergeModal', module)
                   </div>
                 </Col>
                 <Col xs={6}>
-                  <span className="no-v text-muted">Please select versions to sort<br/>
+                  <span className="no-v u-textMuted">Please select versions to sort<br/>
                     <Icon name="version" className="s8"/></span>
                 </Col>
                 <Col xs={12} className="validations">
@@ -565,7 +565,7 @@ storiesOf('VersionTMMergeModal', module)
                 <Col xs={12}>
                   <Well>
                     <p>Translations which satisfy all conditions will copy as
-                      <span className="text-bold text-success"> translated</span>.
+                      <span className="text-bold u-textSuccess"> translated</span>.
                     </p>
                   </Well>
                 </Col>
@@ -628,7 +628,7 @@ storiesOf('VersionTMMergeModal', module)
             show={true}
             onHide={action('onHide')}>
           <Modal.Header>
-            <Modal.Title><span className="text-new-blue">Version TM Merge</span></Modal.Title>
+            <Modal.Title><span className="u-textNewBlue">Version TM Merge</span></Modal.Title>
           </Modal.Header>
           <Modal.Body>
             <p className="intro">
@@ -677,7 +677,7 @@ storiesOf('VersionTMMergeModal', module)
             </Col>
             <Col xs={12} className='vmerge-row'>
               <p className="lead">For every potential translation:</p>
-              <span className="text-new-blue">If text is less than </span>
+              <span className="u-textNewBlue">If text is less than </span>
               <DropdownButton bsStyle='default' title='80%'
                               id='language-dropdown-basic'
                               className='vmerge-ddown'>
@@ -687,7 +687,7 @@ storiesOf('VersionTMMergeModal', module)
                           eventKey='1'>90%</MenuItem>
                 <MenuItem onClick={action('onClick')}
                           eventKey='1'>80%</MenuItem>
-              </DropdownButton><span className="text-new-blue"> &nbsp;similar, don't use it.
+              </DropdownButton><span className="u-textNewBlue"> &nbsp;similar, don't use it.
             </span>
             </Col>
             <Col xs={12} className='vmerge-boxes'>
@@ -774,7 +774,7 @@ storiesOf('VersionTMMergeModal', module)
                   </div>
                 </Col>
                 <Col xs={6}>
-                  <span className="no-v text-muted">Please select versions to sort<br/>
+                  <span className="no-v u-textMuted">Please select versions to sort<br/>
                     <Icon name="version" className="s8"/></span>
                 </Col>
                 <Col xs={12} className="validations">
@@ -836,7 +836,7 @@ storiesOf('VersionTMMergeModal', module)
                 <Col xs={12}>
                   <Well>
                     <p>Translations which satisfy all conditions will copy as
-                      <span className="text-bold text-success"> translated</span>.
+                      <span className="text-bold u-textSuccess"> translated</span>.
                     </p>
                   </Well>
                 </Col>