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) &&
  • - {props.name != null &&

    {props.name}

    } - {props.loadTime != null &&

    Time to load: {props.loadTime} ms

    } + {props.name != null &&

    {props.name}

    } + {props.loadTime != null && +

    + Load time: + {props.loadTime} + ms +

    }
  • ); diff --git a/src/devpanel/components/ComponentTiming/__snapshots__/ComponentTiming.test.js.snap b/src/devpanel/components/ComponentTiming/__snapshots__/ComponentTiming.test.js.snap index 42fbb1d..7329fa9 100644 --- a/src/devpanel/components/ComponentTiming/__snapshots__/ComponentTiming.test.js.snap +++ b/src/devpanel/components/ComponentTiming/__snapshots__/ComponentTiming.test.js.snap @@ -4,13 +4,25 @@ exports[`ComponentTiming.js should render the componentTiming 1`] = `
  • -

    +

    ComponentName

    -

    - Time to load: - 14.2 - ms +

    + + Load time: + + + 14.2 + + ms

  • `; @@ -19,10 +31,20 @@ exports[`ComponentTiming.js should render the componentTiming with only a loadTi
  • -

    - Time to load: - 14.2 - ms +

    + + Load time: + + + 14.2 + + ms

  • `; @@ -31,7 +53,9 @@ exports[`ComponentTiming.js should render the componentTiming with only a name 1
  • -

    +

    ComponentName

  • diff --git a/src/devpanel/index.css b/src/devpanel/index.css index 9500787..398430a 100644 --- a/src/devpanel/index.css +++ b/src/devpanel/index.css @@ -6,6 +6,7 @@ --microsoft-gray-lightest: #e6e6e6; --microsoft-white: #fff; --microsoft-blue: #0078d7; + --microsoft-blue-lighter: #99d1ff; --microsoft-orange: #d83b01; background-color: var(--microsoft-gray-lightest);