diff --git a/src/devpanel/components/ComponentTiming/ComponentTiming.css b/src/devpanel/components/ComponentTiming/ComponentTiming.css index 1110074..4b7f00f 100644 --- a/src/devpanel/components/ComponentTiming/ComponentTiming.css +++ b/src/devpanel/components/ComponentTiming/ComponentTiming.css @@ -1,19 +1,41 @@ @media only screen { .component-timing--card { - background-color: var(--microsoft-blue); + align-items: center; + background-color: var(--microsoft-blue-lighter); border-radius: 4px; - color: var(--microsoft-white); + display: flex; + justify-content: space-between; margin-bottom: 8px; - padding: 0 8px; text-align: center; width: 100%; } + + .component-timing--detail { + display: flex; + margin: 0 8px; + } + + .component-timing--name { + font-size: 14px; + font-weight: 500; + line-height: 18px; + margin-left: 8px; + overflow: hidden; + text-overflow: ellipsis; + } + + .component-timing--statistic { + font-weight: 700; + } } @media only screen and (min-width: 540px) { .component-timing--card { - margin-bottom: 16px; + margin-bottom: 8px; margin-right: 2px; - max-width: 200px; + } + + .component-timing--statistic { + margin-left: 4px; } } diff --git a/src/devpanel/components/ComponentTiming/ComponentTiming.js b/src/devpanel/components/ComponentTiming/ComponentTiming.js index 87f1e82..77fcd4f 100644 --- a/src/devpanel/components/ComponentTiming/ComponentTiming.js +++ b/src/devpanel/components/ComponentTiming/ComponentTiming.js @@ -5,8 +5,13 @@ import './ComponentTiming.css'; const ComponentTiming = (props) => ( props != null && (props.name != null || props.loadTime != null) &&
Time to load: {props.loadTime} ms
} + {props.name != null &&+ Load time: + {props.loadTime} + ms +
}- Time to load: - 14.2 - ms +
+ + Load time: + + + 14.2 + + ms
- Time to load: - 14.2 - ms +
+ + Load time: + + + 14.2 + + ms