Merge pull request #6337 from LiskHQ/6240-dashboard-page

Create a main page with all widgets and responsive design - Closes #6240, #6346, #6343

framework-plugins/lisk-framework-dashboard-plugin/src/ui/components/Box/Box.module.scss

@@ -1,5 +1,34 @@
-$indent: 5;
+@import '../../styles/constants';
+
+$indent: 6;
 $base: 5px;
+$grid-sizes: 'xs', 'sm', 'md', 'lg', 'xl';
+
+@each $breakpoint in $grid-sizes {
+	.hideDown-#{$breakpoint} {
+		@include mq-down($breakpoint) {
+			display: none;
+		}
+	}
+
+	.hideUp-#{$breakpoint} {
+		@include mq-up($breakpoint) {
+			display: none;
+		}
+	}
+
+	.showDown-#{$breakpoint} {
+		@include mq-down($breakpoint) {
+			display: inherit;
+		}
+	}
+
+	.showUp-#{$breakpoint} {
+		@include mq-up($breakpoint) {
+			display: inherit;
+		}
+	}
+}
 
 @for $i from 1 through $indent {
 	.m-t-#{$i} {

framework-plugins/lisk-framework-dashboard-plugin/src/ui/components/Box/index.tsx

@@ -25,16 +25,35 @@ interface BoxProp extends React.HTMLAttributes<HTMLDivElement> {
 	pl?: number;
 	pr?: number;
 	textAlign?: 'left' | 'center' | 'right' | 'justify';
+	hideDown?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+	hideUp?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+	showDown?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+	showUp?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 }
 
 const Box: React.FC<BoxProp> = props => {
-	const { mt, mb, ml, mr, pt, pb, pl, pr, textAlign, ...rest } = props;
+	const {
+		mt,
+		mb,
+		ml,
+		mr,
+		pt,
+		pb,
+		pl,
+		pr,
+		textAlign,
+		showDown,
+		showUp,
+		hideUp,
+		hideDown,
+		...rest
+	} = props;
 
 	if ([mt, mb, ml, mr, pt, pb, pl, pr].filter(Boolean).some(i => (i as number) < 1)) {
 		throw new Error('Box margin, padding values can not be less than 1');
 	}
 
-	if ([mt, mb, ml, mr, pt, pb, pl, pr].filter(Boolean).some(i => (i as number) > 5)) {
+	if ([mt, mb, ml, mr, pt, pb, pl, pr].filter(Boolean).some(i => (i as number) > 6)) {
 		throw new Error('Box margin, padding values can not be greater than 5');
 	}
 
@@ -48,6 +67,10 @@ const Box: React.FC<BoxProp> = props => {
 		pl ? styles[`p-l-${pl}`] : '',
 		pr ? styles[`p-r-${pr}`] : '',
 		textAlign ? styles[`text-align-${textAlign}`] : '',
+		showUp ? styles[`showUp-${showUp}`] : '',
+		hideUp ? styles[`hideUp-${hideUp}`] : '',
+		showDown ? styles[`showDown-${showDown}`] : '',
+		hideDown ? styles[`hideDown-${hideDown}`] : '',
 	].filter(Boolean);
 
 	if (rest.className) {

framework-plugins/lisk-framework-dashboard-plugin/src/ui/components/Button/Button.module.scss

@@ -7,15 +7,14 @@
 	align-items: center;
 	padding: 14px 30px;
 	color: $color-white;
-	width: 167px;
 	height: 48px;
 	background: $color-ultramarine-blue;
 	border-radius: 3px;
 	font-weight: 500;
 	font-size: $font-size-s;
 	border-radius: 3px;
 	border: none;
-	@include mq-down(lg) {
+	@include mq-down(md) {
 		margin-top: 15px;
 		width: 100%;
 	}

framework-plugins/lisk-framework-dashboard-plugin/src/ui/components/Grid/Grid.module.scss

@@ -3,42 +3,94 @@
 $grid-cols: 12;
 $grid-sizes: 'xs', 'sm', 'md', 'lg', 'xl';
 $base-spacing: 5px;
-$grid-spacing: 5;
+$grid-spacing: 6;
 $flex-justify-values: 'flex-start', 'center', 'flex-end', 'space-between', 'space-around',
 	'space-evenly';
 $flex-align-items: 'flex-start', 'center', 'flex-end', 'stretch', 'baseline';
+$text-align: 'center', 'left', 'right', 'justify';
 
 @mixin create-col-classes($modifier, $grid-cols) {
+	.gridCol {
+		box-sizing: border-box;
+	}
+
 	@include mq-up($modifier) {
-		.gridCol-#{$modifier}-offset-0 {
-			margin-left: 0;
+		.grid-#{$grid-cols} {
+			@for $i from 1 through $grid-cols {
+				.gridCol-#{$modifier}-#{$i} {
+					flex-basis: (100 / ($grid-cols / $i)) * 1%;
+				}
+			}
 		}
+	}
+}
 
-		@for $i from 1 through $grid-cols {
-			.gridCol-#{$modifier}-#{$i} {
-				flex-basis: (100 / ($grid-cols / $i)) * 1%;
+@mixin create-col-spacing-classes($modifier, $grid-cols) {
+	.grid-#{$grid-cols} {
+		@for $i from 0 through $grid-spacing {
+			&.gridColSpacing-#{$i} {
+				.gridCol {
+					padding-left: $i * $base-spacing;
+					padding-right: $i * $base-spacing;
+				}
+
+				.gridRow {
+					> :last-child {
+						padding-right: 0;
+					}
+					> :first-child {
+						padding-left: 0;
+					}
+				}
 			}
-			.gridCol-#{$modifier}-offset-#{$i} {
-				margin-left: (100 / ($grid-cols / $i)) * 1%;
+		}
+	}
+}
+
+@mixin create-row-spacing-classes($modifier, $grid-cols) {
+	.grid-#{$grid-cols} {
+		@for $i from 0 through $grid-spacing {
+			&.gridRowSpacing-#{$i} {
+				.gridRow {
+					padding-top: $i * $base-spacing;
+					padding-bottom: $i * $base-spacing;
+				}
+
+				.grid-#{$grid-cols} {
+					> :last-child {
+						padding-bottom: 0;
+					}
+					> :first-child {
+						padding-top: 0;
+					}
+				}
 			}
 		}
 	}
 }
 
