From bf6c9c8b3b2e99f5d2d089e6673ba858354431e6 Mon Sep 17 00:00:00 2001
From: Anthony Lapenna <lapenna.anthony@gmail.com>
Date: Thu, 27 Oct 2016 21:33:39 +1300
Subject: [PATCH] refactor(style): refactor multiple similar css classes

---
 app/components/container/container.html       | 22 +++++++++----------
 app/components/containers/containers.html     | 14 ++++++------
 .../createContainer/createcontainer.html      | 14 ++++++------
 .../createNetwork/createnetwork.html          |  2 +-
 .../createService/createservice.html          | 14 ++++++------
 app/components/createVolume/createvolume.html |  2 +-
 app/components/dashboard/dashboard.html       |  8 +++----
 app/components/image/image.html               |  8 +++----
 app/components/images/images.html             |  2 +-
 app/components/network/network.html           |  2 +-
 app/components/networks/networks.html         |  2 +-
 app/components/service/service.html           |  2 +-
 app/components/services/services.html         |  2 +-
 app/components/templates/templates.html       |  6 ++---
 app/components/volumes/volumes.html           |  2 +-
 assets/css/app.css                            | 19 ++--------------
 16 files changed, 53 insertions(+), 68 deletions(-)

diff --git a/app/components/container/container.html b/app/components/container/container.html
index a454ed04f..095007402 100644
--- a/app/components/container/container.html
+++ b/app/components/container/container.html
@@ -13,13 +13,13 @@
       <rd-widget-header icon="fa-cogs" title="Actions"></rd-widget-header>
       <rd-widget-body classes="padding">
         <div class="btn-group" role="group" aria-label="...">
-          <button class="btn btn-primary" ng-click="start()" ng-if="!container.State.Running"><i class="fa fa-play btn-ico" aria-hidden="true"></i>Start</button>
-          <button class="btn btn-danger" ng-click="stop()" ng-if="container.State.Running"><i class="fa fa-stop btn-ico" aria-hidden="true"></i>Stop</button>
-          <button class="btn btn-danger" ng-click="kill()" ng-if="container.State.Running"><i class="fa fa-bomb btn-ico" aria-hidden="true"></i>Kill</button>
-          <button class="btn btn-primary" ng-click="restart()" ng-if="container.State.Running"><i class="fa fa-refresh btn-ico" aria-hidden="true"></i>Restart</button>
-          <button class="btn btn-primary" ng-click="pause()" ng-if="container.State.Running && !container.State.Paused"><i class="fa fa-pause btn-ico" aria-hidden="true"></i>Pause</button>
-          <button class="btn btn-primary" ng-click="unpause()" ng-if="container.State.Paused"><i class="fa fa-play btn-ico" aria-hidden="true"></i>Resume</button>
-          <button class="btn btn-danger" ng-click="remove()" ng-disabled="container.State.Running"><i class="fa fa-trash btn-ico" aria-hidden="true"></i>Remove</button>
+          <button class="btn btn-primary" ng-click="start()" ng-if="!container.State.Running"><i class="fa fa-play space-right" aria-hidden="true"></i>Start</button>
+          <button class="btn btn-danger" ng-click="stop()" ng-if="container.State.Running"><i class="fa fa-stop space-right" aria-hidden="true"></i>Stop</button>
+          <button class="btn btn-danger" ng-click="kill()" ng-if="container.State.Running"><i class="fa fa-bomb space-right" aria-hidden="true"></i>Kill</button>
+          <button class="btn btn-primary" ng-click="restart()" ng-if="container.State.Running"><i class="fa fa-refresh space-right" aria-hidden="true"></i>Restart</button>
+          <button class="btn btn-primary" ng-click="pause()" ng-if="container.State.Running && !container.State.Paused"><i class="fa fa-pause space-right" aria-hidden="true"></i>Pause</button>
+          <button class="btn btn-primary" ng-click="unpause()" ng-if="container.State.Paused"><i class="fa fa-play space-right" aria-hidden="true"></i>Resume</button>
+          <button class="btn btn-danger" ng-click="remove()" ng-disabled="container.State.Running"><i class="fa fa-trash space-right" aria-hidden="true"></i>Remove</button>
         </div>
       </rd-widget-body>
     </rd-widget>
