Fix tab style handling, changed in 1.0

src/components/gui/gui.css

@@ -47,7 +47,7 @@
     border-bottom: 0 !important;
 }
 
-.tab-list .tab {
+.tab {
     flex-grow: 1;
     height: 80%;
     margin-left: 1px;
@@ -63,9 +63,9 @@
     align-items: center;
 }
 
-
-.tab-list .tab[aria-selected="true"] {
+.tab.is-selected {
     color: #40B9F5;
+    background-color: #FFFFFF;
 }
 
 .tabs {
@@ -80,6 +80,10 @@
     position: relative;
     flex-grow: 1;
     flex-shrink: 0;
+    display: none;
+}
+
+.tab-panel.is-selected {
     display: flex;
 }
 

src/components/gui/gui.jsx

+const classNames = require('classnames');
 const PropTypes = require('prop-types');
 const React = require('react');
+const {Tab, Tabs, TabList, TabPanel} = require('react-tabs');
+const tabStyles = require('react-tabs/style/react-tabs.css');
 const VM = require('scratch-vm');
+
 const Blocks = require('../../containers/blocks.jsx');
 const CostumeTab = require('../../containers/costume-tab.jsx');
 const GreenFlag = require('../../containers/green-flag.jsx');
@@ -8,12 +12,13 @@ const TargetPane = require('../../containers/target-pane.jsx');
 const SoundTab = require('../../containers/sound-tab.jsx');
 const Stage = require('../../containers/stage.jsx');
 const StopAll = require('../../containers/stop-all.jsx');
-const MenuBar = require('../menu-bar/menu-bar.jsx');
-const {Tab, Tabs, TabList, TabPanel} = require('react-tabs');
 
 const Box = require('../box/box.jsx');
+const MenuBar = require('../menu-bar/menu-bar.jsx');
+
 const styles = require('./gui.css');
 
+
 const GUIComponent = props => {
     const {
         basePath,
@@ -31,6 +36,15 @@ const GUIComponent = props => {
         );
     }
 
+    const tabClassNames = {
+        tabs: styles.tabs,
+        tab: classNames(tabStyles.reactTabsTab, styles.tab),
+        tabList: classNames(tabStyles.reactTabsTabList, styles.tabList),
+        tabPanel: classNames(tabStyles.reactTabsTabPanel, styles.tabPanel),
+        tabPanelSelected: classNames(tabStyles.reactTabsTabPanelSelected, styles.isSelected),
+        tabSelected: classNames(tabStyles.reactTabsTabSelected, styles.isSelected)
+    };
+
     return (
         <Box
             className={styles.pageWrapper}
@@ -41,16 +55,18 @@ const GUIComponent = props => {
                 <Box className={styles.flexWrapper}>
                     <Box className={styles.editorWrapper}>
                         <Tabs
-                            className={styles.tabs}
+                            className={tabClassNames.tabs}
                             forceRenderTabPanel={true} // eslint-disable-line react/jsx-boolean-value
+                            selectedTabClassName={tabClassNames.tabSelected}
+                            selectedTabPanelClassName={tabClassNames.tabPanelSelected}
                             onSelect={onTabSelect}
                         >
-                            <TabList className={styles.tabList}>
-                                <Tab className={styles.tab}>Scripts</Tab>
-                                <Tab className={styles.tab}>Costumes</Tab>
-                                <Tab className={styles.tab}>Sounds</Tab>
+                            <TabList className={tabClassNames.tabList}>
+                                <Tab className={tabClassNames.tab}>Scripts</Tab>
+                                <Tab className={tabClassNames.tab}>Costumes</Tab>
+                                <Tab className={tabClassNames.tab}>Sounds</Tab>
                             </TabList>
-                            <TabPanel className={styles.tabPanel}>
+                            <TabPanel className={tabClassNames.tabPanel}>
                                 <Box className={styles.blocksWrapper}>
                                     <Blocks
                                         grow={1}
@@ -62,10 +78,10 @@ const GUIComponent = props => {
                                     />
                                 </Box>
                             </TabPanel>
-                            <TabPanel className={styles.tabPanel}>
+                            <TabPanel className={tabClassNames.tabPanel}>
                                 <CostumeTab vm={vm} />
                             </TabPanel>
-                            <TabPanel className={styles.tabPanel}>
+                            <TabPanel className={tabClassNames.tabPanel}>
                                 <SoundTab vm={vm} />
                             </TabPanel>
                         </Tabs>