From 41bc8f8459c69b606bcd86951738d42778777be7 Mon Sep 17 00:00:00 2001 From: Alejandro Celaya Date: Sun, 13 May 2018 11:58:35 +0200 Subject: [PATCH] Added improvements using new components --- config/webpack.config.dev.js | 46 ++++++++++++++-------------- package.json | 3 ++ src/common/MainHeader.js | 58 +++++++++++++++++++++++++++++++++--- src/common/MainHeader.scss | 4 +-- src/index.js | 1 + src/index.scss | 3 ++ 6 files changed, 87 insertions(+), 28 deletions(-) create mode 100644 src/index.scss diff --git a/config/webpack.config.dev.js b/config/webpack.config.dev.js index 326546d9..9cccca44 100644 --- a/config/webpack.config.dev.js +++ b/config/webpack.config.dev.js @@ -23,6 +23,27 @@ const publicUrl = ''; // Get environment variables to inject into our app. const env = getClientEnvironment(publicUrl); +const postCssLoader = { + loader: require.resolve('postcss-loader'), + options: { + // Necessary for external CSS imports to work + // https://github.com/facebookincubator/create-react-app/issues/2677 + ident: 'postcss', + plugins: () => [ + require('postcss-flexbugs-fixes'), + autoprefixer({ + browsers: [ + '>1%', + 'last 4 versions', + 'Firefox ESR', + 'not ie < 9', // React doesn't support IE8 anyway + ], + flexbox: 'no-2009', + }), + ], + }, +}; + // This is the development configuration. // It is focused on developer experience and fast rebuilds. // The production configuration is different and lives in a separate file. @@ -167,33 +188,14 @@ module.exports = { importLoaders: 1, }, }, - { - loader: require.resolve('postcss-loader'), - options: { - // Necessary for external CSS imports to work - // https://github.com/facebookincubator/create-react-app/issues/2677 - ident: 'postcss', - plugins: () => [ - require('postcss-flexbugs-fixes'), - autoprefixer({ - browsers: [ - '>1%', - 'last 4 versions', - 'Firefox ESR', - 'not ie < 9', // React doesn't support IE8 anyway - ], - flexbox: 'no-2009', - }), - ], - }, - }, + postCssLoader, ], }, { test: /\.scss$/, use: ExtractTextPlugin.extract({ fallback: 'style-loader', - use: ['css-loader', 'sass-loader'] + use: ['css-loader', 'sass-loader', postCssLoader] }) }, // "file" loader makes sure those assets get served by WebpackDevServer. @@ -251,7 +253,7 @@ module.exports = { // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack // You can remove this if you don't use Moment.js: new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/), - new ExtractTextPlugin('main.[hash:8].css'), + new ExtractTextPlugin('main.css'), ], // Some libraries import Node modules but don't use them in the browser. // Tell Webpack to provide empty mocks for them so importing them works. diff --git a/package.json b/package.json index f1553495..4fc1741c 100644 --- a/package.json +++ b/package.json @@ -3,6 +3,9 @@ "version": "0.1.0", "private": true, "dependencies": { + "@fortawesome/fontawesome": "^1.1.8", + "@fortawesome/fontawesome-free-solid": "^5.0.13", + "@fortawesome/react-fontawesome": "0.0.19", "autoprefixer": "7.1.6", "babel-core": "6.26.0", "babel-eslint": "7.2.3", diff --git a/src/common/MainHeader.js b/src/common/MainHeader.js index c3d841d3..f55ede1e 100644 --- a/src/common/MainHeader.js +++ b/src/common/MainHeader.js @@ -1,15 +1,65 @@ +import plusIcon from '@fortawesome/fontawesome-free-solid/faPlus'; +import FontAwesomeIcon from '@fortawesome/react-fontawesome'; import React from 'react'; +import { + Collapse, DropdownItem, DropdownMenu, + DropdownToggle, + Nav, + Navbar, + NavbarBrand, + NavbarToggler, + NavItem, + NavLink, + UncontrolledDropdown +} from 'reactstrap'; import './MainHeader.scss'; -import {Navbar, NavbarBrand} from 'reactstrap'; import shlinkLogo from './shlink-logo-white.png'; export default class MainHeader extends React.Component { + constructor(props) { + super(props); + + this.state = { + isOpen: false + }; + } + + toggle() { + this.setState({ + isOpen: ! this.state.isOpen + }); + } + render() { return ( - - - Shlink Shlink + + + Shlink Shlink + this.toggle()} /> + + + ); } diff --git a/src/common/MainHeader.scss b/src/common/MainHeader.scss index 00f9da6a..a30d0dfb 100644 --- a/src/common/MainHeader.scss +++ b/src/common/MainHeader.scss @@ -1,7 +1,7 @@ @import "../utils/base"; -.main-header { - background-color: $mainColor; +.main-header.main-header { + background-color: $mainColor !important; color: white; .navbar-brand { diff --git a/src/index.js b/src/index.js index c4f749eb..003a5783 100644 --- a/src/index.js +++ b/src/index.js @@ -1,6 +1,7 @@ import React from 'react'; import ReactDOM from 'react-dom'; import 'bootstrap/dist/css/bootstrap.min.css'; +import './index.scss'; import App from './App'; import registerServiceWorker from './registerServiceWorker'; diff --git a/src/index.scss b/src/index.scss new file mode 100644 index 00000000..abf29b81 --- /dev/null +++ b/src/index.scss @@ -0,0 +1,3 @@ +* { + outline: none !important; +}