@@ -52,7 +52,7 @@
             <tr>
               <td>Status</td>
               <td>
-                <i ng-class="{true: 'fa fa-heartbeat text-icon green-icon', false: 'fa fa-heartbeat text-icon red-icon'}[container.State.Running]"></i>
+                <i ng-class="{true: 'fa fa-heartbeat space-right green-icon', false: 'fa fa-heartbeat space-right red-icon'}[container.State.Running]"></i>
                 {{ container.State|getstatetext }} since {{ activityTime }}<span ng-if="!container.State.Running"> with exit code {{ container.State.ExitCode }}</span>
               </td>
             </tr>
@@ -67,9 +67,9 @@
             <tr>
               <td colspan="2">
                 <div class="btn-group" role="group" aria-label="...">
-                  <a class="btn btn-outline-secondary" type="button" ui-sref="stats({id: container.Id})"><i class="fa fa-area-chart btn-ico" aria-hidden="true"></i>Stats</a>
-                  <a class="btn btn-outline-secondary" type="button" ui-sref="logs({id: container.Id})"><i class="fa fa-exclamation-circle btn-ico" aria-hidden="true"></i>Logs</a>
-                  <a class="btn btn-outline-secondary" type="button" ui-sref="console({id: container.Id})"><i class="fa fa-terminal btn-ico" aria-hidden="true"></i>Console</a>
+                  <a class="btn btn-outline-secondary" type="button" ui-sref="stats({id: container.Id})"><i class="fa fa-area-chart space-right" aria-hidden="true"></i>Stats</a>
+                  <a class="btn btn-outline-secondary" type="button" ui-sref="logs({id: container.Id})"><i class="fa fa-exclamation-circle space-right" aria-hidden="true"></i>Logs</a>
+                  <a class="btn btn-outline-secondary" type="button" ui-sref="console({id: container.Id})"><i class="fa fa-terminal space-right" aria-hidden="true"></i>Console</a>
                 </div>
               </td>
             </tr>
diff --git a/app/components/containers/containers.html b/app/components/containers/containers.html
index 6369dcc37..a0b0f7629 100644
--- a/app/components/containers/containers.html
+++ b/app/components/containers/containers.html
@@ -17,13 +17,13 @@
     <rd-widget-taskbar classes="col-lg-12">
       <div class="pull-left">
         <div class="btn-group" role="group" aria-label="...">
