diff --git a/apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/assets/icons/image-error.component.svg b/apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/assets/icons/image-error.component.svg index b345c64cc7..8706319fd8 100644 --- a/apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/assets/icons/image-error.component.svg +++ b/apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/assets/icons/image-error.component.svg @@ -1,26 +1,5 @@ - - - - - + + + - - - - - - - - - - - - - - - - - - - diff --git a/apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/Card/Classic/index.tsx b/apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/Card/Classic/index.tsx index 13910be978..3ec71b0cd3 100644 --- a/apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/Card/Classic/index.tsx +++ b/apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/Card/Classic/index.tsx @@ -1,47 +1,41 @@ import React from 'react'; import { IogImage } from '../../Image'; -import { IogText } from '../../Typography'; import { IogCardProps } from './types'; -import { IogRow } from '../../Grid'; import './styles.scss'; -import { Divider, Text } from '@input-output-hk/lace-ui-toolkit'; +import { Box, Card, Flex, Text } from '@input-output-hk/lace-ui-toolkit'; export const IogCardClassic: React.FC = ({ onClick, ...props }) => { - const { title, categories, image, description } = props; + const { title, categories, image } = props; return ( -
onClick && onClick()} className="iog-card-container" data-testid={`dapp-grid-app-card-${title}`} role="card" > -
- {image && ( -
- -
- )} - - - {title} - -
- {categories?.map((category) => ( - {category} - ))} -
- -
- - {description && ( -
- - - {description} - -
- )} -
+ + + + + + + + {title} + + + + {categories?.map((category, index) => (categories.length !== index + 1 ? `${category} ` : category))} + + + + + + ); }; diff --git a/apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/Card/Classic/styles.scss b/apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/Card/Classic/styles.scss index 69330f4811..3b1f454656 100644 --- a/apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/Card/Classic/styles.scss +++ b/apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/Card/Classic/styles.scss @@ -1,183 +1,37 @@ @import '../../../styles/theme.scss'; @import '../../../styles/colors.scss'; -@keyframes expandHover { - from { - height: 100px; - top: -1px; - left: -1px; - } - - to { - height: 210px; - left: -20px; - top: -80px; - width: 100%; - background-color: $color-white; - box-shadow: 1px 1px 5px $color-light-grey-plus; - } -} - -@keyframes fadeIn { - 0% { - opacity: 0 - } - - to { - opacity: 1 - } -} - .iog-card-container { cursor: pointer; display: flex; align-items: flex-start; flex-direction: column; - background-color: $color-secondary; - height: 100px; - z-index: 99; - border-radius: 11px; - border: 1px solid $color-border-light; - padding: 20px; - width: calc(100% - 40px); + padding: 30px; &:hover { - background-color: $color-background-light; - border-color: $color-light-grey-plus; - animation: expandHover 0.25s forwards ease-in-out; - position: absolute; - animation-delay: 0.5s; - - .iog-card-content { - opacity: 0; - animation: fadeIn 1s ease-in-out forwards; - animation-delay: 0.5s; - } - } - - .iog-card-content { - opacity: 0; - -webkit-line-clamp: 3; - -webkit-box-orient: vertical; - display: -webkit-box; - margin-top: 10px; - overflow: hidden; - - .iog-card-description { - font-weight: 400; - } - } -} - -.iog-card-header { - width: 100%; - display: flex; - - > div { - &:first-child { - margin-right: 16px; - } - &:last-child { - flex: 1; - display: flex; - flex-direction: column; - justify-content: center; - } + background-color: var(--dark-mode-mid-grey, var(--data-light-grey, #f9f9f9)); } } -.iog-card-box { - z-index: 1; - - .iog-icon { - z-index: -1; - } +.iog-card-box__body { + flex-grow: 0; + overflow: hidden; - > h3 { - word-break: break-word; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; - display: -webkit-box; - overflow: hidden; - font-weight: 400; - } -} - -.iog-card-categories-box { - display: inline-flex; - align-items: center; - p + p { - display: inline-flex; - align-items: center; - &:before { - content: ''; - margin: 2px 5px 0; - width: 2px; - height: 2px; - border-radius: 50%; - background-color: var(--dotColor); - } - } -} - -.iog-card-body { - width: 100%; - margin-top: 24px; - border-top: 1px solid $color-border-light; - flex: 1; - > .iog-text { - display: -webkit-box; - -webkit-line-clamp: 5; - -webkit-box-orient: vertical; + span { + display: block; + white-space: normal; + text-overflow: ellipsis; overflow: hidden; + width: 100%; } } .iog-card-box__image { + flex-shrink: 0; position: relative; - border: 1.5px solid $theme-light-grey-border; - border-radius: 12px; - max-height: 52px; - max-width: 52px; - - > .iog-image { - z-index: 1; - } -} - -.iog-card-footer { - width: 100%; - padding-top: 16px; - border-top: 1px solid $color-border-light; - - > div:first-child { - margin-right: 8px; - } -} - -.iog-card-title { - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden !important; - display: inline-block !important; - - @media (min-width: $breakpoint-popup) { - max-width: 12ch; - } - - @media (min-width: $breakpoint-small) { - max-width: 16ch; - } - - @media (min-width: $breakpoint-medium) { - max-width: 20ch; - } - - @media (min-width: $breakpoint-large) { - max-width: 12ch; - } -} - -.card-container { - min-width: 260px; + border: 1px solid var(--light-mode-light-grey-plus, var(--dark-mode-mid-grey)); + border-radius: 16px; + max-height: 48px; + max-width: 48px; + overflow: hidden; } diff --git a/apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/Card/styles.scss b/apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/Card/styles.scss index b957c782c2..7ac4e86e36 100644 --- a/apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/Card/styles.scss +++ b/apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/Card/styles.scss @@ -1,5 +1,3 @@ -@import '../../styles/colors.scss'; - .iog-card-container { cursor: pointer; align-items: flex-start; @@ -10,27 +8,6 @@ height: fit-content; } -.iog-card-header { - width: 100%; - display: flex; - - > div { - &:first-child { - padding: 30px 20px; - border-right: 1px solid $color-ebony; - } - &:last-child { - flex: 1; - display: flex; - flex-direction: column; - justify-content: center; - padding: 0 10px 0 18px; - } - } - - border-bottom: 1px solid $color-ebony; -} - .iog-card-box { z-index: 1; .iog-icon { @@ -46,35 +23,6 @@ } } -.iog-card-categories-box { - display: inline-flex; - align-items: center; - p + p { - display: inline-flex; - align-items: center; - &:before { - content: ''; - margin: 2px 5px 0; - width: 2px; - height: 2px; - border-radius: 50%; - background-color: var(--dotColor); - } - } -} - -.iog-card-body { - width: 100%; - padding: 16px 20px; - - > .iog-text { - display: -webkit-box; - -webkit-line-clamp: 3; - -webkit-box-orient: vertical; - overflow: hidden; - } -} - .iog-card-box__image { position: relative; > .iog-icon { diff --git a/apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/SimpleView/SimpleViewContent/styles.scss b/apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/SimpleView/SimpleViewContent/styles.scss index 3e15c7f16b..ab51c2e7bc 100644 --- a/apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/SimpleView/SimpleViewContent/styles.scss +++ b/apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/SimpleView/SimpleViewContent/styles.scss @@ -47,18 +47,17 @@ .iog-section-card-grid { display: grid; - grid-template-columns: repeat(4, 1fr); + grid-template-columns: repeat(2, minmax(calc(50% - 10px), calc(50% - 10px))); grid-auto-rows: min-content; - gap: size_unit(2); - grid-row-gap: size_unit(2.5); + gap: 20px; scrollbar-width: none; &::-webkit-scrollbar { display: none; } - @media (min-width: 1660px) { - grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); + @media (min-width: 1680px) { + grid-template-columns: repeat(3, minmax(calc(50% - (20px / 3)), calc(50% - (20px / 3)))); } } diff --git a/apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/SimpleView/SimpleViewFilters/CategoryChip/assets/all.component.svg b/apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/SimpleView/SimpleViewFilters/CategoryChip/assets/all.component.svg index 432bf34a33..04e9e692d8 100644 --- a/apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/SimpleView/SimpleViewFilters/CategoryChip/assets/all.component.svg +++ b/apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/SimpleView/SimpleViewFilters/CategoryChip/assets/all.component.svg @@ -1,3 +1,3 @@ - - + + diff --git a/apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/SimpleView/SimpleViewFilters/CategoryChip/index.tsx b/apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/SimpleView/SimpleViewFilters/CategoryChip/index.tsx index d972f586b8..73f83543a5 100644 --- a/apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/SimpleView/SimpleViewFilters/CategoryChip/index.tsx +++ b/apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/SimpleView/SimpleViewFilters/CategoryChip/index.tsx @@ -1,16 +1,21 @@ import * as React from 'react'; +import cn from 'classnames'; +import { Flex, Text } from '@input-output-hk/lace-ui-toolkit'; import { mapCategory } from './mapper'; -import './styles.scss'; +import styles from './styles.module.scss'; export interface ICategoryChip { label: string; + active?: boolean; } -const CategoryChip: React.FC = ({ label }) => ( - +const CategoryChip: React.FC = ({ label, active }) => ( + {mapCategory(label)} - {label} - + + {label} + + ); export default CategoryChip; diff --git a/apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/SimpleView/SimpleViewFilters/CategoryChip/styles.module.scss b/apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/SimpleView/SimpleViewFilters/CategoryChip/styles.module.scss new file mode 100644 index 0000000000..5acec7529f --- /dev/null +++ b/apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/SimpleView/SimpleViewFilters/CategoryChip/styles.module.scss @@ -0,0 +1,6 @@ +@import '../../../../../../../../../../../../packages/common/src/ui/styles/theme.scss'; +@import '../../../../../../../../../../../../packages/common/src/ui/styles/abstracts/typography.scss'; + +.categoryText { + color: var(--text-color-white); +} diff --git a/apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/SimpleView/SimpleViewFilters/CategoryChip/styles.scss b/apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/SimpleView/SimpleViewFilters/CategoryChip/styles.scss deleted file mode 100644 index 85ca915fdd..0000000000 --- a/apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/SimpleView/SimpleViewFilters/CategoryChip/styles.scss +++ /dev/null @@ -1,12 +0,0 @@ -.category-chip { - display: flex; - align-items: center; - - svg { - width: 24px; - height: 24px; - } - .category-text { - padding-left: 8px; - } -} diff --git a/apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/SimpleView/SimpleViewFilters/index.tsx b/apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/SimpleView/SimpleViewFilters/index.tsx index 55b60ffb90..98fa2ed1c4 100644 --- a/apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/SimpleView/SimpleViewFilters/index.tsx +++ b/apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/SimpleView/SimpleViewFilters/index.tsx @@ -88,7 +88,7 @@ const SimpleViewFilters: React.FC = ({ onChangeCategory }) = 'iog-tag--active': value.toLocaleLowerCase() === active }), onClick: () => handleSetActive(value), - children: + children: })} data-testid="grid-category-slider" > diff --git a/apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/SimpleView/SimpleViewFilters/styles.scss b/apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/SimpleView/SimpleViewFilters/styles.scss index 3f71aa0bef..4ae16ac081 100644 --- a/apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/SimpleView/SimpleViewFilters/styles.scss +++ b/apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/SimpleView/SimpleViewFilters/styles.scss @@ -1,39 +1,51 @@ -@import '../../../styles/functions'; -@import '../../../styles/colors'; +@import '../../../../../../../../../../../packages/common/src/ui/styles/theme.scss'; +@import '../../../../../../../../../../../packages/common/src/ui/styles/abstracts/typography.scss'; .iog-tag { display: flex; flex-direction: row; align-items: flex-start; - padding: 12px 16px; - background-color: $color-background-light; + padding: 12px 16px 12px 12px; + background-color: var(--light-mode-light-grey, var(--dark-mode-grey)); border-radius: 100px; cursor: pointer; - font-weight: normal; - font-size: toRem(16); - font-style: normal; - line-height: toRem(16); - letter-spacing: 0.02em; text-align: center; - color: $color-font-primary; + + svg { + width: 24px; + height: 24px; + } + path { + stroke: var(--text-color-primary); + fill: var(--light-mode-light-grey, var(--dark-mode-grey)); + } } .iog-tag:hover { - background-color: $color-light-greyer; + background-color: var(--light-mode-mid-grey, var(--dark-mode-mid-grey)); + + path { + stroke: var(--text-color-primary); + fill: var(--light-mode-mid-grey, var(--dark-mode-mid-grey)); + } } .iog-tag--active { - background-color: $color-background-medium; - color: $color-font-light; + background-color: var(--light-mode-dark-grey, var(--dark-mode-light-grey)); - .category-chip path { - stroke: $color-font-light; + path { + stroke: var(--text-color-white); + fill: var(--light-mode-dark-grey, var(--dark-mode-light-grey)); } } .iog-tag--active:hover { - background-color: $color-background-medium-darker; - color: $color-font-light; + background-color: var(--light-mode-dark-grey, var(--dark-mode-light-grey)); + + path { + stroke: var(--text-color-white); + fill: var(--light-mode-dark-grey, var(--dark-mode-light-grey)); + } } .iog-simple-view-filters { @@ -81,13 +93,13 @@ } .swiper-button-next { - background: linear-gradient(270deg, $color-ebony 70%, rgba(19, 21, 51, 0) 90%); + background: var(--bg-color-body); right: 0; padding-left: 20px; } .swiper-button-prev { - background: linear-gradient(90deg, $color-ebony 70%, rgba(19, 21, 51, 0) 90%); + background: var(--bg-color-body); left: 0; padding-right: 20px; } @@ -96,3 +108,20 @@ display: none; } } + +.swiper-filters-next, .swiper-filters-prev { + .iog-icon { + width: 22px; + height: auto; + + path { + stroke-width: 1.4px; + } + } +} +.swiper-filters-next { + margin-left: 2px; +} +.swiper-filters-prev { + margin-right: 2px; +} diff --git a/apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/Slider/styles.scss b/apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/Slider/styles.scss index 1730feb087..1439f94d4e 100644 --- a/apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/Slider/styles.scss +++ b/apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/Slider/styles.scss @@ -1,4 +1,5 @@ -@import '../../styles/colors.scss'; +@import '../../../../../../../../../../packages/common/src/ui/styles/theme.scss'; +@import '../../../../../../../../../../packages/common/src/ui/styles/abstracts/typography.scss'; .iog-swiper-container { width: 100%; @@ -35,13 +36,22 @@ position: absolute; right: -1px; top: 0; - width: 60px; + width: 70px; z-index: 1; - background: linear-gradient(270deg, #fff 85%, hsla(0, 0%, 100%, 0)); + background: var(--bg-color-body); .iog-button-icon { height: 48px; width: 48px; + background-color: var(--light-mode-light-grey, var(--dark-mode-grey)); + + &:hover { + background-color: var(--light-mode-mid-grey, var(--dark-mode-mid-grey)); + } + + path { + stroke: var(--text-color-primary); + } } } @@ -50,11 +60,5 @@ right: auto; justify-content: flex-start !important; z-index: 88 !important; - background: linear-gradient(90deg, $color-white 65.23%, rgba(255, 255, 255, 0) 100%); -} - -// # Button Nav -.iog-swiper-button-nav { - // background-color: $color-white; - // border: none; + background: var(--bg-color-body); }