From 994c68903c05da4397584fc59e90154de4517528 Mon Sep 17 00:00:00 2001 From: Arnaud Date: Tue, 5 Nov 2024 09:51:52 +0100 Subject: [PATCH] Update design --- package-lock.json | 4 +- package.json | 2 +- src/components/ButtonIcon/buttonIcon.css | 1 + src/components/Sheets/sheets.css | 31 ++++++-------- src/components/Table/SortIcon.css | 5 +++ src/components/Table/SortIcon.tsx | 54 ++++++++++++++++++------ src/components/Table/table.css | 14 +++--- src/components/Tabs/tabs.css | 47 ++++++++++++--------- stories/Table.stories.tsx | 1 + 9 files changed, 98 insertions(+), 61 deletions(-) create mode 100644 src/components/Table/SortIcon.css diff --git a/package-lock.json b/package-lock.json index 91dbf1a..cac90db 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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" diff --git a/package.json b/package.json index 3d5278d..8b69943 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/components/ButtonIcon/buttonIcon.css b/src/components/ButtonIcon/buttonIcon.css index e214207..c357556 100644 --- a/src/components/ButtonIcon/buttonIcon.css +++ b/src/components/ButtonIcon/buttonIcon.css @@ -10,6 +10,7 @@ cursor: pointer; transition: box-shadow 0.35s; border: none; + gap: 6px; &.button-icon--big { width: 4rem; diff --git a/src/components/Sheets/sheets.css b/src/components/Sheets/sheets.css index 8bc1ca9..49e2b19 100644 --- a/src/components/Sheets/sheets.css +++ b/src/components/Sheets/sheets.css @@ -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; } - } + } */ } } diff --git a/src/components/Table/SortIcon.css b/src/components/Table/SortIcon.css new file mode 100644 index 0000000..b6967cc --- /dev/null +++ b/src/components/Table/SortIcon.css @@ -0,0 +1,5 @@ +.sort-icon { + display: flex; + flex-direction: column; + gap: 0; +} diff --git a/src/components/Table/SortIcon.tsx b/src/components/Table/SortIcon.tsx index edf763a..ba6150f 100644 --- a/src/components/Table/SortIcon.tsx +++ b/src/components/Table/SortIcon.tsx @@ -1,16 +1,46 @@ +import "./SortIcon.css"; + export function SortIcon() { return ( - - - + + + + + + + + + + + + + + + + + + + + + + ); } diff --git a/src/components/Table/table.css b/src/components/Table/table.css index 1b12d77..374201a 100644 --- a/src/components/Table/table.css +++ b/src/components/Table/table.css @@ -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; - } + } */ } } } diff --git a/src/components/Tabs/tabs.css b/src/components/Tabs/tabs.css index 4d61ce3..51aa8ea 100644 --- a/src/components/Tabs/tabs.css +++ b/src/components/Tabs/tabs.css @@ -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; } } } diff --git a/stories/Table.stories.tsx b/stories/Table.stories.tsx index e81883d..39458c4 100644 --- a/stories/Table.stories.tsx +++ b/stories/Table.stories.tsx @@ -71,6 +71,7 @@ export const Sort: Story = { >, ], headers: [["id"], ["title"], ["other", () => {}], ["actions"]], + defaultSortIndex: 2, }, };