Skip to content

Commit

Permalink
Tweaked landing page styles (#19665)
Browse files Browse the repository at this point in the history 
* Tweaked landing page styles

* Update GitHub link

Co-authored-by: E-Liang Tan <eliang@eliangtan.com>
  • Loading branch information
@taneliang
Brian Vaughn and taneliang authored Aug 21, 2020
1 parent 90d212d commit 0386bd0
Show file tree
Hide file tree
Showing 2 changed files with 129 additions and 175 deletions.
179 changes: 68 additions & 111 deletions packages/react-devtools-scheduling-profiler/src/ImportPage.css
View file
Original file line number Diff line number Diff line change
@@ -1,26 +1,56 @@
.App {
min-height: 100vh;
background-color: #282c34;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
padding: 2rem;
}

.container {
.Card {
display: flex;
flex: 0 1 1000px;
flex-wrap: wrap;
align-items: center;
justify-content: center;
font-size: calc(10px + 1.5vmin);
min-height: 100vh;
}

.link {
color: #282c34;
transition: 0.2s;
font-size: calc(10px + 1.5vmin);
.Card {
background-color: white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
border-radius: 5px;
transition: 0.3s;
}

.Card:hover {
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}

.Row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}

.Column {
margin: 2rem;
margin-right: 0;
display: flex;
flex-direction: column;
flex-basis: 100%;
flex: 1;
}
.link:hover {
color: #61dafb;
.Column:last-of-type {
margin-right: 2rem;
}

.Link {
color: #2683E2;
transition: 0.2s;
font-size: calc(10px + 1.5vmin);
}
.Link:hover {
color: #1572D1;
}

kbd {
Expand All @@ -32,25 +62,31 @@ kbd {
border-radius: 0.2em;
}

/* Landing Graphic */
.browserScreenshot {
.Screenshot {
width: 35rem;
max-width: inherit;
max-width: 100%;
min-width: 25rem;
align-self: center;
justify-content: center;
border: 1px solid #d7dfe4;
border-radius: 0.4em;
box-shadow: 0 2px 4px #ddd;
}

.legendKey {
font-size: calc(8px + 1.5vmin);
.Header {
margin-top: 0px;
}

.LegendKey {
margin: 0;
margin-bottom: 1rem;
margin-bottom: 1.25rem;
list-style: none;
padding: 0;
}

.legendKey > svg {
padding-left: 2rem;
.LegendItem {
display: flex;
align-items: center;
}

@keyframes spin {
Expand All @@ -62,117 +98,38 @@ kbd {
}
}

hr {
margin-top: 0px;
margin-left: 4px;
width: 80%;
}

.row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
}

.column {
padding: 1rem;
display: flex;
flex-direction: column;
flex-basis: 100%;
flex: 1;
}

.columncontent {
display: flex;
flex-direction: column;
flex-basis: 100%;
flex: 1;
text-align: left;
}

/* Card Styling */
.card {
background-color: white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
border-radius: 5px;
transition: 0.3s;
width: 80%;
color: black;
}

.card:hover {
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}

.cardcontainer {
padding: 40px 16px;
}

.inputbtn {
display: none;
}

.buttongrp {
.Buttons {
float: left; /* Float the buttons side by side */
}

/* Import Button Styling */
.ImportButton {
background-color: #61dafb;
border: none;
color: #ffffff;
.ImportButton,
.ViewSourceButton {
width: 10rem;
font-size: 1.5rem;
padding: 1.5rem;
text-align: center;
font-size: 28px;
padding: 20px;
width: 200px;
transition: all 0.3s;
cursor: pointer;
margin: 5px;
}

.ImportButton span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.3s;
}

.ImportButton span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.3s;
.ImportButton {
background-color: #2683E2;
border: none;
color: #ffffff;
}

.ImportButton:hover {
background-color: white;
color: black;
}

.ImportButton:hover span {
padding-right: 25px;
background-color: #1572D1;
}

.ImportButton:hover span:after {
opacity: 1;
right: 0;
.ImportButtonFile {
display: none;
}

/* ViewSource Button styling */
.ViewSourceButton {
background-color: transparent;
color: black;
border: none;
text-align: center;
font-size: 28px;
padding: 20px;
width: 200px;
transition: all 0.3s;
cursor: pointer;
margin: 5px;
}

.ViewSourceButton span {
Expand Down
125 changes: 61 additions & 64 deletions packages/react-devtools-scheduling-profiler/src/ImportPage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,71 +45,68 @@ export default function ImportPage({onDataImported}: Props) {

return (
<div className={style.App}>
<div className={style.container}>
<div className={style.card}>
<div className={style.cardcontainer}>
<div className={style.row}>
<div className={style.column}>
<img
src={profilerBrowser}
className={style.browserScreenshot}
alt="logo"
/>
</div>
<div className={style.columncontent}>
<h2>React Concurrent Mode Profiler</h2>
<hr />
<p>
Import a captured{' '}
<a
className={style.link}
href="https://developers.google.com/web/tools/chrome-devtools/evaluate-performance">
performance profile
</a>{' '}
from Chrome Devtools.
<br />
To zoom, scroll while holding down <kbd>Ctrl</kbd> or{' '}
<kbd>Shift</kbd>
</p>
<p className={style.legendKey}>
<svg height="20" width="20">
<circle cx="10" cy="10" r="5" fill="#ff718e" />
</svg>
State Update Scheduled
<br />
<svg height="20" width="20">
<circle cx="10" cy="10" r="5" fill="#9fc3f3" />
</svg>
State Update Scheduled
<br />
<svg height="20" width="20">
<circle cx="10" cy="10" r="5" fill="#a6e59f" />
</svg>
Suspended
</p>
<div className={style.Card}>
<div className={style.Row}>
<div className={style.Column}>
<img
src={profilerBrowser}
className={style.Screenshot}
alt="logo"
/>
</div>
<div className={style.Column}>
<h2 className={style.Header}>React Concurrent Mode Profiler</h2>
<p>
Import a captured{' '}
<a
className={style.Link}
href="https://developers.google.com/web/tools/chrome-devtools/evaluate-performance">
performance profile
</a>{' '}
from Chrome Devtools. To zoom, scroll while holding down{' '}
<kbd>Ctrl</kbd> or <kbd>Shift</kbd>
</p>
<ul className={style.LegendKey}>
<li className={style.LegendItem}>
<svg height="20" width="20">
<circle cx="10" cy="10" r="5" fill="#ff718e" />
</svg>
State Update Scheduled
</li>
<li className={style.LegendItem}>
<svg height="20" width="20">
<circle cx="10" cy="10" r="5" fill="#9fc3f3" />
</svg>
State Update Scheduled
</li>
<li className={style.LegendItem}>
<svg height="20" width="20">
<circle cx="10" cy="10" r="5" fill="#a6e59f" />
</svg>
Suspended
</li>
</ul>

<div className={style.buttongrp}>
<label htmlFor="upload">
<button
className={style.ImportButton}
onClick={() => upload.current && upload.current.click()}>
Import
</button>
<input
type="file"
ref={upload}
className={style.inputbtn}
onChange={handleProfilerInput}
accept="application/json"
/>
</label>
<a href="https://github.com/MLH-Fellowship/scheduling-profiler-prototype">
<button className={style.ViewSourceButton}>
<span>Source </span>
</button>
</a>
</div>
</div>
<div className={style.Buttons}>
<label htmlFor="upload">
<button
className={style.ImportButton}
onClick={() => upload.current && upload.current.click()}>
Import
</button>
<input
type="file"
ref={upload}
className={style.ImportButtonFile}
onChange={handleProfilerInput}
accept="application/json"
/>
</label>
<a href="https://github.com/facebook/react/tree/master/packages/react-devtools-scheduling-profiler">
<button className={style.ViewSourceButton}>
<span>Source </span>
</button>
</a>
</div>
</div>
</div>
Expand Down

0 comments on commit 0386bd0

Please sign in to comment.