feat: ui updates - traces explorer (#4555)

frontend/src/container/LogsContextList/LogsContextList.styles.scss

@@ -3,34 +3,30 @@
 
 	.show-more-button {
 		position: absolute;
-		z-index: 1;
 		opacity: 1;
+		z-index: 1;
+
+		cursor: pointer;
 
 		&.up {
-			top: 0;
+			top: -1px;
+			left: -1px;
 		}
 
 		&.down {
-			bottom: 0;
+			bottom: -1px;
+			left: -1px;
+		}
+
+		&.disabled {
+			cursor: not-allowed;
 		}
 	}
 
 	.virtuoso-list {
 		&::-webkit-scrollbar {
-			width: 0.1rem;
-			height: 0.1rem;
-		}
-	}
-
-	&.logs-context-list-asc {
-		.virtuoso-list {
-			padding-top: 16px;
-		}
-	}
-
-	&.logs-context-list-desc {
-		.virtuoso-list {
-			padding-bottom: 16px;
+			width: 0.3rem;
+			height: 0.3rem;
 		}
 	}
 }

frontend/src/container/LogsContextList/ShowButton.styles.scss

@@ -1,31 +1,31 @@
 .show-more-button {
-    background-color: var(--bg-slate-400);
-    color: var(--bg-vanilla-100);
-    display: flex;
-    padding: 4px 8px;
-    align-items: center;
-    gap: 3px;
-    border: none;
-    margin: 0;
+	background-color: var(--bg-slate-400);
+	color: var(--bg-vanilla-100);
+	display: flex;
+	padding: 4px 8px;
+	align-items: center;
+	gap: 3px;
+	border: none;
+	margin: 0;
 }
 
 .show-more-button {
-    &.disabled {
-        background-color: var(--bg-slate-200);
-        color: var(--bg-vanilla-400);
-    }
+	&.disabled {
+		background-color: var(--bg-slate-200);
+		color: var(--bg-vanilla-400);
+	}
 }
 
 .lightMode {
-    .show-more-button {
-        background-color: var(--bg-vanilla-300);
-        color: var(--bg-slate-400);
-    }
+	.show-more-button {
+		background-color: var(--bg-vanilla-300);
+		color: var(--bg-slate-400);
+	}
 
-    .show-more-button {
-        &.disabled {
-            background-color: var(--bg-vanilla-300);
-            color: var(--bg-vanilla-400);
-        }
-    }
-}
+	.show-more-button {
+		&.disabled {
+			background-color: var(--bg-vanilla-300);
+			color: var(--bg-vanilla-400);
+		}
+	}
+}

frontend/src/container/LogsContextList/ShowButton.tsx

@@ -41,7 +41,7 @@ function ShowButton({
 			onClick={onClick}
 			icon={getIcons()}
 			className={cx(
-				'show-more-button',
+				'show-more-button periscope-btn',
 				order === ORDERBY_FILTERS.ASC ? 'up' : 'down',
 				isDisabled && 'disabled',
 			)}

frontend/src/container/TracesExplorer/Controls/styles.ts

@@ -5,4 +5,5 @@ export const Container = styled.div`
 	align-items: center;
 	justify-content: flex-end;
 	gap: 0.5rem;
+	margin: 4px 0;
 `;

frontend/src/pages/TracesExplorer/TracesExplorer.styles.scss

@@ -2,6 +2,12 @@
 	display: flex;
 	flex-direction: row-reverse;
 	align-items: center;
-	margin: 1rem 0 0.5rem 0;
+	margin: 8px 16px;
 	gap: 8px;
 }
+
+.traces-explorer-views {
+	.ant-tabs-tabpane {
+		padding: 0 8px;
+	}
+}

frontend/src/pages/TracesExplorer/index.tsx

@@ -192,7 +192,7 @@ function TracesExplorer(): JSX.Element {
 					<QuerySection />
 				</ExplorerCard>
 
-				<Container>
+				<Container className="traces-explorer-views">
 					<ActionsWrapper>
 						<ExportPanel
 							query={exportDefaultQuery}

frontend/src/pages/TracesModulePage/TracesModulePage.styles.scss

@@ -4,7 +4,7 @@
 		margin-bottom: 0px;
 
 		&::before {
-			border-bottom: none !important;
+			border-bottom: 1px solid var(--bg-slate-400) !important;
 		}
 	}
 
@@ -15,3 +15,13 @@
 		gap: 8px;
 	}
 }
+
+.lightMode {
+	.traces-module-container {
+		.ant-tabs-nav {
+			&::before {
+				border-bottom: 1px solid var(--bg-vanilla-300) !important;
+			}
+		}
+	}
+}

frontend/src/pages/TracesModulePage/TracesModulePage.tsx

@@ -14,7 +14,7 @@ function TracesModulePage(): JSX.Element {
 
 	return (
 		<div className="traces-module-container">
-			<RouteTab routes={routes} activeKey={pathname} history={history} />;
+			<RouteTab routes={routes} activeKey={pathname} history={history} />
 		</div>
 	);
 }