Skip to content

Commit 0386bd0

Browse files
Brian Vaughntaneliang
Brian Vaughn
and
taneliang
authored
Tweaked landing page styles (#19665)
* Tweaked landing page styles * Update GitHub link Co-authored-by: E-Liang Tan <[email protected]>
1 parent 90d212d commit 0386bd0

File tree

2 files changed

+129
-175
lines changed

2 files changed

+129
-175
lines changed

‎packages/react-devtools-scheduling-profiler/src/ImportPage.css

Lines changed: 68 additions & 111 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,56 @@
11
.App {
2+
min-height: 100vh;
23
background-color: #282c34;
3-
text-align: center;
4+
display: flex;
5+
align-items: center;
6+
justify-content: center;
7+
font-size: 1.25rem;
8+
padding: 2rem;
49
}
510

6-
.container {
11+
.Card {
712
display: flex;
13+
flex: 0 1 1000px;
814
flex-wrap: wrap;
915
align-items: center;
1016
justify-content: center;
11-
font-size: calc(10px + 1.5vmin);
12-
min-height: 100vh;
1317
}
1418

15-
.link {
16-
color: #282c34;
17-
transition: 0.2s;
18-
font-size: calc(10px + 1.5vmin);
19+
.Card {
20+
background-color: white;
21+
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
22+
border-radius: 5px;
23+
transition: 0.3s;
24+
}
25+
26+
.Card:hover {
27+
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
28+
}
29+
30+
.Row {
31+
display: flex;
32+
flex-direction: row;
33+
flex-wrap: wrap;
34+
}
35+
36+
.Column {
37+
margin: 2rem;
38+
margin-right: 0;
39+
display: flex;
40+
flex-direction: column;
41+
flex-basis: 100%;
42+
flex: 1;
1943
}
20-
.link:hover {
21-
color: #61dafb;
44+
.Column:last-of-type {
45+
margin-right: 2rem;
46+
}
47+
48+
.Link {
49+
color: #2683E2;
2250
transition: 0.2s;
23-
font-size: calc(10px + 1.5vmin);
51+
}
52+
.Link:hover {
53+
color: #1572D1;
2454
}
2555

2656
kbd {
@@ -32,25 +62,31 @@ kbd {
3262
border-radius: 0.2em;
3363
}
3464

35-
/* Landing Graphic */
36-
.browserScreenshot {
65+
.Screenshot {
3766
width: 35rem;
38-
max-width: inherit;
67+
max-width: 100%;
68+
min-width: 25rem;
3969
align-self: center;
4070
justify-content: center;
4171
border: 1px solid #d7dfe4;
4272
border-radius: 0.4em;
4373
box-shadow: 0 2px 4px #ddd;
4474
}
4575

46-
.legendKey {
47-
font-size: calc(8px + 1.5vmin);
76+
.Header {
77+
margin-top: 0px;
78+
}
79+
80+
.LegendKey {
4881
margin: 0;
49-
margin-bottom: 1rem;
82+
margin-bottom: 1.25rem;
83+
list-style: none;
84+
padding: 0;
5085
}
5186

52-
.legendKey > svg {
53-
padding-left: 2rem;
87+
.LegendItem {
88+
display: flex;
89+
align-items: center;
5490
}
5591

5692
@keyframes spin {
@@ -62,117 +98,38 @@ kbd {
6298
}
6399
}
64100

65-
hr {
66-
margin-top: 0px;
67-
margin-left: 4px;
68-
width: 80%;
69-
}
70-
71-
.row {
72-
display: flex;
73-
flex-direction: row;
74-
flex-wrap: wrap;
75-
width: 100%;
76-
}
77-
78-
.column {
79-
padding: 1rem;
80-
display: flex;
81-
flex-direction: column;
82-
flex-basis: 100%;
83-
flex: 1;
84-
}
85-
86-
.columncontent {
87-
display: flex;
88-
flex-direction: column;
89-
flex-basis: 100%;
90-
flex: 1;
91-
text-align: left;
92-
}
93-
94-
/* Card Styling */
95-
.card {
96-
background-color: white;
97-
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
98-
border-radius: 5px;
99-
transition: 0.3s;
100-
width: 80%;
101-
color: black;
102-
}
103-
104-
.card:hover {
105-
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
106-
}
107-
108-
.cardcontainer {
109-
padding: 40px 16px;
110-
}
111-
112-
.inputbtn {
113-
display: none;
114-
}
115-
116-
.buttongrp {
101+
.Buttons {
117102
float: left; /* Float the buttons side by side */
118103
}
119104

120-
/* Import Button Styling */
121-
.ImportButton {
122-
background-color: #61dafb;
123-
border: none;
124-
color: #ffffff;
105+
.ImportButton,
106+
.ViewSourceButton {
107+
width: 10rem;
108+
font-size: 1.5rem;
109+
padding: 1.5rem;
125110
text-align: center;
126-
font-size: 28px;
127-
padding: 20px;
128-
width: 200px;
129111
transition: all 0.3s;
130112
cursor: pointer;
131-
margin: 5px;
132113
}
133114

134-
.ImportButton span {
135-
cursor: pointer;
136-
display: inline-block;
137-
position: relative;
138-
transition: 0.3s;
139-
}
140-
141-
.ImportButton span:after {
142-
content: '\00bb';
143-
position: absolute;
144-
opacity: 0;
145-
top: 0;
146-
right: -20px;
147-
transition: 0.3s;
115+
.ImportButton {
116+
background-color: #2683E2;
117+
border: none;
118+
color: #ffffff;
148119
}
149120

150121
.ImportButton:hover {
151-
background-color: white;
152-
color: black;
153-
}
154-
155-
.ImportButton:hover span {
156-
padding-right: 25px;
122+
background-color: #1572D1;
157123
}
158124

159-
.ImportButton:hover span:after {
160-
opacity: 1;
161-
right: 0;
125+
.ImportButtonFile {
126+
display: none;
162127
}
163128

164-
/* ViewSource Button styling */
165129
.ViewSourceButton {
166130
background-color: transparent;
167131
color: black;
168132
border: none;
169-
text-align: center;
170-
font-size: 28px;
171-
padding: 20px;
172-
width: 200px;
173-
transition: all 0.3s;
174-
cursor: pointer;
175-
margin: 5px;
176133
}
177134

178135
.ViewSourceButton span {

‎packages/react-devtools-scheduling-profiler/src/ImportPage.js

Lines changed: 61 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -45,71 +45,68 @@ export default function ImportPage({onDataImported}: Props) {
4545

4646
return (
4747
<div className={style.App}>
48-
<div className={style.container}>
49-
<div className={style.card}>
50-
<div className={style.cardcontainer}>
51-
<div className={style.row}>
52-
<div className={style.column}>
53-
<img
54-
src={profilerBrowser}
55-
className={style.browserScreenshot}
56-
alt="logo"
57-
/>
58-
</div>
59-
<div className={style.columncontent}>
60-
<h2>React Concurrent Mode Profiler</h2>
61-
<hr />
62-
<p>
63-
Import a captured{' '}
64-
<a
65-
className={style.link}
66-
href="https://developers.google.com/web/tools/chrome-devtools/evaluate-performance">
67-
performance profile
68-
</a>{' '}
69-
from Chrome Devtools.
70-
<br />
71-
To zoom, scroll while holding down <kbd>Ctrl</kbd> or{' '}
72-
<kbd>Shift</kbd>
73-
</p>
74-
<p className={style.legendKey}>
75-
<svg height="20" width="20">
76-
<circle cx="10" cy="10" r="5" fill="#ff718e" />
77-
</svg>
78-
State Update Scheduled
79-
<br />
80-
<svg height="20" width="20">
81-
<circle cx="10" cy="10" r="5" fill="#9fc3f3" />
82-
</svg>
83-
State Update Scheduled
84-
<br />
85-
<svg height="20" width="20">
86-
<circle cx="10" cy="10" r="5" fill="#a6e59f" />
87-
</svg>
88-
Suspended
89-
</p>
48+
<div className={style.Card}>
49+
<div className={style.Row}>
50+
<div className={style.Column}>
51+
<img
52+
src={profilerBrowser}
53+
className={style.Screenshot}
54+
alt="logo"
55+
/>
56+
</div>
57+
<div className={style.Column}>
58+
<h2 className={style.Header}>React Concurrent Mode Profiler</h2>
59+
<p>
60+
Import a captured{' '}
61+
<a
62+
className={style.Link}
63+
href="https://developers.google.com/web/tools/chrome-devtools/evaluate-performance">
64+
performance profile
65+
</a>{' '}
66+
from Chrome Devtools. To zoom, scroll while holding down{' '}
67+
<kbd>Ctrl</kbd> or <kbd>Shift</kbd>
68+
</p>
69+
<ul className={style.LegendKey}>
70+
<li className={style.LegendItem}>
71+
<svg height="20" width="20">
72+
<circle cx="10" cy="10" r="5" fill="#ff718e" />
73+
</svg>
74+
State Update Scheduled
75+
</li>
76+
<li className={style.LegendItem}>
77+
<svg height="20" width="20">
78+
<circle cx="10" cy="10" r="5" fill="#9fc3f3" />
79+
</svg>
80+
State Update Scheduled
81+
</li>
82+
<li className={style.LegendItem}>
83+
<svg height="20" width="20">
84+
<circle cx="10" cy="10" r="5" fill="#a6e59f" />
85+
</svg>
86+
Suspended
87+
</li>
88+
</ul>
9089

91-
<div className={style.buttongrp}>
92-
<label htmlFor="upload">
93-
<button
94-
className={style.ImportButton}
95-
onClick={() => upload.current && upload.current.click()}>
96-
Import
97-
</button>
98-
<input
99-
type="file"
100-
ref={upload}
101-
className={style.inputbtn}
102-
onChange={handleProfilerInput}
103-
accept="application/json"
104-
/>
105-
</label>
106-
<a href="https://github.com/MLH-Fellowship/scheduling-profiler-prototype">
107-
<button className={style.ViewSourceButton}>
108-
<span>Source </span>
109-
</button>
110-
</a>
111-
</div>
112-
</div>
90+
<div className={style.Buttons}>
91+
<label htmlFor="upload">
92+
<button
93+
className={style.ImportButton}
94+
onClick={() => upload.current && upload.current.click()}>
95+
Import
96+
</button>
97+
<input
98+
type="file"
99+
ref={upload}
100+
className={style.ImportButtonFile}
101+
onChange={handleProfilerInput}
102+
accept="application/json"
103+
/>
104+
</label>
105+
<a href="https://github.com/facebook/react/tree/master/packages/react-devtools-scheduling-profiler">
106+
<button className={style.ViewSourceButton}>
107+
<span>Source </span>
108+
</button>
109+
</a>
113110
</div>
114111
</div>
115112
</div>

0 commit comments

Comments
 (0)