Skip to content

Commit

Permalink
feat: Changes for dashboard.
Browse files Browse the repository at this point in the history
  • Loading branch information
@Cerberupo
Cerberupo committed Jan 5, 2024
1 parent f8c1789 commit 30924a2
Show file tree
Hide file tree
Showing 34 changed files with 439 additions and 305 deletions.
21 changes: 18 additions & 3 deletions merged_tokens.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6940,7 +6940,12 @@
},
"typo": {
"lg": {
"value": "{global.content.typo.body.lg--medium}",
"value": {
"fontFamily": "{core.font.family.main}",
"fontWeight": "{core.font.weight.medium}",
"lineHeight": "19 px",
"fontSize": "{core.font.size.100}"
},
"type": "typography"
},
"md": {
Expand Down Expand Up @@ -7257,7 +7262,12 @@
},
"typo": {
"lg": {
"value": "{global.content.typo.body.lg--medium}",
"value": {
"fontFamily": "{core.font.family.main}",
"fontWeight": "{core.font.weight.medium}",
"lineHeight": "19 px",
"fontSize": "{core.font.size.100}px"
},
"type": "typography"
},
"md": {
Expand Down Expand Up @@ -7454,7 +7464,12 @@
},
"typo": {
"lg": {
"value": "{global.content.typo.body.lg--medium}",
"value": {
"fontFamily": "{core.font.family.main}",
"fontWeight": "{core.font.weight.medium}",
"lineHeight": "19 px",
"fontSize": "{core.font.size.100}px"
},
"type": "typography"
},
"md": {
Expand Down
33 changes: 17 additions & 16 deletions packages/components/src/informative/Kanban/Kanban.styles.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import { createStyles } from '@mantine/styles';
import { getFontProductive } from '../../theme.mixins';

export const KanbanStyles = createStyles((theme, {}) => {
return {
Expand All @@ -9,9 +8,9 @@ export const KanbanStyles = createStyles((theme, {}) => {
height: '100%',
maxHeight: '100%',
padding: theme.spacing[2],
backgroundColor: '#EDEFF5',
backgroundColor: '#F8F9FB',
gap: theme.spacing[2],
display: 'flex'
display: 'flex',
},
column: {
height: '100%',
Expand All @@ -20,38 +19,40 @@ export const KanbanStyles = createStyles((theme, {}) => {
width: '300px',
minWidth: '300px',
flexDirection: 'column',
backgroundColor: 'rgba(255, 255, 255, 0.3)',
borderRadius: theme.spacing[1]
backgroundColor: '#F2F4F8',
borderRadius: theme.spacing[1],
},
columnHeader: {
paddingLeft: theme.spacing[4],
paddingRight: theme.spacing[4],
paddingTop: theme.spacing[3],
marginBottom: theme.spacing[4],
color: theme.colors.text05,
...getFontProductive(theme.fontSizes['2'], 500),
color: '#4D5358',
fontSize: '16px',
fontWeight: 600,
lineHeight: '24px',
fontFamily: 'Albert Sans',
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center'
gap: theme.spacing[2],
alignItems: 'center',
},
scroll: {
padding: theme.spacing[2]
padding: theme.spacing[2],
},
listDraggingOver: {
backgroundColor: '#EDEFF5',
borderRadius: 4
borderRadius: 4,
},
list: {
minHeight: '100px'
minHeight: '100px',
},
iconBig: {
position: 'absolute',
bottom: 20,
left: 20,
zIndex: 0,
img: {
filter: 'brightness(0) invert(1)'
}
}
filter: 'brightness(0) invert(1)',
},
},
};
});
7 changes: 2 additions & 5 deletions packages/components/src/informative/Kanban/components/Column.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import { Box } from '../../../layout/Box';
import { KanbanStyles } from '../Kanban.styles';
import { Draggable } from 'react-beautiful-dnd';
import { QuoteList } from './QuoteList';
import { Text } from '../../../typography';
import { ImageLoader } from '../../../misc';
import { ScrollArea } from '@mantine/core';

Expand All @@ -28,11 +27,9 @@ const Column = ({ value, index, isScrollable, isCombineEnabled, itemRender, icon
) : null}
<Box className={classes.columnHeader}>
<Box {...provided.dragHandleProps}>
<Text role="productive" strong>
{value.title}
</Text>
<Box>{value.title}</Box>
</Box>
<Text color="primary">{value.cards.length}</Text>
<Box>{value.cards.length}</Box>
</Box>
<ScrollArea className={classes.scroll} style={{ width: '100%', height: '100%' }}>
<QuoteList
Expand Down
10 changes: 8 additions & 2 deletions packages/components/src/informative/ProgressColorBar/ProgressColorBar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,14 @@ const ProgressColorBar = ({
labelLeft,
labelRight,
}) => {
const { classes } = ProgressColorBarStyles();

const { classes, theme } = ProgressColorBarStyles();
if (value < 25) {
color = theme.other.progress.content.color.phatic.negative;
} else if (value < 75) {
color = theme.other.progress.content.color.phatic.attention;
} else {
color = theme.other.progress.content.color.phatic.positive;
}
return (
<Box>
{labelLeft && labelRight && (
Expand Down
24 changes: 13 additions & 11 deletions packages/components/src/informative/ProgressColorBar/ProgressColorBar.styles.js
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,18 @@
import { createStyles } from '@mantine/styles';
import { pxToRem } from '../../theme.mixins';

export const ProgressColorBarStyles = createStyles((theme) => ({
topLabelsContainer: {
display: 'flex',
justifyContent: 'space-between',
marginBottom: pxToRem(8),
},
labels: {
color: theme.other.progress.content.color.text,
...theme.other.progress.content.typo,
},
}));
export const ProgressColorBarStyles = createStyles((theme) => {
return {
topLabelsContainer: {
display: 'flex',
justifyContent: 'space-between',
marginBottom: pxToRem(8),
},
labels: {
color: theme.other.progress.content.color.text,
...theme.other.progress.content.typo,
},
};
});

export default ProgressColorBarStyles;
53 changes: 13 additions & 40 deletions packages/components/src/tokens.compiled.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1153,7 +1153,7 @@ export default {
"y": 0,
"blur": 4,
"spread": 0,
"color": "#ffffff",
"color": "#ffffff26",
"type": "dropShadow"
},
"type": "boxShadow"
Expand Down Expand Up @@ -1234,17 +1234,8 @@ export default {
"type": "color"
},
"hover--reverse-transparent": {
"value": "#ffffff",
"type": "color",
"$extensions": {
"studio.tokens": {
"modify": {
"type": "alpha",
"value": "0.15",
"space": "lch"
}
}
}
"value": "#ffffff26",
"type": "color"
},
"down": {
"value": "#F1FFBD",
Expand Down Expand Up @@ -4939,30 +4930,12 @@ export default {
"color": {
"primary": {
"default": {
"value": "#4D5358",
"type": "color",
"$extensions": {
"studio.tokens": {
"modify": {
"type": "alpha",
"value": "0.4",
"space": "lch"
}
}
}
"value": "#4d535866",
"type": "color"
},
"hover": {
"value": "#4D5358",
"type": "color",
"$extensions": {
"studio.tokens": {
"modify": {
"type": "alpha",
"value": "0.7",
"space": "lch"
}
}
}
"value": "#4d5358b3",
"type": "color"
},
"down": {
"value": "#4D5358",
Expand Down Expand Up @@ -5095,8 +5068,8 @@ export default {
"value": {
"fontFamily": "Albert Sans",
"fontWeight": 500,
"lineHeight": "24px",
"fontSize": "18px"
"lineHeight": "19 px",
"fontSize": 16
},
"type": "typography"
},
Expand Down Expand Up @@ -5451,8 +5424,8 @@ export default {
"value": {
"fontFamily": "Albert Sans",
"fontWeight": 500,
"lineHeight": "24px",
"fontSize": "18px"
"lineHeight": "19 px",
"fontSize": "16px"
},
"type": "typography"
},
Expand Down Expand Up @@ -5677,8 +5650,8 @@ export default {
"value": {
"fontFamily": "Albert Sans",
"fontWeight": 500,
"lineHeight": "24px",
"fontSize": "18px"
"lineHeight": "19 px",
"fontSize": "16px"
},
"type": "typography"
},
Expand Down
4 changes: 2 additions & 2 deletions packages/icons/optimized/outline/meeting-camera.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5 changes: 3 additions & 2 deletions packages/icons/optimized/outline/plugin-comunica.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 2 additions & 2 deletions packages/icons/optimized/outline/time-clock-circle.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
6 changes: 3 additions & 3 deletions packages/icons/outline/MeetingCameraIcon.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,16 @@ const React = require("react");
function MeetingCameraIcon(props) {
return /*#__PURE__*/React.createElement("svg", Object.assign({
fill: "none",
viewBox: "0 0 16 16",
viewBox: "0 0 23 15",
stroke: "currentColor",
"aria-hidden": "true",
width: "1em",
height: "1em"
}, props), /*#__PURE__*/React.createElement("path", {
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: 2,
d: "M8.5 3.507h-6a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2v-5a2 2 0 0 0-2-2ZM12.5 10.007l2.277 1.138a.5.5 0 0 0 .723-.447V5.316a.499.499 0 0 0-.723-.447L12.5 6.007"
strokeWidth: 1.3,
d: "M3.837 1h8.513s2.838 0 2.838 2.837v7.094s0 2.838-2.838 2.838H3.838S1 13.769 1 10.93V3.838S1 1 3.837 1ZM18.025 10.222l3.23 1.614a.71.71 0 0 0 1.026-.634V3.566a.708.708 0 0 0-1.026-.634l-3.23 1.615"
}));
}
module.exports = MeetingCameraIcon;
9 changes: 6 additions & 3 deletions packages/icons/outline/PluginComunicaIcon.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,19 @@ const React = require("react");
function PluginComunicaIcon(props) {
return /*#__PURE__*/React.createElement("svg", Object.assign({
fill: "none",
viewBox: "0 0 27 27",
viewBox: "0 0 23 23",
stroke: "currentColor",
"aria-hidden": "true",
width: "1em",
height: "1em"
}, props), /*#__PURE__*/React.createElement("path", {
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: 2,
d: "M13.5 1.5A12 12 0 0 0 3.267 19.77l-1.714 4.573a.857.857 0 0 0 .957 1.143l5.988-1.09a11.828 11.828 0 0 0 5 1.104 12 12 0 0 0 0-24v0ZM9.213 13.59a1.714 1.714 0 0 1-1.715 1.624h-.09a1.714 1.714 0 1 1 1.805-1.625v0Zm6 0a1.714 1.714 0 0 1-1.715 1.624h-.09a1.713 1.713 0 0 1-1.624-1.807 1.714 1.714 0 0 1 2.986-1.054 1.697 1.697 0 0 1 .443 1.236Zm6 0a1.714 1.714 0 0 1-1.715 1.624h-.092a1.713 1.713 0 0 1-1.051-2.987 1.73 1.73 0 0 1 1.234-.441 1.713 1.713 0 0 1 1.624 1.803Z"
strokeWidth: 1.3,
d: "M12.34 1a9.901 9.901 0 0 0-8.672 5.095 9.924 9.924 0 0 0 .245 10.062L1 22.281l6.118-2.917a9.918 9.918 0 0 0 14.784-5.714 9.94 9.94 0 0 0-1.63-8.71A9.925 9.925 0 0 0 12.34 1Z"
}), /*#__PURE__*/React.createElement("path", {
strokeWidth: 1.3,
d: "M12.35 11.286a.355.355 0 1 1 0-.71M12.35 11.286a.355.355 0 1 0 0-.71M8.094 11.286a.355.355 0 0 1 0-.71M8.094 11.286a.355.355 0 0 0 0-.71M16.606 11.286a.355.355 0 0 1 0-.71M16.606 11.286a.355.355 0 1 0 0-.71"
}));
}
module.exports = PluginComunicaIcon;
6 changes: 3 additions & 3 deletions packages/icons/outline/TimeClockCircleIcon.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,16 @@ const React = require("react");
function TimeClockCircleIcon(props) {
return /*#__PURE__*/React.createElement("svg", Object.assign({
fill: "none",
viewBox: "0 0 24 24",
viewBox: "0 0 22 22",
stroke: "currentColor",
"aria-hidden": "true",
width: "1em",
height: "1em"
}, props), /*#__PURE__*/React.createElement("path", {
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: 2,
d: "M1.5 12a10.5 10.5 0 1 0 21 0 10.5 10.5 0 0 0-21 0v0ZM12 12V8.25M12 12l4.687 4.688"
strokeWidth: 1.3,
d: "M1 10.931a9.931 9.931 0 1 0 19.862 0 9.931 9.931 0 0 0-19.862 0ZM10.931 10.931V7.384M10.931 10.931l4.433 4.434"
}));
}
module.exports = TimeClockCircleIcon;
6 changes: 3 additions & 3 deletions packages/icons/outline/esm/MeetingCameraIcon.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,16 @@ import * as React from "react";
function MeetingCameraIcon(props) {
return /*#__PURE__*/React.createElement("svg", Object.assign({
fill: "none",
viewBox: "0 0 16 16",
viewBox: "0 0 23 15",
stroke: "currentColor",
"aria-hidden": "true",
width: "1em",
height: "1em"
}, props), /*#__PURE__*/React.createElement("path", {
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: 2,
d: "M8.5 3.507h-6a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2v-5a2 2 0 0 0-2-2ZM12.5 10.007l2.277 1.138a.5.5 0 0 0 .723-.447V5.316a.499.499 0 0 0-.723-.447L12.5 6.007"
strokeWidth: 1.3,
d: "M3.837 1h8.513s2.838 0 2.838 2.837v7.094s0 2.838-2.838 2.838H3.838S1 13.769 1 10.93V3.838S1 1 3.837 1ZM18.025 10.222l3.23 1.614a.71.71 0 0 0 1.026-.634V3.566a.708.708 0 0 0-1.026-.634l-3.23 1.615"
}));
}
export default MeetingCameraIcon;
Loading

0 comments on commit 30924a2

Please sign in to comment.