diff --git a/client/modules/IDE/components/AssetSize.jsx b/client/modules/IDE/components/AssetSize.jsx
index b495038b..58ee9a61 100644
--- a/client/modules/IDE/components/AssetSize.jsx
+++ b/client/modules/IDE/components/AssetSize.jsx
@@ -26,8 +26,11 @@ const AssetSize = ({ totalSize }) => {
const percent = formatPercent(totalSize / MAX_SIZE_B);
return (
-
-
{`${currentSize} used / ${sizeLimit} max (${percent})`}
+
+
+
{currentSize} ({percent})
+
Max: {sizeLimit}
+
);
};
diff --git a/client/styles/abstracts/_variables.scss b/client/styles/abstracts/_variables.scss
index 56a57d1a..84b8fd38 100644
--- a/client/styles/abstracts/_variables.scss
+++ b/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,
diff --git a/client/styles/components/_asset-size.scss b/client/styles/components/_asset-size.scss
new file mode 100644
index 00000000..5793ef2b
--- /dev/null
+++ b/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;
+}
diff --git a/client/styles/main.scss b/client/styles/main.scss
index 468e2b9b..00289b1a 100644
--- a/client/styles/main.scss
+++ b/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';