-          <button type="button" class="btn btn-primary btn-responsive" ng-click="startAction()" ng-disabled="!state.selectedItemCount"><i class="fa fa-play btn-ico" aria-hidden="true"></i>Start</button>
-          <button type="button" class="btn btn-primary btn-responsive" ng-click="stopAction()" ng-disabled="!state.selectedItemCount"><i class="fa fa-stop btn-ico" aria-hidden="true"></i>Stop</button>
-          <button type="button" class="btn btn-primary btn-responsive" ng-click="killAction()" ng-disabled="!state.selectedItemCount"><i class="fa fa-bomb btn-ico" aria-hidden="true"></i>Kill</button>
-          <button type="button" class="btn btn-primary btn-responsive" ng-click="restartAction()" ng-disabled="!state.selectedItemCount"><i class="fa fa-refresh btn-ico" aria-hidden="true"></i>Restart</button>
-          <button type="button" class="btn btn-primary btn-responsive" ng-click="pauseAction()" ng-disabled="!state.selectedItemCount"><i class="fa fa-pause btn-ico" aria-hidden="true"></i>Pause</button>
-          <button type="button" class="btn btn-primary btn-responsive" ng-click="unpauseAction()" ng-disabled="!state.selectedItemCount"><i class="fa fa-play btn-ico" aria-hidden="true"></i>Resume</button>
-          <button type="button" class="btn btn-danger btn-responsive" ng-click="removeAction()" ng-disabled="!state.selectedItemCount"><i class="fa fa-trash btn-ico" aria-hidden="true"></i>Remove</button>
+          <button type="button" class="btn btn-primary btn-responsive" ng-click="startAction()" ng-disabled="!state.selectedItemCount"><i class="fa fa-play space-right" aria-hidden="true"></i>Start</button>
+          <button type="button" class="btn btn-primary btn-responsive" ng-click="stopAction()" ng-disabled="!state.selectedItemCount"><i class="fa fa-stop space-right" aria-hidden="true"></i>Stop</button>
+          <button type="button" class="btn btn-primary btn-responsive" ng-click="killAction()" ng-disabled="!state.selectedItemCount"><i class="fa fa-bomb space-right" aria-hidden="true"></i>Kill</button>
+          <button type="button" class="btn btn-primary btn-responsive" ng-click="restartAction()" ng-disabled="!state.selectedItemCount"><i class="fa fa-refresh space-right" aria-hidden="true"></i>Restart</button>
+          <button type="button" class="btn btn-primary btn-responsive" ng-click="pauseAction()" ng-disabled="!state.selectedItemCount"><i class="fa fa-pause space-right" aria-hidden="true"></i>Pause</button>
+          <button type="button" class="btn btn-primary btn-responsive" ng-click="unpauseAction()" ng-disabled="!state.selectedItemCount"><i class="fa fa-play space-right" aria-hidden="true"></i>Resume</button>
+          <button type="button" class="btn btn-danger btn-responsive" ng-click="removeAction()" ng-disabled="!state.selectedItemCount"><i class="fa fa-trash space-right" aria-hidden="true"></i>Remove</button>
         </div>
         <a class="btn btn-default btn-responsive" type="button" ui-sref="actions.create.container">Add container</a>
       </div>
diff --git a/app/components/createContainer/createcontainer.html b/app/components/createContainer/createcontainer.html
index d4e641d42..2e387ffee 100644
--- a/app/components/createContainer/createcontainer.html
+++ b/app/components/createContainer/createcontainer.html
@@ -64,7 +64,7 @@
           <div class="form-group">
             <label for="container_ports" class="col-sm-1 control-label text-left">Port mapping</label>
             <div class="col-sm-11">
-              <span class="label label-default clickable" ng-click="addPortBinding()">
+              <span class="label label-default interactive" ng-click="addPortBinding()">
                 <i class="fa fa-plus-circle" aria-hidden="true"></i> map port
               </span>
             </div>
@@ -106,10 +106,10 @@
     <rd-widget>
       <rd-widget-body>
         <ul class="nav nav-tabs">
-          <li class="active clickable"><a data-target="#command" data-toggle="tab">Command</a></li>
-          <li class="clickable"><a data-target="#volumes" data-toggle="tab">Volumes</a></li>
-          <li class="clickable"><a data-target="#network" data-toggle="tab">Network</a></li>
-          <li class="clickable"><a data-target="#security" data-toggle="tab">Security/Host</a></li>
+          <li class="active interactive"><a data-target="#command" data-toggle="tab">Command</a></li>
+          <li class="interactive"><a data-target="#volumes" data-toggle="tab">Volumes</a></li>
+          <li class="interactive"><a data-target="#network" data-toggle="tab">Network</a></li>
+          <li class="interactive"><a data-target="#security" data-toggle="tab">Security/Host</a></li>
         </ul>
         <!-- tab-content -->
         <div class="tab-content">
@@ -181,7 +181,7 @@
               <div class="form-group">
                 <label for="container_env" class="col-sm-1 control-label text-left">Environment variables</label>
                 <div class="col-sm-11">
-                  <span class="label label-default clickable" ng-click="addEnvironmentVariable()">
+                  <span class="label label-default interactive" ng-click="addEnvironmentVariable()">
                     <i class="fa fa-plus-circle" aria-hidden="true"></i> environment variable
                   </span>
                 </div>
