Skip to content

Commit

Permalink
feat: [lw-12016] adjust categories and dapp list (#1631)
Browse files Browse the repository at this point in the history
  • Loading branch information
@vetalcore
vetalcore authored Jan 9, 2025
1 parent 8649842 commit 31d5193
Show file tree
Hide file tree
Showing 12 changed files with 130 additions and 324 deletions.
27 changes: 3 additions & 24 deletions ...iews/browser-view/features/dapp/explorer/assets/icons/image-error.component.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
58 changes: 26 additions & 32 deletions ...on-wallet/src/views/browser-view/features/dapp/explorer/components/Card/Classic/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -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<IogCardProps> = ({ onClick, ...props }) => {
const { title, categories, image, description } = props;
const { title, categories, image } = props;

return (
<article
<Card.Outlined
onClick={() => onClick && onClick()}
className="iog-card-container"
data-testid={`dapp-grid-app-card-${title}`}
role="card"
>
<div className="iog-card-header">
{image && (
<div className="iog-card-box iog-card-box__image" data-testid="dappImage">
<IogImage src={image.src} alt={image.alt} size={48} overflow fit="contain" />
</div>
)}
<IogRow className="iog-card-box">
<Text.Body.Normal className="iog-card-title" weight="$medium" data-testid="dappTitle">
{title}
</Text.Body.Normal>
<div className="iog-card-categories-box" data-testid="dappCategory">
{categories?.map((category) => (
<IogText key={category}>{category}</IogText>
))}
</div>
</IogRow>
</div>

{description && (
<div className="iog-card-content">
<Divider w="$fill" my="$16" />
<Text.Body.Normal className="iog-card-description" weight="$medium">
{description}
</Text.Body.Normal>
</div>
)}
</article>
<Box w="$fill">
<Flex gap="$12">
<Flex
alignItems="center"
justifyContent="center"
className="iog-card-box iog-card-box__image"
data-testid="dappImage"
>
<IogImage src={image.src} alt={image.alt} size={48} fit="cover" />
</Flex>
<Flex className="iog-card-box__body" flexDirection="column">
<Text.Body.Normal weight="$semibold" data-testid="dappTitle">
{title}
</Text.Body.Normal>
<Box w="$fill">
<Text.Body.Small weight="$semibold" color="secondary" data-testid="dappCategory">
{categories?.map((category, index) => (categories.length !== index + 1 ? `${category} ` : category))}
</Text.Body.Small>
</Box>
</Flex>
</Flex>
</Box>
</Card.Outlined>
);
};
178 changes: 16 additions & 162 deletions ...-wallet/src/views/browser-view/features/dapp/explorer/components/Card/Classic/styles.scss
View file
Original file line number Diff line number Diff line change
@@ -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;
}
52 changes: 0 additions & 52 deletions ...xtension-wallet/src/views/browser-view/features/dapp/explorer/components/Card/styles.scss
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
@import '../../styles/colors.scss';

.iog-card-container {
cursor: pointer;
align-items: flex-start;
Expand All @@ -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 {
Expand All @@ -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 {
Expand Down
9 changes: 4 additions & 5 deletions ...s/browser-view/features/dapp/explorer/components/SimpleView/SimpleViewContent/styles.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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))));
}
}

Expand Down
Loading

0 comments on commit 31d5193

Please sign in to comment.