Skip to content

Commit e51b53b

Browse files
Prajwal-MicrosoftPrajwal-Microsoft
authored
Merge pull request #91 from microsoft/psl-raju-dev
fix: fluent UI theme colors applied
2 parents 0b7f1f7 + d0465b2 commit e51b53b

5 files changed

Lines changed: 36 additions & 40 deletions

File tree

‎src/ContentProcessorWeb/src/Components/DocumentViewer/DocumentViewer.styles.scss‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
.imageContainer{
22
width: 100%;
33
height: 100%;
4-
border: 1px solid rgb(219, 219, 219)
4+
border: 1px solid var(--colorNeutralBackground2Pressed)
55
}
66

77
.imageErrorContainer{
8-
background: rgba(0, 0, 0, 0.3);
8+
background: var(--colorBrandShadowAmbient);
99
/* margin: auto; */
1010
display: flex;
1111
align-items: center;
@@ -22,19 +22,19 @@
2222
box-sizing: content-box;
2323
margin: 30px;
2424
border-radius: 6px;
25-
border: 1px solid #c0c0c0;
25+
border: 1px solid var(--colorNeutralStroke1Pressed);
2626
/* font-size: 21px; */
2727
/* font-weight: 600; */
2828
box-shadow: azure;
2929
/* transform: translate(-50%, -50%); */
3030
/* top: 50%; */
3131
/* left: 50%; */
32-
background: white;
32+
background: var(--colorNeutralBackground1);
3333
/* display: flex
3434
; */
35-
background-color: white;
35+
background-color: var(--colorNeutralBackground1);
3636
border: 1px solid #ddd;
37-
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
37+
box-shadow: 0 4px 8px var(--colorNeutralShadowAmbientDarker);
3838

3939
.imgEH{
4040
font-size: 24px;
@@ -47,8 +47,8 @@
4747
display: flex;
4848
justify-content: center;
4949
height: 100%;
50-
border: 1px solid rgb(219, 219, 219);
51-
background: rgb(246, 246, 246);
50+
border: 1px solid var(--colorNeutralBackground2Pressed);
51+
background: var(--colorNeutralBackground4)
5252
}
5353

5454

‎src/ContentProcessorWeb/src/Pages/DefaultPage/Components/ProcessQueueGrid/ProcessQueueGrid.styles.scss‎

Lines changed: 9 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@
4949
}
5050

5151
.roundedBtn {
52-
border: 1px solid #BDBDBD;
52+
border: 1px solid var(--colorNeutralForegroundDisabled);
5353
border-radius: 20px;
5454
text-align: center;
5555
padding: 1px 10px;
@@ -61,11 +61,11 @@
6161
text-transform: capitalize;
6262

6363
span {
64-
color: #2C3C85
64+
color: var(--colorPaletteCornflowerForeground2)
6565
}
6666

6767
.ProcessedCls {
68-
color: #00666D
68+
color: var(--colorPaletteLightTealForeground2)
6969
}
7070

7171
}
@@ -75,23 +75,23 @@
7575
text-align: center;
7676

7777
.gClass {
78-
color: #359B35;
78+
color: var(--colorStatusSuccessForeground3);
7979
}
8080

8181
.yClass {
82-
color: #C19C00;
82+
color: var(--colorPaletteGoldBorderActive);
8383
}
8484

8585
.oClass {
86-
color: #FF5F3DE5;
86+
color: var(--colorStatusWarningBackground3);
8787
}
8888

8989
.rClass {
90-
color: #B10E1C;
90+
color: var(--colorStatusDangerForeground1);
9191
}
9292

9393
.textClass {
94-
color: #0F6CBD
94+
color: var(--colorNeutralForeground2BrandHover)
9595
}
9696
}
9797

@@ -107,7 +107,6 @@
107107

108108
.columnCotainer {
109109
font-size: 12px;
110-
color: #323130;
111110
width: 100%;
112111
}
113112

@@ -127,6 +126,6 @@
127126
display: flex;
128127
align-items: center;
129128
justify-content: center;
130-
color: #0F6CBD
129+
color: var(--colorNeutralForeground2BrandHover)
131130
}
132131
}

