diff --git a/web/renderer/components/DatabaseTableNav/NavLinks.tsx b/web/renderer/components/DatabaseTableNav/NavLinks.tsx index 1e7dd71d..f41c3f64 100644 --- a/web/renderer/components/DatabaseTableNav/NavLinks.tsx +++ b/web/renderer/components/DatabaseTableNav/NavLinks.tsx @@ -23,7 +23,12 @@ export default function NavLinks({ className, params }: Props) { {tabs.map((tab, i) => ( - + {tab} ))} diff --git a/web/renderer/components/DatabaseTableNav/index.module.css b/web/renderer/components/DatabaseTableNav/index.module.css index 9fc1ab18..4eec5e80 100644 --- a/web/renderer/components/DatabaseTableNav/index.module.css +++ b/web/renderer/components/DatabaseTableNav/index.module.css @@ -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; } } @@ -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; } } @@ -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]; } @@ -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; } diff --git a/web/renderer/components/DefinitionList/index.module.css b/web/renderer/components/DefinitionList/index.module.css index cc245450..051d61f3 100644 --- a/web/renderer/components/DefinitionList/index.module.css +++ b/web/renderer/components/DefinitionList/index.module.css @@ -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 { @@ -22,10 +22,9 @@ } } -.item:hover .icon { - @apply opacity-100; - - &:hover { +.item:hover { + .icon, + .name { @apply text-sky-900; } } @@ -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 { diff --git a/web/renderer/components/TableList/Item/index.module.css b/web/renderer/components/TableList/Item/index.module.css index 055dedd5..243f894b 100644 --- a/web/renderer/components/TableList/Item/index.module.css +++ b/web/renderer/components/TableList/Item/index.module.css @@ -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; @@ -12,7 +12,7 @@ .active, .item:hover { - @apply bg-white; + @apply bg-storm-50 text-storm-600; .buttonIcon { @apply font-semibold; @@ -20,35 +20,43 @@ } .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; diff --git a/web/renderer/components/TableList/index.module.css b/web/renderer/components/TableList/index.module.css index 0ca36080..6c2752ff 100644 --- a/web/renderer/components/TableList/index.module.css +++ b/web/renderer/components/TableList/index.module.css @@ -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 { diff --git a/web/renderer/components/Views/index.module.css b/web/renderer/components/Views/index.module.css index 543ce9c5..e965a7ca 100644 --- a/web/renderer/components/Views/index.module.css +++ b/web/renderer/components/Views/index.module.css @@ -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 { @@ -18,14 +24,6 @@ } } -.item:hover .icon { - @apply opacity-100; - - &:hover { - @apply text-sky-900; - } -} - .button { @apply flex justify-between items-center w-full; @@ -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 {