Skip to content

Commit 31d5193

Browse files
vetalcorevetalcore
authored
feat: [lw-12016] adjust categories and dapp list (#1631)
1 parent 8649842 commit 31d5193

File tree

12 files changed

+130
-324
lines changed

12 files changed

+130
-324
lines changed

‎apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/assets/icons/image-error.component.svg

Lines changed: 3 additions & 24 deletions
Loading

‎apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/Card/Classic/index.tsx

Lines changed: 26 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,41 @@
11
import React from 'react';
22
import { IogImage } from '../../Image';
3-
import { IogText } from '../../Typography';
43
import { IogCardProps } from './types';
5-
import { IogRow } from '../../Grid';
64
import './styles.scss';
7-
import { Divider, Text } from '@input-output-hk/lace-ui-toolkit';
5+
import { Box, Card, Flex, Text } from '@input-output-hk/lace-ui-toolkit';
86

97
export const IogCardClassic: React.FC<IogCardProps> = ({ onClick, ...props }) => {
10-
const { title, categories, image, description } = props;
8+
const { title, categories, image } = props;
119

1210
return (
13-
<article
11+
<Card.Outlined
1412
onClick={() => onClick && onClick()}
1513
className="iog-card-container"
1614
data-testid={`dapp-grid-app-card-${title}`}
1715
role="card"
1816
>
19-
<div className="iog-card-header">
20-
{image && (
21-
<div className="iog-card-box iog-card-box__image" data-testid="dappImage">
22-
<IogImage src={image.src} alt={image.alt} size={48} overflow fit="contain" />
23-
</div>
24-
)}
25-
<IogRow className="iog-card-box">
26-
<Text.Body.Normal className="iog-card-title" weight="$medium" data-testid="dappTitle">
27-
{title}
28-
</Text.Body.Normal>
29-
<div className="iog-card-categories-box" data-testid="dappCategory">
30-
{categories?.map((category) => (
31-
<IogText key={category}>{category}</IogText>
32-
))}
33-
</div>
34-
</IogRow>
35-
</div>
36-
37-
{description && (
38-
<div className="iog-card-content">
39-
<Divider w="$fill" my="$16" />
40-
<Text.Body.Normal className="iog-card-description" weight="$medium">
41-
{description}
42-
</Text.Body.Normal>
43-
</div>
44-
)}
45-
</article>
17+
<Box w="$fill">
18+
<Flex gap="$12">
19+
<Flex
20+
alignItems="center"
21+
justifyContent="center"
22+
className="iog-card-box iog-card-box__image"
23+
data-testid="dappImage"
24+
>
25+
<IogImage src={image.src} alt={image.alt} size={48} fit="cover" />
26+
</Flex>
27+
<Flex className="iog-card-box__body" flexDirection="column">
28+
<Text.Body.Normal weight="$semibold" data-testid="dappTitle">
29+
{title}
30+
</Text.Body.Normal>
31+
<Box w="$fill">
32+
<Text.Body.Small weight="$semibold" color="secondary" data-testid="dappCategory">
33+
{categories?.map((category, index) => (categories.length !== index + 1 ? `${category} ` : category))}
34+
</Text.Body.Small>
35+
</Box>
36+
</Flex>
37+
</Flex>
38+
</Box>
39+
</Card.Outlined>
4640
);
4741
};

‎apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/Card/Classic/styles.scss

Lines changed: 16 additions & 162 deletions
Original file line numberDiff line numberDiff line change
@@ -1,183 +1,37 @@
11
@import '../../../styles/theme.scss';
22
@import '../../../styles/colors.scss';
33

4-
@keyframes expandHover {
5-
from {
6-
height: 100px;
7-
top: -1px;
8-
left: -1px;
9-
}
10-
11-
to {
12-
height: 210px;
13-
left: -20px;
14-
top: -80px;
15-
width: 100%;
16-
background-color: $color-white;
17-
box-shadow: 1px 1px 5px $color-light-grey-plus;
18-
}
19-
}
20-
21-
@keyframes fadeIn {
22-
0% {
23-
opacity: 0
24-
}
25-
26-
to {
27-
opacity: 1
28-
}
29-
}
30-
314
.iog-card-container {
325
cursor: pointer;
336
display: flex;
347
align-items: flex-start;
358
flex-direction: column;
36-
background-color: $color-secondary;
37-
height: 100px;
38-
z-index: 99;
39-
border-radius: 11px;
40-
border: 1px solid $color-border-light;
41-
padding: 20px;
42-
width: calc(100% - 40px);
9+
padding: 30px;
4310

4411
&:hover {
45-
background-color: $color-background-light;
46-
border-color: $color-light-grey-plus;
47-
animation: expandHover 0.25s forwards ease-in-out;
48-
position: absolute;
49-
animation-delay: 0.5s;
50-
51-
.iog-card-content {
52-
opacity: 0;
53-
animation: fadeIn 1s ease-in-out forwards;
54-
animation-delay: 0.5s;
55-
}
56-
}
57-
58-
.iog-card-content {
59-
opacity: 0;
60-
-webkit-line-clamp: 3;
61-
-webkit-box-orient: vertical;
62-
display: -webkit-box;
63-
margin-top: 10px;
64-
overflow: hidden;
65-
66-
.iog-card-description {
67-
font-weight: 400;
68-
}
69-
}
70-
}
71-
72-
.iog-card-header {
73-
width: 100%;
74-
display: flex;
75-
76-
> div {
77-
&:first-child {
78-
margin-right: 16px;
79-
}
80-
&:last-child {
81-
flex: 1;
82-
display: flex;
83-
flex-direction: column;
84-
justify-content: center;
85-
}
12+
background-color: var(--dark-mode-mid-grey, var(--data-light-grey, #f9f9f9));
8613
}
8714
}
8815

89-
.iog-card-box {
90-
z-index: 1;
91-
92-
.iog-icon {
93-
z-index: -1;
94-
}
16+
.iog-card-box__body {
17+
flex-grow: 0;
18+
overflow: hidden;
9519

96-
> h3 {
97-
word-break: break-word;
98-
-webkit-line-clamp: 2;
99-
-webkit-box-orient: vertical;
100-
display: -webkit-box;
101-
overflow: hidden;
102-
font-weight: 400;
103-
}
104-
}
105-
106-
.iog-card-categories-box {
107-
display: inline-flex;
108-
align-items: center;
109-
p + p {
110-
display: inline-flex;
111-
align-items: center;
112-
&:before {
113-
content: '';
114-
margin: 2px 5px 0;
115-
width: 2px;
116-
height: 2px;
117-
border-radius: 50%;
118-
background-color: var(--dotColor);
119-
}
120-
}
121-
}
122-
123-
.iog-card-body {
124-
width: 100%;
125-
margin-top: 24px;
126-
border-top: 1px solid $color-border-light;
127-
flex: 1;
128-
> .iog-text {
129-
display: -webkit-box;
130-
-webkit-line-clamp: 5;
131-
-webkit-box-orient: vertical;
20+
span {
21+
display: block;
22+
white-space: normal;
23+
text-overflow: ellipsis;
13224
overflow: hidden;
25+
width: 100%;
13326
}
13427
}
13528

13629
.iog-card-box__image {
30+
flex-shrink: 0;
13731
position: relative;
138-
border: 1.5px solid $theme-light-grey-border;
139-
border-radius: 12px;
140-
max-height: 52px;
141-
max-width: 52px;
142-
143-
> .iog-image {
144-
z-index: 1;
145-
}
146-
}
147-
148-
.iog-card-footer {
149-
width: 100%;
150-
padding-top: 16px;
151-
border-top: 1px solid $color-border-light;
152-
153-
> div:first-child {
154-
margin-right: 8px;
155-
}
156-
}
157-
158-
.iog-card-title {
159-
white-space: nowrap;
160-
text-overflow: ellipsis;
161-
overflow: hidden !important;
162-
display: inline-block !important;
163-
164-
@media (min-width: $breakpoint-popup) {
165-
max-width: 12ch;
166-
}
167-
168-
@media (min-width: $breakpoint-small) {
169-
max-width: 16ch;
170-
}
171-
172-
@media (min-width: $breakpoint-medium) {
173-
max-width: 20ch;
174-
}
175-
176-
@media (min-width: $breakpoint-large) {
177-
max-width: 12ch;
178-
}
179-
}
180-
181-
.card-container {
182-
min-width: 260px;
32+
border: 1px solid var(--light-mode-light-grey-plus, var(--dark-mode-mid-grey));
33+
border-radius: 16px;
34+
max-height: 48px;
35+
max-width: 48px;
36+
overflow: hidden;
18337
}

‎apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/Card/styles.scss

Lines changed: 0 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
@import '../../styles/colors.scss';
2-
31
.iog-card-container {
42
cursor: pointer;
53
align-items: flex-start;
@@ -10,27 +8,6 @@
108
height: fit-content;
119
}
1210

13-
.iog-card-header {
14-
width: 100%;
15-
display: flex;
16-
17-
> div {
18-
&:first-child {
19-
padding: 30px 20px;
20-
border-right: 1px solid $color-ebony;
21-
}
22-
&:last-child {
23-
flex: 1;
24-
display: flex;
25-
flex-direction: column;
26-
justify-content: center;
27-
padding: 0 10px 0 18px;
28-
}
29-
}
30-
31-
border-bottom: 1px solid $color-ebony;
32-
}
33-
3411
.iog-card-box {
3512
z-index: 1;
3613
.iog-icon {
@@ -46,35 +23,6 @@
4623
}
4724
}
4825

49-
.iog-card-categories-box {
50-
display: inline-flex;
51-
align-items: center;
52-
p + p {
53-
display: inline-flex;
54-
align-items: center;
55-
&:before {
56-
content: '';
57-
margin: 2px 5px 0;
58-
width: 2px;
59-
height: 2px;
60-
border-radius: 50%;
61-
background-color: var(--dotColor);
62-
}
63-
}
64-
}
65-
66-
.iog-card-body {
67-
width: 100%;
68-
padding: 16px 20px;
69-
70-
> .iog-text {
71-
display: -webkit-box;
72-
-webkit-line-clamp: 3;
73-
-webkit-box-orient: vertical;
74-
overflow: hidden;
75-
}
76-
}
77-
7826
.iog-card-box__image {
7927
position: relative;
8028
> .iog-icon {

‎apps/browser-extension-wallet/src/views/browser-view/features/dapp/explorer/components/SimpleView/SimpleViewContent/styles.scss

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -47,18 +47,17 @@
4747

4848
.iog-section-card-grid {
4949
display: grid;
50-
grid-template-columns: repeat(4, 1fr);
50+
grid-template-columns: repeat(2, minmax(calc(50% - 10px), calc(50% - 10px)));
5151
grid-auto-rows: min-content;
52-
gap: size_unit(2);
53-
grid-row-gap: size_unit(2.5);
52+
gap: 20px;
5453
scrollbar-width: none;
5554

5655
&::-webkit-scrollbar {
5756
display: none;
5857
}
5958

60-
@media (min-width: 1660px) {
61-
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
59+
@media (min-width: 1680px) {
60+
grid-template-columns: repeat(3, minmax(calc(50% - (20px / 3)), calc(50% - (20px / 3))));
6261
}
6362
}
6463

0 commit comments

Comments
 (0)