diff --git a/CHANGELOG.md b/CHANGELOG.md index f3e6637c..bd1df58d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,48 @@ # Change Log +## [1.1.0] 2020-05-08 +### Bug fixing +- `https://github.com/creativetimofficial/nextjs-material-kit/issues/10` (changed the `title`, from simple `string` to `node`, so now, you can pass a title like so `title={Free Chat}` if you want to have link functionality - NOTE: the `node` that you pass to the `InfoArea` component will have to be styled) +- `https://github.com/creativetimofficial/nextjs-material-kit/issues/6` (check `https://github.com/creativetimofficial/nextjs-material-kit/pull/7` for more info) +- `https://github.com/creativetimofficial/nextjs-material-kit/issues/5` +- `https://github.com/creativetimofficial/nextjs-material-kit/issues/4` +- `https://github.com/creativetimofficial/nextjs-material-kit/issues/2` +### Major style changes +- `assets/jss/nextjs-material-kit.js` +- `assets/jss/nextjs-material-kit/components/buttonStyle.js` +- `assets/jss/nextjs-material-kit/components/headerStyle.js` +- `assets/jss/nextjs-material-kit/components/navPillsStyle.js` +- `assets/jss/nextjs-material-kit/components/paginationStyle.js` +- `assets/jss/nextjs-material-kit/components/paginationStyle.js` +### Deleted components +### Added components +### Deleted dependencies +### Added dependencies +### Updated dependencies +``` +@material-ui/core 4.3.2 → 4.9.13 +@material-ui/icons 4.2.1 → 4.9.1 +moment 2.24.0 → 2.25.3 +next 9.0.5 → 9.3.6 +next-images 1.1.2 → 1.3.1 +nextjs-redirect 1.0.2 → 2.0.2 +node-sass 4.12.0 → 4.14.1 +nouislider 14.0.2 → 14.4.0 +react 16.9.0 → 16.13.1 +react-dom 16.9.0 → 16.13.1 +react-swipeable-views 0.13.3 → 0.13.9 +styled-components 4.3.2 → 5.1.0 +webpack 4.39.3 → 4.43.0 +``` +### Warning +_The following warnings come from some of our dependencies, however they do not affect the UI or the functionality of the product - if the issues will persist and will change into errors in the next version of React (v17), we will drop their usage and replace with other dependencies:_ +``` +npm WARN deprecated popper.js@1.16.1: Popper changed home, find its new releases at @popperjs/core +npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142 +npm WARN deprecated mkdirp@0.5.3: Legacy versions of mkdirp are no longer supported. Please update to mkdirp 1.x. (Note that the API surface has changed to use Promises in 1.x.) +``` +_The following dependencies raise warnings (of deprecation or renamed) in development mode: DateTime, ReactSwipableView. If the warnings will persist, and will become errors in React 17, we will drop their usage and replace them with other plugins._ + ## [1.0.0] 2019-09-13 ### Original Release - Started project with NextJS diff --git a/Documentation/assets/css/material-dashboard.css b/Documentation/assets/css/material-dashboard.css index e8148ae9..83e5366c 100644 --- a/Documentation/assets/css/material-dashboard.css +++ b/Documentation/assets/css/material-dashboard.css @@ -5,7 +5,7 @@ ========================================================= * Product Page: https://www.creative-tim.com/product/material-dashboard-react - * Copyright 2019 Creative Tim (https://www.creative-tim.com) + * Copyright 2020 Creative Tim (https://www.creative-tim.com) * Licensed under MIT (https://github.com/creativetimofficial/material-dashboard-react/blob/master/LICENSE.md) ========================================================= diff --git a/Documentation/tutorial-components.html b/Documentation/tutorial-components.html index 6b3fd71b..26ce8407 100644 --- a/Documentation/tutorial-components.html +++ b/Documentation/tutorial-components.html @@ -97,7 +97,7 @@

NextJS Material Kit

Tutorial and Components

