Replace pixel icons with vector icons from the glyph fonts included in Tyrian

14 files changed, 40 insertions, 15 deletions

diff --git a/lib/helpers.rb b/lib/helpers.rb
index 6b16616..16cfd39 100644
--- a/lib/helpers.rb
+++ b/lib/helpers.rb
@@ -30,11 +30,12 @@ helpers do
       service_name = service_array.nil? ? 'UNKNOWN NAME' : service_array[:name] 
       data_service_name = service_name.gsub('"', "'")
       content << "
-        <a class=\"list-group-item has-tooltip notice-link\" href=\"#notices\" title=\"#{_status_text}\"
+        <a class=\"list-group-item has-tooltip notice-link status-#{_service_status}\" href=\"#notices\" title=\"#{_status_text}\"
            data-toggle=\"tooltip\" data-placement=\"top\" data-container=\"body\"
            data-service=\"#{service}\" data-service-name=\"#{data_service_name}\">
-        #{_service_info}
+
         #{service_name}
+        #{_service_info}
         </a>"
     end
 
@@ -84,15 +85,15 @@ helpers do
   def status_icon(status)
     case status.to_s
       when 'up'
-        return '<img src="/icons/status_up.png" alt="The service is up and running." title="The service is up and running." class="pull-right" />'
+        return '<i class="status-icon fa fa-fw fa-check-square" title="The service is up and running"></i>'
       when 'down'
-        return '<img src="/icons/status_down.png" alt="There are indications the service is down." title="There are indications the service is down." class="pull-right" />'
+        return '<i class="status-icon fa fa-fw fa-times-circle" title="There are indications the service is down."></i>'
       when 'warning'
-        return '<img src="/icons/status_warning.png" alt="There are issues with the service." title="There are issues with the service." class="pull-right" />'
+        return '<i class="status-icon fa fa-fw fa-warning" title="There are issues with the service."></i>'
       when 'maintenance'
-        return '<img src="/icons/maintenance.png" alt="The service is undergoing scheduled maintenance." title="The service is undergoing scheduled maintenance." class="pull-right" />'
+        return '<i class="status-icon fa fa-fw fa-wrench" title="The service is undergoing scheduled maintenance."></i>'
       else
-        return '<img src="/icons/na.png" alt="No data available." title="No data available." class="pull-right" />'
+        return '<i class="status-icon fa fa-fw fa-question" title="No data available."></i>'
     end
   end
 
@@ -114,11 +115,11 @@ helpers do
   def item_icon(type)
     case type.to_s
       when 'maintenance'
-        return '<img src="/icons/maintenance.png" alt="Scheduled maintenance" title="Scheduled maintenance" style="vertical-align: text-top;" />'
+        return '<i class="fa fa-wrench"></i>'
       when 'outage'
-        return '<img src="/icons/outage.png" alt="Unplanned outage" title="Unplanned outage" style="vertical-align: text-top;" />'
+        return '<i class="glyphicon glyphicon-fire"></i>'
       when 'information'
-        return '<img src="/icons/information.png" alt="General information" title="General information" style="vertical-align: text-top;" />'
+        return '<i class="fa fa-info-circle"></i>'
     end
   end
 
diff --git a/public/assets/css/infra-status.css b/public/assets/css/infra-status.css
new file mode 100644
index 0000000..ace8033
--- /dev/null
+++ b/public/assets/css/infra-status.css
@@ -0,0 +1,28 @@
+i.status-icon {
+	vertical-align: baseline;
+	font-size: 140%;
+	float: right;
+	margin-right: -0.3em;
+}
+
+.status-up .status-icon {
+	color: #49a052;
+	color: #65B812;
+}
+
+.status-down .status-icon {
+	color: #a94442;
+	color: #cc0000;
+}
+
+.status-maintenance .status-icon {
+	color: #777;
+}
+
+.status-warning .status-icon {
+	color: #edd400;
+}
+
+.active .status-icon {
+	color: white;
+}
\ No newline at end of file
diff --git a/public/icons/.directory b/public/icons/.directory
deleted file mode 100644
index a1f10e9..0000000
--- a/public/icons/.directory
+++ /dev/null
@@ -1,5 +0,0 @@
-[Dolphin]
-PreviewsShown=true
-Timestamp=2013,11,10,18,15,10
-Version=3
-ViewMode=1
diff --git a/public/icons/feed.png b/public/icons/feed.png
deleted file mode 100644
index cdf4e8f..0000000
--- a/public/icons/feed.png
+++ /dev/null
diff --git a/public/icons/information.png b/public/icons/information.png
deleted file mode 100644
index 4ecaf37..0000000
--- a/public/icons/information.png
+++ /dev/null
diff --git a/public/icons/maintenance.png b/public/icons/maintenance.png
deleted file mode 100644
index 8347aa8..0000000
--- a/public/icons/maintenance.png
+++ /dev/null
diff --git a/public/icons/na.png b/public/icons/na.png
deleted file mode 100644
index 93807bc..0000000
--- a/public/icons/na.png
+++ /dev/null
diff --git a/public/icons/notice.png b/public/icons/notice.png
deleted file mode 100644
index adaf4f0..0000000
--- a/public/icons/notice.png
+++ /dev/null
diff --git a/public/icons/outage.png b/public/icons/outage.png
deleted file mode 100644
index 413291d..0000000
--- a/public/icons/outage.png
+++ /dev/null
diff --git a/public/icons/site_logo.png b/public/icons/site_logo.png
deleted file mode 100644
index 8ff911e..0000000
--- a/public/icons/site_logo.png
+++ /dev/null
diff --git a/public/icons/status_down.png b/public/icons/status_down.png
deleted file mode 100644
index 933272b..0000000
--- a/public/icons/status_down.png
+++ /dev/null
diff --git a/public/icons/status_up.png b/public/icons/status_up.png
deleted file mode 100644
index 3b0e3fc..0000000
--- a/public/icons/status_up.png
+++ /dev/null
diff --git a/public/icons/status_warning.png b/public/icons/status_warning.png
deleted file mode 100644
index e792fb0..0000000
--- a/public/icons/status_warning.png
+++ /dev/null
diff --git a/views/layout.erb b/views/layout.erb
index 1a18d87..bb33c60 100644
--- a/views/layout.erb
+++ b/views/layout.erb
@@ -7,6 +7,7 @@
   <meta name="description" content="Gentoo Infrastructure Status provides information on the status of the services the Gentoo Linux distribution offers to its developers and users.">
   <link href="https://1b9a50f4f9de4348cd9f-e703bc50ba0aa66772a874f8c7698be7.ssl.cf5.rackcdn.com/bootstrap.min.css" rel="stylesheet" media="screen">
   <link href="https://1b9a50f4f9de4348cd9f-e703bc50ba0aa66772a874f8c7698be7.ssl.cf5.rackcdn.com/tyrian.min.css" rel="stylesheet" media="screen">
+  <link href="/assets/css/infra-status.css" rel="stylesheet" media="screen">
   <link rel="icon" href="http://www.gentoo.org/favicon.ico" type="image/x-icon">
 </head>
 <body>