diff --git a/web/src/components/settings/SettingsNavSection.svelte b/web/src/components/settings/SettingsNavSection.svelte
index 7a6527e6..7b138a4e 100644
--- a/web/src/components/settings/SettingsNavSection.svelte
+++ b/web/src/components/settings/SettingsNavSection.svelte
@@ -24,6 +24,8 @@
#settings-section {
gap: 6px;
+ border-radius: var(--border-radius);
+ overflow: hidden;
}
#settings-section-title {
diff --git a/web/src/components/settings/SettingsNavTab.svelte b/web/src/components/settings/SettingsNavTab.svelte
index 63274b99..1f579fb2 100644
--- a/web/src/components/settings/SettingsNavTab.svelte
+++ b/web/src/components/settings/SettingsNavTab.svelte
@@ -22,7 +22,9 @@
- {$t(`settings.page.${tabName}`)}
+
+ {$t(`settings.page.${tabName}`)}
+
@@ -57,19 +59,27 @@
font-weight: 500;
}
- .settings-tab :global(svg) {
+ .tab-icon {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ padding: var(--small-padding);
+ border-radius: 5px;
+ }
+
+ .settings-tab .tab-icon :global(svg) {
stroke-width: 1.5px;
+ stroke: var(--white);
height: 20px;
width: 20px;
}
- .settings-tab .tab-icon :global(svg) {
- stroke: var(--white);
- }
-
.settings-tab-chevron :global(svg) {
display: none;
- stroke: var(--secondary);
+ stroke-width: 2px;
+ stroke: var(--gray);
+ height: 18px;
+ width: 18px;
}
@media (hover: hover) {
@@ -91,29 +101,17 @@
font-size: 14.5px;
}
- .tab-icon {
- display: flex;
- justify-content: center;
- align-items: center;
- padding: var(--small-padding);
- border-radius: 5px;
- }
-
@media screen and (max-width: 750px) {
.settings-tab {
--big-padding: 7px;
background: none;
- padding: var(--big-padding) calc(var(--big-padding) * 1.5);
- }
-
- .settings-tab-left {
- gap: calc(var(--big-padding) * 1.5);
+ padding: var(--big-padding) 11px;
}
.settings-tab:not(:last-child) {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
- box-shadow: 0 3px 0px -1.7px var(--button-stroke);
+ box-shadow: 48px 3px 0px -1.8px var(--button-stroke);
}
.settings-tab:not(:first-child) {
@@ -121,6 +119,10 @@
border-top-right-radius: 0;
}
+ .settings-tab-left {
+ gap: 10px;
+ }
+
.settings-tab-chevron :global(svg) {
display: block;
}