-
v1.0.0
+
v1.1.0
({ "&,&:hover": { color: "#FFFFFF", backgroundColor: primaryColor, - boxShadow: - "0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(156, 39, 176, 0.4)" + boxShadow: `0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px ${hexToRGBAlpha( + primaryColor, + 0.4 + )}` } }, info: { "&,&:hover": { color: "#FFFFFF", backgroundColor: infoColor, - boxShadow: - "0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(76, 175, 80, 0.4)" + boxShadow: `0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px ${hexToRGBAlpha( + infoColor, + 0.4 + )}` } }, success: { "&,&:hover": { color: "#FFFFFF", backgroundColor: successColor, - boxShadow: - "0 2px 2px 0 rgba(76, 175, 80, 0.14), 0 3px 1px -2px rgba(76, 175, 80, 0.2), 0 1px 5px 0 rgba(76, 175, 80, 0.12)" + boxShadow: `0 2px 2px 0 ${hexToRGBAlpha( + successColor, + 0.14 + )}, 0 3px 1px -2px ${hexToRGBAlpha( + successColor, + 0.2 + )}, 0 1px 5px 0 ${hexToRGBAlpha(successColor, 0.12)}` } }, warning: { "&,&:hover": { color: "#FFFFFF", backgroundColor: warningColor, - boxShadow: - "0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(255, 152, 0, 0.4)" + boxShadow: `0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px ${hexToRGBAlpha( + warningColor, + 0.4 + )}` } }, danger: { "&,&:hover": { color: "#FFFFFF", backgroundColor: dangerColor, - boxShadow: - "0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(255, 152, 0, 0.4)" + boxShadow: `0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px ${hexToRGBAlpha( + dangerColor, + 0.4 + )}` } }, rose: { "&,&:hover": { color: "#FFFFFF", backgroundColor: roseColor, - boxShadow: - "0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(233, 30, 99, 0.4)" + boxShadow: `0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px ${hexToRGBAlpha( + roseColor, + 0.4 + )}` } }, alignCenter: { diff --git a/assets/jss/nextjs-material-kit/components/paginationStyle.js b/assets/jss/nextjs-material-kit/components/paginationStyle.js index ac8b5a37..8262071d 100644 --- a/assets/jss/nextjs-material-kit/components/paginationStyle.js +++ b/assets/jss/nextjs-material-kit/components/paginationStyle.js @@ -1,10 +1,12 @@ import { + hexToRGBAlpha, grayColor, primaryColor, infoColor, successColor, warningColor, - dangerColor + dangerColor, + roseColor } from "assets/jss/nextjs-material-kit.js"; const paginationStyle = { @@ -56,8 +58,13 @@ const paginationStyle = { backgroundColor: primaryColor, borderColor: primaryColor, color: "#FFFFFF", - boxShadow: - "0 4px 5px 0 rgba(156, 39, 176, 0.14), 0 1px 10px 0 rgba(156, 39, 176, 0.12), 0 2px 4px -1px rgba(156, 39, 176, 0.2)" + boxShadow: `0 4px 5px 0 ${hexToRGBAlpha( + primaryColor, + 0.14 + )}, 0 1px 10px 0 ${hexToRGBAlpha( + primaryColor, + 0.12 + )}, 0 2px 4px -1px ${hexToRGBAlpha(primaryColor, 0.2)}` }, "&:hover,&:focus": { zIndex: "2", @@ -69,8 +76,13 @@ const paginationStyle = { backgroundColor: infoColor, borderColor: infoColor, color: "#FFFFFF", - boxShadow: - "0 4px 5px 0 rgba(0, 188, 212, 0.14), 0 1px 10px 0 rgba(0, 188, 212, 0.12), 0 2px 4px -1px rgba(0, 188, 212, 0.2)" + boxShadow: `0 4px 5px 0 ${hexToRGBAlpha( + infoColor, + 0.14 + )}, 0 1px 10px 0 ${hexToRGBAlpha( + infoColor, + 0.12 + )}, 0 2px 4px -1px ${hexToRGBAlpha(infoColor, 0.2)}` }, "&:hover,&:focus": { zIndex: "2", @@ -82,8 +94,13 @@ const paginationStyle = { backgroundColor: successColor, borderColor: successColor, color: "#FFFFFF", - boxShadow: - "0 4px 5px 0 rgba(76, 175, 80, 0.14), 0 1px 10px 0 rgba(76, 175, 80, 0.12), 0 2px 4px -1px rgba(76, 175, 80, 0.2)" + boxShadow: `0 4px 5px 0 ${hexToRGBAlpha( + successColor, + 0.14 + )}, 0 1px 10px 0 ${hexToRGBAlpha( + successColor, + 0.12 + )}, 0 2px 4px -1px ${hexToRGBAlpha(successColor, 0.2)}` }, "&:hover,&:focus": { zIndex: "2", @@ -95,8 +112,13 @@ const paginationStyle = { backgroundColor: warningColor, borderColor: warningColor, color: "#FFFFFF", - boxShadow: - "0 4px 5px 0 rgba(255, 152, 0, 0.14), 0 1px 10px 0 rgba(255, 152, 0, 0.12), 0 2px 4px -1px rgba(255, 152, 0, 0.2)" + boxShadow: `0 4px 5px 0 ${hexToRGBAlpha( + warningColor, + 0.14 + )}, 0 1px 10px 0 ${hexToRGBAlpha( + warningColor, + 0.12 + )}, 0 2px 4px -1px ${hexToRGBAlpha(warningColor, 0.2)}` }, "&:hover,&:focus": { zIndex: "2", @@ -108,8 +130,31 @@ const paginationStyle = { backgroundColor: dangerColor, borderColor: dangerColor, color: "#FFFFFF", - boxShadow: - "0 4px 5px 0 rgba(244, 67, 54, 0.14), 0 1px 10px 0 rgba(244, 67, 54, 0.12), 0 2px 4px -1px rgba(244, 67, 54, 0.2)" + boxShadow: `0 4px 5px 0 ${hexToRGBAlpha( + dangerColor, + 0.14 + )}, 0 1px 10px 0 ${hexToRGBAlpha( + dangerColor, + 0.12 + )}, 0 2px 4px -1px ${hexToRGBAlpha(dangerColor, 0.2)}` + }, + "&:hover,&:focus": { + zIndex: "2", + cursor: "default" + } + }, + rose: { + "&,&:hover,&:focus": { + backgroundColor: roseColor, + borderColor: roseColor, + color: "#FFFFFF", + boxShadow: `0 4px 5px 0 ${hexToRGBAlpha( + roseColor, + 0.14 + )}, 0 1px 10px 0 ${hexToRGBAlpha( + roseColor, + 0.12 + )}, 0 2px 4px -1px ${hexToRGBAlpha(roseColor, 0.2)}` }, "&:hover,&:focus": { zIndex: "2", diff --git a/assets/jss/nextjs-material-kit/customCheckboxRadioSwitch.js b/assets/jss/nextjs-material-kit/customCheckboxRadioSwitch.js index 1ba498d8..800abbba 100644 --- a/assets/jss/nextjs-material-kit/customCheckboxRadioSwitch.js +++ b/assets/jss/nextjs-material-kit/customCheckboxRadioSwitch.js @@ -2,20 +2,21 @@ import { primaryColor, dangerColor, roseColor, - grayColor + grayColor, + hexToRGBAlpha } from "assets/jss/nextjs-material-kit.js"; const customCheckboxRadioSwitch = { checkRoot: { padding: "12px", "&:hover": { - backgroundColor: "unset" + backgroundColor: hexToRGBAlpha(primaryColor, 0.04) + "!important" } }, radioRoot: { padding: "12px", "&:hover": { - backgroundColor: "unset" + backgroundColor: hexToRGBAlpha(primaryColor, 0.04) + "!important" } }, labelRoot: { diff --git a/assets/scss/nextjs-material-kit.scss b/assets/scss/nextjs-material-kit.scss index 02a1810a..9e03e494 100644 --- a/assets/scss/nextjs-material-kit.scss +++ b/assets/scss/nextjs-material-kit.scss @@ -1,11 +1,11 @@ /*! ========================================================= -* NextJS Material Kit v1.0.0 based on Material Kit Free - v2.0.2 (Bootstrap 4.0.0 Final Edition) and Material Kit React v1.8.0 +* NextJS Material Kit v1.1.0 based on Material Kit Free - v2.0.2 (Bootstrap 4.0.0 Final Edition) and Material Kit React v1.8.0 ========================================================= * Product Page: https://www.creative-tim.com/product/nextjs-material-kit -* Copyright 2019 Creative Tim (https://www.creative-tim.com) +* Copyright 2020 Creative Tim (https://www.creative-tim.com) * Licensed under MIT (https://github.com/creativetimofficial/nextjs-material-kit/blob/master/LICENSE.md) * Coded by Creative Tim diff --git a/components/Header/HeaderLinks.js b/components/Header/HeaderLinks.js index 6b6af444..25058ba0 100644 --- a/components/Header/HeaderLinks.js +++ b/components/Header/HeaderLinks.js @@ -7,6 +7,7 @@ import { makeStyles } from "@material-ui/core/styles"; import List from "@material-ui/core/List"; import ListItem from "@material-ui/core/ListItem"; import Tooltip from "@material-ui/core/Tooltip"; +import Icon from "@material-ui/core/Icon"; // @material-ui/icons import { Apps, CloudDownload } from "@material-ui/icons"; @@ -49,6 +50,16 @@ export default function HeaderLinks(props) { ]} /> + + +