diff --git a/frontend/src/components/BreadcrumbNav.jsx b/frontend/src/components/BreadcrumbNav.jsx index 8db05c9b..13290221 100644 --- a/frontend/src/components/BreadcrumbNav.jsx +++ b/frontend/src/components/BreadcrumbNav.jsx @@ -45,19 +45,19 @@ const ListItems = ({ status }) => { .set('series', { to: `/series/${seriesName}/overview`, id: 'SeriesBreadCrumb', - ariaLabel: `series ${selectedBranchState.name}`, + ariaLabel: `${selectedBranchState.name}: series' name`, name: selectedBranchState.name, }) .set('build', { to: `/series/${seriesId}/build/${buildId}/overview`, id: 'BuildBreadCrumb', - ariaLabel: `build id ${buildId}`, + ariaLabel: `${buildId}: build's id`, name: buildId, }) .set('suite', { to: `/series/${seriesId}/build/${buildId}/suite/${suiteId}/history`, id: 'SuiteBreadCrumb', - ariaLabel: `suite id ${suiteId}`, + ariaLabel: `${suiteId}: suite's id`, name: suiteId, }); @@ -93,6 +93,8 @@ const ListItems = ({ status }) => { ); break; + default: + breadcrumbArray.push(''); } return breadcrumbArray; diff --git a/frontend/src/components/Footer.jsx b/frontend/src/components/Footer.jsx index ac44a8fd..27689a57 100644 --- a/frontend/src/components/Footer.jsx +++ b/frontend/src/components/Footer.jsx @@ -8,16 +8,20 @@ const Footer = () => { return ( - diff --git a/frontend/src/components/Footer.styles.js b/frontend/src/components/Footer.styles.js index 85d2df70..84d8fa2b 100644 --- a/frontend/src/components/Footer.styles.js +++ b/frontend/src/components/Footer.styles.js @@ -6,11 +6,11 @@ export const FooterContainer = styled.footer` color: var(--nero-white); display: flex; align-items: center; - height: var(--space-48); + min-height: var(--space-48); a { background-color: var(--titan-green); - color: var(--nero-white) !important; + color: var(--nero-white); &:focus { outline-color: var(--nero-white); @@ -32,5 +32,6 @@ export const EpiIcon = styled.span` `; export const TextStyles = styled.span` + margin-right: var(--space-8); margin-left: var(--space-24); `; diff --git a/frontend/src/components/Loading.jsx b/frontend/src/components/Loading.jsx index 0e326a85..711c40e8 100644 --- a/frontend/src/components/Loading.jsx +++ b/frontend/src/components/Loading.jsx @@ -9,7 +9,7 @@ const Loading = () => { aria-label="Loading" aria-relevant="all" > - Loading + ); }; diff --git a/frontend/src/components/Loading.styles.js b/frontend/src/components/Loading.styles.js index f239d9c2..89b54fc4 100644 --- a/frontend/src/components/Loading.styles.js +++ b/frontend/src/components/Loading.styles.js @@ -12,7 +12,7 @@ export const LoadingDiv = styled.div` content: '...'; vertical-align: bottom; display: inline-block; - width: 0px; + width: 0; height: 30px; animation-name: history-loader; animation-duration: 1.5s; diff --git a/frontend/src/components/MainNav.jsx b/frontend/src/components/MainNav.jsx index 00edfa8b..b6e84133 100644 --- a/frontend/src/components/MainNav.jsx +++ b/frontend/src/components/MainNav.jsx @@ -23,7 +23,11 @@ const MainNav = () => { {t('team')} - + {t('github')} diff --git a/frontend/src/components/MainNav.styles.js b/frontend/src/components/MainNav.styles.js index 916d6f4c..c376e148 100644 --- a/frontend/src/components/MainNav.styles.js +++ b/frontend/src/components/MainNav.styles.js @@ -9,8 +9,8 @@ export const NavBar = styled.nav` `; export const SiteLogo = styled.div` - margin: 0px var(--space-24) 0px var(--space-40); - font-family: 'Hack' !important; + margin: 0 var(--space-24) 0 var(--space-40); + font-family: 'Hack'; letter-spacing: 1px; font-size: 30px; font-weight: 700; diff --git a/frontend/src/components/accordion/Accordion.jsx b/frontend/src/components/accordion/Accordion.jsx index ed30e3a8..ec655961 100644 --- a/frontend/src/components/accordion/Accordion.jsx +++ b/frontend/src/components/accordion/Accordion.jsx @@ -9,7 +9,7 @@ import { } from './Accordion.styles'; import { ReactComponent as Up } from '../../images/chevron-up.svg'; import { ReactComponent as Down } from '../../images/chevron-down.svg'; -import { SimpleTable } from '../table/Table.styles'; +import { NarrowTh, SimpleTable } from '../table/Table.styles'; const Accordion = ({ header, name, value }) => { const [t] = useTranslation(['accordion']); @@ -38,7 +38,7 @@ const Accordion = ({ header, name, value }) => { - {t('name')} + {t('name')} {t('value')} @@ -49,7 +49,13 @@ const Accordion = ({ header, name, value }) => { {item.value.includes('Http') || item.value.includes('http') ? ( - {item.value} + + {item.value} + ) : ( {item.value} )} diff --git a/frontend/src/components/accordion/Accordion.styles.js b/frontend/src/components/accordion/Accordion.styles.js index 17ef3d9a..649ca0f1 100644 --- a/frontend/src/components/accordion/Accordion.styles.js +++ b/frontend/src/components/accordion/Accordion.styles.js @@ -67,7 +67,7 @@ export const Content = styled.div` word-break: break-word; th:first-of-type { - min-width: 150px; + min-width: 110px; } } `; diff --git a/frontend/src/components/attributeTag/AttributeTag.styles.js b/frontend/src/components/attributeTag/AttributeTag.styles.js index ca0a01ad..2bee6dba 100644 --- a/frontend/src/components/attributeTag/AttributeTag.styles.js +++ b/frontend/src/components/attributeTag/AttributeTag.styles.js @@ -1,10 +1,10 @@ import styled from 'styled-components'; export const AttributeTagContainer = styled.div` - padding: 0 8px; - border-radius: 8px; + padding: 0 var(--space-8); + border-radius: var(--space-8); font-size: 10px; - margin: 0 8px; + margin: 0 var(--space-8); display: inline-block; line-height: 14px; white-space: nowrap; diff --git a/frontend/src/components/buildTable/Error.styles.js b/frontend/src/components/buildTable/Error.styles.js index 0bc8d3b5..7b72294b 100644 --- a/frontend/src/components/buildTable/Error.styles.js +++ b/frontend/src/components/buildTable/Error.styles.js @@ -6,6 +6,6 @@ export const ErrorMsg = styled.td` & > span { display: block; background: ${props => - props.build.status === 'FAIL' && 'var(--arabia-red) !important'}; + props.build.status === 'FAIL' && 'var(--arabia-red)'}; } `; diff --git a/frontend/src/components/buttons/LastRunCheckbox.styles.js b/frontend/src/components/buttons/LastRunCheckbox.styles.js index 3dba3049..b462c205 100644 --- a/frontend/src/components/buttons/LastRunCheckbox.styles.js +++ b/frontend/src/components/buttons/LastRunCheckbox.styles.js @@ -8,7 +8,7 @@ export const Header = styled.div` export const StyledDiv = styled.div` display: flex; flex-direction: ${props => props.direction}; - border: 1px solid var(--tonic-grey); + border: 1px solid var(--evidence-grey); border-radius: var(--space-4); width: ${props => (props.direction === 'column' ? '10%' : '30%')}; max-width: 230px; diff --git a/frontend/src/components/buttons/OffSetButtons.jsx b/frontend/src/components/buttons/OffSetButtons.jsx index 69dc30aa..f73b43e6 100644 --- a/frontend/src/components/buttons/OffSetButtons.jsx +++ b/frontend/src/components/buttons/OffSetButtons.jsx @@ -108,6 +108,7 @@ const Offset = () => { onClick={() => handleDirectionButtonPress('left')} disabled={leftDisabled} id="left_offset_button" + aria-label="<" className={`left${leftDisabled}`} > @@ -122,6 +123,7 @@ const Offset = () => { onClick={() => handleDirectionButtonPress('right')} disabled={rightDisabled} id="right_offset_button" + aria-label=">" className={`right${rightDisabled}`} > diff --git a/frontend/src/components/buttons/OffSetButtons.styles.js b/frontend/src/components/buttons/OffSetButtons.styles.js index 59e95bd7..2455ef73 100644 --- a/frontend/src/components/buttons/OffSetButtons.styles.js +++ b/frontend/src/components/buttons/OffSetButtons.styles.js @@ -15,8 +15,8 @@ export const FlexDiv = styled.div` export const StyledInput = styled.input` border: 1px solid var(--evidence-grey); - border-radius: 4px; - max-width: 54px; + border-radius: var(--space-4); + max-width: var(--space-64); height: var(--space-32); text-align: right; `; diff --git a/frontend/src/components/buttons/button.styles.jsx b/frontend/src/components/buttons/button.styles.jsx index 5adc4dc0..eb7b3eec 100644 --- a/frontend/src/components/buttons/button.styles.jsx +++ b/frontend/src/components/buttons/button.styles.jsx @@ -71,7 +71,7 @@ export const ToggleButton = styled.button` min-width: var(--space-40); padding: 0 var(--space-16); white-space: nowrap; - box-shadow: 0px 3px 3px -1px var(--tonic-grey); + box-shadow: 0 3px 3px -1px var(--tonic-grey); &:hover { background-color: var(--hermanni-grey); diff --git a/frontend/src/components/card/card.styles.js b/frontend/src/components/card/card.styles.js index 88ad325e..b3be607a 100644 --- a/frontend/src/components/card/card.styles.js +++ b/frontend/src/components/card/card.styles.js @@ -87,7 +87,7 @@ export const CardHeading = styled.span` font-size: 20px; font-weight: 500; font-family: 'Noto Serif Semibold'; - line-height: 24px; + line-height: var(--space-24); display: flex; justify-content: space-between; align-items: center; diff --git a/frontend/src/components/dashlist/KeywordAnalysisTable.styles.js b/frontend/src/components/dashlist/KeywordAnalysisTable.styles.js deleted file mode 100644 index 6edbf9a8..00000000 --- a/frontend/src/components/dashlist/KeywordAnalysisTable.styles.js +++ /dev/null @@ -1,37 +0,0 @@ -import styled from 'styled-components'; - -export const StyledTable = styled.table` - position: relative; - border-top: 3px solid var(--hermanni-grey); - width: 100%; - - &::after { - content: ''; - position: absolute; - right: -20px; - top: 0; - display: inline-block; - width: 20px; - height: 100%; - } - - th { - border-bottom: 1px solid var(--hermanni-grey); - padding-left: 5px; - padding-right: 5px; - text-align: left; - } - - td { - border-bottom: 1px solid var(--hermanni-grey); - padding-left: 5px; - padding-right: 5px; - text-align: left; - vertical-align: top; - - &.keyword { - word-break: break-word; - min-width: 300px; - } - } -`; diff --git a/frontend/src/components/graphs/SuiteInstability.js b/frontend/src/components/graphs/SuiteInstability.js index 8fedab25..52f589d0 100644 --- a/frontend/src/components/graphs/SuiteInstability.js +++ b/frontend/src/components/graphs/SuiteInstability.js @@ -9,7 +9,7 @@ import { pickIcon } from '../TestIcon'; import { Table } from '../table/Table'; const canvasStyles = css` - padding: 20px 0px; + padding: 20px 0; summary { display: none; } diff --git a/frontend/src/components/historyTable/Heading.styles.js b/frontend/src/components/historyTable/Heading.styles.js index 60f63f0a..7c2e0082 100644 --- a/frontend/src/components/historyTable/Heading.styles.js +++ b/frontend/src/components/historyTable/Heading.styles.js @@ -5,7 +5,7 @@ export const StyledLink = styled(Link)` display: block; width: 100%; margin: 0; - padding: 0px; + padding: 0; text-align: center; height: 100%; text-decoration: none; diff --git a/frontend/src/components/overview/Build.styles.js b/frontend/src/components/overview/Build.styles.js index dad11853..e471afa3 100644 --- a/frontend/src/components/overview/Build.styles.js +++ b/frontend/src/components/overview/Build.styles.js @@ -22,8 +22,9 @@ export const ChartContainer = styled.div` height: ${props => props.height}; `; -export const ElementHeader = styled.h3` - text-align: center; - margin: 10px; +export const ElementHeader = styled.h2` font-family: 'Hack'; + font-size: 20px; + text-align: center; + margin: 0; `; diff --git a/frontend/src/components/suite/LogMessages.jsx b/frontend/src/components/suite/LogMessages.jsx index 1d223fdd..a1c336e8 100644 --- a/frontend/src/components/suite/LogMessages.jsx +++ b/frontend/src/components/suite/LogMessages.jsx @@ -34,10 +34,7 @@ const LogMessages = ({ test }) => { -
+
{timestamp}
diff --git a/frontend/src/components/suite/SuiteLogMessage.jsx b/frontend/src/components/suite/SuiteLogMessage.jsx index 8a8367f7..34d8f619 100644 --- a/frontend/src/components/suite/SuiteLogMessage.jsx +++ b/frontend/src/components/suite/SuiteLogMessage.jsx @@ -43,7 +43,6 @@ const SuiteLogMessage = ({ message }) => { return ( ( ))` - padding: 0 4px; + padding: 0 var(--space-4); font-weight: bolder; text-decoration: none; flex: 2; - color: ${props => props.isselected && 'var(--pirlo-blue) !important'}; + color: ${props => props.isselected && 'var(--pirlo-blue)'}; outline-offset: -2px; `; export const SvgStatus = styled.span` position: relative; top: -2px; - left: 8px; + left: var(--space-8); flex: 0.5; `; diff --git a/frontend/src/components/table/ScrollTableButton.jsx b/frontend/src/components/table/ScrollTableButton.jsx index f85f3771..0ed15fcd 100644 --- a/frontend/src/components/table/ScrollTableButton.jsx +++ b/frontend/src/components/table/ScrollTableButton.jsx @@ -13,7 +13,7 @@ const ScrollTableButton = props => { onClick={() => props.moveLeft()} disabled={!canScrollLeft} > - > + < props.position !== 0 && 'none !important'}; - &:hover { th { background-color: var(--nero-white); diff --git a/frontend/src/components/tablist/Tab.styles.js b/frontend/src/components/tablist/Tab.styles.js index 420098ca..042732cf 100644 --- a/frontend/src/components/tablist/Tab.styles.js +++ b/frontend/src/components/tablist/Tab.styles.js @@ -10,7 +10,7 @@ export const Tabs = styled.nav` export const TabLink = styled(({ ...props }) => )` display: inline-block; height: 37px; - background: var(--nero-white) !important; + background: var(--nero-white); color: var(--titan-green); position: relative; top: 3px; @@ -18,7 +18,7 @@ export const TabLink = styled(({ ...props }) => )` font-size: var(--space-16); font-weight: bold; line-height: var(--space-24); - text-decoration: none !important; + text-decoration: none; &.active { color: var(--pirlo-blue); @@ -26,7 +26,7 @@ export const TabLink = styled(({ ...props }) => )` height: var(--space-40); } - &:hover { + &:hover:not(.active) { color: var(--titan-green); border-bottom: var(--space-4) solid var(--tonic-grey); height: var(--space-40); diff --git a/frontend/src/index.css b/frontend/src/index.css index 98da86a2..96dea342 100644 --- a/frontend/src/index.css +++ b/frontend/src/index.css @@ -128,7 +128,6 @@ a { } a:hover { - text-decoration: underline; background: var(--hermanni-grey-lighter); color: var(--titan-green-darker); } @@ -139,7 +138,6 @@ a:focus { a:active { color: var(--pirlo-blue); - text-decoration: underline; } button { diff --git a/frontend/src/pages/Build.jsx b/frontend/src/pages/Build.jsx index 7a75c296..df7c6f71 100644 --- a/frontend/src/pages/Build.jsx +++ b/frontend/src/pages/Build.jsx @@ -63,19 +63,11 @@ const Build = () => { return (
{!historyDataState || loadingState ? ( -
- - - - - -
+ + + + + ) : (
{ aria-live="polite" aria-relevant="all" aria-label="Content loaded." - > - Content loaded. -
+ /> diff --git a/frontend/src/pages/Frontpage.jsx b/frontend/src/pages/Frontpage.jsx index 1da18d32..15bc95ab 100644 --- a/frontend/src/pages/Frontpage.jsx +++ b/frontend/src/pages/Frontpage.jsx @@ -35,6 +35,8 @@ const Frontpage = () => { href={t( 'section.terminology.testarchiver.link_url' )} + target="_blank" + rel="noopener noreferrer" > {t( 'section.terminology.testarchiver.link_text' @@ -47,6 +49,8 @@ const Frontpage = () => { href={t( 'section.terminology.chage_engine.link_url' )} + target="_blank" + rel="noopener noreferrer" > {t( 'section.terminology.chage_engine.link_text' @@ -61,26 +65,26 @@ const Frontpage = () => {
{' '} - + {t('section.icons.pass')}
- + {t('section.icons.fail')}
{t('section.icons.skipped')}
{t('section.icons.not_found')}
@@ -96,7 +100,11 @@ const Frontpage = () => {

{t('section.feedback.title')}

{t('section.feedback.text')} - + {t('section.feedback.link_text')} . @@ -105,7 +113,11 @@ const Frontpage = () => {

{t('section.contribute.title')}

{t('section.contribute.text')} - + {t('section.contribute.link_text')} . @@ -113,7 +125,11 @@ const Frontpage = () => {

{t('section.licence.title')}

{t('section.licence.text')} - + {t('section.licence.link_text')} . diff --git a/frontend/src/pages/Frontpage.styles.js b/frontend/src/pages/Frontpage.styles.js index 1eb240a4..c64eef15 100644 --- a/frontend/src/pages/Frontpage.styles.js +++ b/frontend/src/pages/Frontpage.styles.js @@ -9,5 +9,6 @@ export const IconsContainer = styled.div` padding-top: 20px; min-height: 100px; max-width: 150px; + text-align: center; } `; diff --git a/frontend/src/pages/History.jsx b/frontend/src/pages/History.jsx index 6099d3b5..8f606974 100644 --- a/frontend/src/pages/History.jsx +++ b/frontend/src/pages/History.jsx @@ -10,7 +10,7 @@ import { useParams } from 'react-router'; import BreadcrumbNav from '../components/BreadcrumbNav'; import Loading from '../components/Loading'; import { useQueryParams } from '../hooks/useQuery'; -import { RelativeMain, ParentContainer } from './History.styles'; +import { ParentContainer } from './History.styles'; import ContentHeader from '../components/header/ContentHeader'; import { ContainerGrid12, ContentGrid6 } from '../styles/baseComponents'; import { FilterContainer } from '../components/overview/FilterContainer.styles'; @@ -82,7 +82,7 @@ const History = () => { ]); return ( - +

@@ -114,15 +114,13 @@ const History = () => { aria-live="polite" aria-relevant="all" aria-label="Content loaded." - > - Content loaded. -
+ /> )} - +
); }; diff --git a/frontend/src/pages/History.styles.js b/frontend/src/pages/History.styles.js index e457e96e..5c9338d6 100644 --- a/frontend/src/pages/History.styles.js +++ b/frontend/src/pages/History.styles.js @@ -1,9 +1,5 @@ import styled from 'styled-components'; -export const RelativeMain = styled.main` - position: relative; -`; - export const ParentContainer = styled.div` background: var(--hermanni-grey-lighter); `; diff --git a/frontend/src/pages/Suite.jsx b/frontend/src/pages/Suite.jsx index 0f795a17..d3f877ba 100644 --- a/frontend/src/pages/Suite.jsx +++ b/frontend/src/pages/Suite.jsx @@ -70,18 +70,11 @@ const Suite = () => { return (
{!selectedSuiteState || loadingState ? ( -
- - - - - -
+ + + + + ) : selectedSuiteState.suite ? (
{ aria-live="polite" aria-relevant="all" aria-label="Content loaded." - > - Content loaded. -
+ />