Skip to content

Commit 3ec2e5f

Browse files
shweta2101shweta2101
committed
Migrate styles to theme variables & Bootstrap
Introduce a central SCSS theme and migrate components to Bootstrap variants and unified classes. - Add assets/scss/theme.scss with SASS theme variables (brand colors, utility colors, text/nav colors). - Update assets/scss/main.scss to consume the new theme variables, remove many legacy utility classes, and switch several CSS rules to variables/SASS values. - Replace custom tdei button/link classes across components with Bootstrap button variants (btn-primary, btn-outline-secondary, btn-danger, btn-light, etc.). - Refactor AppNavbar to use BootstrapVue collapse/toggle components, improve mobile side-drawer behavior and keyboard focus handling, and normalize class names to kebab-case. - Normalize CSS class names and markup in WorkspaceItem and other components, add theme imports and scoped styles where appropriate, and make small UI/accessibility improvements (icons, alt text, font sizes). - Adjust nuxt.config to limit downloaded font weights and include additional BootstrapVue components used by the navbar. These changes consolidate styling around a single theme, reduce bespoke utility CSS, and align components with Bootstrap conventions for more consistent UI and easier maintenance.
1 parent 20e7ba3 commit 3ec2e5f

33 files changed

Lines changed: 459 additions & 817 deletions

‎assets/scss/main.scss‎