-.grid {
-	max-width: $breakpoint-md;
+.grid-12,
+.grid-15 {
+	max-width: $breakpoint-lg - 120px;
 	margin: 0 auto;
 }
 
 .gridFluid {
 	margin: 0;
 	max-width: 100%;
+	width: 100%;
 }
 
 .gridRow {
 	display: flex;
 	flex-wrap: wrap;
 	width: 100%;
+	box-sizing: border-box;
+
+	@include mq-down('lg') {
+		padding-left: 30px;
+		padding-right: 30px;
+	}
 }
 
 .gridRowBorder {
@@ -65,33 +117,20 @@ $flex-align-items: 'flex-start', 'center', 'flex-end', 'stretch', 'baseline';
 	}
 }
 
-.gridCol {
-	box-sizing: border-box;
+@each $val in $text-align {
+	.gridColTextAlign-#{$val} {
+		text-align: #{$val};
+	}
 }
 
 @each $modifier in $grid-sizes {
-	@include create-col-classes($modifier, $grid-cols);
+	@include create-col-classes($modifier, 12);
+	@include create-col-spacing-classes($modifier, 12);
+	@include create-row-spacing-classes($modifier, 12);
 }
 
-@for $i from 0 through $grid-spacing {
-	.gridSpacing-#{$i} {
-		.gridCol {
-			padding: $i * $base-spacing;
-		}
-
-		@each $breakpoint in $grid-sizes {
-			.gridCol-#{$breakpoint}-12 {
-				padding-left: 0;
-			}
-		}
-
-		.gridRow {
-			> :last-child {
-				padding-right: 0;
-			}
-			> :first-child {
-				padding-left: 0;
-			}
-		}
-	}
+@each $modifier in $grid-sizes {
+	@include create-col-classes($modifier, 15);
+	@include create-col-spacing-classes($modifier, 15);
+	@include create-row-spacing-classes($modifier, 12);
 }

framework-plugins/lisk-framework-dashboard-plugin/src/ui/components/Grid/index.tsx

@@ -25,48 +25,101 @@ type GridJustify =
 	| 'space-around'
 	| 'space-evenly';
 
+type TextAlign = 'center' | 'left' | 'right' | 'justify';
+
 type GridSizes = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
