diff --git a/SAS/TMSS/frontend/tmss_webapp/src/layout/_overrides.scss b/SAS/TMSS/frontend/tmss_webapp/src/layout/_overrides.scss index 9c4949508bb5cec8f8366a008663a33e98c796b2..2a374f424a3c437691b9f1f98916b3fcdd7665c2 100644 --- a/SAS/TMSS/frontend/tmss_webapp/src/layout/_overrides.scss +++ b/SAS/TMSS/frontend/tmss_webapp/src/layout/_overrides.scss @@ -180,3 +180,9 @@ border: none; } +.overlay-panel-header { + font-size: 14px; + font-weight: 600; + color: #004B93; + text-align: center; +} \ No newline at end of file diff --git a/SAS/TMSS/frontend/tmss_webapp/src/layout/sass/_stations.scss b/SAS/TMSS/frontend/tmss_webapp/src/layout/sass/_stations.scss index cd8a38299bbf8b186904b158ca2df591c78c959f..18a08aae503368a4e75fdeea786a99eccaa0d8eb 100644 --- a/SAS/TMSS/frontend/tmss_webapp/src/layout/sass/_stations.scss +++ b/SAS/TMSS/frontend/tmss_webapp/src/layout/sass/_stations.scss @@ -26,6 +26,10 @@ padding-right: 20px !important; top: 10px; } + padding-left: 5px; + padding-top: 3px; + cursor: pointer; + font-size: 14px; } .text-caps { text-transform: capitalize; @@ -34,9 +38,10 @@ padding: 10px; max-height: 200px; overflow-y: auto; - label { + span { display: block; } + background-color: #d1cdd936; } .custom-label { padding-left: 8px !important; diff --git a/SAS/TMSS/frontend/tmss_webapp/src/routes/Scheduling/Stations.js b/SAS/TMSS/frontend/tmss_webapp/src/routes/Scheduling/Stations.js index ff68db5b7b0425c6954c70e9e73abb6847e6b241..2cc9aab744b87021b6d2d5ffda604c1859ce1fc3 100644 --- a/SAS/TMSS/frontend/tmss_webapp/src/routes/Scheduling/Stations.js +++ b/SAS/TMSS/frontend/tmss_webapp/src/routes/Scheduling/Stations.js @@ -272,7 +272,7 @@ export default (props) => { <div className="p-field p-grid col-md-6" key={i}> <label className="col-sm-6 text-caps"> {i} - <Button icon="pi pi-info-circle" className="p-button-rounded p-button-secondary p-button-text info" onClick={(e) => showStations(e, i)} /> + <i className="pi pi-info-circle info label-icon" onClick={(e) => showStations(e, i)} /> </label> <div className="col-sm-6"> <InputText id="missingstation" data-testid="name" @@ -350,10 +350,11 @@ export default (props) => { ))} </div> )} - <OverlayPanel ref={(el) => op = el} dismissable style={{width: '450px'}}> + <OverlayPanel ref={(el) => op = el} dismissable style={{width: '200px'}}> + <h6 className="overlay-panel-header">Stations in group</h6> <div className="station-container"> {(stations || []).map(i => ( - <label>{i}</label> + <span>{i}</span> ))} </div> </OverlayPanel>