Fix all the little RTL layout bugs (#2961)

* Fix all the little RTL layout bugs

- [ ] borders on toolbox and workspace mirror correctly
- [ ] spacing on stage selector is correct
- [ ] stage size icons are mirrored
- [ ] extension library coming soon text is positioned correctly
- [ ] only mirror blocks icon on the tab (others stay right-handed)
- [ ] drop down icon in create variable modal has correct spacing

* FIx RTL backpack header border-radius

* round the bottom corner of paint/sound editors

This makes the editor’s asset panels match the blocks.

src/components/asset-panel/asset-panel.css

@@ -5,16 +5,32 @@
     display: flex;
     flex-grow: 1;
     border: 1px solid $ui-black-transparent;
-    border-top-right-radius: $space;
     background: white;
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
     font-size: 0.85rem;
 }
 
+[dir="ltr"] .wrapper {
+    border-top-right-radius: $space;
+    border-bottom-right-radius: $space;
+}
+
+[dir="rtl"] .wrapper {
+    border-top-left-radius: $space;
+    border-bottom-left-radius: $space;
+}
+
 .detail-area {
     display: flex;
     flex-grow: 1;
     flex-shrink: 1;
-    border-left: 1px solid $ui-black-transparent;
     overflow-y: auto;
 }
+
+[dir="ltr"] .detail-area {
+    border-left: 1px solid $ui-black-transparent;
+}
+
+[dir="rtl"] .detail-area {
+    border-right: 1px solid $ui-black-transparent;
+}

src/components/backpack/backpack.css

@@ -9,7 +9,6 @@
 .backpack-header {
     margin-top: 0.5rem;
     border: 1px solid $ui-black-transparent;
-    border-top-right-radius: $space;
     background: $ui-white;
     padding: 0.25rem;
     text-align: center;
@@ -20,6 +19,14 @@
     user-select: none;
 }
 
+[dir="ltr"] .backpack-header {
+    border-top-right-radius: $space;
+}
+
+[dir="rtl"] .backpack-header {
+    border-top-left-radius: $space;
+}
+
 .backpack-list {
     position: relative;
     display: flex;

src/components/blocks/blocks.css

@@ -12,6 +12,13 @@
     border-bottom-right-radius: $space;
 }
 
+[dir="rtl"] .blocks :global(.injectionDiv) {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+    border-top-left-radius: $space;
+    border-bottom-left-radius: $space;
+}
+
 .blocks :global(.blocklyMainBackground) {
     stroke: none;
 }
@@ -31,6 +38,11 @@
     -ms-overflow-style: none;
 }
 
+[dir="rtl"] .blocks :global(.blocklyToolboxDiv) {
+    border-right: none;
+    border-left: 1px solid $ui-black-transparent;
+}
+
 .blocks :global(.blocklyToolboxDiv::-webkit-scrollbar) {
     display: none;
 }
@@ -40,6 +52,12 @@
     box-sizing: content-box;
 }
 
+[dir="rtl"] .blocks :global(.blocklyFlyout) {
+    border-right: none;
+    border-left: 1px solid $ui-black-transparent;
+}
+
+
 .blocks :global(.blocklyBlockDragSurface) {
     /*
         Fix an issue where the drag surface was preventing hover events for sharing blocks.

src/components/gui/gui.css

@@ -130,6 +130,10 @@
 
 [dir="rtl"] .tab img {
     margin-left: 0.125rem;
+}
+
+/* only mirror blocks tab icon */
+[dir="rtl"] .tab:nth-of-type(1) img {
     transform: scaleX(-1);
 }
 

src/components/library-item/library-item.css

@@ -99,7 +99,6 @@
 
 .coming-soon-text {
     position: absolute;
-    transform: translate(calc(2 * $space), calc(2 * $space));
     background-color: $data-primary;
     border-radius: 1rem;
     box-shadow: 0 0 .5rem hsla(0, 0%, 0%, .25);
@@ -108,3 +107,11 @@
     font-weight: bold;
     color: $ui-white;
 }
+
+[dir="ltr"] .coming-soon-text {
+    transform: translate(calc(2 * $space), calc(2 * $space));
+}
+
+[dir="rtl"] .coming-soon-text {
+    transform: translate(calc(-2 * $space), calc(2 * $space));
+}

src/components/prompt/prompt.css

@@ -88,8 +88,15 @@
 .more-options-icon {
     width: .75rem;
     height: .75rem;
-    margin-left: .5rem;
     vertical-align: middle;
     padding-bottom: .2rem;
     opacity: .5;
 }
+
+[dir="ltr"] .more-options-icon {
+    margin-left: .5rem;
+}
+
+[dir="rtl"] .more-options-icon {
+    margin-right: .5rem;
+}

src/components/stage-header/stage-header.css

@@ -59,6 +59,10 @@
     height: 100%;
 }
 
+[dir="rtl"] .stage-button-icon {
+    transform: scaleX(-1);
+}
+
 [dir="ltr"] .stage-button-first {
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;

src/components/target-pane/target-pane.css

@@ -11,5 +11,12 @@
     display: flex;
     flex-basis: 72px;
     flex-shrink: 0;
+}
+
+[dir="ltr"] .stage-selector-wrapper {
     margin-left: calc($space / 2);
 }
+
+[dir="rtl"] .stage-selector-wrapper {
+    margin-right: calc($space / 2);
+}