@@ -216,7 +216,7 @@
               <div class="form-group">
                 <label for="container_volumes" class="col-sm-1 control-label text-left">Volumes</label>
                 <div class="col-sm-11">
-                  <span class="label label-default clickable" ng-click="addVolume()">
+                  <span class="label label-default interactive" ng-click="addVolume()">
                     <i class="fa fa-plus-circle" aria-hidden="true"></i> volume
                   </span>
                 </div>
diff --git a/app/components/createNetwork/createnetwork.html b/app/components/createNetwork/createnetwork.html
index 3b3eecdd4..0ba7b5f74 100644
--- a/app/components/createNetwork/createnetwork.html
+++ b/app/components/createNetwork/createnetwork.html
@@ -42,7 +42,7 @@
           <div class="form-group">
             <label for="network_driveropts" class="col-sm-1 control-label text-left">Driver options</label>
             <div class="col-sm-11">
-              <span class="label label-default clickable" ng-click="addDriverOption()">
+              <span class="label label-default interactive" ng-click="addDriverOption()">
                 <i class="fa fa-plus-circle" aria-hidden="true"></i> driver option
               </span>
             </div>
diff --git a/app/components/createService/createservice.html b/app/components/createService/createservice.html
index 6357d667a..3d6dc08c0 100644
--- a/app/components/createService/createservice.html
+++ b/app/components/createService/createservice.html
@@ -56,7 +56,7 @@
           <div class="form-group">
             <label for="container_ports" class="col-sm-1 control-label text-left">Port mapping</label>
             <div class="col-sm-11">
-              <span class="label label-default clickable" ng-click="addPortBinding()">
+              <span class="label label-default interactive" ng-click="addPortBinding()">
                 <i class="fa fa-plus-circle" aria-hidden="true"></i> map port
               </span>
             </div>
@@ -98,9 +98,9 @@
     <rd-widget>
       <rd-widget-body>
         <ul class="nav nav-tabs">
-          <li class="active clickable"><a data-target="#command" data-toggle="tab">Command</a></li>
-          <li class="clickable"><a data-target="#volumes" data-toggle="tab">Volumes</a></li>
-          <li class="clickable"><a data-target="#network" data-toggle="tab">Network</a></li>
+          <li class="active interactive"><a data-target="#command" data-toggle="tab">Command</a></li>
+          <li class="interactive"><a data-target="#volumes" data-toggle="tab">Volumes</a></li>
+          <li class="interactive"><a data-target="#network" data-toggle="tab">Network</a></li>
         </ul>
         <!-- tab-content -->
         <div class="tab-content">
@@ -131,7 +131,7 @@
               <div class="form-group">
                 <label for="service_env" class="col-sm-1 control-label text-left">Environment variables</label>
                 <div class="col-sm-11">
-                  <span class="label label-default clickable" ng-click="addEnvironmentVariable()">
+                  <span class="label label-default interactive" ng-click="addEnvironmentVariable()">
                     <i class="fa fa-plus-circle" aria-hidden="true"></i> environment variable
                   </span>
                 </div>
@@ -166,7 +166,7 @@
               <div class="form-group">
                 <label for="service_volumes" class="col-sm-1 control-label text-left">Volumes</label>
                 <div class="col-sm-11">
-                  <span class="label label-default clickable" ng-click="addVolume()">
+                  <span class="label label-default interactive" ng-click="addVolume()">
                     <i class="fa fa-plus-circle" aria-hidden="true"></i> volume
                   </span>
                 </div>
@@ -224,7 +224,7 @@
               <div class="form-group">
                 <label for="service_extra_networks" class="col-sm-1 control-label text-left">Extra networks</label>
                 <div class="col-sm-11">
-                  <span class="label label-default clickable" ng-click="addExtraNetwork()">
+                  <span class="label label-default interactive" ng-click="addExtraNetwork()">
                     <i class="fa fa-plus-circle" aria-hidden="true"></i> network
                   </span>
                 </div>
