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", "name": "@codex-storage/marketplace-ui-components",
"version": "0.0.33", "version": "0.0.34",
"lockfileVersion": 3, "lockfileVersion": 3,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "@codex-storage/marketplace-ui-components", "name": "@codex-storage/marketplace-ui-components",
"version": "0.0.33", "version": "0.0.34",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"lucide-react": "^0.453.0" "lucide-react": "^0.453.0"

2
package.json
View File

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

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

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

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

@ -13,27 +13,24 @@
aside { aside {
position: fixed; position: fixed;
transition: transform 0.25s; transition: transform 0.25s;
background-color: var(--codex-background-secondary);
z-index: 2; z-index: 2;
justify-content: space-between; justify-content: space-between;
@media (min-width: 1000px) { & {
& { width: 400px;
width: 300px; height: 100%;
height: 100%; bottom: 0;
bottom: 0; top: 0;
top: 0; transform: translatex(1300px);
transform: translatex(1300px); right: 0;
right: 0;
}
&[aria-expanded] {
transform: translatex(0);
z-index: 10;
}
} }
@media (max-width: 999px) { &[aria-expanded] {
transform: translatex(0);
z-index: 10;
}
/* @media (max-width: 999px) {
& { & {
width: 100%; width: 100%;
height: auto; height: auto;
@ -48,6 +45,6 @@
transform: translatey(0); transform: translatey(0);
z-index: 10; 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() { export function SortIcon() {
return ( return (
<svg <span className="sort-icon">
width="9" <svg
height="14" width="20"
viewBox="0 0 9 14" height="10"
fill="none" viewBox="0 0 20 10"
xmlns="http://www.w3.org/2000/svg" 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" <g clipPath="url(#clip0_326_785)">
fill="#969696" <path
/> d="M14.1666 7.91667L9.99992 3.75L5.83325 7.91667H14.1666ZM14.1666 12.0833L9.99992 16.25L5.83325 12.0833H14.1666Z"
</svg> 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 { .table {
border-radius: var(--codex-border-radius); border-radius: var(--codex-border-radius);
overflow-x: auto; overflow-x: auto;
overflow-y: hidden;
table { table {
border-spacing: 0 12px; border-spacing: 0 12px;
@ -38,16 +37,16 @@
cursor: pointer; cursor: pointer;
} }
svg path { svg {
opacity: 0.5; opacity: 0.6;
transition: opacity 0.35s; transition: opacity 0.35s;
} }
th[aria-sort="descending"] path { &[aria-sort="ascending"] svg:first-child {
opacity: 1; opacity: 1;
} }
th[aria-sort="ascending"] path { &[aria-sort="descending"] svg:nth-child(2) {
opacity: 1; opacity: 1;
} }
@ -69,7 +68,6 @@
border-bottom: 1px solid var(--codex-border-color); border-bottom: 1px solid var(--codex-border-color);
transition: background-color 0.35s; transition: background-color 0.35s;
border-radius: 8px; border-radius: 8px;
position: relative;
&:hover { &:hover {
background-color: var(--codex-background-light); background-color: var(--codex-background-light);
@ -98,7 +96,7 @@
} }
} }
&::after { /* &::after {
content: " "; content: " ";
width: 100%; width: 100%;
height: 1px; height: 1px;
@ -107,7 +105,7 @@
position: absolute; position: absolute;
bottom: -7px; bottom: -7px;
left: 0; left: 0;
} } */
} }
} }
} }

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

@ -1,41 +1,46 @@
.tabs { .tabs {
display: flex; display: flex;
margin-top: 1rem; margin-top: 1rem;
gap: 1rem;
position: relative; position: relative;
border-bottom: 2px solid #96969633;
&::after { border-radius: 6px;
width: 100%; padding: 0px 8px 0px 4px;
background-color: var(--codex-background-light); gap: 16px;
content: " ";
position: absolute;
height: 2px;
top: 11px;
top: 31px;
}
div { div {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.25rem; gap: 6px;
padding-bottom: 1rem;
cursor: pointer; cursor: pointer;
transition: 0.35s opacity; transition: 0.35s opacity;
z-index: 1; z-index: 1;
position: relative; 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 { &:hover {
opacity: 0.85; opacity: 0.85;
} }
&[aria-selected]:after { &[aria-selected] {
width: 100%; color: var(--codex-color-primary);
background-color: var(--codex-color-contrast); border-bottom: 2px solid var(--codex-color-primary);
content: " "; }
position: absolute;
height: 2px; &[aria-selected]:first-child {
top: 11px; border-bottom-left-radius: 6px;
top: 31px; }
&[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>, ></Row>,
], ],
headers: [["id"], ["title"], ["other", () => {}], ["actions"]], headers: [["id"], ["title"], ["other", () => {}], ["actions"]],
defaultSortIndex: 2,
}, },
}; };