Use bar chart for current size of used assets

client/modules/IDE/components/AssetSize.jsx

@@ -26,8 +26,11 @@ const AssetSize = ({ totalSize }) => {
   const percent = formatPercent(totalSize / MAX_SIZE_B);
 
   return (
-    <div>
+    <div className="asset-size" style={{ '--percent': percent }}>
-      <p className="">{`${currentSize} used / ${sizeLimit} max (${percent})`}</p>
+      <div className="asset-size-bar">
+        <p className="asset-current">{currentSize} ({percent})</p>
+        <p className="asset-max">Max: {sizeLimit}</p>
+      </div>
     </div>
   );
 };

client/styles/abstracts/_variables.scss

@@ -79,6 +79,9 @@ $themes: (
     primary-button-color: #fff,
     primary-button-background-color: $p5js-pink,
 
+    progress-bar-background-color: #979797,
+    progress-bar-active-color: #f10046,
+
     form-title-color: rgba(51, 51, 51, 0.87),
     form-secondary-title-color: $middleGray,
     form-input-text-color: $dark,
@@ -148,6 +151,9 @@ $themes: (
     primary-button-color: #fff,
     primary-button-background-color: $p5js-pink,
 
+    progress-bar-background-color: #979797,
+    progress-bar-active-color: #f10046,
+
     form-title-color: $white,
     form-secondary-title-color: #b5b5b5,
     form-border-color: #b5b5b5,
@@ -214,6 +220,9 @@ $themes: (
     primary-button-color: #fff,
     primary-button-background-color: $p5js-pink,
 
+    progress-bar-background-color: #979797,
+    progress-bar-active-color: #f10046,
+
     form-title-color: $white,
     form-secondary-title-color: #b5b5b5,
     form-border-color: #b5b5b5,

client/styles/components/_asset-size.scss

@@ -0,0 +1,43 @@
+.asset-size {
+  font-size: #{14 / $base-font-size}rem;
+}
+
+.asset-size-bar {
+  position: relative;
+  content: ' ';
+  display: block;
+  width: 200px;
+  height: 20px;
+
+  @include themify() {
+    background-color: getThemifyVariable('progress-bar-background-color');
+  }
+}
+
+.asset-size-bar::before {
+  content: ' ';
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  width: var(--percent);
+
+  @include themify() {
+    background-color: getThemifyVariable('progress-bar-active-color');
+  }
+}
+
+.asset-current {
+  position: absolute;
+  top: 28px;
+  left: var(--percent);
+  margin-left: -8px;
+}
+
+.asset-max {
+  position: absolute;
+  right: 0;
+  transform: translate(100%);
+  padding-left: #{8 / $base-font-size}rem;
+}

client/styles/main.scss

@@ -41,6 +41,7 @@
 @import 'components/help-modal';
 @import 'components/share';
 @import 'components/asset-list';
+@import 'components/asset-size';
 @import 'components/keyboard-shortcuts';
 @import 'components/copyable-input';
 @import 'components/feedback';