‎src/ContentProcessorWeb/src/Pages/DefaultPage/Components/ProcessSteps/ProcessSteps.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { useCallback, useEffect, useState, useRef } from "react";
2-
import { Accordion, AccordionItem, AccordionHeader, AccordionPanel } from "@fluentui/react-components";
2+
import { Accordion, AccordionItem, AccordionHeader, AccordionPanel, tokens } from "@fluentui/react-components";
33
import { useDispatch, useSelector, shallowEqual } from 'react-redux';
44
import { RootState, AppDispatch } from '../../../../store/index.ts';
55
import { JsonEditor } from "json-edit-react";
@@ -70,7 +70,7 @@ const ProcessSteps = () => {
7070
{!status.includes(store.selectedItem.status) && store.processStepsData?.map((step, index) => (
7171
<AccordionItem key={index} value={step.step_name}>
7272
<AccordionHeader onClick={() => handleExpand(index)}> {loadingStates[index] && <Spinner size="tiny" style={{ position: 'absolute', left: '10px' }} label="" />}
73-
<span style={{ fontWeight: 'bold', textTransform: 'capitalize' }}>{step.step_name}</span>
73+
<span style={{ fontWeight: 'bold', textTransform: 'capitalize'}}>{step.step_name}</span>
7474
<span style={{ color: 'green', marginLeft: 'auto', display: 'flex', alignItems: 'center' }}>
7575
{renderProcessTimeInSeconds(step.processed_time)} <CheckmarkCircleFilled style={{ marginLeft: '4px' }} />
7676
</span>

‎src/ContentProcessorWeb/src/Pages/DefaultPage/PanelCenter.tsx‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, { useCallback, useEffect, useState } from "react";
22
import "../../Styles/App.css";
33
import { makeStyles, SelectTabData, SelectTabEvent, Tab, TabList, TabValue, Textarea, Divider, Button } from "@fluentui/react-components";
4-
import { Field } from "@fluentui/react-components";
4+
import { Field,tokens } from "@fluentui/react-components";
55
import PanelToolbar from "../../Hooks/usePanelHooks.tsx";
66
import JSONEditor from "../../Components/JSONEditor/JSONEditor"
77
import { useDispatch, useSelector, shallowEqual } from 'react-redux';
@@ -14,7 +14,6 @@ import { setRefreshGrid } from "../../store/slices/leftPanelSlice.ts";
1414

1515
import { bundleIcon, ChevronDoubleLeft20Filled, ChevronDoubleLeft20Regular } from "@fluentui/react-icons";
1616
const ChevronDoubleLeft = bundleIcon(ChevronDoubleLeft20Regular, ChevronDoubleLeft20Filled);
17-
1817
interface PanelCenterProps {
1918
togglePanel: (panel: string) => void;
2019
}
@@ -41,7 +40,7 @@ const useStyles = makeStyles({
4140
panelCenterBottomSeciton: {
4241
padding: '10px 16px',
4342
boxSizing: 'border-box',
44-
background: '#FAFAFA',
43+
background: tokens.colorNeutralBackground2,
4544
position: 'relative'
4645
},
4746
panelLabel: {
@@ -62,13 +61,13 @@ const useStyles = makeStyles({
6261
height: 'calc(100vh - 200px)',
6362
border: '1px solid #DBDBDB',
6463
overflow: 'auto',
65-
background: '#f6f6f6',
64+
background: tokens.colorNeutralBackground3,
6665
padding: '5px',
6766
boxSizing: 'border-box'
6867
},
6968
fieldLabel: {
7069
fontWeight: 'bold',
71-
color: '#424242',
70+
color: tokens.colorNeutralForeground2,
7271
},
7372
textAreaClass: {
7473
minHeight: '90px',

‎src/ContentProcessorWeb/src/Pages/DefaultPage/Panels.styles.scss‎

Lines changed: 13 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,14 @@
55
/* Panel container styling */
66

77
.panelLeftLayout {
8-
/* background-color: var(--colorNeutralBackground4); */
98
position: relative;
109
display: flex;
1110
height: 100%;
1211
box-sizing: border-box;
1312
flex-direction: column;
1413
overflow-y: auto;
15-
background-color: white;
16-
border: 1px solid #D6D6D6;
14+
background-color: var(--colorNeutralBackground1);
15+
border: 1px solid var(--colorNeutralBackground3Pressed);
1716
border-width: 1px 1px 0px 0px;
1817
flex: 37%;
1918
min-width: 300px;
@@ -30,8 +29,8 @@
3029
box-sizing: border-box;
3130
flex-direction: column;
3231
overflow-y: auto;
33-
background-color: white;
34-
border: 1px solid #D6D6D6;
32+
background-color: var(--colorNeutralBackground1);
33+
border: 1px solid var(--colorNeutralBackground3Pressed);
3534
border-width: 1px 1px 0px 0px;
3635
}
3736

@@ -86,8 +85,8 @@
8685

8786
flex: 31%;
8887
min-width: 280px;
89-
background: white;
90-
border: 2px solid #d6d6d6;
88+
background: var(--colorNeutralBackground1);
89+
border: 2px solid var(--colorNeutralBackground3Pressed);
9190
border-width: 2px 2px 0 0;
9291

9392
.custom-test button {
@@ -102,7 +101,7 @@
102101

103102
.msgp {
104103
margin: auto;
105-
color: red;
104+
color: var(--colorPaletteRedBackground3);
106105
}
107106
}
108107

@@ -115,7 +114,7 @@
115114
flex: none;
116115
width: auto;
117116
min-width: 20px;
118-
border: 1px solid #d6d6d6;
117+
border: 1px solid var(--colorNeutralBackground3Pressed);
119118
border-width: 1px 1px 0 0;
120119

121120
.collapseButtonDiv {
@@ -129,21 +128,21 @@
129128

130129

131130
.panelRight {
132-
/* background-color: var(--colorNeutralBackground4); */
131+
background-color: var(--colorNeutralBackground4);
133132
position: relative;
134133
display: flex;
135134
height: 100%;
136135
box-sizing: border-box;
137136
flex-direction: column;
138137
overflow-y: auto;
139-
background-color: white;
140-
border: 1px solid #D6D6D6;
138+
background-color: var(--colorNeutralBackground1);
139+
border: 1px solid var(--colorNeutralBackground3Pressed);
141140
border-width: 1px 0px 0px 0px;
142141

143142
flex: 31%;
144143
min-width: 280px;
145-
background: white;
146-
border: 1px solid #d6d6d6;
144+
background: var(--colorNeutralBackground1);
145+
border: 1px solid var(--colorNeutralBackground3Pressed);
147146
border-width: 1px 1px 0 0;
148147

149148
.panelRightContent {
@@ -213,7 +212,6 @@
213212
/* Automatically adjusts height */
214213
width: fit-content;
215214
/* Adjust width based on content */
216-
background-color: #f0f0f0;
217215
cursor: pointer;
218216
min-width: 10px !important;
219217

0 commit comments

Comments
 (0)