Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Web: Left nav UI improvements #317

Open
wants to merge 2 commits into
base: liuliu/web-nav-dropdown
Choose a base branch
from
+57 −39
Open

Web: Left nav UI improvements #317

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
cbb0254
views, definitions
liuliu-dev Dec 12, 2024
498749d
colors
liuliu-dev Dec 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 6 additions & 1 deletion web/renderer/components/DatabaseTableNav/NavLinks.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,12 @@ export default function NavLinks({ className, params }: Props) {
<Tabs initialActiveIndex={initialActiveIndex}>
<TabList className={css.tabList}>
{tabs.map((tab, i) => (
<Tab key={tab} name={tab.toLowerCase()} index={i} dark>
<Tab
key={tab}
name={tab.toLowerCase()}
index={i}
className={css.tab}
>
{tab}
</Tab>
))}
Expand Down
12 changes: 8 additions & 4 deletions web/renderer/components/DatabaseTableNav/index.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
.container {
@apply hidden;
@screen lg {
@apply bg-stone-50 pt-5 flex flex-col;
@apply bg-storm-500 pt-5 flex flex-col;
}
}

Expand Down Expand Up @@ -36,7 +36,7 @@
.menuIcon {
@apply hidden;
@screen lg {
@apply block text-primary cursor-pointer mx-1;
@apply block cursor-pointer mx-1 text-white;
}
}

Expand Down Expand Up @@ -68,7 +68,7 @@
@apply hidden;

@screen lg {
@apply block font-bold text-xl cursor-pointer -ml-4;
@apply block font-bold text-xl cursor-pointer -ml-4 text-white;
path {
@apply stroke-[3.5rem];
}
Expand All @@ -87,10 +87,14 @@
@apply text-sm;

li {
@apply mx-4 px-2 text-link-1;
@apply mx-4 px-2;
}
}

.tab {
@apply text-storm-50;
}

.tabPanel {
@apply px-0 absolute left-0 right-0 bottom-0 top-9 overflow-auto;
}
Expand Down
17 changes: 8 additions & 9 deletions web/renderer/components/DefinitionList/index.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,16 @@
@apply mb-10;

h4 {
@apply mx-3 mb-1.5 mt-3 text-base;
@apply mx-3 mb-1.5 mt-3 text-base text-storm-50;
}
}

.text {
@apply mb-5 mt-2 mx-5;
@apply mb-5 mt-2 mx-5 text-white;
}

.icon {
@apply text-xl mr-2 text-primary rounded-full opacity-25;
@apply text-xl mr-2 text-white rounded-full;
}

.item {
Expand All @@ -22,10 +22,9 @@
}
}

.item:hover .icon {
@apply opacity-100;

&:hover {
.item:hover {
.icon,
.name {
@apply text-sky-900;
}
}
Expand All @@ -40,11 +39,11 @@

.selected,
.item:hover {
@apply bg-white text-link-2;
@apply bg-storm-200 text-link-2;
}

.name {
@apply text-link-1 text-sm font-semibold;
@apply text-white text-sm font-semibold;
}

.viewing {
Expand Down
30 changes: 19 additions & 11 deletions web/renderer/components/TableList/Item/index.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
}

.buttonIcon {
@apply text-primary opacity-25 text-2xl mr-4 h-6 mt-1 rounded-full;
@apply text-white text-2xl mr-4 h-6 mt-1 rounded-full font-normal;

&:focus {
@apply widget-shadow-lightblue outline-none;
Expand All @@ -12,43 +12,51 @@

.active,
.item:hover {
@apply bg-white;
@apply bg-storm-50 text-storm-600;

.buttonIcon {
@apply font-semibold;
}
}

.item:hover .buttonIcon {
@apply opacity-100;
@apply text-sky-900;
}

&:hover {
.isExpanded {
@apply bg-[#fafbfc];
.buttonIcon {
@apply text-sky-900;
}
}

.isExpanded {
background-color: #fafbfc;
.isExpanded .tableName {
@apply text-storm-600 font-semibold;
}

.isExpanded .table {
@apply text-storm-600 font-semibold bg-storm-50;
}
.table {
@apply flex justify-between text-sm;
&:hover {
@apply bg-storm-50;
.tableName {
@apply text-storm-600;
}
}
}

.tableName {
@apply hidden;

@screen lg {
@apply flex p-3 text-link-1 font-semibold w-full text-sm;
@apply flex p-3 text-white w-full text-sm;

svg {
@apply inline-block text-sm mt-1 mr-2;
}

&:hover {
@apply text-link-2;
}

&:focus {
@apply outline-none;

Expand Down
4 changes: 2 additions & 2 deletions web/renderer/components/TableList/index.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
.addTable {
@apply hidden;
@screen lg {
@apply flex my-8 mx-3 text-sm text-sky-900;
@apply flex my-8 mx-3 text-sm text-white;

&:hover {
@apply text-link-2;
@apply text-sky-300;
}

svg {
Expand Down
26 changes: 14 additions & 12 deletions web/renderer/components/Views/index.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,17 @@
}

.text {
@apply my-4 mx-5;
@apply my-4 mx-5 text-storm-50;
a {
@apply text-white;
&:hover {
@apply text-sky-300;
}
}
}

.icon {
@apply text-2xl mr-2 text-primary rounded-full opacity-25;
@apply text-2xl mr-2 text-white rounded-full;
}

.item {
Expand All @@ -18,14 +24,6 @@
}
}

.item:hover .icon {
@apply opacity-100;

&:hover {
@apply text-sky-900;
}
}

.button {
@apply flex justify-between items-center w-full;

Expand All @@ -36,11 +34,15 @@

.selected,
.item:hover {
@apply bg-white text-link-2;
@apply bg-storm-50;
.name,
.icon {
@apply text-storm-600;
}
}

.name {
@apply text-link-1 text-sm font-semibold;
@apply text-white text-sm font-semibold;
}

.viewing {
Expand Down