-type GridSpacing = 0 | 1 | 2 | 3 | 4 | 5;
-
-interface LayoutProps {
-	row?: boolean;
-	rowBorder?: boolean;
-	container?: boolean;
-	fluid?: boolean;
-	xs?: GridSizes;
-	sm?: GridSizes;
-	md?: GridSizes;
-	lg?: GridSizes;
-	xl?: GridSizes;
-	offset?: GridSizes;
-	spacing?: GridSpacing;
-
-	// CSS properties
-	alignItems?: GridItemsAlignment;
-	justify?: GridJustify;
+type GridSpacing = 0 | 1 | 2 | 3 | 4 | 5 | 6;
+
+type OverrideProps<M, N> = { [P in keyof M]: P extends keyof N ? N[P] : M[P] };
+
+interface GridBaseProps {
+	// Grid container props
+	container?: undefined;
+	fluid?: undefined;
+	rowSpacing?: undefined;
+	colSpacing?: undefined;
+	spacing?: undefined;
+	columns?: number;
+
+	// Grid row props
+	row?: undefined;
+	rowBorder?: undefined;
+	alignItems?: undefined;
+	justify?: undefined;
+
+	// Grid col props
+	xs?: undefined;
+	sm?: undefined;
+	md?: undefined;
+	lg?: undefined;
+	xl?: undefined;
+	textAlign?: undefined;
 }
 
-const Grid: React.FC<LayoutProps> = props => {
+type GridContainerProps = OverrideProps<
+	GridBaseProps,
+	{
+		// Grid container props
+		container?: true;
+		fluid?: boolean;
+		rowSpacing?: GridSpacing;
+		colSpacing?: GridSpacing;
+		spacing?: GridSpacing;
+		columns?: 12 | 15;
+	}
+>;
+
+type GridRowProps = OverrideProps<
+	GridBaseProps,
+	{
+		// Grid row props
+		row?: true;
+		rowBorder?: boolean;
+		alignItems?: GridItemsAlignment;
+		justify?: GridJustify;
+	}
+>;
+
+type GridColProps = OverrideProps<
+	GridBaseProps,
+	{
+		// Grid col props
+		xs?: GridSizes;
+		sm?: GridSizes;
+		md?: GridSizes;
+		lg?: GridSizes;
+		xl?: GridSizes;
+		textAlign?: TextAlign;
+	}
+>;
+
+type GridProps = GridContainerProps | GridRowProps | GridColProps;
+
+const Grid: React.FC<GridProps> = props => {
 	const {
 		alignItems,
 		children,
 		container,
 		fluid,
 		justify,
+		textAlign,
 		row,
 		rowBorder,
-		spacing,
 		xs,
 		sm,
 		md,
 		lg,
 		xl,
-		offset,
 	} = props;
 
+	const columns = props.columns ?? 12;
+	const rowSpacing = props.rowSpacing ?? props.spacing;
+	const colSpacing = props.colSpacing ?? props.spacing;
+
 	const classes = [
-		container ? styles.grid : '',
-		container && spacing ? styles[`gridSpacing-${spacing}`] : '',
+		container ? styles[`grid-${columns}`] : '',
+		container && rowSpacing ? styles[`gridRowSpacing-${rowSpacing}`] : '',
+		container && colSpacing ? styles[`gridColSpacing-${colSpacing}`] : '',
 
 		// Row styling
 		row ? styles.gridRow : '',
@@ -77,18 +130,12 @@ const Grid: React.FC<LayoutProps> = props => {
 
 		// Column styling
 		!row && !container ? styles.gridCol : '',
+		!row && !container && textAlign ? styles[`gridColTextAlign-${textAlign}`] : '',
 		!row && xl ? styles[`gridCol-xl-${xl}`] : '',
 		!row && lg ? styles[`gridCol-lg-${lg}`] : '',
 		!row && md ? styles[`gridCol-md-${md}`] : '',
 		!row && sm ? styles[`gridCol-sm-${sm}`] : '',
 		!row && xs ? styles[`gridCol-xs-${xs}`] : '',
-
-		// Column offset
-		!row && xs && offset ? styles[`gridCol-xs-offset-${offset}`] : '',
-		!row && sm && offset ? styles[`gridCol-sm-offset-${offset}`] : '',
-		!row && md && offset ? styles[`gridCol-md-offset-${offset}`] : '',
-		!row && lg && offset ? styles[`gridCol-lg-offset-${offset}`] : '',
-		!row && xl && offset ? styles[`gridCol-xl-offset-${offset}`] : '',
 	];
 
 	return <div className={classes.filter(Boolean).join(' ')}>{children}</div>;