Update design for editor tabs with icons, changing blocks to code.

Resolves https://github.com/LLK/scratch-gui/issues/1713

src/components/gui/gui.css

@@ -57,10 +57,13 @@
 .tab {
     flex-grow: 1;
     height: 80%;
-    margin-left: 1px;
+    margin-left: -0.5rem;
 
-    border-radius: $space $space 0 0;
-    border: none;
+    border-radius: 1rem 1rem 0 0;
+    border: $ui-pane-border 1px solid;
+
+    padding: 0.125rem 1rem 0;
+    font-size: 0.7rem;
 
     background-color: #F6F8FA;
     color: #9AA1B5;
@@ -72,13 +75,49 @@
     user-select: none;
 }
 
-.tab.is-selected {
+/* Use z-indices to force left-on-top for tabs */
+.tab:nth-of-type(1) {
+    margin-left: 0;
+    z-index: 3;
+}
+.tab:nth-of-type(2) {
+    z-index: 2;
+}
+.tab:nth-of-type(3) {
     z-index: 1;
-    color: #40B9F5;
+}
+
+.tab.is-selected {
+    color: $motion-primary;
     background-color: #FFFFFF;
-    border-bottom: $ui-background-blue 1px solid;
+    z-index: 4; /* Make sure selected is always above */
+}
+
+.tab img {
+    margin-right: 0.125rem;
+    filter: grayscale(100%);
+}
+
+.tab.is-selected img {
+    filter: none;
+}
+
+/* Tab style overrides from react-tabs */
+.tab.is-selected:after {
+    display: none;
+}
+
+.tab.is-selected:focus {
+    outline: none;
+    box-shadow: none;
+    border-color: $ui-pane-border;
+}
+
+.tab.is-selected:focus:after {
+    display: none;
 }
 
+/* Body of the tabs */
 .tabs {
     position: relative;
     flex-grow: 1;

src/components/gui/gui.jsx

 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
-import {defineMessages, injectIntl, intlShape} from 'react-intl';
+import {defineMessages, FormattedMessage, injectIntl, intlShape} from 'react-intl';
 import {Tab, Tabs, TabList, TabPanel} from 'react-tabs';
 import MediaQuery from 'react-responsive';
 import tabStyles from 'react-tabs/style/react-tabs.css';
@@ -25,6 +25,9 @@ import WebGlModal from '../../containers/webgl-modal.jsx';
 import layout from '../../lib/layout-constants.js';
 import styles from './gui.css';
 import addExtensionIcon from './icon--extensions.svg';
+import codeIcon from './icon--code.svg';
+import costumesIcon from './icon--costumes.svg';
+import soundsIcon from './icon--sounds.svg';
 
 const messages = defineMessages({
     addExtension: {
@@ -110,9 +113,39 @@ const GUIComponent = props => {
                             onSelect={onActivateTab}
                         >
                             <TabList className={tabClassNames.tabList}>
-                                <Tab className={tabClassNames.tab}>Blocks</Tab>
-                                <Tab className={tabClassNames.tab}>Costumes</Tab>
-                                <Tab className={tabClassNames.tab}>Sounds</Tab>
+                                <Tab className={tabClassNames.tab}>
+                                    <img
+                                        draggable={false}
+                                        src={codeIcon}
+                                    />
+                                    <FormattedMessage
+                                        defaultMessage="Code"
+                                        description="Button to get to the code panel"
+                                        id="gui.gui.codeTab"
+                                    />
+                                </Tab>
+                                <Tab className={tabClassNames.tab}>
+                                    <img
+                                        draggable={false}
+                                        src={costumesIcon}
+                                    />
+                                    <FormattedMessage
+                                        defaultMessage="Costumes"
+                                        description="Button to get to the costumes panel"
+                                        id="gui.gui.costumesTab"
+                                    />
+                                </Tab>
+                                <Tab className={tabClassNames.tab}>
+                                    <img
+                                        draggable={false}
+                                        src={soundsIcon}
+                                    />
+                                    <FormattedMessage
+                                        defaultMessage="Sounds"
+                                        description="Button to get to the sounds panel"
+                                        id="gui.gui.soundsTab"
+                                    />
+                                </Tab>
                             </TabList>
                             <TabPanel className={tabClassNames.tabPanel}>
                                 <Box className={styles.blocksWrapper}>

test/integration/blocks.test.js

@@ -29,7 +29,7 @@ describe('Working with the blocks', () => {
     test('Blocks report when clicked in the toolbox', async () => {
         await loadUri(uri);
         await clickXpath('//button[@title="tryit"]');
-        await clickText('Blocks');
+        await clickText('Code');
         await clickText('Operators', scope.blocksTab);
         await new Promise(resolve => setTimeout(resolve, 1000)); // Wait for scroll animation
         await clickText('join', scope.blocksTab); // Click "join <hello> <world>" block
@@ -58,7 +58,7 @@ describe('Working with the blocks', () => {
     test('Creating variables', async () => {
         await loadUri(uri);
         await clickXpath('//button[@title="tryit"]');
-        await clickText('Blocks');
+        await clickText('Code');
         await clickText('Variables', scope.blocksTab);
         await new Promise(resolve => setTimeout(resolve, 1000)); // Wait for scroll animation
 

test/integration/localization.test.js

@@ -29,7 +29,7 @@ describe('Localization', () => {
     test.skip('Localization', async () => {
         await loadUri(uri);
         await clickXpath('//button[@title="tryit"]');
-        await clickText('Blocks');
+        await clickText('Code');
         await clickXpath('//button[@title="Add Extension"]');
         await clickText('Pen', scope.modal); // Modal closes
         await new Promise(resolve => setTimeout(resolve, 1000)); // Wait for scroll animation