STRLCPY/gradejs

■ ■ ■ ■ ■ ■

packages/web/src/components/layouts/SearchResults/SearchResults.module.scss

		skipped 4 lines
5	5		display: grid;
6	6		grid-template-columns: 260px minmax(0, 1fr);
7	7		grid-template-rows: min-content 1fr;
8		-	grid-column-gap: 80px;
	8	+	grid-column-gap: 60px;
9	9		margin-top: 44px;
10	10		padding-bottom: 108px;
11	11		border-bottom: 1px solid $gray-border;
12	12		margin-bottom: 80px;
	13	+
	14	+	@include xxl {
	15	+	grid-column-gap: 80px;
	16	+	}
13	17
14	18		@include lg {
15	19		grid-template-columns: 232px minmax(0, 1fr);
		skipped 86 lines

■ ■ ■ ■ ■ ■

packages/web/src/components/layouts/SearchResults/SearchResults.tsx

		skipped 260 lines
261	261
262	262		<div className={styles.packages}>
263	263		<PackagePreview
264		-	name='@team-griffin/react-heading-section@team-griffin/react-heading-section'
	264	+	name='@team-griffin/react-heading-section'
265	265		version='3.0.0 - 4.16.4'
266	266		/>
267	267		<PackagePreview
		skipped 22 lines

■ ■ ■ ■ ■ ■

packages/web/src/components/ui/AvatarGroup/AvatarGroup.module.scss

		skipped 24 lines
25	25		}
26	26
27	27		.avatarItem {
28		-	width: 40px;
29		-	height: 40px;
	28	+	width: 32px;
	29	+	height: 32px;
30	30		border: 2px solid $white;
31	31		border-radius: 50%;
32	32		overflow: hidden;
		skipped 3 lines
36	36		justify-content: center;
37	37		user-select: none;
38	38		margin-left: -7px;
	39	+
	40	+	@include xxl {
	41	+	width: 40px;
	42	+	height: 40px;
	43	+	}
39	44
40	45		&:not(:first-child) {
41	46		margin-left: -7px;
		skipped 17 lines
59	64
60	65		.counter {
61	66		white-space: nowrap;
62		-	font-size: 19px;
	67	+	font-size: 16px;
63	68		line-height: 30px;
64	69		margin-left: 16px;
	70	+
	71	+	@include xxl {
	72	+	font-size: 19px;
	73	+	}
65	74
66	75		@include mobile-and-tablet {
67	76		font-size: 16px;
		skipped 4 lines

■ ■ ■ ■ ■ ■

packages/web/src/components/ui/Card/Card.module.scss

		skipped 9 lines
10	10		box-shadow: $shadow;
11	11		width: 100%;
12	12		max-width: 600px;
13		-	min-height: 248px;
	13	+	min-height: 220px;
14	14		display: flex;
15	15		flex-direction: column;
	16	+
	17	+	@include xxl {
	18	+	min-height: 248px;
	19	+	}
16	20
17	21		@include lg {
18	22		padding: 20px;
		skipped 20 lines
39	43
40	44		.icon {
41	45		width: 100%;
42		-	max-width: 52px;
	46	+	max-width: 42px;
43	47		object-fit: cover;
	48	+
	49	+	@include xxl {
	50	+	max-width: 52px;
	51	+	}
44	52		}
45	53
46	54		.title {
47		-	font-size: 26px;
	55	+	font-size: 20px;
48	56		font-weight: 500;
49	57		line-height: 1.54;
	58	+
	59	+	@include xxl {
	60	+	font-size: 26px;
	61	+	}
50	62
51	63		@include mobile-and-tablet {
52	64		font-size: 20px;
		skipped 43 lines
96	108		min-height: 136px;
97	109		justify-content: space-between;
98	110		max-width: initial;
99		-
100		-	.title {
101		-	font-size: 24px;
102		-
103		-	@include mobile-and-tablet {
104		-	font-size: 20px;
105		-	}
106		-	}
107	111
108	112		@include mobile-and-tablet {
109	113		min-height: 136px;
		skipped 3 lines

■ ■ ■ ■ ■ ■

packages/web/src/components/ui/Chip/Chip.module.scss

		skipped 5 lines
6	6		display: inline-flex;
7	7		align-items: center;
8	8		justify-content: center;
9		-	border-radius: 31px;
	9	+	border-radius: 22px;
10	10		line-height: 1.25;
11	11		border: 1px solid transparent;
12	12		white-space: nowrap;
13	13		transition: all $transition-duration $transition-timing-function;
	14	+
	15	+	@include xxl {
	16	+	border-radius: 31px;
	17	+	}
14	18
15	19		@include mobile-and-tablet {
16	20		font-size: 14px;
		skipped 61 lines
78	82		}
79	83
80	84		.large {
81		-	padding: 15px 19px;
	85	+	padding: 12px 15px;
	86	+
	87	+	@include xxl {
	88	+	padding: 15px 19px;
	89	+	}
82	90
83	91		@include mobile-and-tablet {
84	92		padding: 12px 15px;
		skipped 44 lines

■ ■ ■ ■ ■ ■

packages/web/src/components/ui/Container/Container.module.scss

		skipped 1 lines
2	2
3	3		.container {
4	4		width: 100%;
5		-	max-width: 1470px;
	5	+	max-width: 1200px;
6	6		padding-left: 52px;
7	7		padding-right: 52px;
8	8		margin-left: auto;
9	9		margin-right: auto;
	10	+
	11	+	@include xxl {
	12	+	max-width: 1470px;
	13	+	}
10	14
11	15		@include lg {
12	16		padding-left: 36px;
		skipped 9 lines

■ ■ ■ ■ ■ ■

packages/web/src/components/ui/Header/Header.module.scss

		skipped 8 lines
9	9
10	10		@include mobile-and-tablet {
11	11		display: grid;
12		-	grid-row-gap: 22px;
	12	+	grid-row-gap: 0px;
13	13		grid-template-columns: 1fr 2fr;
14		-	grid-template-rows: 28px 52px;
	14	+	grid-template-rows: 28px 0px;
15	15		}
16	16		}
17	17
		skipped 61 lines

■ ■ ■ ■ ■ ■

packages/web/src/components/ui/Hero/Hero.module.scss

		skipped 1 lines
2	2		@import '~styles/responsive.scss';
3	3
4	4		.hero {
5		-	border-radius: 0 0 60px 60px;
	5	+	border-radius: 0 0 45px 45px;
6	6		background: url('~assets/hero-bg.png') 50% 0 no-repeat;
7	7		background-size: cover;
8	8		color: $white;
9	9		text-align: center;
	10	+
	11	+	@include xxl {
	12	+	border-radius: 0 0 60px 60px;
	13	+	}
10	14
11	15		@include mobile-and-tablet {
12	16		border-radius: 0 0 30px 30px;
		skipped 26 lines
39	43		margin-right: auto;
40	44		color: rgba($white, 0.5);
41	45		margin-bottom: 48px;
	46	+	font-size: 16px;
42	47
43	48		@include mobile-and-tablet {
44	49		margin-bottom: 32px;
		skipped 10 lines
55	60		.input {
56	61		display: block;
57	62		width: 100%;
58		-	height: 100px;
	63	+	height: 85px;
59	64		padding-left: 44px;
60	65		padding-right: 124px;
61	66		font-size: 26px;
		skipped 5 lines
67	72		color: rgba($white, 0.5);
68	73		//color: $white;
69	74		border-radius: 50px;
	75	+
	76	+	@include xxl {
	77	+	height: 100px;
	78	+	}
70	79
71	80		@include mobile-and-tablet {
72	81		height: 64px;
		skipped 15 lines
88	97		z-index: 1;
89	98		top: 8px;
90	99		right: 8px;
91		-	width: 84px;
92		-	height: 84px;
	100	+	width: 69px;
	101	+	height: 69px;
93	102		border-radius: 50%;
94	103		display: flex;
95	104		align-items: center;
		skipped 2 lines
98	107		margin: 0;
99	108		padding: 0;
100	109		background-color: rgba($white, 0.1);
	110	+
	111	+	@include xxl {
	112	+	width: 84px;
	113	+	height: 84px;
	114	+	}
101	115
102	116		@include mobile-and-tablet {
103	117		top: 4px;
		skipped 5 lines
109	123
110	124		.submitIcon {
111	125		margin-left: 4px;
	126	+	width: 26px;
	127	+	height: 26px;
	128	+
	129	+	@include xxl {
	130	+	width: 32px;
	131	+	height: 32px;
	132	+	}
112	133
113	134		@include mobile-and-tablet {
114	135		width: 10px;
		skipped 51 lines

■ ■ ■ ■ ■ ■

packages/web/src/components/ui/PackagePreview/PackagePreview.module.scss

		skipped 1 lines
2	2		@import '~styles/responsive.scss';
3	3
4	4		.package {
5		-	padding: 32px 36px;
	5	+	padding: 26px 28px;
6	6		border-radius: 24px;
7	7		background: $white;
8	8		box-shadow: $shadow;
	9	+
	10	+	@include xxl {
	11	+	padding: 32px 36px;
	12	+	}
9	13
10	14		@include mobile-and-tablet {
11	15		padding: 20px;
		skipped 21 lines
33	37		}
34	38
35	39		.name {
36		-	font-size: 26px;
	40	+	font-size: 22px;
	41	+	line-height: 1.35;
37	42		font-weight: 500;
	43	+
	44	+	@include xxl {
	45	+	font-size: 26px;
	46	+	}
38	47		}
39	48
40	49		.version {
		skipped 7 lines
48	57		vertical-align: text-bottom;
49	58		display: inline-flex;
50	59		align-items: center;
51		-	font-size: 16px;
	60	+	font-size: 14px;
52	61		height: 33px;
	62	+
	63	+	@include xxl {
	64	+	font-size: 16px;
	65	+	}
53	66
54	67		& > * {
55	68		&:not(:last-child) {
		skipped 386 lines

■ ■ ■ ■ ■ ■

packages/web/src/components/ui/SearchedResource/SearchedResource.module.scss

		skipped 17 lines
18	18		display: flex;
19	19		flex-shrink: 0;
20	20		margin-right: 24px;
21		-	max-width: 52px;
	21	+	max-width: 42px;
	22	+
	23	+	@include xxl {
	24	+	max-width: 52px;
	25	+	}
22	26
23	27		@include mobile-and-tablet {
24	28		max-width: 44px;
		skipped 31 lines

■ ■ ■ ■ ■ ■

packages/web/src/components/ui/VulnerablePackage/VulnerablePackage.module.scss

		skipped 11 lines
12	12		position: relative;
13	13		display: flex;
14	14		align-items: center;
15		-	font-size: 18px;
16		-	line-height: 24px;
	15	+	font-size: 14px;
	16	+	line-height: 20px;
17	17		font-family: $font-monospace;
18	18		color: $red-accent;
	19	+
	20	+	@include xxl {
	21	+	font-size: 18px;
	22	+	line-height: 24px;
	23	+	}
19	24
20	25		@include mobile-and-tablet {
21	26		font-size: 14px;
		skipped 19 lines

■ ■ ■ ■ ■ ■

packages/web/src/styles/global.scss

		skipped 10 lines
11	11		body {
12	12		margin: 0;
13	13		font-family: $font-sans-serif;
14		-	font-size: 1rem;
	14	+	font-size: 0.85rem;
15	15		line-height: 1.62;
16	16		color: $black;
17	17		text-align: left;
18	18		background-color: $white;
19	19		-webkit-font-smoothing: antialiased;
20	20		-moz-osx-font-smoothing: grayscale;
	21	+
	22	+	@include xxl {
	23	+	font-size: 1rem;
	24	+	}
21	25
22	26		@include mobile-and-tablet {
23	27		font-size: 0.875rem;
		skipped 30 lines
54	58		}
55	59
56	60		h1 {
57		-	font-size: 82px;
58		-	line-height: 92px;
	61	+	font-size: 74px;
	62	+	line-height: 82px;
	63	+
	64	+	@include xxl {
	65	+	font-size: 82px;
	66	+	line-height: 92px;
	67	+	}
59	68
60	69		@include mobile-and-tablet {
61	70		font-size: 36px;
		skipped 2 lines
64	73		}
65	74
66	75		h2 {
67		-	font-size: 48px;
68		-	line-height: 58px;
	76	+	font-size: 40px;
	77	+	line-height: 46px;
	78	+
	79	+	@include xxl {
	80	+	font-size: 48px;
	81	+	line-height: 58px;
	82	+	}
69	83
70	84		@include mobile-and-tablet {
71	85		font-size: 28px;
		skipped 2 lines
74	88		}
75	89
76	90		h3 {
77		-	font-size: 40px;
78		-	line-height: 50px;
	91	+	font-size: 32px;
	92	+	line-height: 40px;
	93	+
	94	+	@include xxl {
	95	+	font-size: 40px;
	96	+	line-height: 50px;
	97	+	}
79	98
80	99		@include mobile-and-tablet {
81	100		font-size: 24px;
		skipped 2 lines
84	103		}
85	104
86	105		h4 {
87		-	font-size: 32px;
88		-	line-height: 50px;
	106	+	font-size: 28px;
	107	+	line-height: 45px;
	108	+
	109	+	@include xxl {
	110	+	font-size: 32px;
	111	+	line-height: 50px;
	112	+	}
89	113
90	114		@include mobile-and-tablet {
91	115		font-size: 22px;
		skipped 30 lines

■ ■ ■ ■ ■ ■

packages/web/src/styles/responsive.scss

		skipped 2 lines
3	3		$breakpoint-tablet: 991px;
4	4		$breakpoint-lg: 1199px;
5	5		$breakpoint-xl: 1399px;
	6	+	$breakpoint-xxl: 1920px;
	7	+
	8	+	@mixin xxl {
	9	+	@media (min-width: $breakpoint-xxl) {
	10	+	@content;
	11	+	}
	12	+	}
6	13
7	14		@mixin xl {
8	15		@media (max-width: $breakpoint-xl) {
		skipped 28 lines

■ ■ ■ ■ ■ ■

packages/web/vercel.json

1	1		{
2		-	"rewrites": [{
3		-	"source": "/(.*)",
4		-	"destination": "/index.html"
5		-	}]
	2	+	"rewrites": [
	3	+	{
	4	+	"source": "/static/sprite.svg",
	5	+	"destination": "/sprite.svg"
	6	+	},
	7	+	{
	8	+	"source": "/(.*)",
	9	+	"destination": "/index.html"
	10	+	}
	11	+	]
6	12		}
7	13

fix: lg scaling (#58)