RawLogsDialog - minor style updates (#188)

* update styles * ellipsize RawLogsDialog PanelHeader text --------- Co-authored-by: James Bradford <[email protected]>
cisagov · Sep 21, 2023 · dd3c1ca · dd3c1ca
1 parent 80162d7
commit dd3c1ca
Showing 1 changed file with 13 additions and 6 deletions.
diff --git a/applications/client/src/views/Campaign/Explore/Panels/Command/RawLogsDialog.tsx b/applications/client/src/views/Campaign/Explore/Panels/Command/RawLogsDialog.tsx
@@ -7,7 +7,7 @@ import { createState } from '@redeye/client/components/mobx-create-state';
 import type { BeaconModel, CommandModel, LogEntryModel } from '@redeye/client/store';
 import { selectFromLogEntry, useStore } from '@redeye/client/store';
 import { copyText, NavBreadcrumbs, PanelHeader } from '@redeye/client/views';
-import { Txt, CoreTokens, UtilityStyles } from '@redeye/ui-styles';
+import { Txt, CoreTokens, UtilityStyles, Spacer } from '@redeye/ui-styles';
 import { useQuery } from '@tanstack/react-query';
 import { throttle } from 'throttle-debounce';
 import { observer } from 'mobx-react-lite';
@@ -115,21 +115,27 @@ export const RawLogsDialog = observer<RawLogsViewerProps>(({ ...props }) => {
 							display: flex;
 							justify-content: space-between;
 							align-items: flex-end;
+							flex-wrap: wrap;
+							gap: 4px 12px;
 						`}
 					>
 						<PanelHeader cy-test="log-title" nodeIconProps={{ type: 'beacon' }}>
-							<Txt>{state.beacon?.computedNameWithHost}</Txt>{' '}
-							<Txt disabled normal>
-								Raw Logs
+							<Txt ellipsize>
+								<Txt>{state.beacon?.computedNameWithHost}</Txt>
+								<Spacer>·</Spacer>
+								<Txt disabled normal>
+									Raw Logs
+								</Txt>
 							</Txt>
 						</PanelHeader>
-						<ButtonGroup>
+						<ButtonGroup css={{ marginLeft: -8 }}>
 							{store.campaign.parsers.includes('cobalt-strike-parser') ? (
 								<Button
 									cy-test="view-log-file"
 									text="View Log File"
 									rightIcon={<CarbonIcon icon={Document16} />}
 									active={state.showLogFile}
+									intent={state.showLogFile ? 'primary' : 'none'}
 									onClick={() => state.update('showLogFile', !state.showLogFile)}
 									minimal
 								/>
@@ -186,9 +192,10 @@ export const RawLogsDialog = observer<RawLogsViewerProps>(({ ...props }) => {
 
 const logModelStyles = css`
 	max-width: unset;
+	width: calc(100% - 6rem);
 `;
 const preStyles = css`
-	padding: 0.5rem 1rem;
+	padding: 2px 1rem;
 	border-bottom: 1px solid ${CoreTokens.BorderMuted};
 	margin: 0;