add storage info and change bar

www/common/common-ui-elements.js

@@ -2259,13 +2259,14 @@ define([
                 prettyUsage = Messages._getKey('formattedMB', [usage]);
                 prettyLimit = Messages._getKey('formattedMB', [limit]);
             }
-
+            
             if (quota < 0.8) { $usage.addClass('cp-limit-usage-normal'); }
             else if (quota < 1) { $usage.addClass('cp-limit-usage-warning'); }
             else { $usage.addClass('cp-limit-usage-above'); }
             var $text = $('<span>', {'class': 'cp-limit-usage-text'});
-            $text.text(usage + ' / ' + prettyLimit);
-            $limit.append($usage).append($text);
+            $text.html(Messages._getKey('storageStatus', [prettyUsage, prettyLimit]));
+            $container.prepend($text);
+            $limit.append($usage);
         };
 
         var updateUsage = Util.notAgainForAnother(function () {

www/common/translations/messages.json

@@ -73,6 +73,7 @@
     "upgrade": "Upgrade",
     "upgradeTitle": "Upgrade your account to increase the storage limit",
     "upgradeAccount": "Upgrade account",
+    "storageStatus": "Storage:<br /><b>{0}</b> used out of <b>{1}</b>",
     "MB": "MB",
     "GB": "GB",
     "KB": "KB",