Lines changed: 17 additions & 299 deletions
Original file line numberDiff line numberDiff line change
@@ -12,21 +12,18 @@ input:-webkit-autofill:focus {
1212
:root {
1313
--primary-font-family: "Open Sans", sans-serif;
1414
--secondary-font-family: "Montserrat", sans-serif;
15-
--brand-primary: #32006e;
16-
--brand-accent: #4b2e83;
17-
--primary-color: var(--brand-primary);
18-
--primary-color-dark: var(--brand-accent);
19-
--secondary-color: #5f647a;
20-
--tdei-blue: #586AB5;
21-
--tdei-green: #479FA1;
22-
--tdei-cyan: #59c3c8;
23-
--purple-background-light: #f4f0fb;
24-
--purple-background-dark: #ddd2ee;
25-
--purple-background-medium: #ebe4f6;
26-
--white: #ffffff;
27-
--ws-create-color: $review-create-color;
28-
--ws-modify-color: $review-modify-color;
29-
--ws-delete-color: $review-delete-color;
15+
--brand-accent: #{$brand-accent};
16+
--secondary-color: #{$tdei-secondary};
17+
--text-navy: #{$text-navy};
18+
--tdei-blue: #{$tdei-blue};
19+
--tdei-green: #{$tdei-green};
20+
--tdei-cyan: #{$tdei-cyan};
21+
--purple-background-light: #{$purple-background-light};
22+
--purple-background-dark: #{$purple-background-dark};
23+
--purple-background-medium: #{$purple-background-medium};
24+
--ws-create-color: #{$review-create-color};
25+
--ws-modify-color: #{$review-modify-color};
26+
--ws-delete-color: #{$review-delete-color};
3027
}
3128

3229
html, body, #__nuxt {
@@ -77,9 +74,9 @@ label > .form-select:first-child {
7774

7875
.dropdown-item.active,
7976
.dropdown-item:active {
80-
color: #2f3661;
77+
color: $text-navy;
8178
text-decoration: none;
82-
background-color: #e2f0f8;
79+
background-color: $dropdown-active-bg;
8380
}
8481

8582
/* Review */
@@ -105,65 +102,6 @@ label > .form-select:first-child {
105102

106103
/* TDEI Utility Classes */
107104

108-
.tdei-primary-button {
109-
background-color: var(--primary-color);
110-
border-color: var(--primary-color);
111-
color: #fff;
112-
font-weight: 600;
113-
border-radius: 4px;
114-
115-
&:hover,
116-
&:active {
117-
background-color: var(--primary-color-dark);
118-
border-color: var(--primary-color-dark);
119-
color: #fff;
120-
}
121-
122-
&:focus {
123-
background-color: var(--primary-color);
124-
border-color: var(--primary-color);
125-
box-shadow: 0 0 0 0.25rem rgba(50, 0, 110, 0.25);
126-
}
127-
128-
&:disabled {
129-
background-color: #cccccc;
130-
border-color: #cccccc;
131-
color: #ffffff;
132-
cursor: not-allowed;
133-
}
134-
}
135-
136-
.tdei-secondary-button {
137-
border-color: var(--secondary-color);
138-
font-weight: 600 !important;
139-
140-
&:hover {
141-
background-color: var(--secondary-color);
142-
color: #fff;
143-
border-color: var(--secondary-color);
144-
}
145-
}
146-
147-
.btn-check:checked + .tdei-secondary-button,
148-
.btn-check:active + .tdei-secondary-button,
149-
.tdei-secondary-button.active,
150-
.tdei-secondary-button:active {
151-
background-color: var(--secondary-color);
152-
color: #fff;
153-
border-color: var(--secondary-color);
154-
}
155-
156-
.tdei-primary-link {
157-
color: var(--primary-color);
158-
font-weight: 600;
159-
text-decoration: none;
160-
161-
&:hover {
162-
color: var(--primary-color-dark);
163-
text-decoration: underline;
164-
}
165-
}
166-
167105
.page-header-title {
168106
font-family: var(--secondary-font-family);
169107
font-size: 24px;
@@ -174,7 +112,7 @@ label > .form-select:first-child {
174112
.page-header-subtitle {
175113
font-family: var(--secondary-font-family);
176114
font-size: 14px;
177-
color: var(--secondary-color);
115+
color: $tdei-secondary;
178116
}
179117

180118
.tdei-bold-name {
@@ -185,239 +123,19 @@ label > .form-select:first-child {
185123

186124
.tdei-name-desc {
187125
font-size: 14px;
188-
color: var(--secondary-color);
126+
color: $tdei-secondary;
189127
}
190128

191129
.tdei-hint-text {
192130
font-size: 14px;
193-
color: var(--secondary-color);
131+
color: $tdei-secondary;
194132
font-style: italic;
195133
}
196134

197-
.apiKey {
198-
border-top: 1px dashed #b5b5b5;
199-
margin-top: 10px;
200-
padding-top: 10px;
201-
}
202-
203-
.jsonContent {
204-
border: 1px solid var(--secondary-color);
205-
margin-top: 1%;
206-
overflow: auto;
207-
}
208-
209135
.header {
210136
display: flex;
211137
justify-content: space-between;
212138
align-items: center;
213139
padding-bottom: 20px;
214140
}
215141

216-
.tdei-outline-cyan-button {
217-
color: var(--tdei-cyan);
218-
font-weight: 600;
219-
border: 2px solid var(--tdei-cyan);
220-
221-
&:hover,
222-
&:active {
223-
color: #fff;
224-
background-color: var(--tdei-cyan);
225-
border-color: var(--tdei-cyan);
226-
}
227-
228-
&:focus,
229-
&:focus-visible {
230-
color: var(--tdei-cyan);
231-
border-color: var(--tdei-cyan);
232-
box-shadow: 0 0 0 0.25rem rgba(89, 195, 200, 0.25);
233-
}
234-
235-
&:disabled {
236-
color: #9aa0b3;
237-
border-color: #d3d7e2;
238-
background-color: transparent;
239-
cursor: not-allowed;
240-
}
241-
}
242-
243-
.btn.tdei-rounded-button {
244-
background-color: var(--primary-color);
245-
border-color: var(--primary-color);
246-
color: #fff;
247-
font-weight: 600;
248-
border-radius: 100px;
249-
250-
&:hover,
251-
&:active {
252-
background-color: var(--primary-color-dark);
253-
border-color: var(--primary-color-dark);
254-
color: #fff;
255-
}
256-
}
257-
258-
.nav-tabs .nav-link {
259-
color: var(--secondary-color);
260-
background-color: transparent !important;
261-
border-top: none !important;
262-
border-left: none !important;
263-
border-right: none !important;
264-
padding: 10px 0;
265-
margin-right: 15px;
266-
}
267-
268-
.nav-tabs .nav-link:hover {
269-
color: gray;
270-
border: none;
271-
}
272-
273-
.nav-tabs .nav-link.active {
274-
color: #162848;
275-
background-color: #fff;
276-
font-weight: 600;
277-
border-top: none;
278-
border-left: none;
279-
border-right: none;
280-
border-bottom: 4px solid var(--primary-color);
281-
}
282-
283-
.maroon-bg,
284-
.maroon-bg:hover {
285-
background-color: #c84349 !important;
286-
border-color: #c84349 !important;
287-
color: #fff !important;
288-
font-weight: 600;
289-
border-radius: 100px;
290-
}
291-
292-
.form-group-custom {
293-
position: relative;
294-
min-height: 90px;
295-
margin-right: 1rem;
296-
}
297-
298-
.form-group-custom .form-control,
299-
.form-group-custom .react-datepicker-wrapper,
300-
.form-group-custom .react-select-container {
301-
width: 100%;
302-
}
303-
304-
.form-group-custom .invalid-feedback {
305-
position: absolute;
306-
bottom: 0;
307-
left: 0;
308-
width: 100%;
309-
}
310-
311-
.container {
312-
padding: 20px;
313-
}
314-
315-
.column-style {
316-
background: #FFFFFF 0% 0% no-repeat padding-box;
317-
box-shadow: 0px 1px 12px #0000000D;
318-
border: 1px solid #EEEEEE;
319-
border-radius: 8px;
320-
opacity: 1;
321-
padding: 20px;
322-
flex: 1;
323-
margin-right: 15px;
324-
325-
&:nth-last-child(1) {
326-
margin-right: 0;
327-
}
328-
}
329-
330-
.section-style {
331-
background: #FFFFFF 0% 0% no-repeat padding-box;
332-
box-shadow: 0px 1px 12px #0000000D;
333-
border: 1px solid #EEEEEE;
334-
border-radius: 8px;
335-
opacity: 1;
336-
padding: 20px;
337-
margin-top: 20px;
338-
}
339-
340-
.infoIconImg {
341-
font-size: 14px !important;
342-
color: #a5a5a5 !important;
343-
margin-right: 5px !important;
344-
}
345-
346-
input[type=checkbox] {
347-
-webkit-appearance: none;
348-
-moz-appearance: none;
349-
appearance: none;
350-
display: inline-block;
351-
border-radius: 6px;
352-
border: 1.5px solid var(--secondary-color);
353-
354-
&:checked {
355-
background-color: var(--primary-color);
356-
border: 1.5px solid var(--primary-color);
357-
}
358-
}
359-
360-
.iconImg {
361-
width: 15px;
362-
margin-right: 15px !important;
363-
}
364-
365-
.formTitle {
366-
margin-bottom: 2px;
367-
font-size: 26px;
368-
font-weight: 300;
369-
}
370-
.MuiStepper-horizontal > .MuiStep-horizontal {
371-
padding-left: 4px;
372-
373-
.column-style {
374-
flex: unset;
375-
margin-right: 0;
376-
margin-bottom: 20px;
377-
378-
&:nth-last-child(1) {
379-
margin-bottom: 0;
380-
}
381-
}
382-
383-
.page-header-title {
384-
font-size: 16px;
385-
}
386-
}
387-
388-
.form-check-input[type="radio"],
389-
input[type="radio"] {
390-
accent-color: var(--primary-color) !important;
391-
}
392-
393-
.form-check .form-check-input.form-check-input[type="radio"]:checked {
394-
background-color: var(--primary-color) !important;
395-
border-color: var(--primary-color) !important;
396-
}
397-
398-
.form-check .form-check-input.form-check-input[type="radio"]:focus {
399-
border-color: var(--primary-color) !important;
400-
box-shadow: 0 0 0 0.25rem rgba(50, 0, 110, 0.25) !important;
401-
}
402-
403-
.MuiButtonBase-root:focus-visible {
404-
outline: 2px solid #2684ff !important;
405-
outline-offset: 1px;
406-
border-radius: 2px;
407-
box-shadow: none !important;
408-
}
409-
410-
.btn:focus-visible {
411-
outline: 2px solid #2684ff !important;
412-
outline-offset: 1px;
413-
border-radius: 2px;
414-
box-shadow: none !important;
415-
}
416-
417-
button:focus-visible,
418-
a:focus-visible {
419-
outline: 2px solid #2684ff !important;
420-
outline-offset: 1px;
421-
border-radius: 2px;
422-
box-shadow: none !important;
423-
}

‎assets/scss/theme.scss‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,27 @@
44
$border-radius: 0.15rem;
55
$card-height: 100%;
66
$primary: #32006e;
7+
$secondary: #5f647a;
8+
$btn-font-weight: 600;
79

810
@import "bootstrap/scss/functions";
911
@import "bootstrap/scss/variables";
1012
@import "bootstrap/scss/mixins";
1113

1214
$navbar-height: 58px;
1315

16+
// TDEI brand colors
17+
$brand-accent: #4b2e83;
18+
$tdei-secondary: $secondary;
19+
$tdei-blue: #586ab5;
20+
$tdei-green: #479fa1;
21+
$tdei-cyan: #59c3c8;
22+
$purple-background-light: #f4f0fb;
23+
$purple-background-dark: #ddd2ee;
24+
$purple-background-medium: #ebe4f6;
25+
$text-navy: #2f3661;
26+
$dropdown-active-bg: #e2f0f8;
27+
1428
$review-create-color: #39dbc0;
1529
$review-modify-color: #db950a;
1630
$review-delete-color: #cc2c47;

‎components/AppLogo.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
<template>
2-
<img class="app-logo img-fluid" src="~/assets/img/tdei-logo.png" alt="TDEI Logo" />
2+
<img class="app-logo img-fluid" src="~/assets/img/tdei-logo.png" alt="" />
33
</template>
44

0 commit comments

Comments
 (0)