From 5911163770484c1fb735e5518fcf8c6576f67cad Mon Sep 17 00:00:00 2001 From: silviyaboteva Date: Mon, 5 Apr 2021 11:10:18 +0300 Subject: [PATCH] feat: update drawer, grid and avatars styling --- package.json | 46 ++++++++++++------------ src/components/DrawerRouterContainer.jsx | 26 ++++---------- src/components/GridCells.jsx | 2 +- src/pages/Planning.jsx | 7 ++-- src/styles/_common.scss | 42 +--------------------- 5 files changed, 34 insertions(+), 89 deletions(-) diff --git a/package.json b/package.json index 7c7a1a7..cc47aa0 100644 --- a/package.json +++ b/package.json @@ -4,29 +4,29 @@ "private": true, "homepage": "http://telerik.github.io/react-coffee-warehouse", "dependencies": { - "@progress/kendo-data-query": "^1.5.3", - "@progress/kendo-date-math": "^1.5.0", - "@progress/kendo-drawing": "^1.6.0", - "@progress/kendo-licensing": "^1.1.3", - "@progress/kendo-react-buttons": "^4.3.0", - "@progress/kendo-react-charts": "^4.3.0", - "@progress/kendo-react-data-tools": "^4.3.0", - "@progress/kendo-react-dateinputs": "^4.3.0", - "@progress/kendo-react-dialogs": "^4.3.0", - "@progress/kendo-react-dropdowns": "^4.3.0", - "@progress/kendo-react-editor": "^4.3.0", - "@progress/kendo-react-excel-export": "^4.3.0", - "@progress/kendo-react-form": "^4.3.0", - "@progress/kendo-react-grid": "^4.3.0", - "@progress/kendo-react-inputs": "^4.3.0", - "@progress/kendo-react-intl": "^4.3.0", - "@progress/kendo-react-layout": "^4.3.0", - "@progress/kendo-react-pdf": "^4.3.0", - "@progress/kendo-react-progressbars": "^4.3.0", - "@progress/kendo-react-scheduler": "^4.3.0", - "@progress/kendo-react-treeview": "^4.3.0", - "@progress/kendo-react-upload": "^4.3.0", - "@progress/kendo-theme-default": "^4.32.0", + "@progress/kendo-data-query": "^1.5.4", + "@progress/kendo-date-math": "^1.5.1", + "@progress/kendo-drawing": "^1.9.4", + "@progress/kendo-licensing": "^1.1.4", + "@progress/kendo-react-buttons": "^4.5.0", + "@progress/kendo-react-charts": "^4.5.0", + "@progress/kendo-react-data-tools": "^4.5.0", + "@progress/kendo-react-dateinputs": "^4.5.0", + "@progress/kendo-react-dialogs": "^4.5.0", + "@progress/kendo-react-dropdowns": "^4.5.0", + "@progress/kendo-react-editor": "^4.5.0", + "@progress/kendo-react-excel-export": "^4.5.0", + "@progress/kendo-react-form": "^4.5.0", + "@progress/kendo-react-grid": "^4.5.0", + "@progress/kendo-react-inputs": "^4.5.0", + "@progress/kendo-react-intl": "^4.5.0", + "@progress/kendo-react-layout": "^4.5.0", + "@progress/kendo-react-pdf": "^4.5.0", + "@progress/kendo-react-progressbars": "^4.5.0", + "@progress/kendo-react-scheduler": "^4.5.0", + "@progress/kendo-react-treeview": "^4.5.0", + "@progress/kendo-react-upload": "^4.5.0", + "@progress/kendo-theme-default": "^4.36.0", "@testing-library/jest-dom": "^4.2.4", "@testing-library/react": "^9.5.0", "@testing-library/user-event": "^7.2.1", diff --git a/src/components/DrawerRouterContainer.jsx b/src/components/DrawerRouterContainer.jsx index 8634939..34aadb7 100644 --- a/src/components/DrawerRouterContainer.jsx +++ b/src/components/DrawerRouterContainer.jsx @@ -1,31 +1,20 @@ - import React from 'react'; import { withRouter } from 'react-router-dom'; import { registerForLocalization, provideLocalizationService } from '@progress/kendo-react-intl'; -import { Drawer, DrawerContent, DrawerItem } from '@progress/kendo-react-layout'; +import { Drawer, DrawerContent } from '@progress/kendo-react-layout'; import { Header } from './Header.jsx'; const items = [ - { name: 'dashboard', iconSvg: 'dashboard-icon', selected: true , route: '/' }, - { name: 'planning', iconSvg: 'planning-icon', route: '/planning' }, - { name: 'profile', iconSvg: 'profile-icon', route: '/profile' }, + { name: 'dashboard', icon: 'k-i-grid', selected: true , route: '/' }, + { name: 'planning', icon: 'k-i-calendar', route: '/planning' }, + { name: 'profile', icon: 'k-i-user', route: '/profile' }, { separator: true }, - { name: 'info', iconSvg: 'info-icon', route: '/info' } + { name: 'info', icon: 'k-i-information', route: '/info' } ]; -const CustomDrawerItem = (props) => { - const { iconSvg, text, ...others } = props; - return ( - - - {text} - - ); -}; - class DrawerRouterContainer extends React.Component { state = { expanded: true, @@ -67,7 +56,7 @@ class DrawerRouterContainer extends React.Component { const localizationService = provideLocalizationService(this); return ( - +
- + ); } }; diff --git a/src/components/GridCells.jsx b/src/components/GridCells.jsx index 031c7a7..a89e4a9 100644 --- a/src/components/GridCells.jsx +++ b/src/components/GridCells.jsx @@ -55,7 +55,7 @@ export const FlagCell = (props) => { {props.dataItem.country} diff --git a/src/pages/Planning.jsx b/src/pages/Planning.jsx index d728107..16b7696 100644 --- a/src/pages/Planning.jsx +++ b/src/pages/Planning.jsx @@ -71,13 +71,10 @@ const Planning = () => { borderWidth: 2, borderColor: teams.find(({teamID}) => teamID === employee.teamId).teamColor, }}> - diff --git a/src/styles/_common.scss b/src/styles/_common.scss index a762a1b..fa77a98 100644 --- a/src/styles/_common.scss +++ b/src/styles/_common.scss @@ -28,47 +28,6 @@ a { .k-drawer-item { user-select: none; - - &:not(.k-drawer-separator) { - padding: 16px 8px; - } - - .k-icon { - -webkit-mask-repeat: no-repeat; - mask-repeat: no-repeat; - background-color: #656565; - width: 20px; - height: 25px; - - &.dashboard-icon { - -webkit-mask-image: url('./../assets/dashboard-icon.svg'); - mask-image: url('./../assets/dashboard-icon.svg'); - margin-top: 3px; - margin-left: 7px; - - } - &.planning-icon { - -webkit-mask-image: url('./../assets/planning-icon.svg'); - mask-image: url('./../assets/planning-icon.svg'); - } - &.profile-icon { - -webkit-mask-image: url('./../assets/profile-icon.svg'); - mask-image: url('./../assets/profile-icon.svg'); - } - &.info-icon { - -webkit-mask-image: url('./../assets/info-icon.svg'); - mask-image: url('./../assets/info-icon.svg'); - } - } - - &.k-state-selected .k-icon { - &.dashboard-icon, - &.planning-icon, - &.profile-icon, - &.info-icon { - background-color: #ffffff; - } - } } } @@ -295,6 +254,7 @@ a { .k-hbox { padding: 0 20px; background: transparent; + align-items: center; } .k-card-title { font-size: 15px;