diff --git a/package.json b/package.json index b0eda902..41bf39f4 100644 --- a/package.json +++ b/package.json @@ -50,22 +50,17 @@ "keyword-spacing": [ "error", { - "overrides": - { - "if": - { + "overrides": { + "if": { "after": false }, - "for": - { + "for": { "after": false }, - "while": - { + "while": { "after": false }, - "switch": - { + "switch": { "after": false } } @@ -96,8 +91,7 @@ "@typescript-eslint/ban-types": [ "error", { - "types": - { + "types": { "String": true, "Boolean": true, "Number": true, diff --git a/src/layout/card/grid/item/NitroCardGridItemView.scss b/src/layout/card/grid/item/NitroCardGridItemView.scss index b2959864..666b8bbd 100644 --- a/src/layout/card/grid/item/NitroCardGridItemView.scss +++ b/src/layout/card/grid/item/NitroCardGridItemView.scss @@ -9,8 +9,6 @@ position: relative; width: 100%; height: 100%; - background-position: center; - background-repeat: no-repeat; overflow: hidden; &.theme-default { @@ -69,6 +67,15 @@ background-position-y: 12px !important; } + .background { + background-position: center; + background-repeat: no-repeat; + + &.disabled { + opacity: 0.5; + } + } + .trade-button { position: absolute; bottom: 2px; diff --git a/src/layout/card/grid/item/NitroCardGridItemView.tsx b/src/layout/card/grid/item/NitroCardGridItemView.tsx index a1e4b253..7abf615c 100644 --- a/src/layout/card/grid/item/NitroCardGridItemView.tsx +++ b/src/layout/card/grid/item/NitroCardGridItemView.tsx @@ -1,3 +1,4 @@ +import classNames from 'classnames'; import { FC } from 'react'; import { LimitedEditionStyledNumberView } from '../../../../views/shared/limited-edition/styled-number/LimitedEditionStyledNumberView'; import { useNitroCardGridContext } from '../context'; @@ -6,14 +7,15 @@ import { NitroCardGridItemViewProps } from './NitroCardGridItemView.types'; export const NitroCardGridItemView: FC = props => { - const { itemImage = undefined, itemColor = undefined, itemActive = false, itemCount = 1, itemUnique = false, itemUniqueNumber = 0, itemUnseen = false, columns = undefined, className = '', style = {}, children = null, ...rest } = props; + const { itemImage = undefined, itemColor = undefined, itemActive = false, itemCount = 1, itemUnique = false, itemUniqueNumber = 0, itemUnseen = false, columns = undefined, className = '', style = {}, backgroundDisabled = false, children = null, ...rest } = props; const { theme = NitroCardGridThemes.THEME_DEFAULT } = useNitroCardGridContext(); const imageUrl = `url(${ itemImage })`; return (
-
+
+
{ (itemCount > 1) && { itemCount } } { itemUnique && diff --git a/src/layout/card/grid/item/NitroCardGridItemView.types.ts b/src/layout/card/grid/item/NitroCardGridItemView.types.ts index bf005811..385101e4 100644 --- a/src/layout/card/grid/item/NitroCardGridItemView.types.ts +++ b/src/layout/card/grid/item/NitroCardGridItemView.types.ts @@ -10,4 +10,5 @@ export interface NitroCardGridItemViewProps extends DetailsHTMLAttributes onClick(partItem) }> + onClick(partItem) }> { partItem.isHC && } { partItem.isClear && } { partItem.isSellable && }