From e0a13135969f32c115e5e3a86445a57013122687 Mon Sep 17 00:00:00 2001 From: vbojilova Date: Tue, 2 Jul 2024 13:27:44 -0700 Subject: [PATCH] fixed style errors and omitted default style rules when needed #556 --- .stylelintrc | 22 ++++++++++++++++++- .../ConnectionPopup.js | 2 +- .../EntityListItemMain/index.js | 1 + .../EntityListNestedReportItem.js | 3 ++- app/components/Header/Brand.js | 11 ++++------ app/components/Header/LinkAccount.js | 1 - app/components/SelectReset/index.js | 1 - app/components/buttons/ButtonCancel.js | 2 +- .../buttons/ButtonDefaultWithIcon/index.js | 5 +---- .../buttons/ButtonTagCategory/index.js | 2 +- .../buttons/ButtonTagCategoryInverse/index.js | 1 + .../categoryList/CategoryListItem/index.js | 2 +- .../categoryList/CategoryListKey/index.js | 2 +- app/components/fields/ShortTitleTag.js | 2 +- app/components/forms/DateControl/styles.js | 1 - app/components/styled/ColumnHeader/index.js | 4 ++-- app/components/styled/SkipContent/index.js | 2 +- app/containers/Overview/HorizontalDiagram.js | 2 +- app/global-styles.js | 19 ++++++++-------- 19 files changed, 49 insertions(+), 36 deletions(-) diff --git a/.stylelintrc b/.stylelintrc index 8001362c2..422a606f5 100644 --- a/.stylelintrc +++ b/.stylelintrc @@ -2,5 +2,25 @@ "extends": [ "stylelint-config-standard" ], - "customSyntax": "postcss-styled-syntax" + "customSyntax": "postcss-styled-syntax", + "rules":{ + "at-rule-empty-line-before": null, + "media-query-no-invalid": null, + "alpha-value-notation": null, + "rule-empty-line-before": null, + "length-zero-no-unit": null, + "declaration-empty-line-before": "never", + "selector-class-pattern": null, + "no-empty-source": null, + "declaration-block-no-redundant-longhand-properties": null, + "color-function-notation": null, + "media-feature-range-notation": null, + "comment-empty-line-before": null, + "color-hex-length": null, + "number-max-precision": null, + "no-descending-specificity": null, + "custom-property-empty-line-before": null, + "shorthand-property-no-redundant-values": null, + "property-no-vendor-prefix": null + } } diff --git a/app/components/EntityListItem/EntityListItemMain/EntityListItemMainBottom/ConnectionPopup.js b/app/components/EntityListItem/EntityListItemMain/EntityListItemMainBottom/ConnectionPopup.js index ec861d08b..ec0396f38 100644 --- a/app/components/EntityListItem/EntityListItemMain/EntityListItemMainBottom/ConnectionPopup.js +++ b/app/components/EntityListItem/EntityListItemMain/EntityListItemMainBottom/ConnectionPopup.js @@ -93,7 +93,7 @@ const TriangleBottom = styled.div` }}%; margin-left: -10px; - &:after { + &::after { content: ""; position: absolute; width: 20px; diff --git a/app/components/EntityListItem/EntityListItemMain/index.js b/app/components/EntityListItem/EntityListItemMain/index.js index ecb47cc68..c55a8bbde 100644 --- a/app/components/EntityListItem/EntityListItemMain/index.js +++ b/app/components/EntityListItem/EntityListItemMain/index.js @@ -84,6 +84,7 @@ const EntityListItemMainTopWrap = styled.div` ? 0 : props.theme.sizes.mainListItem.paddingHorizontal }px; + } `; const EntityListItemMainSubtitle = styled.div` diff --git a/app/components/EntityListNestedList/EntityListNestedItem/EntityListNestedReportItem.js b/app/components/EntityListNestedList/EntityListNestedItem/EntityListNestedReportItem.js index 81c14b4ab..60b2032a2 100644 --- a/app/components/EntityListNestedList/EntityListNestedItem/EntityListNestedReportItem.js +++ b/app/components/EntityListNestedList/EntityListNestedItem/EntityListNestedReportItem.js @@ -71,12 +71,13 @@ const EntityListItemMainTopWrap = styled.div` right: 0; padding-top: 4px; padding-right: 6px; - @media (min-width: ${(props) => props.theme && props.theme.breakpoints ? props.theme.breakpoints.small : '769px'}) { + @media (min-width: ${(props) => props.theme && props.theme.breakpoints ? props.theme.breakpoints.small : '769px'}){ padding-top: ${(props) => props.theme.sizes && props.theme.sizes.mainListItem.paddingTop}px; padding-right: ${(props) => (!props.theme.sizes) ? 0 : props.theme.sizes.mainListItem.paddingHorizontal }px; + } `; const Reference = styled(Label)` diff --git a/app/components/Header/Brand.js b/app/components/Header/Brand.js index d6431cc7a..56f9c43a9 100644 --- a/app/components/Header/Brand.js +++ b/app/components/Header/Brand.js @@ -7,17 +7,14 @@ export default styled.a` left: 0; text-decoration: none; color: ${palette('headerBrand', 0)}; - - &:hover { - color: ${palette('headerBrandHover', 0)}; - opacity: 0.75; - } - z-index: 110; overflow: hidden; - padding-right: 46px; height: ${(props) => props.theme.sizes.header.banner.heightMobile}px; + &:hover { + color: ${palette('headerBrandHover', 0)}; + opacity: 0.75; + } @media (min-width: ${(props) => props.theme.breakpoints.small}) { padding-right: 46px; height: ${(props) => props.theme.sizes.header.banner.height}px; diff --git a/app/components/Header/LinkAccount.js b/app/components/Header/LinkAccount.js index cc1502117..1c14a7be7 100644 --- a/app/components/Header/LinkAccount.js +++ b/app/components/Header/LinkAccount.js @@ -11,5 +11,4 @@ export default styled(LinkSecondary)` color: ${(props) => props.active ? palette('headerNavAccountItemHover', 1) : palette('headerNavAccountItemHover', 0)}; text-decoration: ${(props) => props.active ? 'none' : 'underline'}; } -} `; diff --git a/app/components/SelectReset/index.js b/app/components/SelectReset/index.js index 272418af6..7d7f63f21 100644 --- a/app/components/SelectReset/index.js +++ b/app/components/SelectReset/index.js @@ -43,7 +43,6 @@ const Select = styled.select` } @media print { appearance: none; - text-overflow: ''; text-indent: 0.01px; /* Removes default arrow from firefox */ text-overflow: ""; /* Removes default arrow from firefox */ font-size: ${(props) => props.theme.sizes.print.small}; diff --git a/app/components/buttons/ButtonCancel.js b/app/components/buttons/ButtonCancel.js index eabd3a0f6..f9bda7ded 100644 --- a/app/components/buttons/ButtonCancel.js +++ b/app/components/buttons/ButtonCancel.js @@ -5,7 +5,7 @@ import ButtonForm from './ButtonForm'; const ButtonCancel = styled(ButtonForm)` color: ${palette('buttonCancel', 0)}; - &:hover, &:hover { + &:hover { color: ${palette('buttonCancelHover', 0)}; } `; diff --git a/app/components/buttons/ButtonDefaultWithIcon/index.js b/app/components/buttons/ButtonDefaultWithIcon/index.js index 60a312ed7..2fe127617 100644 --- a/app/components/buttons/ButtonDefaultWithIcon/index.js +++ b/app/components/buttons/ButtonDefaultWithIcon/index.js @@ -51,10 +51,7 @@ const Word = styled.span` return 'inline'; }}; } - ${(props) => props.iconRight - ? '&:after { content: " "; }' - : '&:before { content: " "; }' -} + ${(props) => props.iconRight ? '&::after { content: " "; }' : '&::before { content: " "; }'} `; class ButtonDefaultWithIcon extends React.PureComponent { // eslint-disable-line react/prefer-stateless-function diff --git a/app/components/buttons/ButtonTagCategory/index.js b/app/components/buttons/ButtonTagCategory/index.js index ae2412074..ecd833f58 100644 --- a/app/components/buttons/ButtonTagCategory/index.js +++ b/app/components/buttons/ButtonTagCategory/index.js @@ -29,7 +29,7 @@ const getColor = (props, isHover = false) => { // eslint-disable no-nested-ternary const ButtonTagCategory = styled(Button)` - color: ${(props) => getFontColor(props)}}; + color: ${(props) => getFontColor(props)}; background-color: ${(props) => getColor(props)}; margin-right: 2px; border-radius: ${(props) => props.isSmartTag ? 9999 : 3}px; diff --git a/app/components/buttons/ButtonTagCategoryInverse/index.js b/app/components/buttons/ButtonTagCategoryInverse/index.js index 5f5c4dba9..954a46f3e 100644 --- a/app/components/buttons/ButtonTagCategoryInverse/index.js +++ b/app/components/buttons/ButtonTagCategoryInverse/index.js @@ -51,6 +51,7 @@ const ButtonTagCategoryInverse = styled(Button)` : palette('taxonomiesHover', props.taxId || 0) }; } + } `; export default ButtonTagCategoryInverse; diff --git a/app/components/categoryList/CategoryListItem/index.js b/app/components/categoryList/CategoryListItem/index.js index bc11b5787..4bd4e4f60 100644 --- a/app/components/categoryList/CategoryListItem/index.js +++ b/app/components/categoryList/CategoryListItem/index.js @@ -77,7 +77,7 @@ const Bar = styled.div` } @media print { z-index: 0; - &:before { + &::before { content: ''; display: block; position: absolute; diff --git a/app/components/categoryList/CategoryListKey/index.js b/app/components/categoryList/CategoryListKey/index.js index f78cea135..a646f7e21 100644 --- a/app/components/categoryList/CategoryListKey/index.js +++ b/app/components/categoryList/CategoryListKey/index.js @@ -50,7 +50,7 @@ const Square = styled.div` position: relative; overflow: hidden; z-index: 0; - &:before { + &::before { content: ''; display: block; position: absolute; diff --git a/app/components/fields/ShortTitleTag.js b/app/components/fields/ShortTitleTag.js index 3c5e2d224..1974dc1b1 100644 --- a/app/components/fields/ShortTitleTag.js +++ b/app/components/fields/ShortTitleTag.js @@ -10,7 +10,7 @@ const getFontColor = ({ pIndex }) => { const ShortTitleTag = styled.span` display: inline-block; - color: ${(props) => getFontColor(props)}}; + color: ${(props) => getFontColor(props)}; background-color: ${({ pIndex }) => palette('taxonomies', pIndex || 0)}; padding: 1px 6px; margin-right: 2px; diff --git a/app/components/forms/DateControl/styles.js b/app/components/forms/DateControl/styles.js index 85e29bbd1..944c8fbb0 100644 --- a/app/components/forms/DateControl/styles.js +++ b/app/components/forms/DateControl/styles.js @@ -78,7 +78,6 @@ const DatePickerStyle = createGlobalStyle` } .rdp-cell { - //border: 1px solid #eaecec; text-align: center; cursor: pointer; vertical-align: middle; diff --git a/app/components/styled/ColumnHeader/index.js b/app/components/styled/ColumnHeader/index.js index 9569e15ed..4a516b7fb 100644 --- a/app/components/styled/ColumnHeader/index.js +++ b/app/components/styled/ColumnHeader/index.js @@ -7,7 +7,7 @@ const ColumnHeader = styled.div` padding-left: ${(props) => (props.isSelect) ? 0 : 4 -}px +}px; word-break: break-word; width: ${(props) => props.colWidth}%; position: relative; @@ -38,7 +38,7 @@ const ColumnHeader = styled.div` line-height: 30px; padding-top: 0; padding-bottom: 0; - &:before { + &::before { content: ''; display: block; position: absolute; diff --git a/app/components/styled/SkipContent/index.js b/app/components/styled/SkipContent/index.js index 315e70c01..83939afe6 100644 --- a/app/components/styled/SkipContent/index.js +++ b/app/components/styled/SkipContent/index.js @@ -23,6 +23,6 @@ const SkipContent = styled.a` outline: 1px solid ${palette('primary', 0)}; outline-offset: 0px; } -}`; +`; export default SkipContent; diff --git a/app/containers/Overview/HorizontalDiagram.js b/app/containers/Overview/HorizontalDiagram.js index 3471f9858..4b5219794 100644 --- a/app/containers/Overview/HorizontalDiagram.js +++ b/app/containers/Overview/HorizontalDiagram.js @@ -223,7 +223,7 @@ const DiagramButtonMain = styled(DiagramButton)` } @media (min-width: ${(props) => props.theme.breakpoints.small}) { padding: 0.4em 0.75em 1em; - &:before { + &::before { content: ''; display: inline-block; vertical-align: middle; diff --git a/app/global-styles.js b/app/global-styles.js index bf8226465..af1c178f7 100644 --- a/app/global-styles.js +++ b/app/global-styles.js @@ -12,7 +12,7 @@ const GlobalStyle = createGlobalStyle` /* roboto - 400 - latin */ @font-face { font-display: swap; - font-family: 'Roboto'; + font-family: Roboto; font-style: normal; font-weight: 400; src: url(${Roboto400TTF}) format('truetype'); @@ -20,7 +20,7 @@ const GlobalStyle = createGlobalStyle` /* roboto - 400 - italic - latin */ @font-face { font-display: swap; - font-family: 'Roboto'; + font-family: Roboto; font-style: italic; font-weight: 400; src: url(${Roboto400iTTF}) format('truetype'); @@ -28,7 +28,7 @@ const GlobalStyle = createGlobalStyle` /* roboto - 500 - latin */ @font-face { font-display: swap; - font-family: 'Roboto'; + font-family: Roboto; font-style: normal; font-weight: 500; src: url(${Roboto500TTF}) format('truetype'); @@ -36,7 +36,7 @@ const GlobalStyle = createGlobalStyle` /* roboto - 500 - italic - latin */ @font-face { font-display: swap; - font-family: 'Roboto'; + font-family: Roboto; font-style: italic; font-weight: 500; src: url(${Roboto500iTTF}) format('truetype'); @@ -44,7 +44,7 @@ const GlobalStyle = createGlobalStyle` /* roboto - 700 - latin */ @font-face { font-display: swap; - font-family: 'Roboto'; + font-family: Roboto; font-style: normal; font-weight: 700; src: url(${Roboto700TTF}) format('truetype'); @@ -52,7 +52,7 @@ const GlobalStyle = createGlobalStyle` /* roboto - 700 - italic - latin */ @font-face { font-display: swap; - font-family: 'Roboto'; + font-family: Roboto; font-style: italic; font-weight: 700; src: url(${Roboto700iTTF}) format('truetype'); @@ -64,13 +64,13 @@ const GlobalStyle = createGlobalStyle` width: 100%; } body { - font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif; + font-family: Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.428571429; color: #1c2121;; } button, input, select, textarea { - font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif; + font-family: Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif; background-color: transparent; border-style: none; color: inherit; @@ -100,7 +100,6 @@ const GlobalStyle = createGlobalStyle` text-align: left; color: #0077d8; text-decoration: none; - &:hover { color: #d66149; } @@ -278,7 +277,7 @@ const GlobalStyle = createGlobalStyle` } @media print { @page { - margin: 1.5cm 1.2cm 1.5cm; + margin: 1.5cm 1.2cm; } body { font-size: 10pt;