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,
},
};