diff --git a/app/components/createVolume/createvolume.html b/app/components/createVolume/createvolume.html
index b60bc1a27..b55ea9ea5 100644
--- a/app/components/createVolume/createvolume.html
+++ b/app/components/createVolume/createvolume.html
@@ -30,7 +30,7 @@
           <div class="form-group">
             <label for="volume_driveropts" class="col-sm-1 control-label text-left">Driver options</label>
             <div class="col-sm-11">
-              <span class="label label-default clickable" ng-click="addDriverOption()">
+              <span class="label label-default interactive" ng-click="addDriverOption()">
                 <i class="fa fa-plus-circle" aria-hidden="true"></i> driver option
               </span>
             </div>
diff --git a/app/components/dashboard/dashboard.html b/app/components/dashboard/dashboard.html
index 0ae284cc3..9e4366633 100644
--- a/app/components/dashboard/dashboard.html
+++ b/app/components/dashboard/dashboard.html
@@ -93,8 +93,8 @@
             <i class="fa fa-server"></i>
           </div>
           <div class="pull-right">
-            <div><i class="fa fa-heartbeat text-icon green-icon"></i>{{ containerData.running }} running</div>
-            <div><i class="fa fa-heartbeat text-icon red-icon"></i>{{ containerData.stopped }} stopped</div>
+            <div><i class="fa fa-heartbeat space-right green-icon"></i>{{ containerData.running }} running</div>
+            <div><i class="fa fa-heartbeat space-right red-icon"></i>{{ containerData.stopped }} stopped</div>
           </div>
           <div class="title">{{ containerData.total }}</div>
           <div class="comment">Containers</div>
@@ -110,7 +110,7 @@
             <i class="fa fa-clone"></i>
           </div>
           <div class="pull-right">
-            <div><i class="fa fa-pie-chart text-icon"></i>{{ imageData.size|humansize }}</div>
+            <div><i class="fa fa-pie-chart space-right"></i>{{ imageData.size|humansize }}</div>
           </div>
           <div class="title">{{ imageData.total }}</div>
           <div class="comment">Images</div>
@@ -126,7 +126,7 @@
             <i class="fa fa-cubes"></i>
           </div>
           <div class="pull-right" ng-if="infoData.Driver">
-            <div><i class="fa fa-hdd-o text-icon"></i>{{ infoData.Driver }} driver</div>
+            <div><i class="fa fa-hdd-o space-right"></i>{{ infoData.Driver }} driver</div>
           </div>
           <div class="title">{{ volumeData.total }}</div>
           <div class="comment">Volumes</div>
diff --git a/app/components/image/image.html b/app/components/image/image.html
index b94f40a16..132372a81 100644
--- a/app/components/image/image.html
+++ b/app/components/image/image.html
@@ -13,7 +13,7 @@
       <rd-widget-header icon="fa fa-tags" title="Image tags"></rd-widget-header>
       <rd-widget-body classes="no-padding">
         <div style="margin: 5px 10px;">
-          <span ng-repeat="tag in RepoTags" class="label label-primary image-tag">
+          <span ng-repeat="tag in RepoTags" class="label label-primary image-tag space-right">
             <a data-toggle="tooltip" class="interactive" title="Push to registry" ng-click="pushImage(tag)">
               <i class="fa fa-upload white-icon" aria-hidden="true"></i>
             </a>
@@ -82,7 +82,7 @@
               <td>ID</td>
               <td>
                 {{ image.Id }}
-                <button class="btn btn-xs btn-danger" ng-click="removeImage(image.Id)"><i class="fa fa-trash btn-ico" aria-hidden="true"></i>Delete this image</button>
+                <button class="btn btn-xs btn-danger" ng-click="removeImage(image.Id)"><i class="fa fa-trash space-right" aria-hidden="true"></i>Delete this image</button>
               </td>
             </tr>
             <tr ng-if="image.Parent">
@@ -130,7 +130,7 @@
             <tr ng-if="image.ContainerConfig.ExposedPorts">
               <td>EXPOSE</td>
               <td>
