Merge pull request #374 from rschamp/greenkeeper

Update dependencies

package.json

@@ -23,7 +23,7 @@
     "react-dom": "^15"
   },
   "devDependencies": {
-    "autoprefixer": "6.7.7",
+    "autoprefixer": "7.1.0",
     "babel-core": "^6.23.1",
     "babel-eslint": "^7.1.1",
     "babel-loader": "^7.0.0",
@@ -32,11 +32,11 @@
     "babel-preset-react": "^6.22.0",
     "classnames": "2.2.5",
     "copy-webpack-plugin": "4.0.1",
-    "css-loader": "0.28.0",
+    "css-loader": "0.28.1",
     "eslint": "^3.16.1",
     "eslint-config-scratch": "^3.0.0",
-    "eslint-plugin-react": "^6.10.0",
-    "gh-pages": "^0.12.0",
+    "eslint-plugin-react": "^7.0.1",
+    "gh-pages": "^1.0.0",
     "html-webpack-plugin": "2.28.0",
     "lodash.bindall": "4.4.0",
     "lodash.defaultsdeep": "4.6.0",
@@ -45,17 +45,17 @@
     "lodash.pick": "4.4.0",
     "minilog": "3.1.0",
     "mkdirp": "^0.5.1",
-    "postcss-import": "9.1.0",
-    "postcss-loader": "1.3.3",
-    "postcss-simple-vars": "3.1.0",
-    "prop-types": "15.5.8",
+    "postcss-import": "^10.0.0",
+    "postcss-loader": "^2.0.5",
+    "postcss-simple-vars": "^4.0.0",
+    "prop-types": "^15.5.10",
     "react": "15.5.4",
     "react-dom": "15.5.4",
     "react-draggable": "2.2.6",
     "react-modal": "1.7.7",
-    "react-redux": "5.0.4",
+    "react-redux": "5.0.5",
     "react-style-proptype": "3.0.0",
-    "react-tabs": "0.8.3",
+    "react-tabs": "1.0.0",
     "redux": "3.6.0",
     "redux-throttle": "0.1.1",
     "rimraf": "^2.6.1",
@@ -64,7 +64,7 @@
     "scratch-render": "^0.1.0-prerelease.0",
     "scratch-storage": "^0.1.0",
     "scratch-vm": "^0.1.0-prerelease.0",
-    "style-loader": "0.16.1",
+    "style-loader": "^0.17.0",
     "svg-to-image": "1.1.3",
     "svg-url-loader": "2.0.2",
     "travis-after-all": "^1.4.4",

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>