Skip to content

Commit 8cc7316

Browse files
committed
Merge branch 'new-main-page-UX' of github.com:ucfopen/UDOIT into new-main-page-UX
2 parents 634fc7f + 7a00824 commit 8cc7316

39 files changed

+588
-469
lines changed

assets/css/udoit4-theme.css

Lines changed: 26 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -6,29 +6,32 @@
66
--primary-color: var(--pantone-green);
77
--primary-color-text: var(--pantone-green);
88
--primary-color-dark: var(--pantone-green);
9-
--primary-color-hover: #436657;
9+
--primary-color-hover: color-mix(in srgb, var(--primary-color) 100%, #FFFFFF 10%); /* #436657; */
1010
--primary-color-dark-hover: #436657;
11-
--primary-color-light: color-mix(in srgb, var(--primary-color) 15%, #FFFFFF 100%); /* #E8F3ED; */
11+
--primary-color-light: color-mix(in srgb, var(--primary-color) 10%, #FFFFFF 100%); /* #E8F3ED; */
1212
--primary-color-inverse: #F2F7F7;
1313
--text-color: #333333;
1414

1515
--hover-brightness: 1.15;
1616

1717
--link-color: #006AAC;
18-
--link-color-light: color-mix(in srgb, var(--link-color) 15%, #FFFFFF 100%); /* #E9F3FF; */
18+
--link-color-hover: color-mix(in srgb, var(--link-color) 100%, #FFFFFF 10%);
19+
--link-color-light: color-mix(in srgb, var(--link-color) 10%, #FFFFFF 100%); /* #E9F3FF; */
1920
--link-color-dark: #1B5679;
2021

2122
--focus-color: #009AD0;
2223

2324
--issue-color: #F94144;
24-
--issue-color-light: color-mix(in srgb, var(--issue-color) 15%, #FFFFFF 100%);
25+
--issue-color-light: color-mix(in srgb, var(--issue-color) 10%, #FFFFFF 100%);
2526
--issue-color-dark: #E2080C; /* Sufficient contrast with white text */
2627
--potential-color: #F8961E;
27-
--potential-color-light: color-mix(in srgb, var(--potential-color) 15%, #FFFFFF 100%);
28+
--potential-color-light: color-mix(in srgb, var(--potential-color) 10%, #FFFFFF 100%);
2829
--suggestion-color: #32B0E4;
29-
--suggestion-color-light: color-mix(in srgb, var(--suggestion-color) 15%, #FFFFFF 100%);
30+
--suggestion-color-light: color-mix(in srgb, var(--suggestion-color) 10%, #FFFFFF 100%);
31+
--info-color: #2C9ECE;
32+
--info-color-light: color-mix(in srgb, var(--info-color) 10%, #FFFFFF 100%);
3033
--success-color: #006937;
31-
--success-color-light: color-mix(in srgb, var(--success-color) 15%, #FFFFFF 100%);
34+
--success-color-light: color-mix(in srgb, var(--success-color) 10%, #FFFFFF 100%);
3235
--progress-bar-color: #32B0E4;
3336

3437
--black: #000000;
@@ -508,24 +511,22 @@ h1, h2, h3, h4, h5, h6 {
508511
font-weight: 500;
509512
text-transform: uppercase;
510513
padding: .15rem .75rem;
511-
background-color: var(--gray);
514+
background-color: var(--link-color);
512515
cursor: pointer;
513516
border-radius: 16px;
514517

515518
&:focus {
516519
outline: 2px solid var(--focus-color);
517-
outline-offset: 3px;
520+
outline-offset: 1px;
518521
}
519522

520523
&:hover,
521524
&:focus {
522-
background-color: var(--gray-light);
523-
color: var(--gray-dark);
525+
background-color: var(--link-color-hover);
524526
}
525527

526528
&:active {
527-
background-color: var(--gray-lightest);
528-
color: var(--gray-dark);
529+
background-color: var(--link-color-hover);
529530
}
530531
}
531532

@@ -721,7 +722,7 @@ button:disabled {
721722
.separator::after {
722723
content: '';
723724
flex: 1;
724-
border-bottom: 1px solid var(--gray);
725+
border-bottom: 2px solid var(--gray);
725726
}
726727

727728
.separator:not(:empty)::before {
@@ -897,6 +898,12 @@ a:focus {
897898
fill: var(--primary-color);
898899
}
899900

901+
.udoit-info,
902+
.color-info {
903+
color: var(--info-color);
904+
fill: var(--info-color);
905+
}
906+
900907
.spinner {
901908
animation: spin 1.5s linear infinite;
902909
}
@@ -915,6 +922,11 @@ a:focus {
915922
overflow-wrap: break-word;
916923
}
917924

925+
.link-small {
926+
font-size: 0.9rem;
927+
overflow-wrap: anywhere;
928+
}
929+
918930
header {
919931
nav {
920932
display: flex;

assets/js/Components/App.js

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,7 @@ export default function App(initialData) {
7373
newSettings.labels = data.labels
7474
}
7575
setSettings(newSettings)
76+
addMessage({ message: t('msg.settings.updated'), severity: 'success', visible: true })
7677
}
7778
})
7879
}
@@ -377,7 +378,12 @@ export default function App(initialData) {
377378
</>
378379
)
379380
}
380-
<MessageTray t={t} messages={messages} clearMessages={clearMessages} hasNewReport={syncComplete} />
381+
<MessageTray
382+
t={t}
383+
settings={settings}
384+
messages={messages}
385+
clearMessages={clearMessages}
386+
/>
381387
</>
382388
)
383389
}

assets/js/Components/FixIssuesContentPreview.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -129,7 +129,7 @@
129129
}
130130

131131
.scroll-to-error {
132-
opacity: 0.65;
132+
opacity: 0.78;
133133
transition: opacity var(--transition-time);
134134
align-self: start;
135135
pointer-events: all;

assets/js/Components/FixIssuesContentPreview.js

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -334,7 +334,7 @@ export default function FixIssuesContentPreview({
334334

335335
<div className="ufixit-content-preview">
336336

337-
{ activeContentItem && (
337+
{/* { activeContentItem && (
338338
<div className={`ufixit-content-preview-rescan-container ${contentItemsBeingScanned.includes(activeContentItem.id) ? 'active' : ''}`}>
339339
<div className="ufixit-content-preview-rescan flex-row">
340340
<div className="flex-column align-self-center">
@@ -345,7 +345,7 @@ export default function FixIssuesContentPreview({
345345
</div>
346346
</div>
347347
</div>
348-
)}
348+
)} */}
349349

350350
{ !activeIssue ? (
351351
<div className="flex-column">
@@ -395,7 +395,7 @@ export default function FixIssuesContentPreview({
395395
</div>
396396
) : (
397397
<>
398-
{ taggedContent ? (
398+
{ taggedContent && activeContentItem && !contentItemsBeingScanned.includes(activeContentItem?.id) ? (
399399
<>
400400
{ canShowPreview ? (
401401
<>
@@ -445,12 +445,14 @@ export default function FixIssuesContentPreview({
445445
)}
446446
</>
447447
) : (
448-
<div className="flex-row justify-content-center mt-3">
449-
<div className="flex-column justify-content-center">
450-
<ProgressIcon className="icon-lg udoit-suggestion spinner" />
451-
</div>
452-
<div className="flex-column justify-content-center ms-3">
453-
<h2 className="mt-0 mb-0">{t('fix.label.loading_content')}</h2>
448+
<div className="flex-column h-100 flex-grow-1 justify-content-center">
449+
<div className="flex-row justify-content-center mb-4">
450+
<div className="flex-column justify-content-center">
451+
<ProgressIcon className="icon-lg udoit-suggestion spinner" />
452+
</div>
453+
<div className="flex-column justify-content-center ms-3">
454+
<h2 className="mt-0 mb-0">{t('fix.label.loading_content')}</h2>
455+
</div>
454456
</div>
455457
</div>
456458
)}

assets/js/Components/FixIssuesList.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@
3232
position: sticky;
3333
top: 0;
3434
background-color: transparent;
35-
padding: 1rem;
35+
padding: .75rem 1rem;
3636
cursor: pointer;
3737
border-radius: .8rem .8rem .8rem .8rem;
3838
transition: border-radius var(--transition-time) ease-in-out;

0 commit comments

Comments
 (0)