Tweaked landing page styles (#19665)
* Tweaked landing page styles * Update GitHub link Co-authored-by: E-Liang Tan <eliang@eliangtan.com>
Brian Vaughn committed
Aug 21, 2020 at 14:06 UTC
0386bd0da22cce1608f42072e64b35443eae871b
2 files changed
+129
-175
packages/react-devtools-scheduling-profiler/src/ImportPage.css
+68
-111
@@ -1,26 +1,56 @@
1
.App {
2
+ min-height: 100vh;
3
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;
9
}
10
6
-.container {
11
+.Card {
12
display: flex;
13
+ flex: 0 1 1000px;
14
flex-wrap: wrap;
15
align-items: center;
16
justify-content: center;
11
- font-size: calc(10px + 1.5vmin);
12
- min-height: 100vh;
17
}
18
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;
43
}
20
-.link:hover {
21
- color: #61dafb;
44
+.Column:last-of-type {
45
+ margin-right: 2rem;
46
+}
47
+
48
+.Link {
49
+ color: #2683E2;
50
transition: 0.2s;
23
- font-size: calc(10px + 1.5vmin);
51
+}
52
+.Link:hover {
53
+ color: #1572D1;
54
}
55
56
kbd {
@@ -32,10 +62,10 @@ kbd {
62
border-radius: 0.2em;
63
}
64
35
-/* Landing Graphic */
36
-.browserScreenshot {
65
+.Screenshot {
66
width: 35rem;
38
- max-width: inherit;
67
+ max-width: 100%;
68
+ min-width: 25rem;
69
align-self: center;
70
justify-content: center;
71
border: 1px solid #d7dfe4;
@@ -43,14 +73,20 @@ kbd {
73
box-shadow: 0 2px 4px #ddd;
74
}
75
46
-.legendKey {
47
- font-size: calc(8px + 1.5vmin);
76
+.Header {
77
+ margin-top: 0px;
78
+}
79
+
80
+.LegendKey {
81
margin: 0;
49
- margin-bottom: 1rem;
82
+ margin-bottom: 1.25rem;
83
+ list-style: none;
84
+ padding: 0;
85
}
86
52
-.legendKey > svg {
53
- padding-left: 2rem;
87
+.LegendItem {
88
+ display: flex;
89
+ align-items: center;
90
}
91
92
@keyframes spin {
@@ -62,117 +98,38 @@ kbd {
98
}
99
}
100
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 {
102
float: left; /* Float the buttons side by side */
103
}
104
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;
110
text-align: center;
126
- font-size: 28px;
127
- padding: 20px;
128
- width: 200px;
111
transition: all 0.3s;
112
cursor: pointer;
131
- margin: 5px;
113
}
114
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;
119
}
120
121
.ImportButton:hover {
151
- background-color: white;
152
- color: black;
153
-}
154
-
155
-.ImportButton:hover span {
156
- padding-right: 25px;
122
+ background-color: #1572D1;
123
}
124
159
-.ImportButton:hover span:after {
160
- opacity: 1;
161
- right: 0;
125
+.ImportButtonFile {
126
+ display: none;
127
}
128
164
-/* ViewSource Button styling */
129
.ViewSourceButton {
130
background-color: transparent;
131
color: black;
132
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;
133
}
134
135
.ViewSourceButton span {
packages/react-devtools-scheduling-profiler/src/ImportPage.js
+61
-64
@@ -45,71 +45,68 @@ export default function ImportPage({onDataImported}: Props) {
45
46
return (
47
<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>
89
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>
110
</div>
111
</div>
112
</div>