Skip to content

Commit 6254bab

Browse files
eshankvaisheshankvaish
committed
feat: use component specific theme in logs renderer
1 parent 5bdaeb1 commit 6254bab

File tree

7 files changed

+71
-58
lines changed

7 files changed

+71
-58
lines changed

‎src/Shared/Components/CICDHistory/History.components.tsx

Lines changed: 47 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616

1717
import { useCallback, useEffect } from 'react'
1818
import { useLocation } from 'react-router-dom'
19+
import { AppThemeType, getComponentSpecificThemeClass } from '@Shared/Providers'
1920
import {
2021
ClipboardButton,
2122
GenericEmptyState,
@@ -60,54 +61,58 @@ export const LogResizeButton = ({
6061

6162
return (
6263
showButton && (
63-
<Tooltip
64-
placement="left"
65-
shortcutKeyCombo={{
66-
text: fullScreenView ? 'Exit fullscreen' : 'Enter fullscreen',
67-
combo: shortcutCombo,
68-
}}
69-
>
70-
<button
71-
type="button"
72-
aria-label="Enter/Exit fullscreen view"
73-
className="zoom dc__zi-4 flex dc__no-border log-resize-button"
74-
onClick={toggleFullScreen}
64+
<div className={getComponentSpecificThemeClass(AppThemeType.dark)}>
65+
<Tooltip
66+
placement="left"
67+
shortcutKeyCombo={{
68+
text: fullScreenView ? 'Exit fullscreen' : 'Enter fullscreen',
69+
combo: shortcutCombo,
70+
}}
7571
>
76-
{fullScreenView ? (
77-
<ZoomOut className="icon-dim-16 dc__no-shrink" />
78-
) : (
79-
<ZoomIn className="icon-dim-16 dc__no-shrink" />
80-
)}
81-
</button>
82-
</Tooltip>
72+
<button
73+
type="button"
74+
aria-label="Enter/Exit fullscreen view"
75+
className="zoom dc__zi-4 flex dc__no-border log-resize-button"
76+
onClick={toggleFullScreen}
77+
>
78+
{fullScreenView ? (
79+
<ZoomOut className="icon-dim-16 dc__no-shrink" />
80+
) : (
81+
<ZoomIn className="icon-dim-16 dc__no-shrink" />
82+
)}
83+
</button>
84+
</Tooltip>
85+
</div>
8386
)
8487
)
8588
}
8689

8790
export const Scroller = ({ scrollToTop, scrollToBottom, style }: ScrollerType): JSX.Element => (
88-
<div style={style} className="dc__element-scroller flex column top br-4">
89-
<Tooltip alwaysShowTippyOnHover content="Scroll to Top" placement="left">
90-
<button
91-
className="flex"
92-
disabled={!scrollToTop}
93-
type="button"
94-
onClick={scrollToTop}
95-
aria-label="scroll-to-top"
96-
>
97-
<DropDownIcon className="rotate" style={{ ['--rotateBy' as any]: '180deg' }} />
98-
</button>
99-
</Tooltip>
100-
<Tooltip alwaysShowTippyOnHover content="Scroll to Bottom" placement="left">
101-
<button
102-
className="flex"
103-
disabled={!scrollToBottom}
104-
type="button"
105-
onClick={scrollToBottom}
106-
aria-label="scroll-to-button"
107-
>
108-
<DropDownIcon className="rotate" />
109-
</button>
110-
</Tooltip>
91+
<div className={getComponentSpecificThemeClass(AppThemeType.dark)}>
92+
<div style={style} className="dc__element-scroller flex column top br-4">
93+
<Tooltip alwaysShowTippyOnHover content="Scroll to Top" placement="left">
94+
<button
95+
className="flex"
96+
disabled={!scrollToTop}
97+
type="button"
98+
onClick={scrollToTop}
99+
aria-label="scroll-to-top"
100+
>
101+
<DropDownIcon className="rotate" style={{ ['--rotateBy' as any]: '180deg' }} />
102+
</button>
103+
</Tooltip>
104+
<Tooltip alwaysShowTippyOnHover content="Scroll to Bottom" placement="left">
105+
<button
106+
className="flex"
107+
disabled={!scrollToBottom}
108+
type="button"
109+
onClick={scrollToBottom}
110+
aria-label="scroll-to-button"
111+
>
112+
<DropDownIcon className="rotate" />
113+
</button>
114+
</Tooltip>
115+
</div>
111116
</div>
112117
)
113118

‎src/Shared/Components/CICDHistory/LogStageAccordion.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -132,7 +132,7 @@ const LogStageAccordion = ({
132132
>
133133
<span
134134
ref={scrollIntoView}
135-
className="cn-4 col-2 lh-20 dc__text-align-end dc__word-break mono fs-14 dc__user-select-none"
135+
className="cn-5 col-2 lh-20 dc__text-align-end dc__word-break mono fs-14 dc__user-select-none"
136136
data-contains-match={doesLineContainSearchMatch}
137137
>
138138
{logsIndex + 1}

‎src/Shared/Components/CICDHistory/LogsRenderer.scss

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -52,29 +52,29 @@
5252
}
5353

5454
&__stage-accordion {
55-
background-color: #0c1021;
55+
background-color: var(--transparent);
5656

5757
&:not(&--open-stage):hover {
58-
background-color: rgba(44, 51, 84, 0.5);
58+
background-color: var(--bg-secondary);
5959
}
6060

6161
&--open-stage {
62-
background-color: #2c3354;
62+
background-color: var(--bg-primary);
6363
}
6464
}
6565

6666
&__log-item {
6767
grid-template-columns: 36px auto;
6868
&:hover {
69-
background-color: var(--white-20);
69+
background-color: var(--bg-hover);
7070
}
7171
}
7272

7373
&__filters-border-bottom {
74-
border-bottom: 1px solid #2c3354;
74+
border-bottom: 1px solid var(--border-secondary);
7575

7676
& > :not(:first-child) {
77-
border-left: 1px solid #2C3354;
77+
border-left: 1px solid var(--border-secondary);
7878
}
7979
}
8080
}

‎src/Shared/Components/CICDHistory/LogsRenderer.tsx

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ import { escapeRegExp, sanitizeTargetPlatforms } from '@Shared/Helpers'
2323
import { ReactComponent as ICExpandAll } from '@Icons/ic-expand-all.svg'
2424
import { ReactComponent as ICCollapseAll } from '@Icons/ic-collapse-all.svg'
2525
import { ReactComponent as ICArrow } from '@Icons/ic-caret-down.svg'
26+
import { AppThemeType, getComponentSpecificThemeClass } from '@Shared/Providers'
2627
import {
2728
Progressing,
2829
Host,
@@ -77,7 +78,7 @@ const renderBlobNotConfigured = (): JSX.Element => (
7778
{renderLogsNotAvailable('Logs are available only at runtime.')}
7879
<div className="flexbox configure-blob-container pt-8 pr-12 pb-8 pl-12 bcv-1 br-4">
7980
<HelpIcon className="icon-dim-20 fcv-5" />
80-
<span className="fs-13 fw-4 mr-8 ml-8">Want to store logs to view later?</span>
81+
<span className="fs-13 fw-4 mr-8 ml-8 text__white">Want to store logs to view later?</span>
8182
<a
8283
className="fs-13 fw-6 cb-5 dc__no-decor"
8384
href={DOCUMENTATION.BLOB_STORAGE}
@@ -483,13 +484,13 @@ const LogsRenderer = ({ triggerDetails, isBlobStorageConfigured, parentType, ful
483484
className="flexbox-col pb-20 logs-renderer-container flex-grow-1"
484485
data-testid="check-logs-detail"
485486
style={{
486-
backgroundColor: '#0C1021',
487+
backgroundColor: 'var(--terminal-bg)',
487488
}}
488489
>
489490
<div
490491
className={`flexbox-col pb-7 dc__position-sticky dc__zi-2 ${fullScreenView ? 'dc__top-0' : 'dc__top-36'}`}
491492
style={{
492-
backgroundColor: '#0C1021',
493+
backgroundColor: 'var(--terminal-bg)',
493494
}}
494495
>
495496
<div className="flexbox logs-renderer__search-bar logs-renderer__filters-border-bottom pl-12">
@@ -610,11 +611,15 @@ const LogsRenderer = ({ triggerDetails, isBlobStorageConfigured, parentType, ful
610611
)
611612
}
612613

613-
return triggerDetails.podStatus !== POD_STATUS.PENDING &&
614-
logsNotAvailable &&
615-
(!isBlobStorageConfigured || !triggerDetails.blobStorageEnabled)
616-
? renderConfigurationError(isBlobStorageConfigured)
617-
: renderLogs()
614+
return (
615+
<div className={`flexbox-col flex-grow-1 ${getComponentSpecificThemeClass(AppThemeType.dark)}`}>
616+
{triggerDetails.podStatus !== POD_STATUS.PENDING &&
617+
logsNotAvailable &&
618+
(!isBlobStorageConfigured || !triggerDetails.blobStorageEnabled)
619+
? renderConfigurationError(isBlobStorageConfigured)
620+
: renderLogs()}
621+
</div>
622+
)
618623
}
619624

620625
export default LogsRenderer

‎src/Shared/Components/CICDHistory/cicdHistory.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -259,7 +259,7 @@
259259
box-shadow:
260260
0 0 4px 0 rgba(0, 10, 20, 0.5),
261261
0 0 4px 0 rgba(0, 10, 20, 0.5);
262-
background-color: #2c3354;
262+
background-color: var(--bg-primary);
263263
opacity: 0.8;
264264
z-index: 11;
265265

‎src/Shared/Providers/ThemeProvider/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,3 +16,4 @@
1616

1717
export * from './ThemeProvider'
1818
export { AppThemeType } from './types'
19+
export { getComponentSpecificThemeClass } from './utils'

‎src/Shared/Providers/ThemeProvider/utils.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -66,3 +66,5 @@ export const getThemeConfigFromLocalStorage = (): ThemeConfigType => {
6666
themePreference: selectedTheme,
6767
}
6868
}
69+
70+
export const getComponentSpecificThemeClass = (appTheme: AppThemeType) => `component-specific-theme__${appTheme}`

0 commit comments

Comments
 (0)