-                <span class="label label-default tag" ng-repeat="port in exposedPorts">
+                <span class="label label-default space-right" ng-repeat="port in exposedPorts">
                   {{ port }}
                 </span>
               </td>
@@ -138,7 +138,7 @@
             <tr ng-if="image.ContainerConfig.Volumes">
               <td>VOLUME</td>
               <td>
-                <span class="label label-default tag" ng-repeat="volume in volumes">
+                <span class="label label-default space-right" ng-repeat="volume in volumes">
                   {{ volume }}
                 </span>
               </td>
diff --git a/app/components/images/images.html b/app/components/images/images.html
index cad9b590b..d112a98d4 100644
--- a/app/components/images/images.html
+++ b/app/components/images/images.html
@@ -55,7 +55,7 @@
       </rd-widget-header>
       <rd-widget-taskbar classes="col-lg-12">
         <div class="pull-left">
-          <button type="button" class="btn btn-danger" ng-click="removeAction()" ng-disabled="!state.selectedItemCount"><i class="fa fa-trash btn-ico" aria-hidden="true"></i>Remove</button>
+          <button type="button" class="btn btn-danger" ng-click="removeAction()" ng-disabled="!state.selectedItemCount"><i class="fa fa-trash space-right" aria-hidden="true"></i>Remove</button>
         </div>
         <div class="pull-right">
           <input type="text" id="filter" ng-model="state.filter" placeholder="Filter..." class="form-control input-sm" />
diff --git a/app/components/network/network.html b/app/components/network/network.html
index 678113b2f..082514c49 100644
--- a/app/components/network/network.html
+++ b/app/components/network/network.html
@@ -22,7 +22,7 @@
               <td>ID</td>
               <td>
                 {{ network.Id }}
-                <button class="btn btn-xs btn-danger" ng-click="removeNetwork(network.Id)"><i class="fa fa-trash btn-ico" aria-hidden="true"></i>Delete this network</button>
+                <button class="btn btn-xs btn-danger" ng-click="removeNetwork(network.Id)"><i class="fa fa-trash space-right" aria-hidden="true"></i>Delete this network</button>
               </td>
             </tr>
             <tr>
diff --git a/app/components/networks/networks.html b/app/components/networks/networks.html
index 6d75df9c5..cfdd446a5 100644
--- a/app/components/networks/networks.html
+++ b/app/components/networks/networks.html
@@ -57,7 +57,7 @@
       </rd-widget-header>
       <rd-widget-taskbar classes="col-lg-12">
         <div class="pull-left">
-          <button type="button" class="btn btn-danger" ng-click="removeAction()" ng-disabled="!state.selectedItemCount"><i class="fa fa-trash btn-ico" aria-hidden="true"></i>Remove</button>
+          <button type="button" class="btn btn-danger" ng-click="removeAction()" ng-disabled="!state.selectedItemCount"><i class="fa fa-trash space-right" aria-hidden="true"></i>Remove</button>
         </div>
         <div class="pull-right">
           <input type="text" id="filter" ng-model="state.filter" placeholder="Filter..." class="form-control input-sm" />
diff --git a/app/components/service/service.html b/app/components/service/service.html
index ad674e4e5..1f0a6dfc2 100644
--- a/app/components/service/service.html
+++ b/app/components/service/service.html
@@ -33,7 +33,7 @@
               <td>ID</td>
               <td>
                 {{ service.Id }}
-                <button class="btn btn-xs btn-danger" ng-click="removeService()"><i class="fa fa-trash btn-ico" aria-hidden="true"></i>Delete this service</button>
+                <button class="btn btn-xs btn-danger" ng-click="removeService()"><i class="fa fa-trash space-right" aria-hidden="true"></i>Delete this service</button>
               </td>
             </tr>
             <tr>
diff --git a/app/components/services/services.html b/app/components/services/services.html
index ede13aabd..5dd47f3ba 100644
--- a/app/components/services/services.html
+++ b/app/components/services/services.html
@@ -17,7 +17,7 @@
       </rd-widget-header>
       <rd-widget-taskbar classes="col-lg-12 col-md-12 col-xs-12">
         <div class="pull-left">
