diff --git a/src/common/containers/App/App.scss b/src/common/containers/App/App.scss new file mode 100644 index 00000000..0761916f --- /dev/null +++ b/src/common/containers/App/App.scss @@ -0,0 +1,5 @@ +// Scss is written as a case study and a proof of CSS support +#page-dimmer { + z-index: 55 !important; + cursor: pointer; +} diff --git a/src/common/containers/App/index.jsx b/src/common/containers/App/index.jsx index 4ecdfbf0..e1c2efb4 100644 --- a/src/common/containers/App/index.jsx +++ b/src/common/containers/App/index.jsx @@ -13,9 +13,11 @@ import {TOGGLE_SIDEBAR, WINDOW_RESIZE} from 'actions/layout' import {getLayoutState, getLayoutMobileStatuses} from 'selectors' import ReactGA from 'react-ga' // Import styled components -import {PageLayout, SidebarSemanticPusherStyled, SidebarSemanticPushable, StyledDimmer} from './style' -import {Container} from 'semantic-ui-react' +import {PageLayout, SidebarSemanticPusherStyled, SidebarSemanticPushable} from './style' +import {Container, Dimmer} from 'semantic-ui-react' import _ from 'lodash' +// Scss is written as a case study and a proof of CSS support +import './App.scss' type Props = { children: React$Node, @@ -82,7 +84,7 @@ class App extends Component { {/* React throws warnings about no "key" prop in this
*/} - +
@@ -97,7 +99,7 @@ class App extends Component { } } -const mapStateToProps = (state) => { +const mapStateToProps = state => { const {sidebarOpened} = getLayoutState(state) const {isMobile} = getLayoutMobileStatuses(state) @@ -107,7 +109,7 @@ const mapStateToProps = (state) => { } } -const mapDispatchToProps = (dispatch) => { +const mapDispatchToProps = dispatch => { let resizer return { toggleSidebar () { diff --git a/src/common/containers/App/style.jsx b/src/common/containers/App/style.jsx index dd866583..75abfee7 100644 --- a/src/common/containers/App/style.jsx +++ b/src/common/containers/App/style.jsx @@ -1,5 +1,5 @@ import styled, {css} from 'styled-components' -import {Dimmer, Sidebar} from 'semantic-ui-react' +import {Sidebar} from 'semantic-ui-react' export const SidebarSemanticPushable = Sidebar.Pushable export const SidebarSemanticPusherStyled = styled(Sidebar.Pusher)` @@ -7,12 +7,7 @@ export const SidebarSemanticPusherStyled = styled(Sidebar.Pusher)` -webkit-overflow-scrolling: touch; ${({sidebar_opened: sidebarOpened}) => { // `sidebar_opened` attr instead of `media` util -> SSRed app looks better - return ( - sidebarOpened && - css` - max-width: calc(100% - 150px); - ` - ) + return sidebarOpened && css`max-width: calc(100% - 150px);` }}; ` @@ -58,8 +53,3 @@ export const PageLayout = styled.div` } } ` - -export const StyledDimmer = styled(Dimmer)` - z-index: 55 !important; - cursor: pointer; -`