diff --git a/package.json b/package.json
index 869d1fc2457a45b0b585172aa2d667325b9365b4..409c77f193d46f55d6e81331294574f1533ce63b 100644
--- a/package.json
+++ b/package.json
@@ -89,10 +89,10 @@
"redux-throttle": "0.1.1",
"rimraf": "^2.6.1",
"scratch-audio": "0.1.0-prerelease.1516198804",
- "scratch-blocks": "0.1.0-prerelease.1522264400",
+ "scratch-blocks": "0.1.0-prerelease.1523296754",
"scratch-l10n": "2.0.20180108132626",
- "scratch-paint": "0.2.0-prerelease.20180404190532",
- "scratch-render": "0.1.0-prerelease.1522346711",
+ "scratch-paint": "0.2.0-prerelease.20180410152401",
+ "scratch-render": "0.1.0-prerelease.1523453612",
"scratch-storage": "0.4.0",
"scratch-vm": "0.1.0-prerelease.1523489036",
"selenium-webdriver": "3.6.0",
diff --git a/src/components/action-menu/action-menu.css b/src/components/action-menu/action-menu.css
index c222216b1a24a1a48b04a455312bd85d1562fae9..27c2ac7f8e9948a409248f0ebf0462c900d16a57 100644
--- a/src/components/action-menu/action-menu.css
+++ b/src/components/action-menu/action-menu.css
@@ -35,7 +35,14 @@ $more-button-size: 2.25rem;
border-radius: 100%;
width: $main-button-size;
height: $main-button-size;
+ box-shadow: 0 0 0 4px $motion-transparent;
z-index: 20; /* TODO reorder layout to prevent z-index need */
+ transition: transform, box-shadow 0.5s;
+}
+
+.main-button:hover {
+ transform: scale(1.1);
+ box-shadow: 0 0 0 6px $motion-transparent;
}
.main-icon {
diff --git a/src/components/asset-panel/asset-panel.css b/src/components/asset-panel/asset-panel.css
index 2d85da781e0bd20a7ed9255c34ce62a29a510470..0cfb9a1c3598cf480e18a229eeb4a891497b2fb7 100644
--- a/src/components/asset-panel/asset-panel.css
+++ b/src/components/asset-panel/asset-panel.css
@@ -4,7 +4,7 @@
.wrapper {
display: flex;
flex-grow: 1;
- border: 1px solid $ui-pane-border;
+ border: 1px solid $ui-black-transparent;
border-top-right-radius: $space;
background: white;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
@@ -15,5 +15,5 @@
display: flex;
flex-grow: 1;
flex-shrink: 1;
- border-left: 1px solid $ui-pane-border;
+ border-left: 1px solid $ui-black-transparent;
}
diff --git a/src/components/asset-panel/icon--sound.svg b/src/components/asset-panel/icon--sound.svg
index c7e6081b50edbea029005aa7a483318912d3874f..152272535f732e16f1bdb88d458563481f7daf09 100644
Binary files a/src/components/asset-panel/icon--sound.svg and b/src/components/asset-panel/icon--sound.svg differ
diff --git a/src/components/asset-panel/selector.css b/src/components/asset-panel/selector.css
index db9bca0695cc8e1c5c7baf704d779e1730571fd3..98dff10c272eb58441dda16f7d1da69590a0d97a 100644
--- a/src/components/asset-panel/selector.css
+++ b/src/components/asset-panel/selector.css
@@ -7,7 +7,7 @@
display: flex;
flex-direction: column;
justify-content: space-between;
- background: $ui-background-blue;
+ background: $ui-tertiary;
}
.new-buttons {
@@ -62,6 +62,5 @@ $fade-out-distance: 100px;
.list-item {
width: 4rem;
- min-height: 4rem;
}
}
diff --git a/src/components/asset-panel/selector.jsx b/src/components/asset-panel/selector.jsx
index ff818415a44851d1049cfd674e40f40c4ca6987b..6c3f72edb19f70f6c35958b62bd40a19058139cf 100644
--- a/src/components/asset-panel/selector.jsx
+++ b/src/components/asset-panel/selector.jsx
@@ -42,6 +42,7 @@ const Selector = props => {
assetId={item.assetId}
className={styles.listItem}
costumeURL={item.url}
+ details={item.details}
id={index}
key={`asset-${index}`}
name={item.name}
diff --git a/src/components/blocks/blocks.css b/src/components/blocks/blocks.css
index ee9ec8aeb8abc5580096c24735fcfb6292cd9fc7..8b6205093d63dd0f346a64c1111a3b8dee451402 100644
--- a/src/components/blocks/blocks.css
+++ b/src/components/blocks/blocks.css
@@ -1,15 +1,13 @@
@import "../../css/units.css";
@import "../../css/colors.css";
-$border-style: 1px solid $ui-pane-border;
-
.blocks :global(.injectionDiv){
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
- border: $border-style;
+ border: 1px solid $ui-black-transparent;
border-top-right-radius: $space;
}
@@ -18,14 +16,14 @@ $border-style: 1px solid $ui-pane-border;
}
.blocks :global(.blocklyToolboxDiv) {
- border-right: $border-style;
- border-bottom: $border-style;
+ border-right: 1px solid $ui-black-transparent;
+ border-bottom: 1px solid $ui-black-transparent;
box-sizing: content-box;
height: calc(100% - 3.25rem) !important;
}
.blocks :global(.blocklyFlyout) {
- border-right: $border-style;
+ border-right: 1px solid $ui-black-transparent;
box-sizing: content-box;
}
diff --git a/src/components/browser-modal/browser-modal.css b/src/components/browser-modal/browser-modal.css
index 0d3a2e35fdda3f47855d90441d0cc62e4fb06d1f..b93eb0db43f2ad5e67e4ecb30f552bd0ba8502f3 100644
--- a/src/components/browser-modal/browser-modal.css
+++ b/src/components/browser-modal/browser-modal.css
@@ -9,13 +9,13 @@
right: 0;
bottom: 0;
z-index: 1000;
- background-color: hsla(215, 100%, 65%, .9);
+ background-color: $ui-modal-overlay;
}
.modal-content {
margin: 100px auto;
outline: none;
- border: .25rem solid hsla(0, 100%, 100%, .25);
+ border: .25rem solid $ui-white-transparent;
padding: 0;
border-radius: $space;
user-select: none;
@@ -34,7 +34,7 @@
}
.body {
- background: $ui-pane-gray;
+ background: $ui-white;
padding: 1.5rem 2.25rem;
text-align: center;
}
diff --git a/src/components/close-button/close-button.css b/src/components/close-button/close-button.css
index 88ebb526ef01c81aeacae0597450e5c992b88951..072d5abff1a3b2544246ef8d8c7349eeb4d7cfb6 100644
--- a/src/components/close-button/close-button.css
+++ b/src/components/close-button/close-button.css
@@ -7,7 +7,7 @@
justify-content: center;
overflow: hidden; /* Mask the icon animation */
- background-color: rgba(0, 0, 0, 0.1);
+ background-color: $ui-black-transparent;
border-radius: 50%;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
user-select: none;
@@ -17,20 +17,20 @@
.close-button.large:hover {
transform: scale(1.1, 1.1);
- box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.15);
+ box-shadow: 0 0 0 4px $ui-black-transparent;
}
.small {
width: 0.825rem;
height: 0.825rem;
- color: #FFF;
+ color: $ui-white;
background-color: $motion-primary;
}
.large {
width: 1.75rem;
height: 1.75rem;
- box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
+ box-shadow: 0 0 0 2px $ui-black-transparent;
}
.close-icon {
diff --git a/src/components/coming-soon/coming-soon.css b/src/components/coming-soon/coming-soon.css
index 7c3bdeb1496711ae37db84077a9779b4f361be5b..db737e1c80f5a8eefca91d8b1a5e66e8a0d629cd 100644
--- a/src/components/coming-soon/coming-soon.css
+++ b/src/components/coming-soon/coming-soon.css
@@ -8,9 +8,9 @@
.coming-soon {
background-color: $data-primary !important;
- border: 1px solid hsla(0, 0%, 0%, .1) !important;
+ border: 1px solid $ui-black-transparent) !important;
border-radius: .25rem !important;
- box-shadow: 0 0 .5rem hsla(0, 0%, 0%, .25) !important;
+ box-shadow: 0 0 .5rem $ui-black-transparent !important;
padding: .75rem 1rem !important;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
font-size: 1rem !important;
@@ -20,10 +20,10 @@
.coming-soon:after {
content: "";
- border-top: 1px solid hsla(0, 0%, 0%, .1) !important;
+ border-top: 1px solid $ui-black-transparent !important;
border-left: 0 !important;
border-bottom: 0 !important;
- border-right: 1px solid hsla(0, 0%, 0%, .1) !important;
+ border-right: 1px solid $ui-black-transparent !important;
border-radius: .25rem;
background-color: $data-primary !important;
height: 1rem !important;
diff --git a/src/components/context-menu/context-menu.css b/src/components/context-menu/context-menu.css
index d74dc37204b04c2970c21c3c232ebe58dd65896a..fd1c280041796715e187131bf01d2bc840a0e53b 100644
--- a/src/components/context-menu/context-menu.css
+++ b/src/components/context-menu/context-menu.css
@@ -7,10 +7,10 @@
margin: 2px 0 0; /* To keep the menu below the cursor comfortably */
font-size: 0.85rem;
text-align: left;
- background-color: #fff;
- border: 1px solid $ui-pane-border;
+ background-color: $ui-white;
+ border: 1px solid $ui-black-transparent;
border-radius: calc($space / 2);
- box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1);
+ box-shadow: 0px 0px 5px 1px $ui-black-transparent;
pointer-events: none;
transition: opacity 0.2s ease;
z-index: 100;
diff --git a/src/components/custom-procedures/custom-procedures.css b/src/components/custom-procedures/custom-procedures.css
index 6946bdb4cd180b0d847949cb0b6e151ff0a0e298..6c8967a12d513023f337c3b58d5070281a761170 100644
--- a/src/components/custom-procedures/custom-procedures.css
+++ b/src/components/custom-procedures/custom-procedures.css
@@ -6,7 +6,7 @@
}
.body {
- background: $ui-pane-gray;
+ background: $ui-white;
padding: 1.5rem 2.25rem;
}
@@ -25,7 +25,7 @@
}
.workspace :global(.blocklySvg) {
- background-color: #E7EDF2;
+ background-color: $ui-primary;
}
/* Row of "card" buttons for modifying custom procedures */
@@ -36,7 +36,7 @@
.option-card {
background: white;
- border: 2px solid $form-border;
+ border: 2px solid $ui-black-transparent;
border-radius: $space;
padding: calc($space * 2);
text-align: center;
@@ -48,7 +48,7 @@
.option-card:hover {
border: 2px solid $motion-primary;
- box-shadow: 0px 0px 0px 3px $motion-transparent;
+ box-shadow: 0px 0px 0px 4px $motion-transparent;
}
.option-card + .option-card {
@@ -77,7 +77,7 @@
}
.button-row button {
- border: 1px solid $ui-pane-border;
+ border: 1px solid $ui-black-transparent;
border-radius: 0.25rem;
padding: 0.75rem 1rem;
background: white;
diff --git a/src/components/feedback-form/feedback-form.css b/src/components/feedback-form/feedback-form.css
index ace3fcaac67601d6a3c6fc202a28402b17f82b7f..5f1d7556f84c22b8cde0975de04f7ca3f1764126 100644
--- a/src/components/feedback-form/feedback-form.css
+++ b/src/components/feedback-form/feedback-form.css
@@ -12,13 +12,13 @@ $content-height: 450px;
right: 0;
bottom: 0;
z-index: 1000;
- background-color: hsla(215, 100%, 65%, .9);
+ background-color: $ui-modal-overlay;
}
.modal-content {
margin: 100px auto;
outline: none;
- border: .25rem solid hsla(0, 100%, 100%, .25);
+ border: .25rem solid $ui-white-transparent;
padding: 0;
border-radius: $space;
user-select: none;
@@ -31,7 +31,7 @@ $content-height: 450px;
/* Need to repeat dimensions here to allow iframe scrolling for iOS */
width: $content-width;
height: $content-height;
- background: $ui-pane-gray;
+ background: $ui-white;
/* These properties needed to allow iframe scrolling for iOS */
overflow-y: scroll;
diff --git a/src/components/filter/filter.css b/src/components/filter/filter.css
index fa8e072e10bc8cea39150526b1d0184f46b9fa75..a80fd4159a562a4850e88b1bdbdc78892558289f 100644
--- a/src/components/filter/filter.css
+++ b/src/components/filter/filter.css
@@ -12,14 +12,14 @@
flex-grow: 1;
padding: 0.3rem 0.5rem;
- background: rgba(0, 0, 0, 0.10);
- border: 1px solid rgba(255, 255, 255, 0.10);
+ background: $ui-black-transparent;
+ border: 1px solid $ui-white-transparent;
border-radius: 10rem;
user-select: none;
}
.filter:hover {
- background: rgba(0, 0, 0, 0.15);
+ background: $ui-black-transparent;
}
.filter-icon {
diff --git a/src/components/forms/input.css b/src/components/forms/input.css
index 5256e770e115eed9c0cad60eac00f4255ade9d1b..ee1010dbc029023bcac665656a629f1848ba18e1 100644
--- a/src/components/forms/input.css
+++ b/src/components/forms/input.css
@@ -12,7 +12,7 @@
border-width: 1px;
border-style: solid;
- border-color: $form-border;
+ border-color: $ui-black-transparent;
border-radius: 2rem;
outline: none;
@@ -31,9 +31,13 @@
min-width: 0;
}
+.input-form:hover {
+ border-color: $motion-primary;
+}
+
.input-form:focus {
- border-color: #4c97ff;
- box-shadow: 0 0 0 0.2rem $motion-transparent;
+ border-color: $motion-primary;
+ box-shadow: 0 0 0 0.25rem $motion-transparent;
}
.input-small {
diff --git a/src/components/forms/label.css b/src/components/forms/label.css
index 5eb280b87368ee92a4e722356b7d6490e6e8cddf..8ec6283bf7b61e91ad231780e7a4e9b596b17379 100644
--- a/src/components/forms/label.css
+++ b/src/components/forms/label.css
@@ -9,7 +9,7 @@
.input-label, .input-label-secondary {
font-size: 0.625rem;
- margin-right: calc($space / 2);
+ margin-right: .5rem;
user-select: none;
cursor: default;
}
diff --git a/src/components/green-flag/green-flag.css b/src/components/green-flag/green-flag.css
index 35ba2972638ee8abc82eaf3b12c0cc4f422fb251..f9ab904f9f4642b12d972be2fb620e2a1732734c 100644
--- a/src/components/green-flag/green-flag.css
+++ b/src/components/green-flag/green-flag.css
@@ -1,3 +1,5 @@
+@import "../../css/colors.css";
+
.green-flag {
box-sizing: content-box;
width: 1.25rem;
@@ -18,5 +20,5 @@
}
.green-flag.is-active {
- background-color: rgba(0, 0, 0, 0.1);
+ background-color: $motion-transparent;
}
diff --git a/src/components/gui/gui.css b/src/components/gui/gui.css
index fa6c4ce1ab765f448678a6e1e2dd08bcd17bba54..508b83b17c2bc1578002380e9c25a04d00c0b90f 100644
--- a/src/components/gui/gui.css
+++ b/src/components/gui/gui.css
@@ -7,7 +7,7 @@
.body-wrapper {
height: calc(100% - $menu-bar-height);
- background-color: $ui-background-blue;
+ background-color: $ui-primary;
}
.flex-wrapper {
@@ -60,13 +60,13 @@
margin-left: -0.5rem;
border-radius: 1rem 1rem 0 0;
- border: $ui-pane-border 1px solid;
+ border: 1px solid $ui-black-transparent;
- padding: 0.125rem 1rem 0;
- font-size: 0.7rem;
+ padding: 0.125rem 1.25rem 0;
+ font-size: 0.75rem;
- background-color: #F6F8FA;
- color: #9AA1B5;
+ background-color: $ui-tertiary;
+ color: $text-primary-transparent;
display: flex;
justify-content: center;
@@ -87,14 +87,20 @@
z-index: 1;
}
+.tab:hover {
+ background-color: $ui-primary;
+}
+
.tab.is-selected {
+ height: 90%;
color: $motion-primary;
- background-color: #FFFFFF;
+ background-color: $ui-white;
z-index: 4; /* Make sure selected is always above */
}
.tab img {
margin-right: 0.125rem;
+ width: 1.375rem;
filter: grayscale(100%);
}
@@ -110,7 +116,7 @@
.tab.is-selected:focus {
outline: none;
box-shadow: none;
- border-color: $ui-pane-border;
+ border-color: $ui-black-transparent;
}
.tab.is-selected:focus:after {
diff --git a/src/components/import-modal/import-modal.css b/src/components/import-modal/import-modal.css
index b794fd7530cf3711fdf2dae1891df79c3138324d..93480429b19e92ee3f8d4fa08883d2a87b9a7530 100644
--- a/src/components/import-modal/import-modal.css
+++ b/src/components/import-modal/import-modal.css
@@ -9,13 +9,13 @@
right: 0;
bottom: 0;
z-index: 1000;
- background-color: hsla(215, 100%, 65%, .9);
+ background-color: $ui-modal-overlay;
}
.modal-content {
margin: 100px auto;
outline: none;
- border: .25rem solid hsla(0, 100%, 100%, .25);
+ border: .25rem solid $ui-white-transparent;
padding: 0;
border-radius: $space;
user-select: none;
@@ -44,7 +44,7 @@ $sides: 20rem;
box-sizing: border-box;
width: 100%;
- background-color: $import-primary;
+ background-color: $pen-primary;
}
.header-item {
@@ -82,7 +82,7 @@ $sides: 20rem;
}
.body {
- background: $ui-pane-gray;
+ background: $ui-white;
padding: 1.5rem 2.25rem;
text-align: center;
}
@@ -112,7 +112,7 @@ $sides: 20rem;
width: 100%;
padding: 0 1rem;
height: 3rem;
- color: #6b6b6b;
+ color: $text-primary;
font-size: .875rem;
outline: none;
border: none;
@@ -120,7 +120,7 @@ $sides: 20rem;
.input-row input::placeholder {
font-style: italic;
- color: rgba(87,94,117,0.5);
+ color: $text-primary-transparent;
}
.input-row button {
@@ -128,12 +128,12 @@ $sides: 20rem;
font-weight: bold;
font-size: .875rem;
cursor: pointer;
- border: 0px solid $import-primary;
+ border: 0px solid $pen-primary;
outline: none;
}
.input-row button.ok-button {
- background: $import-primary;
+ background: $pen-primary;
color: white;
}
diff --git a/src/components/language-selector/language-selector.css b/src/components/language-selector/language-selector.css
index bae30cdd3c7ca8eef1d9cad1ab9b1f03e00a918c..5da79cf25f3375ae6a00bdcbde105205c2e4dc61 100644
--- a/src/components/language-selector/language-selector.css
+++ b/src/components/language-selector/language-selector.css
@@ -19,7 +19,7 @@
.language-select {
width: 100%;
height: 1.85rem;
- border: 1px solid #4c97ff;
+ border: 1px solid $motion-primary;
user-select: none;
outline: none;
background: rgba(255, 255, 255, 0.5);
diff --git a/src/components/library-item/library-item.css b/src/components/library-item/library-item.css
index bf690872dec6e1d1d0281a4d5b10bd3598051691..f8874e0c4eea50664004c0f843191e2a75ee4da9 100644
--- a/src/components/library-item/library-item.css
+++ b/src/components/library-item/library-item.css
@@ -16,7 +16,7 @@
background: white;
border-width: 2px;
border-style: solid;
- border-color: #e9eef2;
+ border-color: $ui-black-transparent;
border-radius: $space;
text-align: center;
cursor: pointer;
@@ -24,7 +24,7 @@
.library-item:hover {
border-width: 2px;
- border-color: #1dacf4;
+ border-color: $motion-primary;
}
.disabled {
@@ -33,7 +33,7 @@
}
.disabled:hover {
- border-color: #e9eef2;
+ border-color: $ui-black-transparent;
}
.library-item-image-container-wrapper {
@@ -105,5 +105,5 @@
padding: .5rem 1rem;
font-size: .875rem;
font-weight: bold;
- color: #FFF;
+ color: $ui-white;
}
diff --git a/src/components/library/library.css b/src/components/library/library.css
index f89414550687095f5882cf14e4f4fdb15ce9a778..8eb86eec0982892ce49b8b1fbd343af7524f6285 100644
--- a/src/components/library/library.css
+++ b/src/components/library/library.css
@@ -22,7 +22,7 @@
display: flex;
justify-content: flex-start;
align-content: flex-start;
- background: $ui-pane-gray;
+ background: $ui-secondary;
flex-grow: 1;
flex-wrap: wrap;
overflow-y: auto;
diff --git a/src/components/loupe/loupe.css b/src/components/loupe/loupe.css
index d0d708c0dd8b1104a55193b203d13fc44ddb69c1..bdc1284c4cd679ee76110fb03b0efe85371a6c9c 100644
--- a/src/components/loupe/loupe.css
+++ b/src/components/loupe/loupe.css
@@ -1,5 +1,7 @@
+@import "../../css/colors.css";
+
.color-picker {
position: absolute;
border-radius: 100%;
- border: 1px solid #222;
+ border: 4px solid $ui-black-transparent;
}
diff --git a/src/components/menu-bar/menu-bar.css b/src/components/menu-bar/menu-bar.css
index 7e59dd4ef1de43d6a2cd966990ad6dcff41d8bcf..00a5ed2805196b37a6a0916e7acc657cf681329b 100644
--- a/src/components/menu-bar/menu-bar.css
+++ b/src/components/menu-bar/menu-bar.css
@@ -27,7 +27,7 @@
font-size: .75rem;
font-weight: bold;
background-color: $motion-primary;
- color: white;
+ color: $ui-white;
}
.main-menu {
@@ -55,7 +55,7 @@
padding: 0 0.25rem;
cursor: pointer;
text-decoration: none;
- color: #fff;
+ color: $ui-white;
user-select: none;
align-self: center;
}
@@ -71,19 +71,19 @@
}
.feedback-button {
- background-color: #FFF;
+ background-color: $ui-white;
color: $motion-primary;
height: 34px;
}
.divider {
- border-right: 1px dashed $menubar-gray;
+ border-right: 1px dashed $ui-black-transparent;
margin: 0 .5rem;
height: 34px;
}
.title-field {
- border: 1px dashed $menubar-gray;
+ border: 1px dashed $ui-black-transparent;
border-radius: .25rem;
width: 12rem;
height: 34px;
@@ -93,20 +93,20 @@
.title-field,
.title-field::placeholder {
- color: #fff;
+ color: $ui-white;
font-weight: bold;
font-size: .8rem;
}
.share-button {
- background: #FFAB19;
+ background: $data-primary;
height: 32px;
- box-shadow: 0 0 0 1px rgba(0,0,0,.1);
+ box-shadow: 0 0 0 1px $ui-black-transparent;
}
.community-button {
height: 32px;
- box-shadow: 0 0 0 1px rgba(0,0,0,.1);
+ box-shadow: 0 0 0 1px $ui-black-transparent;
}
.community-button-icon {
diff --git a/src/components/meter/meter.jsx b/src/components/meter/meter.jsx
index 8c378037c85ae61553af08141b1b52983289317f..2d16ce681da69f1d1160b41f3b08230d8729b2e9 100644
--- a/src/components/meter/meter.jsx
+++ b/src/components/meter/meter.jsx
@@ -42,7 +42,7 @@ const Meter = props => {
/>
))}
<rect
- fill="white"
+ fill="hsla(215, 100%, 95%, 1)"
height={(nBarsToMask * (barHeight + barSpacing)) + (barSpacing / 2)}
opacity="0.75"
width={width}
diff --git a/src/components/modal/modal.css b/src/components/modal/modal.css
index 6b28f8b2ee66854a69334436562e16cdee0e7e31..9ece5078663f0e367dd4ef3bb4af59c001c763cc 100644
--- a/src/components/modal/modal.css
+++ b/src/components/modal/modal.css
@@ -8,19 +8,19 @@
right: 0;
bottom: 0;
z-index: 1000;
- background-color: rgba(0, 0, 0, .75);
+ background-color: $ui-modal-overlay;
}
.modal-content {
margin: 100px auto;
outline: none;
- border: 3px solid rgb(126, 133, 151);
+ border: 4px solid $ui-white-transparent;
padding: 0;
border-radius: $space;
user-select: none;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
- color: #5d647a;
+ color: $text-primary;
overflow: hidden;
}
@@ -54,7 +54,7 @@ $sides: 20rem;
align-items: center;
padding: 1rem;
text-decoration: none;
- color: white;
+ color: $ui-white;
user-select: none;
}
diff --git a/src/components/monitor/monitor.css b/src/components/monitor/monitor.css
index d5941abc7a69ee483044afe2a813ff89b0e205fc..97db1ec2cfa8f0957df62c323ff0854fd5655163 100644
--- a/src/components/monitor/monitor.css
+++ b/src/components/monitor/monitor.css
@@ -4,9 +4,9 @@
.monitor {
position: absolute;
padding: 3px;
- background: $ui-pane-gray;
+ background: $ui-primary;
z-index: 100;
- border: 1px solid $ui-pane-border;
+ border: 1px solid $ui-black-transparent;
border-radius: calc($space / 2);
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 0.75rem;
diff --git a/src/components/preview-modal/preview-modal.css b/src/components/preview-modal/preview-modal.css
index c6e5037e8c60cd226103cdcc3f4131ebe8aa9745..837ed92cfef69fd1ff77f9567483455f7c02d074 100644
--- a/src/components/preview-modal/preview-modal.css
+++ b/src/components/preview-modal/preview-modal.css
@@ -9,13 +9,13 @@
right: 0;
bottom: 0;
z-index: 1000;
- background-color: hsla(215, 100%, 65%, .9);
+ background-color: $ui-modal-overlay;
}
.modal-content {
margin: 100px auto;
outline: none;
- border: .25rem solid hsla(0, 100%, 100%, .25);
+ border: .25rem solid $ui-white-transparent;
padding: 0;
border-radius: $space;
user-select: none;
@@ -34,7 +34,7 @@
}
.body {
- background: $ui-pane-gray;
+ background: $ui-white;
padding: 1.5rem 2.25rem;
text-align: center;
}
@@ -68,8 +68,8 @@
}
.button-row button.view-project-button {
- background: $import-primary;
- border-color: $import-primary;
+ background: $pen-primary;
+ border-color: $pen-primary;
color: white;
}
diff --git a/src/components/prompt/prompt.css b/src/components/prompt/prompt.css
index aa35f14901dc7e5b884d2bf624ca26e7c1155b20..34a8f5a21e3aea6ef4817aa6a2158232ca59d18d 100644
--- a/src/components/prompt/prompt.css
+++ b/src/components/prompt/prompt.css
@@ -6,7 +6,7 @@
}
.body {
- background: $ui-pane-gray;
+ background: $ui-white;
padding: 1.5rem 2.25rem;
}
@@ -18,11 +18,11 @@
.input {
margin-bottom: 1.5rem;
width: 100%;
- border: 1px solid rgba(0,0,0,.1);
+ border: 1px solid $ui-black-transparent;
border-radius: 5px;
padding: 0 1rem;
height: 3rem;
- color: #6b6b6b;
+ color: $text-primary-transparent;
font-size: .875rem;
}
@@ -35,7 +35,7 @@
padding: 0.75rem 1rem;
border-radius: 0.25rem;
background: white;
- border: 1px solid $ui-pane-border;
+ border: 1px solid $ui-black-transparent;
font-weight: 600;
font-size: 0.85rem;
}
diff --git a/src/components/question/question.css b/src/components/question/question.css
index 7c6e672a97fd1be774a187edfab3b8131fb6bcc0..ad5e748e67f711e63a36e038ccd882ff61bf80e1 100644
--- a/src/components/question/question.css
+++ b/src/components/question/question.css
@@ -10,7 +10,7 @@
.question-container {
margin: $space;
- border: 1px solid $form-border;
+ border: 1px solid $ui-black-transparent;
border-radius: $space;
border-width: 2px;
padding: 1rem;
diff --git a/src/components/record-modal/record-modal.css b/src/components/record-modal/record-modal.css
index 9a750fd4b9df7d02f97d11d6359ea290733227c7..79ce9c606a995d69642eabc76b064ba06cc50aa1 100644
--- a/src/components/record-modal/record-modal.css
+++ b/src/components/record-modal/record-modal.css
@@ -6,7 +6,7 @@
}
.body {
- background: white;
+ background: $ui-white;
padding: 1.5rem 2.25rem;
}
@@ -16,8 +16,8 @@
}
.meter-container, .waveform-container {
- background: $ui-pane-gray;
- border: 1px solid $ui-pane-border;
+ background: $ui-primary;
+ border: 1px solid $ui-black-transparent;
border-radius: 5px;
padding: 3px;
@@ -84,7 +84,7 @@
padding: 0.75rem 1rem;
border-radius: 0.25rem;
background: white;
- border: 1px solid $ui-pane-border;
+ border: 1px solid $ui-black-transparent;
font-weight: 600;
font-size: 0.85rem;
color: $motion-primary;
diff --git a/src/components/sound-editor/sound-editor.css b/src/components/sound-editor/sound-editor.css
index 00cf9cbfd8293f67c67899834a5208e9137df6d3..f47a67ca9c2efb316148aa99b409ad4af9d255af 100644
--- a/src/components/sound-editor/sound-editor.css
+++ b/src/components/sound-editor/sound-editor.css
@@ -29,7 +29,7 @@
.input-group {
padding-right: calc(2 * $space);
- border-right: 1px dashed $ui-pane-border;
+ border-right: 1px dashed $ui-black-transparent;
}
.waveform-container {
@@ -41,7 +41,7 @@
position: relative;
background: hsla(300, 53%, 60%, 0.15);
- border: 1px solid $ui-pane-border;
+ border: 1px solid $ui-black-transparent;
border-radius: 5px;
padding: 3px;
}
@@ -54,7 +54,7 @@ $border-radius: 0.25rem;
outline: none;
background: white;
border-radius: $border-radius;
- border: 1px solid #ddd;
+ border: 1px solid $ui-black-transparent;
cursor: pointer;
font-size: 0.85rem;
transition: 0.2s;
@@ -73,7 +73,7 @@ $border-radius: 0.25rem;
outline: none;
background: white;
border-radius: 100%;
- border: 1px solid $ui-pane-border;
+ border: 1px solid $ui-black-transparent;
cursor: pointer;
padding: 0.75rem;
}
@@ -135,7 +135,7 @@ $border-radius: 0.25rem;
}
.button-group .button:first-of-type {
- border-left: 1px solid #ddd;
+ border-left: 1px solid $ui-black-transparent;
border-top-left-radius: $border-radius;
border-bottom-left-radius: $border-radius;
}
diff --git a/src/components/sprite-info/sprite-info.css b/src/components/sprite-info/sprite-info.css
index 0ac55d25bc2536ea47bf3a389f8e1704788e50ad..ceb9e9ca5f030a0a25794e43e9512511882dc5a4 100644
--- a/src/components/sprite-info/sprite-info.css
+++ b/src/components/sprite-info/sprite-info.css
@@ -9,7 +9,7 @@
color: $text-primary;
border-top-left-radius: $space;
border-top-right-radius: $space;
- border-bottom: 1px solid #eaeaea;
+ border-bottom: 1px solid $ui-black-transparent;
}
.row {
@@ -57,28 +57,28 @@
}
.radio-left {
- border: 1px solid $form-border;
+ border: 1px solid $ui-black-transparent;
border-top-left-radius: $form-radius;
border-bottom-left-radius: $form-radius;
}
.radio-left:focus {
- border-color: #4c97ff;
- box-shadow: inset 0 0 0 -2px rgba(0, 0, 0, 0.1);
+ border-color: $motion-primary;
+ box-shadow: inset 0 0 0 -2px $ui-black-transparent;
}
.radio-right {
- border-bottom: 1px solid $form-border;
- border-top: 1px solid $form-border;
- border-right: 1px solid $form-border;
- border-left: 1px solid $form-border;
+ border-bottom: 1px solid $ui-black-transparent;
+ border-top: 1px solid $ui-black-transparent;
+ border-right: 1px solid $ui-black-transparent;
+ border-left: 1px solid $ui-black-transparent;
border-top-right-radius: $form-radius;
border-bottom-right-radius: $form-radius;
}
.radio-right:focus {
- border-color: #4c97ff;
- box-shadow: inset 0 0 0 -2px rgba(0, 0, 0, 0.1);
+ border-color: $motion-primary;
+ box-shadow: inset 0 0 0 -2px $ui-black-transparent;
}
.icon {
@@ -90,14 +90,14 @@
.rotation-select {
width: 100%;
height: 1.85rem;
- border: 1px solid $form-border;
+ border: 1px solid $ui-black-transparent;
user-select: none;
outline: none;
}
.rotation-select:focus {
- border-color: #4c97ff;
- box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
+ border-color: $motion-primary;
+ box-shadow: inset 0 0 0 1px $ui-black-transparent);
}
.larger-input input {
diff --git a/src/components/sprite-selector-item/sprite-selector-item.css b/src/components/sprite-selector-item/sprite-selector-item.css
index a0880a518705b1ecff5d15ea61ea1940324d2c03..ed95f7134a3e93480a17e4d984aa45253d663b44 100644
--- a/src/components/sprite-selector-item/sprite-selector-item.css
+++ b/src/components/sprite-selector-item/sprite-selector-item.css
@@ -10,24 +10,30 @@
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 0.8rem;
- background: white;
- color: #5d647a;
+ color: $text-primary;
border-width: 2px;
border-style: solid;
- border-color: #e9eef2;
+ border-color: $ui-black-transparent;
border-radius: $space;
+
text-align: center;
cursor: pointer;
transition: 0.25s ease-out;
}
.sprite-selector-item.is-selected {
+ box-shadow: 0px 0px 0px 4px $motion-transparent;
border: 2px solid $motion-primary;
- box-shadow: 0px 0px 0px 3px $motion-transparent;
+ background: $ui-white;
}
.sprite-selector-item:hover {
border: 2px solid $motion-primary;
+ background: $ui-white;
+}
+
+.sprite-selector-item:hover .sprite-image, .is-selected .sprite-image {
+ filter: drop-shadow(0px 0px 2px $ui-black-transparent);
}
.sprite-image {
@@ -35,11 +41,17 @@
user-select: none;
}
-.sprite-name {
+.sprite-info {
+ padding: 0.25rem;
+ border-bottom-left-radius: 0.25rem;
+ border-bottom-right-radius: 0.25rem;
+
font-size: 0.625rem;
- margin: 0.15rem;
+ color: $text-primary;
user-select: none;
+}
+.sprite-name, .sprite-details {
/*
For truncating overflowing text gracefully
Min-width is for a bug: https://css-tricks.com/flexbox-truncated-text
@@ -50,17 +62,28 @@
min-width: 0;
}
+.sprite-details {
+ margin-top: 0.125rem;
+ font-size: 0.5rem;
+}
+
+.is-selected .sprite-info {
+ background: $motion-primary;
+ color: $ui-white;
+}
+
.delete-button {
position: absolute;
top: 0.125rem;
right: 0.125rem;
- z-index: 2;
+ z-index: 1;
}
.number {
position: absolute;
- top: 0.125rem;
- left: 0.125rem;
+ top: 0.15rem;
+ left: 0.15rem;
font-size: 0.625rem;
+ font-weight: bold;
z-index: 2;
}
diff --git a/src/components/sprite-selector-item/sprite-selector-item.jsx b/src/components/sprite-selector-item/sprite-selector-item.jsx
index 35eeebe005cba166743ed763dbd518f1deafc43a..e947b380e25e3470bbb2a00c99d562033fe35995 100644
--- a/src/components/sprite-selector-item/sprite-selector-item.jsx
+++ b/src/components/sprite-selector-item/sprite-selector-item.jsx
@@ -42,7 +42,12 @@ const SpriteSelectorItem = props => (
width={32}
/>
) : null}
- <div className={styles.spriteName}>{props.name}</div>
+ <div className={styles.spriteInfo}>
+ <div className={styles.spriteName}>{props.name}</div>
+ {props.details ? (
+ <div className={styles.spriteDetails}>{props.details}</div>
+ ) : null}
+ </div>
{props.onDuplicateButtonClick || props.onDeleteButtonClick ? (
<ContextMenu id={`${props.name}-${contextMenuId++}`}>
{props.onDuplicateButtonClick ? (
@@ -71,6 +76,7 @@ const SpriteSelectorItem = props => (
SpriteSelectorItem.propTypes = {
className: PropTypes.string,
costumeURL: PropTypes.string,
+ details: PropTypes.string,
name: PropTypes.string.isRequired,
number: PropTypes.number,
onClick: PropTypes.func,
diff --git a/src/components/sprite-selector/sprite-selector.css b/src/components/sprite-selector/sprite-selector.css
index ec5cfee2b786dfebbfb66e94f80ace2651f7006d..14a9661801be768fff0133fdfd518282b9fc945a 100644
--- a/src/components/sprite-selector/sprite-selector.css
+++ b/src/components/sprite-selector/sprite-selector.css
@@ -1,3 +1,4 @@
+@import "../../css/colors.css";
@import "../../css/units.css";
.sprite-selector {
@@ -5,10 +6,10 @@
position: relative;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
margin-right: calc($space / 2);
- background-color: #f9f9f9;
+ background-color: $ui-secondary;
border-top-right-radius: $space;
border-top-left-radius: $space;
- border-color: #dbdbdb;
+ border-color: $ui-black-transparent;
border-width: 1px;
border-style: solid;
border-bottom: 0;
@@ -68,8 +69,7 @@
}
.raised {
- background-color: #cce1ff;
- border-color: #8cbcff;
+ background-color: #8cbcff;
transition: all 0.25s ease;
}
diff --git a/src/components/sprite-selector/sprite-selector.jsx b/src/components/sprite-selector/sprite-selector.jsx
index 24e5315c6527f88e2208909232a17c431704b0de..1e50c80f19a35157548e38d4c24b7533ca5f2602 100644
--- a/src/components/sprite-selector/sprite-selector.jsx
+++ b/src/components/sprite-selector/sprite-selector.jsx
@@ -10,7 +10,6 @@ import ActionMenu from '../action-menu/action-menu.jsx';
import styles from './sprite-selector.css';
-import cameraIcon from '../action-menu/icon--camera.svg';
import fileUploadIcon from '../action-menu/icon--file-upload.svg';
import paintIcon from '../action-menu/icon--paint.svg';
import spriteIcon from '../action-menu/icon--sprite.svg';
@@ -36,11 +35,6 @@ const messages = defineMessages({
id: 'gui.spriteSelector.addSpriteFromFile',
description: 'Button to add a sprite in the target pane from file',
defaultMessage: 'Coming Soon'
- },
- addSpriteFromCamera: {
- id: 'gui.spriteSelector.addSpriteFromCamera',
- description: 'Button to add a sprite in the target pane from camera',
- defaultMessage: 'Coming Soon'
}
});
@@ -126,9 +120,6 @@ const SpriteSelectorComponent = function (props) {
img={spriteIcon}
moreButtons={[
{
- title: intl.formatMessage(messages.addSpriteFromCamera),
- img: cameraIcon
- }, {
title: intl.formatMessage(messages.addSpriteFromFile),
img: fileUploadIcon
}, {
diff --git a/src/components/stage-header/stage-header.css b/src/components/stage-header/stage-header.css
index 614852308951cfa6cf35fe4aeab73ad36074191a..b1cb5569ac29ab35d36b65f70d3bc9494ab26764 100644
--- a/src/components/stage-header/stage-header.css
+++ b/src/components/stage-header/stage-header.css
@@ -35,12 +35,12 @@
.stage-button {
display: block;
- border: 1px solid $ui-pane-border;
+ border: 1px solid $ui-black-transparent;
border-radius: .25rem;
box-sizing: content-box;
width: 1.25rem;
height: 1.25rem;
- background: #FFF;
+ background: $ui-white;
padding: 0.375rem;
user-select: none;
cursor: pointer;
diff --git a/src/components/stage-selector/stage-selector.css b/src/components/stage-selector/stage-selector.css
index 7b76457f88117163e9efa63c8939908012f046e9..c3d51208716cf629ecbf2d875800f90133935b65 100644
--- a/src/components/stage-selector/stage-selector.css
+++ b/src/components/stage-selector/stage-selector.css
@@ -10,11 +10,11 @@ $header-height: calc($stage-menu-height - 2px);
position: relative; /* For the add backdrop button */
flex-grow: 1;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
- background-color: #fff;
+ background-color: $ui-white;
color: $text-primary;
border-top-left-radius: $space;
border-top-right-radius: $space;
- border-color: #dbdbdb;
+ border-color: $ui-black-transparent;
border-width: 1px;
border-style: solid;
border-bottom: 0;
@@ -24,7 +24,7 @@ $header-height: calc($stage-menu-height - 2px);
.stage-selector.is-selected {
border-color: $motion-primary;
- box-shadow: 0px 0px 0px 3px $motion-transparent;
+ box-shadow: 0px 0px 0px 4px $motion-transparent;
}
.stage-selector:hover {
@@ -41,7 +41,7 @@ $header-height: calc($stage-menu-height - 2px);
color: $text-primary;
border-top-left-radius: $space;
border-top-right-radius: $space;
- border-bottom: 1px solid #eaeaea;
+ border-bottom: 1px solid $ui-black-transparent;
width: 100%;
}
@@ -72,7 +72,8 @@ $header-height: calc($stage-menu-height - 2px);
display: block;
width: 100%;
user-select: none;
- border: 1px solid rgba(0,0,0,.1);
+ border-bottom: 1px solid $ui-black-transparent;
+ box-shadow: inset 0 0 4px $ui-black-transparent;
}
.add-button {
diff --git a/src/components/stage-selector/stage-selector.jsx b/src/components/stage-selector/stage-selector.jsx
index 8925f251fd7e5c5e6d012dbac91f646d279022cc..662907cc95348c1b8163a70bdfd6a93472998ee1 100644
--- a/src/components/stage-selector/stage-selector.jsx
+++ b/src/components/stage-selector/stage-selector.jsx
@@ -9,7 +9,6 @@ import CostumeCanvas from '../costume-canvas/costume-canvas.jsx';
import styles from './stage-selector.css';
import backdropIcon from '../action-menu/icon--backdrop.svg';
-import cameraIcon from '../action-menu/icon--camera.svg';
import fileUploadIcon from '../action-menu/icon--file-upload.svg';
import paintIcon from '../action-menu/icon--paint.svg';
import surpriseIcon from '../action-menu/icon--surprise.svg';
@@ -34,11 +33,6 @@ const messages = defineMessages({
id: 'gui.stageSelector.addBackdropFromFile',
description: 'Button to add a stage in the target pane from file',
defaultMessage: 'Coming Soon'
- },
- addBackdropFromCamera: {
- id: 'gui.stageSelector.addBackdropFromCamera',
- description: 'Button to add a stage in the target pane from camera',
- defaultMessage: 'Coming Soon'
}
});
@@ -86,9 +80,6 @@ const StageSelector = props => {
img={backdropIcon}
moreButtons={[
{
- title: intl.formatMessage(messages.addBackdropFromCamera),
- img: cameraIcon
- }, {
title: intl.formatMessage(messages.addBackdropFromFile),
img: fileUploadIcon
}, {
diff --git a/src/components/stage/stage.css b/src/components/stage/stage.css
index 8188751d1d6112ddf66b5f204ffc75e12a23723f..dfce6ba24044ccbc6ff026947cd1ed3cbf3677b7 100644
--- a/src/components/stage/stage.css
+++ b/src/components/stage/stage.css
@@ -18,7 +18,7 @@
}
.color-picker-background {
- position: absolute;;
+ position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.55);
@@ -31,7 +31,7 @@
.stage-wrapper {
position: relative;
border-radius: $space;
- border: 1px solid $ui-pane-border;
+ border: 1px solid $ui-black-transparent;
/* Keep the canvas inside the border radius */
overflow: hidden;
}
@@ -43,7 +43,7 @@
right: 0;
bottom: 0;
z-index: 5000;
- background-color: rgba(255, 255, 255, 1);
+ background-color: $ui-white;
}
.stage-overlay-content {
diff --git a/src/components/webgl-modal/webgl-modal.css b/src/components/webgl-modal/webgl-modal.css
index 3fd1a1208bb4885a0a979e40e1e3f9a881e4fd9a..334ef8f685adb061cea151422056edb422d26d49 100644
--- a/src/components/webgl-modal/webgl-modal.css
+++ b/src/components/webgl-modal/webgl-modal.css
@@ -9,13 +9,13 @@
right: 0;
bottom: 0;
z-index: 1000;
- background-color: hsla(215, 100%, 65%, .9);
+ background-color: $ui-modal-overlay;
}
.modal-content {
margin: 100px auto;
outline: none;
- border: .25rem solid hsla(0, 100%, 100%, .25);
+ border: .25rem solid $ui-white-transparent;
padding: 0;
border-radius: $space;
user-select: none;
@@ -34,7 +34,7 @@
}
.body {
- background: $ui-pane-gray;
+ background: $ui-white;
padding: 1.5rem 2.25rem;
text-align: center;
}
diff --git a/src/containers/costume-tab.jsx b/src/containers/costume-tab.jsx
index 37fd8a12e1e490933ec5f843eb12e667c2316b10..ada3dc523737d3507804039a199f2da0e85a319f 100644
--- a/src/containers/costume-tab.jsx
+++ b/src/containers/costume-tab.jsx
@@ -158,6 +158,11 @@ class CostumeTab extends React.Component {
};
this.props.vm.addCostume(item.md5, vmCostume);
}
+ formatCostumeDetails (size) {
+ // Round up width and height for scratch-flash compatibility
+ // https://github.com/LLK/scratch-flash/blob/9fbac92ef3d09ceca0c0782f8a08deaa79e4df69/src/ui/media/MediaInfo.as#L224-L237
+ return `${Math.ceil(size[0])} x ${Math.ceil(size[1])}`;
+ }
render () {
const {
intl,
@@ -184,6 +189,12 @@ class CostumeTab extends React.Component {
const addLibraryFunc = target.isStage ? onNewLibraryBackdropClick : onNewLibraryCostumeClick;
const addLibraryIcon = target.isStage ? addLibraryBackdropIcon : addLibraryCostumeIcon;
+ const costumeData = (target.costumes || []).map(costume => ({
+ name: costume.name,
+ assetId: costume.assetId,
+ details: costume.size ? this.formatCostumeDetails(costume.size) : null
+ }));
+
return (
<AssetPanel
buttons={[
@@ -211,7 +222,7 @@ class CostumeTab extends React.Component {
onClick: this.handleNewBlankCostume
}
]}
- items={target.costumes || []}
+ items={costumeData}
selectedItemIndex={this.state.selectedCostumeIndex}
onDeleteClick={target.costumes.length > 1 ? this.handleDeleteCostume : null}
onDuplicateClick={this.handleDuplicateCostume}
diff --git a/src/containers/load-button.jsx b/src/containers/load-button.jsx
index e52a6735da91bb32005c531ddd35e267ea58e541..9364728a4d9702ca3ffdfbe5f156b693f34da7e9 100644
--- a/src/containers/load-button.jsx
+++ b/src/containers/load-button.jsx
@@ -24,18 +24,24 @@ class LoadButton extends React.Component {
};
}
handleChange (e) {
- this.props.openLoadingState();
// Remove the hash if any (without triggering a hash change event or a reload)
history.replaceState({}, document.title, '.');
const reader = new FileReader();
+ const thisFileInput = e.target;
reader.onload = () => this.props.vm.loadProject(reader.result)
.then(() => {
this.props.closeLoadingState();
+ // Reset the file input after project is loaded
+ // This is necessary in case the user wants to reload a project
+ thisFileInput.value = null;
})
.catch(error => {
this.setState({loadingError: true, errorMessage: error});
});
- reader.readAsArrayBuffer(e.target.files[0]);
+ if (thisFileInput.files) { // Don't attempt to load if no file was selected
+ this.props.openLoadingState();
+ reader.readAsArrayBuffer(thisFileInput.files[0]);
+ }
}
handleClick () {
this.fileInput.click();
diff --git a/src/containers/sound-tab.jsx b/src/containers/sound-tab.jsx
index b0b4e3d2209f27ec4725ee33639c6c926e14f26d..3662b1f66e9557e3c115931b73d064fa0e4d0582 100644
--- a/src/containers/sound-tab.jsx
+++ b/src/containers/sound-tab.jsx
@@ -115,7 +115,8 @@ class SoundTab extends React.Component {
const sounds = sprite.sounds ? sprite.sounds.map(sound => (
{
url: soundIcon,
- name: sound.name
+ name: sound.name,
+ details: (sound.sampleCount / sound.rate).toFixed(2)
}
)) : [];
diff --git a/src/css/colors.css b/src/css/colors.css
index b46bc50bf79c6abe91c77aa1011b6eba17812ec3..8dbc51ecdbeb9157cb0425cdcba22a941ea5bef6 100644
--- a/src/css/colors.css
+++ b/src/css/colors.css
@@ -1,29 +1,29 @@
-$ui-pane-border: #D9D9D9;
-$ui-pane-gray: #F9F9F9;
-$ui-background-blue: #e8edf1;
+$ui-primary: hsla(215, 100%, 95%, 1); /* #E5F0FF */
+$ui-secondary: hsla(215, 75%, 95%, 1); /* #E9F1FC */
+$ui-tertiary: hsla(215, 50%, 90%, 1); /* #D9E3F2 */
-$text-primary: #575e75;
+$ui-modal-overlay: hsla(215, 100%, 65%, 0.9); /* 90% transparent version of motion-primary */
-$menubar-gray: rgba(0,0,0,0.25);
+$ui-white: hsla(0, 100%, 100%, 1); /* #FFFFFF */
+$ui-white-transparent: hsla(0, 100%, 100%, 0.25); /* 25% transparent version of ui-white */
-$motion-primary: #4C97FF;
-$motion-tertiary: #3373CC;
-$motion-transparent: hsla(215, 100%, 65%, 0.20);
+$ui-black-transparent: hsla(0, 0%, 0%, 0.15); /* 15% transparent version of black */
-$red-primary: #FF661A;
-$red-tertiary: #E64D00;
+$text-primary: hsla(225, 15%, 40%, 1); /* #575E75 */
+$text-primary-transparent: hsla(225, 15%, 40%, 0.75);
-$share-orange: #FFAB19;
+$motion-primary: hsla(215, 100%, 65%, 1); /* #4C97FF */
+$motion-tertiary: hsla(215, 60%, 50%, 1); /* #3373CC */
+$motion-transparent: hsla(215, 100%, 65%, 0.35); /* 35% transparent version of motion-primary */
-$sound-primary: #CF63CF;
-$sound-tertiary: #A63FA6;
+$red-primary: hsla(20, 100%, 55%, 1); /* #FF661A */
+$red-tertiary: hsla(20, 100%, 45%, 1); /* #E64D00 */
-$control-primary: #FFAB19;
+$sound-primary: hsla(300, 53%, 60%, 1); /* #CF63CF */
+$sound-tertiary: hsla(300, 48%, 50%, 1); /* #BD42BD */
-$data-primary: #FF8C1A;
+$control-primary: hsla(38, 100%, 55%, 1); /* #FFAB19 */
-$pen-primary: #11B581;
+$data-primary: hsla(30, 100%, 55%, 1); /* #FF8C1A */
-$form-border: #E9EEF2;
-
-$import-primary: #0FBD8C;
+$pen-primary: hsla(163, 85%, 40%, 1); /* #0FBD8C */
diff --git a/src/lib/project-loader-hoc.jsx b/src/lib/project-loader-hoc.jsx
index 2c20b9fed50736b490643d02ca40c06f11a051a0..5ccb382b2560f27756bb04276ab7eaff3440e8a8 100644
--- a/src/lib/project-loader-hoc.jsx
+++ b/src/lib/project-loader-hoc.jsx
@@ -31,7 +31,7 @@ const ProjectLoaderHOC = function (WrappedComponent) {
storage
.load(storage.AssetType.Project, this.state.projectId, storage.DataFormat.JSON)
.then(projectAsset => projectAsset && this.setState({
- projectData: projectAsset.data.toString(),
+ projectData: projectAsset.data,
fetchingProject: false
}))
.catch(err => log.error(err));
diff --git a/test/unit/components/__snapshots__/sprite-selector-item.test.jsx.snap b/test/unit/components/__snapshots__/sprite-selector-item.test.jsx.snap
index eaca8d9366004e9eccf9bf21fa69da48b877e662..2c276ff65660dc9eb2b04090a6e705b5b2b6a377 100644
--- a/test/unit/components/__snapshots__/sprite-selector-item.test.jsx.snap
+++ b/test/unit/components/__snapshots__/sprite-selector-item.test.jsx.snap
@@ -1,6 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`SpriteSelectorItemComponent matches snapshot when given a number to show 1`] = `
+exports[`SpriteSelectorItemComponent matches snapshot when given a number and details to show 1`] = `
<div
className="react-contextmenu-wrapper ponies undefined"
onClick={[Function]}
@@ -44,7 +44,16 @@ exports[`SpriteSelectorItemComponent matches snapshot when given a number to sho
<div
className={undefined}
>
- Pony sprite
+ <div
+ className={undefined}
+ >
+ Pony sprite
+ </div>
+ <div
+ className={undefined}
+ >
+ 480 x 360
+ </div>
</div>
<nav
className="react-contextmenu"
@@ -118,7 +127,11 @@ exports[`SpriteSelectorItemComponent matches snapshot when selected 1`] = `
<div
className={undefined}
>
- Pony sprite
+ <div
+ className={undefined}
+ >
+ Pony sprite
+ </div>
</div>
<nav
className="react-contextmenu"
diff --git a/test/unit/components/sprite-selector-item.test.jsx b/test/unit/components/sprite-selector-item.test.jsx
index 5848e0ca951ffea8f1a893c2cc20c7d51ef93954..1bf52fe97e4c7c83eded75c6a0fc9b29bdc97d66 100644
--- a/test/unit/components/sprite-selector-item.test.jsx
+++ b/test/unit/components/sprite-selector-item.test.jsx
@@ -12,6 +12,7 @@ describe('SpriteSelectorItemComponent', () => {
let onDeleteButtonClick;
let selected;
let number;
+ let details;
// Wrap this in a function so it gets test specific states and can be reused.
const getComponent = function () {
@@ -19,6 +20,7 @@ describe('SpriteSelectorItemComponent', () => {
<SpriteSelectorItemComponent
className={className}
costumeURL={costumeURL}
+ details={details}
name={name}
number={number}
selected={selected}
@@ -35,8 +37,9 @@ describe('SpriteSelectorItemComponent', () => {
onClick = jest.fn();
onDeleteButtonClick = jest.fn();
selected = true;
- // Reset number to undefined since it is an optional prop
+ // Reset to undefined since they are optional props
number = undefined; // eslint-disable-line no-undefined
+ details = undefined; // eslint-disable-line no-undefined
});
test('matches snapshot when selected', () => {
@@ -44,8 +47,9 @@ describe('SpriteSelectorItemComponent', () => {
expect(component.toJSON()).toMatchSnapshot();
});
- test('matches snapshot when given a number to show', () => {
+ test('matches snapshot when given a number and details to show', () => {
number = 5;
+ details = '480 x 360';
const component = componentWithIntl(getComponent());
expect(component.toJSON()).toMatchSnapshot();
});