Merge pull request #4815 from nextcloud-libraries/enh/improve-appside…

…bartabs-look

Fix tabs appearance

src/components/NcAppSidebar/NcAppSidebarTabs.vue

@@ -269,8 +269,8 @@ export default {
 	&__nav {
 		display: flex;
 		justify-content: stretch;
-		margin-top: 10px;
-		padding: 0 4px;
+		margin: 10px 8px 0 8px;
+		border-bottom: 1px solid var(--color-border);
 	}
 
 	&__tab {
@@ -314,7 +314,23 @@ export default {
 	}
 }
 
-:deep(.checkbox-radio-switch--button-variant.checkbox-radio-switch) {
-	border: unset;
+// Override checkbox-radio-switch styles so that it looks like tabs
+:deep(.checkbox-radio-switch--button-variant) {
+	border: unset !important;
+	border-radius: 0 !important;
+	.checkbox-content {
+		padding: var(--default-grid-baseline);
+		border-radius: var(--default-grid-baseline) var(--default-grid-baseline) 0 0 !important;
+		margin: 0 !important;
+		border-bottom: var(--default-grid-baseline) solid transparent !important;
+		.checkbox-content__icon--checked > * {
+			color: var(--color-main-text) !important;
+		}
+	}
+	&.checkbox-radio-switch--checked .checkbox-radio-switch__content{
+		background: transparent !important;
+		color: var(--color-main-text) !important;
+		border-bottom: var(--default-grid-baseline) solid var(--color-primary-element) !important;
+	}
 }
 </style>