codex-storage
/
codex-marketplace-ui-components
mirror of https://github.com/codex-storage/codex-marketplace-ui-components.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Update design

This commit is contained in:
Arnaud 2024-11-05 09:51:52 +01:00
parent 20f7229d17
commit 994c68903c
No known key found for this signature in database
GPG Key ID: 69D6CE281FCAE663
9 changed files with 98 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
package-lock.json generated
View File

@ -1,12 +1,12 @@
{
"name": "@codex-storage/marketplace-ui-components",
"version": "0.0.33",
"version": "0.0.34",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "@codex-storage/marketplace-ui-components",
"version": "0.0.33",
"version": "0.0.34",
"license": "MIT",
"dependencies": {
"lucide-react": "^0.453.0"

2
package.json
View File

@ -5,7 +5,7 @@
"type": "git",
"url": "https://github.com/codex-storage/codex-marketplace-ui-components"
},
"version": "0.0.33",
"version": "0.0.34",
"type": "module",
"scripts": {
"prepack": "npm run build",

1
src/components/ButtonIcon/buttonIcon.css
View File

@ -10,6 +10,7 @@
cursor: pointer;
transition: box-shadow 0.35s;
border: none;
gap: 6px;
&.button-icon--big {
width: 4rem;

31
src/components/Sheets/sheets.css
View File

@ -13,27 +13,24 @@
aside {
position: fixed;
transition: transform 0.25s;
background-color: var(--codex-background-secondary);
z-index: 2;
justify-content: space-between;
@media (min-width: 1000px) {
& {
width: 300px;
height: 100%;
bottom: 0;
top: 0;
transform: translatex(1300px);
right: 0;
}
&[aria-expanded] {
transform: translatex(0);
z-index: 10;
}
& {
width: 400px;
height: 100%;
bottom: 0;
top: 0;
transform: translatex(1300px);
right: 0;
}
@media (max-width: 999px) {
&[aria-expanded] {
transform: translatex(0);
z-index: 10;
}
/* @media (max-width: 999px) {
& {
width: 100%;
height: auto;
@ -48,6 +45,6 @@
transform: translatey(0);
z-index: 10;
}
}
} */
}
}

5
src/components/Table/SortIcon.css Normal file
View File

@ -0,0 +1,5 @@
.sort-icon {
display: flex;
flex-direction: column;
gap: 0;
}

54
src/components/Table/SortIcon.tsx
View File

@ -1,16 +1,46 @@
import "./SortIcon.css";
export function SortIcon() {
return (
<svg
width="9"
height="14"
viewBox="0 0 9 14"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8.34261 4.91667L4.17594 0.75L0.00927734 4.91667H8.34261ZM8.34261 9.08333L4.17594 13.25L0.00927734 9.08333H8.34261Z"
fill="#969696"
/>
</svg>
<span className="sort-icon">
<svg
width="20"
height="10"
viewBox="0 0 20 10"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g clipPath="url(#clip0_326_785)">
<path
d="M14.1666 7.91667L9.99992 3.75L5.83325 7.91667H14.1666ZM14.1666 12.0833L9.99992 16.25L5.83325 12.0833H14.1666Z"
fill="#969696"
/>
</g>
<defs>
<clipPath id="clip0_326_785">
<rect width="20" height="10" fill="white" />
</clipPath>
</defs>
</svg>
<svg
width="20"
height="10"
viewBox="0 0 20 10"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g clipPath="url(#clip0_326_787)">
<path
d="M14.1666 -2.08333L9.99992 -6.25L5.83325 -2.08333H14.1666ZM14.1666 2.08333L9.99992 6.25L5.83325 2.08333H14.1666Z"
fill="#969696"
/>
</g>
<defs>
<clipPath id="clip0_326_787">
<rect width="20" height="10" fill="white" />
</clipPath>
</defs>
</svg>
</span>
);
}

14
src/components/Table/table.css
View File

@ -1,7 +1,6 @@
.table {
border-radius: var(--codex-border-radius);
overflow-x: auto;
overflow-y: hidden;
table {
border-spacing: 0 12px;
@ -38,16 +37,16 @@
cursor: pointer;
}
svg path {
opacity: 0.5;
svg {
opacity: 0.6;
transition: opacity 0.35s;
}
th[aria-sort="descending"] path {
&[aria-sort="ascending"] svg:first-child {
opacity: 1;
}
th[aria-sort="ascending"] path {
&[aria-sort="descending"] svg:nth-child(2) {
opacity: 1;
}
@ -69,7 +68,6 @@
border-bottom: 1px solid var(--codex-border-color);
transition: background-color 0.35s;
border-radius: 8px;
position: relative;
&:hover {
background-color: var(--codex-background-light);
@ -98,7 +96,7 @@
}
}
&::after {
/* &::after {
content: " ";
width: 100%;
height: 1px;
@ -107,7 +105,7 @@
position: absolute;
bottom: -7px;
left: 0;
}
} */
}
}
}

47
src/components/Tabs/tabs.css
View File

@ -1,41 +1,46 @@
.tabs {
display: flex;
margin-top: 1rem;
gap: 1rem;
position: relative;
&::after {
width: 100%;
background-color: var(--codex-background-light);
content: " ";
position: absolute;
height: 2px;
top: 11px;
top: 31px;
}
border-bottom: 2px solid #96969633;
border-radius: 6px;
padding: 0px 8px 0px 4px;
gap: 16px;
div {
display: flex;
align-items: center;
gap: 0.25rem;
padding-bottom: 1rem;
gap: 6px;
cursor: pointer;
transition: 0.35s opacity;
z-index: 1;
position: relative;
top: 2px;
border-bottom: 2px solid transparent;
padding: 8px;
font-family: Inter;
font-size: 14px;
font-weight: 500;
line-height: 20px;
letter-spacing: -0.006em;
text-align: center;
color: #969696;
&:hover {
opacity: 0.85;
}
&[aria-selected]:after {
width: 100%;
background-color: var(--codex-color-contrast);
content: " ";
position: absolute;
height: 2px;
top: 11px;
top: 31px;
&[aria-selected] {
color: var(--codex-color-primary);
border-bottom: 2px solid var(--codex-color-primary);
}
&[aria-selected]:first-child {
border-bottom-left-radius: 6px;
}
&[aria-selected]:last-child {
border-bottom-right-radius: 6px;
}
}
}

1
stories/Table.stories.tsx
View File

@ -71,6 +71,7 @@ export const Sort: Story = {
></Row>,
],
headers: [["id"], ["title"], ["other", () => {}], ["actions"]],
defaultSortIndex: 2,
},
};