Remove a truckload of wasteful CSS

app/assets/javascripts/components/add_domain.js.jsx

@@ -80,7 +80,7 @@ var NewDomainTransfer = React.createClass({
                 <input name="domain[transfer_auth_code]" type="text" className="form-control" />
               </FormGroup>
             </div>
-            <div className="modal-footer">
+            <div className="modal-footer py2 px3">
               <button type="button" className={'btn btn-default'} onClick={this.props.onCancel}>
                 Cancel
               </button>
@@ -122,7 +122,7 @@ var DomainPurchaseApplication = React.createClass({
                 <input name="domain[name]" type="text" className="form-control" placeholder="example.com" autofocus />
               </FormGroup>
             </div>
-            <div className="modal-footer">
+            <div className="modal-footer py2 px3">
               <button type="button" className={'btn btn-default'} onClick={this.props.onCancel}>
                 Cancel
               </button>

app/assets/javascripts/components/bounty_list_item.js.jsx

@@ -114,7 +114,7 @@ var BountyListItem = React.createClass({
         <div className="table mb0">
           <div className="table-cell">
             <div className="px3 pt3 pb3">
-              <div className="mt0 mb1 mtn1 h4 fw-500 clickable">
+              <div className="mt0 mb1 mtn1 h4 bold clickable">
                 {this.renderTitle()}
               </div>
               <div className="clearfix h6 mt0 mb0 gray-3 mxn1">
@@ -206,9 +206,9 @@ var BountyListItem = React.createClass({
     return (
       <a className={classes} href={bounty.url}>
         {bounty.title} {' '}
-        <span className="gray-2 fs4">
+        <span className="gray-2 h3">
           #{bounty.number}
-          <span className="gray-2 visible-hover fw-200"> posted {moment(bounty.created_at).fromNow()}</span>
+          <span className="gray-2 visible-hover light"> posted {moment(bounty.created_at).fromNow()}</span>
         </span>
       </a>
     )

app/assets/javascripts/components/chat_entry.js.jsx

@@ -21,7 +21,7 @@
           </div>
           <div className="activity-body">
             <div className="activity-actions">
-              <ul className="list-inline pull-right omega hidden-xs">
+              <ul className="list-inline pull-right mb0 hidden-xs">
                 <li>
                   <div className="dropdown">
                     <a href="#" className="dropdown-toggle" data-toggle="dropdown">

app/assets/javascripts/components/drag_and_drop_view.js.jsx

@@ -16,7 +16,7 @@ var DragAndDrop = React.createClass({
         <img src={this.props.url}
             alt={this.props.alt}
             style={{opacity: this.state.opacity}}
-            className='img-rounded'
+            className='rounded'
             width='100%' />
 
         <span style={{

app/assets/javascripts/components/financials_view.js.jsx

@@ -65,7 +65,7 @@
       // TODO: Break out dl-inline styles into reusable SCSS components
       return (
         <div>
-          <ul className="list-inline omega">
+          <ul className="list-inline mb0">
             <li>
               <span className="bg-green"></span>
               <span className="green">Payout</span>

app/assets/javascripts/components/heart.js.jsx

@@ -80,7 +80,7 @@ var Heart = React.createClass({
     </div>
 
     return (
-      <a className="inline-block valign-top fs6 gray no-focus" href="javascript:void(0);" onClick={this.handleClick}>
+      <a className="inline-block valign-top h2 gray no-focus" href="javascript:void(0);" onClick={this.handleClick}>
         {heartWithCount}
       </a>
     );
@@ -147,7 +147,7 @@ var Heart = React.createClass({
 
     return (
       <div onClick={this.handleClick} className="border rounded py1 px2">
-        <div className="inline-block valign-top fs6 gray no-focus">
+        <div className="inline-block valign-top h2 gray no-focus">
           {heartWithCount}
         </div>
       </div>

app/assets/javascripts/components/idea_progress_widget.js.jsx

@@ -66,11 +66,11 @@ const IdeaProgressWidget = React.createClass({
 
     return (
       <div className="product-state-indicator">
-        <div className="p2 pt0">
+        <div className="p2">
           <div className="center"><strong>{this.state.stages[this.state.activeStage]['cta'] || this.state.stages[this.state.activeStage]['name']}</strong>
           </div>
         </div>
-        <div className="col-sm-12">
+        <div className="sm-col-12">
           <ul className="indicator-container mb0">
             {stages}
           </ul>

app/assets/javascripts/components/info_modal.js.jsx

@@ -48,7 +48,7 @@
     },
 
     logo: function() {
-      return <img src={this.props.product.poster} className='alpha mb2' style={{ width: '100px', paddingTop: '0px' }} />;
+      return <img src={this.props.product.poster} className='mt0 mb2' style={{ width: '100px', paddingTop: '0px' }} />;
     },
 
     render: function() {
@@ -88,7 +88,7 @@
       var product = this.props.product;
 
       return (
-        <div className="alpha" style={{ 'text-align': 'center' }}>
+        <div className="mt0" style={{ 'text-align': 'center' }}>
           <h4 className>{product.name}</h4>
           {this.logo()}
           <p>

app/assets/javascripts/components/invite_bounty_form.js.jsx

@@ -25,7 +25,7 @@ var FormGroup = require('./form_group.js.jsx');
       return (
         <form onSubmit={this.handleSubmit}>
           <div className="p3">
-            <h2 className="alpha">Ask a friend</h2>
+            <h2 className="mt0">Ask a friend</h2>
             <p className="gray-2">Know somebody who could help with this? Anybody can help out, all you need to do is ask.</p>
 
             <div className="alert alert-info alert-dismissable" role="alert" style={{ display: this.state.alertDisplay }}>

app/assets/javascripts/components/invite_list.js.jsx

@@ -10,7 +10,7 @@ var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;
       })
       return (
         <div className="panel panel-default">
-          <ul className="list-group list-group-breakout small omega">
+          <ul className="list-group list-group-breakout small mb0">
             <ReactCSSTransitionGroup transitionName="invite">
               {inviteNodes}
             </ReactCSSTransitionGroup>

app/assets/javascripts/components/members_view.js.jsx

@@ -90,7 +90,7 @@ var OnlineUsersStore = require('../stores/online_users_store');
 
       if (isMemberOnline(member)) {
         indicator = (
-          <div className="indicator indicator-success icon-right"></div>
+          <div className="indicator bg-green icon-right"></div>
         )
       }
 

app/assets/javascripts/components/new_repository_preview.js.jsx

@@ -116,7 +116,7 @@
           </div>
 
           <FormGroup>
-            <div className="form-group gray-2 omega">
+            <div className="form-group gray-2 mb0">
               <label>
                 {this.props.addonText + this.state.inputPreview}
               </label>

app/assets/javascripts/components/news_feed/news_feed_item_bounty_timeline_item.js.jsx

@@ -58,7 +58,7 @@ module.exports = React.createClass({
 
             <div className="activity-actions">
 
-              <ul className="list-inline pull-right omega">
+              <ul className="list-inline pull-right mb0">
                 <li>
                   <div className="dropdown">
                     <a href="#" className="dropdown-toggle" id={"dropdown-" + id} data-toggle="dropdown">

app/assets/javascripts/components/news_feed/news_feed_item_post.js.jsx

@@ -27,15 +27,15 @@ module.exports = React.createClass({
       <div className="table mb0">
         <div className="table-cell">
           <div className="px3 pt3 pb3" onClick={this.handleClick}>
-            <div className="mt0 mb1 mtn1 h4 fw-500 clickable">
+            <div className="mt0 mb1 mtn1 h4 bold clickable">
               <a href={this.props.url}>
                 {this.props.title}
               </a>
             </div>
             <div>
               {this.renderSummary()}
             </div>
-            <div className="mt1 gray-1 fs4">
+            <div className="mt1 gray-1 h3">
               <Markdown content={this.props.body} normalized={true} />
               {this.renderReadMore()}
             </div>

app/assets/javascripts/components/people_view.js.jsx

@@ -130,8 +130,8 @@
 
       return (
         <div>
-          <p className="omega">
-            <ul className="list-inline omega pull-right">
+          <p className="mb0">
+            <ul className="list-inline mb0 pull-right">
               {this.skills(member)}
             </ul>
             <strong>

app/assets/javascripts/components/posts/posts_index.js.jsx

@@ -98,19 +98,19 @@ var PostsIndex = React.createClass({
     return [
       <li className="mb1 lh0_9" key="filter-all">
         <a href={path + "?discussions=true"} className="pill-hover block py1 px3" onClick={this.fetchDiscussions}>
-          <span className="fs1 fw-500 caps">all posts</span>
+          <span className="h5 bold caps">all posts</span>
         </a>
       </li>,
 
       <li className="mb1 lh0_9" key="filter-announcements">
         <a href={path + "?announcements=true"} className="pill-hover block py1 px3" onClick={this.fetchAnnouncements}>
-          <span className="fs1 fw-500 caps">announcements</span>
+          <span className="h5 bold caps">announcements</span>
         </a>
       </li>,
 
       <li className="mb1 lh0_9" key="filter-archived">
         <a href={path + "?archived=true"} className="pill-hover block py1 px3" onClick={this.fetchArchivedPosts}>
-          <span className="fs1 fw-500 caps">archived posts</span>
+          <span className="h5 bold caps">archived posts</span>
         </a>
       </li>
     ];

app/assets/javascripts/components/products/metrics_charts.js.jsx

@@ -52,7 +52,7 @@ var MetricsCharts = React.createClass({
   renderAddMetrics() {
     return this.blurredImage(() =>
       <div>
-        <h3 className="alpha">
+        <h3 className="mt0">
           Metrics setup guide
         </h3>
         <p>Configuring Assembly metrics integration allows you to see and show off your products success with the world.</p>
@@ -69,7 +69,7 @@ var MetricsCharts = React.createClass({
   renderEmptyState() {
     return this.blurredImage(() =>
       <div className="center">
-        <h3 className="alpha">
+        <h3 className="mt0">
           No metrics collected yet
         </h3>
         <p>Once {this.state.product.name} is up and running its metrics will appear here</p>

app/assets/javascripts/components/products/product_activity.js.jsx

@@ -120,7 +120,7 @@ const ProductActivity = React.createClass({
         return (
           <li className="mb1 lh0_9" key={tag + '-' + i}>
             <a href={href} className="pill-hover block py1 px3">
-              <span className="fs1 fw-500 caps">{tag + ' posts'}</span>
+              <span className="h5 bold caps">{tag + ' posts'}</span>
             </a>
           </li>
         );

app/assets/javascripts/components/tag.js.jsx

@@ -8,7 +8,7 @@ var Tag = React.createClass({
   render: function() {
     var tag = this.props.tag;
     return (
-      <a className="fs1 caps gray-2 mr2 pointer" href={this.props.tag.url}>
+      <a className="h5 caps gray-2 mr2 pointer" href={this.props.tag.url}>
         #{this.props.tag.name}
       </a>
     );

app/assets/javascripts/lib/bootstrap-lightbox.js

@@ -45,7 +45,7 @@
 		{
 			that.backdrop(function ()
 			{
-				var transition = $.support.transition && that.$element.hasClass('fade');
+				var transition = $.support.transition && that.$element.hasClass('muted');
 
 				if (!that.$element.parent().length)
 				{
@@ -100,7 +100,7 @@
 			.attr('aria-hidden', true)
 			.off('click.dismiss.lightbox');
 
-		$.support.transition && this.$element.hasClass('fade') ?
+		$.support.transition && this.$element.hasClass("muted") ?
 			this.$element
 				.one($.support.transition.end, $.proxy(this.hideModal(slide), this))
 				.emulateTransitionEnd(300) :
@@ -150,13 +150,12 @@
 	Lightbox.prototype.backdrop = function (callback)
 	{
 		var that    = this
-		var animate = this.$element.hasClass('fade') ? 'fade' : ''
+		var animate = this.$element.hasClass("muted") ? "muted" : "";
 		if (this.isShown && this.options.backdrop)
 		{
 			var doAnimate = $.support.transition && animate;
 
-			this.$backdrop = $('<div class="modal-backdrop ' + animate + '" />')
-				.appendTo(document.body);
+			this.$backdrop = $("<div class='bg-black " + animate + "' />").appendTo(document.body);
 
 			this.$element.on('click.dismiss.lightbox', $.proxy(function (e)
 			{
@@ -183,7 +182,7 @@
 		{
 			this.$backdrop.removeClass('in');
 
-			$.support.transition && this.$element.hasClass('fade')?
+			$.support.transition && this.$element.hasClass('muted')?
 				this.$backdrop
 					.one($.support.transition.end, callback)
 					.emulateTransitionEnd(150) :

app/assets/stylesheets/_bootstrap.scss

@@ -24,10 +24,8 @@
 @import "bootstrap/navbar";
 @import "bootstrap/breadcrumbs";
 @import "bootstrap/pagination";
-@import "bootstrap/pager";
 @import "bootstrap/labels";
 @import "bootstrap/badges";
-@import "bootstrap/thumbnails";
 @import "bootstrap/alerts";
 @import "bootstrap/progress-bars";
 @import "bootstrap/media";