-          <button type="button" class="btn btn-danger" ng-click="removeAction()" ng-disabled="!state.selectedItemCount"><i class="fa fa-trash btn-ico" aria-hidden="true"></i>Remove</button>
+          <button type="button" class="btn btn-danger" ng-click="removeAction()" ng-disabled="!state.selectedItemCount"><i class="fa fa-trash space-right" aria-hidden="true"></i>Remove</button>
           <a class="btn btn-default btn-responsive" type="button" ui-sref="actions.create.service">Add service</a>
         </div>
         <div class="pull-right">
diff --git a/app/components/templates/templates.html b/app/components/templates/templates.html
index 29716599c..b4557d364 100644
--- a/app/components/templates/templates.html
+++ b/app/components/templates/templates.html
@@ -54,17 +54,17 @@
           <div class="form-group">
             <div class="col-sm-12">
               <a class="small interactive" ng-if="!state.showAdvancedOptions" ng-click="state.showAdvancedOptions = true;">
-                <i class="fa fa-plus text-icon" aria-hidden="true"></i> Show advanced options
+                <i class="fa fa-plus space-right" aria-hidden="true"></i> Show advanced options
               </a>
               <a class="small interactive" ng-if="state.showAdvancedOptions" ng-click="state.showAdvancedOptions = false;">
-                <i class="fa fa-minus text-icon" aria-hidden="true"></i> Hide advanced options
+                <i class="fa fa-minus space-right" aria-hidden="true"></i> Hide advanced options
               </a>
             </div>
           </div>
           <div class="form-group" ng-if="state.showAdvancedOptions">
             <label for="container_ports" class="col-sm-1 control-label text-left">Port mapping</label>
             <div class="col-sm-11" style="margin-top: 5px;">
-              <span class="label label-default clickable" ng-click="addPortBinding()">
+              <span class="label label-default interactive" ng-click="addPortBinding()">
                 <i class="fa fa-plus-circle" aria-hidden="true"></i> map additional port
               </span>
             </div>
diff --git a/app/components/volumes/volumes.html b/app/components/volumes/volumes.html
index 88791d2ac..609b00ccb 100644
--- a/app/components/volumes/volumes.html
+++ b/app/components/volumes/volumes.html
@@ -16,7 +16,7 @@
     </rd-widget-header>
     <rd-widget-taskbar classes="col-lg-12">
       <div class="pull-left">
-        <button type="button" class="btn btn-danger" ng-click="removeAction()" ng-disabled="!state.selectedItemCount"><i class="fa fa-trash btn-ico" aria-hidden="true"></i>Remove</button>
+        <button type="button" class="btn btn-danger" ng-click="removeAction()" ng-disabled="!state.selectedItemCount"><i class="fa fa-trash space-right" aria-hidden="true"></i>Remove</button>
         <a class="btn btn-default" type="button" ui-sref="actions.create.volume">Add volume</a>
       </div>
       <div class="pull-right">
diff --git a/assets/css/app.css b/assets/css/app.css
index 9801cb578..d659f6de3 100644
--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -63,11 +63,7 @@ input[type="radio"] {
   vertical-align: middle;
 }
 
-.clickable {
-  cursor: pointer;
-}
-
-.text-icon {
+.space-right {
   margin-right: 5px;
 }
 
@@ -83,16 +79,9 @@ input[type="radio"] {
   color: white;
 }
 
-.image-tag {
-  margin-right: 5px;
-}
-
-.label.tag {
-  margin-right: 5px;
-}
-
 .widget .widget-body table tbody .image-tag {
   font-size: 90% !important;
+  margin-right: 5px;
 }
 
 .terminal-container {
@@ -104,10 +93,6 @@ input[type="radio"] {
   cursor: pointer;
 }
 
-.btn-ico {
-  margin-right: 5px;
-}
-
 .template-list {
   display: flex;
   flex-wrap: wrap;