From 36b89523bcf79d3e8a35edd8b86e141a9428a899 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Oliver=20Rikkil=C3=A4?= Date: Fri, 18 Sep 2020 13:21:57 +0300 Subject: [PATCH 1/4] basic layout --- frontend/src/images/chevron-down-white.svg | 1 + frontend/src/images/chevron-down.svg | 2 +- frontend/src/images/chevron-left.svg | 2 +- frontend/src/images/collection-closed.svg | 1 + frontend/src/images/collection-open.svg | 1 + frontend/src/pages/Suite.jsx | 37 ++++++++- frontend/src/pages/Suite.styles.js | 91 ++++++++++++++++++++++ 7 files changed, 131 insertions(+), 4 deletions(-) create mode 100644 frontend/src/images/chevron-down-white.svg create mode 100644 frontend/src/images/collection-closed.svg create mode 100644 frontend/src/images/collection-open.svg diff --git a/frontend/src/images/chevron-down-white.svg b/frontend/src/images/chevron-down-white.svg new file mode 100644 index 00000000..dbad3a13 --- /dev/null +++ b/frontend/src/images/chevron-down-white.svg @@ -0,0 +1 @@ + diff --git a/frontend/src/images/chevron-down.svg b/frontend/src/images/chevron-down.svg index f399749e..9ad00248 100644 --- a/frontend/src/images/chevron-down.svg +++ b/frontend/src/images/chevron-down.svg @@ -1 +1 @@ - \ No newline at end of file + diff --git a/frontend/src/images/chevron-left.svg b/frontend/src/images/chevron-left.svg index 8a213d9b..46d774ab 100644 --- a/frontend/src/images/chevron-left.svg +++ b/frontend/src/images/chevron-left.svg @@ -1 +1 @@ - + \ No newline at end of file diff --git a/frontend/src/images/collection-closed.svg b/frontend/src/images/collection-closed.svg new file mode 100644 index 00000000..52ffe4b5 --- /dev/null +++ b/frontend/src/images/collection-closed.svg @@ -0,0 +1 @@ + diff --git a/frontend/src/images/collection-open.svg b/frontend/src/images/collection-open.svg new file mode 100644 index 00000000..8d9e97d8 --- /dev/null +++ b/frontend/src/images/collection-open.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/src/pages/Suite.jsx b/frontend/src/pages/Suite.jsx index efb736ce..346d6ceb 100644 --- a/frontend/src/pages/Suite.jsx +++ b/frontend/src/pages/Suite.jsx @@ -12,6 +12,7 @@ import Loading from '../components/Loading'; import Header from '../components/header/Header'; import SuiteLogMessage from '../components/SuiteLogMessage'; import SuiteMetadata from '../components/metadata/SuiteMetadata'; +import { ReactComponent as Collection } from '../images/collection-closed.svg'; import { ParentInfoContainer, SuiteNav, @@ -23,6 +24,11 @@ import { ListHeaderColumn, ListTitle, SelectedTestDiv, + HeaderContainer, + Svg, + SvgDown, + TestListContainer, + DotSpan, } from './Suite.styles'; const Suite = () => { @@ -108,7 +114,34 @@ const Suite = () => { - + +

{selectedSuiteState.suite.name} Tests

+

5 tests

+ + + +
    + {' '} + {selectedSuiteState.suite.tests.map( + (test, i) => { + return ( +
  • + + + {test.name} + + {pickIcon(test.status)} + + +
    • + ); + } + )} +
+ + {/* {selectedSuiteState.suite.tests.map((test, i) => { return ( @@ -121,7 +154,7 @@ const Suite = () => { ); })} - + */} Date: Fri, 18 Sep 2020 15:30:44 +0300 Subject: [PATCH 2/4] styling part2 --- frontend/src/components/buildTable/Row.jsx | 4 +- frontend/src/images/chevron-down-white.svg | 2 +- frontend/src/images/chevron-down.svg | 2 +- frontend/src/images/collection-closed.svg | 2 +- frontend/src/images/collection-white.svg | 1 + frontend/src/pages/Suite.jsx | 52 +++++++++++++--------- frontend/src/pages/Suite.styles.js | 48 ++++++++++++++------ 7 files changed, 71 insertions(+), 40 deletions(-) create mode 100644 frontend/src/images/collection-white.svg diff --git a/frontend/src/components/buildTable/Row.jsx b/frontend/src/components/buildTable/Row.jsx index 7a3c6075..409413ab 100644 --- a/frontend/src/components/buildTable/Row.jsx +++ b/frontend/src/components/buildTable/Row.jsx @@ -23,7 +23,7 @@ const Row = ({ test_cases, suite, id, suiteId }) => { ? filteredBuilds[0] : builds[0]; - const testRunTime = build ? build.test_run_time : 'ei ole'; + const testRunTime = build ? build.test_run_time : 'not found'; return ( @@ -44,7 +44,7 @@ const Row = ({ test_cases, suite, id, suiteId }) => { - {(testRunTime / 1000).toFixed(3)}s + {(testRunTime / 1000).toFixed(2)}s diff --git a/frontend/src/images/chevron-down-white.svg b/frontend/src/images/chevron-down-white.svg index dbad3a13..4d3f3a7c 100644 --- a/frontend/src/images/chevron-down-white.svg +++ b/frontend/src/images/chevron-down-white.svg @@ -1 +1 @@ - + \ No newline at end of file diff --git a/frontend/src/images/chevron-down.svg b/frontend/src/images/chevron-down.svg index 9ad00248..f399749e 100644 --- a/frontend/src/images/chevron-down.svg +++ b/frontend/src/images/chevron-down.svg @@ -1 +1 @@ - + \ No newline at end of file diff --git a/frontend/src/images/collection-closed.svg b/frontend/src/images/collection-closed.svg index 52ffe4b5..814e475a 100644 --- a/frontend/src/images/collection-closed.svg +++ b/frontend/src/images/collection-closed.svg @@ -1 +1 @@ - + \ No newline at end of file diff --git a/frontend/src/images/collection-white.svg b/frontend/src/images/collection-white.svg new file mode 100644 index 00000000..13a57556 --- /dev/null +++ b/frontend/src/images/collection-white.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/src/pages/Suite.jsx b/frontend/src/pages/Suite.jsx index 346d6ceb..250b0e27 100644 --- a/frontend/src/pages/Suite.jsx +++ b/frontend/src/pages/Suite.jsx @@ -12,7 +12,7 @@ import Loading from '../components/Loading'; import Header from '../components/header/Header'; import SuiteLogMessage from '../components/SuiteLogMessage'; import SuiteMetadata from '../components/metadata/SuiteMetadata'; -import { ReactComponent as Collection } from '../images/collection-closed.svg'; +import { ReactComponent as Collection } from '../images/collection-white.svg'; import { ParentInfoContainer, SuiteNav, @@ -25,10 +25,13 @@ import { ListTitle, SelectedTestDiv, HeaderContainer, - Svg, + SvgCollection, SvgDown, TestListContainer, DotSpan, + TestStatusRow, + SvgStatus, + TagContainer, } from './Suite.styles'; const Suite = () => { @@ -115,6 +118,7 @@ const Suite = () => { +

{selectedSuiteState.suite.name} Tests

5 tests

@@ -127,34 +131,38 @@ const Suite = () => { return (
  • - - {test.name} - + + {' '} + + {test.name} + + {pickIcon(test.status)} + + + {( + test.elapsed / 1000 + ).toFixed(2)} + s - + {test.tags.map((tag, i) => { + return ( + + {tag} + + ); + })} +
    • ); } )} - {/* - {selectedSuiteState.suite.tests.map((test, i) => { - return ( - - - {test.name} - {pickIcon(test.status)} - - - ); - })} - */}     Date: Fri, 18 Sep 2020 21:47:20 +0300 Subject: [PATCH 3/4] stylings vol3 --- frontend/src/pages/Suite.jsx | 86 ++++++++++++------------------ frontend/src/pages/Suite.styles.js | 68 +++++++++++------------ 2 files changed, 64 insertions(+), 90 deletions(-) diff --git a/frontend/src/pages/Suite.jsx b/frontend/src/pages/Suite.jsx index 250b0e27..0d47cf9b 100644 --- a/frontend/src/pages/Suite.jsx +++ b/frontend/src/pages/Suite.jsx @@ -12,16 +12,12 @@ import Loading from '../components/Loading'; import Header from '../components/header/Header'; import SuiteLogMessage from '../components/SuiteLogMessage'; import SuiteMetadata from '../components/metadata/SuiteMetadata'; -import { ReactComponent as Collection } from '../images/collection-white.svg'; import { ParentInfoContainer, - SuiteNav, - SuiteDiv, StyledLink, FlexContainer, StyledFont, FlexGrowColumn, - ListHeaderColumn, ListTitle, SelectedTestDiv, HeaderContainer, @@ -32,6 +28,8 @@ import { TestStatusRow, SvgStatus, TagContainer, + Tag, + TimeContainer, } from './Suite.styles'; const Suite = () => { @@ -120,7 +118,11 @@ const Suite = () => {

    {selectedSuiteState.suite.name} Tests

    -

    5 tests

    +

    + {selectedSuiteState.suite.tests.length} test + {selectedSuiteState.suite.tests.length > 1 && + 's'} +

    @@ -130,10 +132,19 @@ const Suite = () => { (test, i) => { return (
  • - + {' '} {test.name} @@ -141,21 +152,26 @@ const Suite = () => { {pickIcon(test.status)} - + {( test.elapsed / 1000 ).toFixed(2)} s - - {test.tags.map((tag, i) => { - return ( - - {tag} - - ); - })} + + + {' '} + {test.tags.map( + (tag, i) => { + return ( + + {tag} + + ); + } + )} +
    • ); @@ -180,42 +196,6 @@ const Suite = () => { const SelectedTest = ({ test }) => { return test ? (
    - - - - - Name - - -
  • - - {test.name} -
    • -     -     - - - - Tags - - - {test.tags.map((tag, i) => { - return
  • {tag}
    • ; - })} -     -     - - - - Statuses - - -
  • Setup: {test.setup_status}
    • -
  • Execution: {test.execution_status}
    • -
  • Teardown: {test.teardown_status}
    • -     -     -     diff --git a/frontend/src/pages/Suite.styles.js b/frontend/src/pages/Suite.styles.js index 4e65f317..86aee4a0 100644 --- a/frontend/src/pages/Suite.styles.js +++ b/frontend/src/pages/Suite.styles.js @@ -1,4 +1,5 @@ -import styled from 'styled-components'; +import React from 'react'; +import styled from 'styled-components'; import FA from 'react-fontawesome'; import { NavLink } from 'react-router-dom'; import { ReactComponent as Collection } from '../images/collection-white.svg'; @@ -10,38 +11,20 @@ export const ParentInfoContainer = styled.div` padding: 20px 0; `; -export const SuiteNav = styled.div` - list-style: none; - padding: 0; - align-content: center; - border-right: 1px solid grey; - flex-grow: 1; - - span { - float: right; - margin-left: 12px; - } - .active { - background: #fff; - } -`; - -export const SuiteDiv = styled.div` - display: flex; - width: 100%; - min-width: 140px; -`; - -export const StyledLink = styled(NavLink)` - width: 100%; - padding: 10px; +// eslint-disable-next-line no-unused-vars +export const StyledLink = styled(({ isselected, ...props }) => ( + +))` + padding: 4px; font-weight: bolder; cursor: pointer; display: inline; text-decoration: none; + flex: 2; + color: ${props => props.isselected && 'var(--pirlo-blue) !important'}; :hover { - background: #ddd; + background: var(--tonic-grey); } `; @@ -62,14 +45,6 @@ export const FlexGrowColumn = styled.div` padding: 5px; `; -export const ListHeaderColumn = styled.ul` - list-style: none; - padding-left: 0px; - display: flex; - flex-direction: column; - padding: 5px; -`; - export const ListTitle = styled.div` color: grey; `; @@ -182,13 +157,15 @@ export const TestListContainer = styled.div` ul li:last-child:before { border-left: 1px solid var(--tonic-grey); + width: 33px; } `; export const DotSpan = styled.span` height: 9px; width: 9px; - background-color: var(--tonic-grey); + background-color: ${props => + props.isselected ? 'var(--pirlo-blue)' : 'var(--tonic-grey)'}; border-radius: 50%; display: inline-block; position: relative; @@ -197,7 +174,6 @@ export const DotSpan = styled.span` export const TestStatusRow = styled.div` display: inline-flex; - justify-content: space-evenly; flex-direction: row; width: 80%; align-items: center; @@ -210,11 +186,29 @@ export const TestStatusRow = styled.div` export const SvgStatus = styled.span` position: relative; top: -2px; + flex: 0.5; +`; + +export const TimeContainer = styled.span` + flex: 0.5; `; export const TagContainer = styled.span` + flex: 3; + + @media only screen and (max-width: 1300px) { + flex: 2; + } + + @media only screen and (max-width: 1024px) { + flex: 1; + } +`; + +export const Tag = styled.span` border: 1px solid var(--evidence-grey); padding: 0 8px; border-radius: 16px; font-size: 10px; + margin: 0 8px; `; From edc14fdc295fd4e9388e1e14ce1fc762cd7824e0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Oliver=20Rikkil=C3=A4?= Date: Fri, 18 Sep 2020 22:44:32 +0300 Subject: [PATCH 4/4] final styles --- frontend/src/components/suite/Testlist.jsx | 79 ++++++++ .../src/components/suite/Testlist.styles.js | 175 ++++++++++++++++++ frontend/src/images/chevron-down-white.svg | 2 +- frontend/src/images/chevron-up-white.svg | 1 + frontend/src/pages/Suite.jsx | 80 +------- frontend/src/pages/Suite.styles.js | 157 +--------------- 6 files changed, 259 insertions(+), 235 deletions(-) create mode 100644 frontend/src/components/suite/Testlist.jsx create mode 100644 frontend/src/components/suite/Testlist.styles.js create mode 100644 frontend/src/images/chevron-up-white.svg diff --git a/frontend/src/components/suite/Testlist.jsx b/frontend/src/components/suite/Testlist.jsx new file mode 100644 index 00000000..b2089b72 --- /dev/null +++ b/frontend/src/components/suite/Testlist.jsx @@ -0,0 +1,79 @@ +import React, { useState } from 'react'; +import { useParams } from 'react-router'; +import { pickIcon } from '../TestIcon'; +import { + FlexContainer, + HeaderContainer, + SvgCollection, + SvgDown, + SvgUp, + TestListContainer, + DotSpan, + TestStatusRow, + StyledLink, + SvgStatus, + TimeContainer, + TagContainer, + Tag, +} from './Testlist.styles'; + +const Testlist = ({ suite }) => { + const { suiteId, buildId, seriesId, testId } = useParams(); + const [Open, setOpen] = useState(true); + + return ( + + setOpen(!Open)} + onKeyPress={() => setOpen(!Open)} + > + +

    {suite.name} Tests

    +

    + {suite.tests.length} test + {suite.tests.length > 1 && 's'} +

    + {Open ? : } +     + +
      + {' '} + {suite.tests.map((test, i) => { + return ( +
    • + + + {' '} + + {test.name} + + + {pickIcon(test.status)} + + + {(test.elapsed / 1000).toFixed(2)}s + + + {' '} + {test.tags.map((tag, i) => { + return {tag}; + })} + + +
      • + ); + })} +
    +     +     + ); +}; + +export default Testlist; diff --git a/frontend/src/components/suite/Testlist.styles.js b/frontend/src/components/suite/Testlist.styles.js new file mode 100644 index 00000000..62a888b2 --- /dev/null +++ b/frontend/src/components/suite/Testlist.styles.js @@ -0,0 +1,175 @@ +import React from 'react'; +import styled from 'styled-components'; +import { NavLink } from 'react-router-dom'; +import { ReactComponent as Collection } from '../../images/collection-white.svg'; +import { ReactComponent as Up } from '../../images/chevron-up-white.svg'; +import { ReactComponent as Down } from '../../images/chevron-down-white.svg'; + +export const FlexContainer = styled.div` + display: flex; + flex-direction: column; + padding: 40px 0px; + :hover { + cursor: pointer; + } + + .Open, + .Close { + max-height: 0; + overflow-y: hidden; + } + + .Open { + max-height: 100%; + } +`; + +export const HeaderContainer = styled.div` + background: var(--titan-green); + display: flex; + align-items: center; + flex-direction: row; + justify-content: space-between; + border-radius: 48px; + width: 100%; + color: var(--nero-white); + + h3 { + font-size: 20px; + font-family: 'Space Mono'; + letter-spacing: -0.04em; + font-style: normal; + font-weight: normal; + flex: 20; + padding-left: 56px; + } + + p { + flex: 2; + } +`; + +export const SvgCollection = styled(Collection)` + position: relative; + left: 24px; +`; + +export const SvgDown = styled(Down)` + color: white; + flex: 1; +`; + +export const SvgUp = styled(Up)` + color: white; + flex: 1; +`; + +export const TestListContainer = styled.div` + padding-left: 24px; + + ul { + list-style: none; + margin: 0; + padding: 0; + margin-left: 10px; + } + + ul li { + margin: 0; + padding: 0 7px; + border-left: 1px solid var(--tonic-grey); + } + + ul li:last-child { + border-left: none; + } + + ul li:before { + position: relative; + top: -0.3em; + height: 2.4em; + width: 32px; + color: white; + border-bottom: 1px solid var(--tonic-grey); + content: ''; + display: inline-block; + left: -7px; + } + ul li:first-child:before { + height: 3.2em; + } + + ul li:last-child:before { + border-left: 1px solid var(--tonic-grey); + width: 33px; + } +`; + +export const DotSpan = styled.span` + height: 9px; + width: 9px; + background-color: ${props => + props.isselected ? 'var(--pirlo-blue)' : 'var(--tonic-grey)'}; + border-radius: 50%; + display: inline-block; + position: relative; + left: -7px; +`; + +export const TestStatusRow = styled.div` + display: inline-flex; + flex-direction: row; + width: 80%; + align-items: center; + + span { + color: var(--evidence-grey); + } +`; + +// eslint-disable-next-line no-unused-vars +export const StyledLink = styled(({ isselected, ...props }) => ( + +))` + padding: 4px; + font-weight: bolder; + cursor: pointer; + display: inline; + text-decoration: none; + flex: 2; + color: ${props => props.isselected && 'var(--pirlo-blue) !important'}; + + :hover { + background: var(--tonic-grey); + } +`; + +export const SvgStatus = styled.span` + position: relative; + top: -2px; + flex: 0.5; +`; + +export const TimeContainer = styled.span` + flex: 0.5; +`; + +export const TagContainer = styled.span` + flex: 3; + + @media only screen and (max-width: 1300px) { + flex: 2; + } + + @media only screen and (max-width: 1024px) { + flex: 1; + } +`; + +export const Tag = styled.span` + border: 1px solid var(--evidence-grey); + padding: 0 8px; + border-radius: 16px; + font-size: 10px; + margin: 0 8px; +`; diff --git a/frontend/src/images/chevron-down-white.svg b/frontend/src/images/chevron-down-white.svg index 4d3f3a7c..5b96efa3 100644 --- a/frontend/src/images/chevron-down-white.svg +++ b/frontend/src/images/chevron-down-white.svg @@ -1 +1 @@ - \ No newline at end of file + diff --git a/frontend/src/images/chevron-up-white.svg b/frontend/src/images/chevron-up-white.svg new file mode 100644 index 00000000..cdc087ba --- /dev/null +++ b/frontend/src/images/chevron-up-white.svg @@ -0,0 +1 @@ + diff --git a/frontend/src/pages/Suite.jsx b/frontend/src/pages/Suite.jsx index 0d47cf9b..3ab9deea 100644 --- a/frontend/src/pages/Suite.jsx +++ b/frontend/src/pages/Suite.jsx @@ -12,24 +12,13 @@ import Loading from '../components/Loading'; import Header from '../components/header/Header'; import SuiteLogMessage from '../components/SuiteLogMessage'; import SuiteMetadata from '../components/metadata/SuiteMetadata'; +import TestList from '../components/suite/Testlist'; import { ParentInfoContainer, - StyledLink, - FlexContainer, StyledFont, FlexGrowColumn, ListTitle, SelectedTestDiv, - HeaderContainer, - SvgCollection, - SvgDown, - TestListContainer, - DotSpan, - TestStatusRow, - SvgStatus, - TagContainer, - Tag, - TimeContainer, } from './Suite.styles'; const Suite = () => { @@ -114,72 +103,7 @@ const Suite = () => { - - - -

    {selectedSuiteState.suite.name} Tests

    -

    - {selectedSuiteState.suite.tests.length} test - {selectedSuiteState.suite.tests.length > 1 && - 's'} -

    - -     - -
      - {' '} - {selectedSuiteState.suite.tests.map( - (test, i) => { - return ( -
    • - - - {' '} - - {test.name} - - - {pickIcon(test.status)} - - - {( - test.elapsed / 1000 - ).toFixed(2)} - s - - - {' '} - {test.tags.map( - (tag, i) => { - return ( - - {tag} - - ); - } - )} - - -
      • - ); - } - )} -
    -     -     + i.id === parseInt(testId, 10) diff --git a/frontend/src/pages/Suite.styles.js b/frontend/src/pages/Suite.styles.js index 86aee4a0..f04aa1c6 100644 --- a/frontend/src/pages/Suite.styles.js +++ b/frontend/src/pages/Suite.styles.js @@ -1,39 +1,11 @@ -import React from 'react'; -import styled from 'styled-components'; +import styled from 'styled-components'; import FA from 'react-fontawesome'; -import { NavLink } from 'react-router-dom'; -import { ReactComponent as Collection } from '../images/collection-white.svg'; -import { ReactComponent as Up } from '../images/chevron-up.svg'; -import { ReactComponent as Down } from '../images/chevron-down-white.svg'; export const ParentInfoContainer = styled.div` display: flex; padding: 20px 0; `; -// eslint-disable-next-line no-unused-vars -export const StyledLink = styled(({ isselected, ...props }) => ( - -))` - padding: 4px; - font-weight: bolder; - cursor: pointer; - display: inline; - text-decoration: none; - flex: 2; - color: ${props => props.isselected && 'var(--pirlo-blue) !important'}; - - :hover { - background: var(--tonic-grey); - } -`; - -export const FlexContainer = styled.div` - display: flex; - flex-direction: column; - padding: 40px 0px; -`; - export const StyledFont = styled(FA)` margin-right: 8px; `; @@ -85,130 +57,3 @@ export const SelectedTestDiv = styled.div` width: 30%; } `; -export const HeaderContainer = styled.div` - background: var(--titan-green); - display: flex; - align-items: center; - flex-direction: row; - justify-content: space-between; - border-radius: 48px; - width: 100%; - color: var(--nero-white); - - h3 { - font-size: 20px; - font-family: 'Space Mono'; - letter-spacing: -0.04em; - font-style: normal; - font-weight: normal; - flex: 20; - padding-left: 56px; - } - - p { - flex: 2; - } -`; - -export const SvgCollection = styled(Collection)` - position: relative; - left: 24px; -`; - -export const SvgDown = styled(Down)` - color: white; - flex: 1; -`; - -export const TestListContainer = styled.div` - padding-left: 24px; - - ul { - list-style: none; - margin: 0; - padding: 0; - margin-left: 10px; - } - - ul li { - margin: 0; - padding: 0 7px; - border-left: 1px solid var(--tonic-grey); - } - - ul li:last-child { - border-left: none; - } - - ul li:before { - position: relative; - top: -0.3em; - height: 2.4em; - width: 32px; - color: white; - border-bottom: 1px solid var(--tonic-grey); - content: ''; - display: inline-block; - left: -7px; - } - ul li:first-child:before { - height: 3.2em; - } - - ul li:last-child:before { - border-left: 1px solid var(--tonic-grey); - width: 33px; - } -`; - -export const DotSpan = styled.span` - height: 9px; - width: 9px; - background-color: ${props => - props.isselected ? 'var(--pirlo-blue)' : 'var(--tonic-grey)'}; - border-radius: 50%; - display: inline-block; - position: relative; - left: -7px; -`; - -export const TestStatusRow = styled.div` - display: inline-flex; - flex-direction: row; - width: 80%; - align-items: center; - - span { - color: var(--evidence-grey); - } -`; - -export const SvgStatus = styled.span` - position: relative; - top: -2px; - flex: 0.5; -`; - -export const TimeContainer = styled.span` - flex: 0.5; -`; - -export const TagContainer = styled.span` - flex: 3; - - @media only screen and (max-width: 1300px) { - flex: 2; - } - - @media only screen and (max-width: 1024px) { - flex: 1; - } -`; - -export const Tag = styled.span` - border: 1px solid var(--evidence-grey); - padding: 0 8px; - border-radius: 16px; - font-size: 10px; - margin: 0 8px; -`;