front: integrate ui-core

front: fix forgotten img

front: fix notification buttons on map editor

Author: kmer2016

front/package.json

@@ -9,7 +9,8 @@
     "@nivo/line": "^0.80.0",
     "@nivo/tooltip": "^0.80.0",
     "@openapi-contrib/openapi-schema-to-json-schema": "^5.1.0",
-    "@osrd-project/ui-icons": "^0.0.10",
+    "@osrd-project/ui-core": "^0.0.21",
+    "@osrd-project/ui-icons": "^0.0.21",
     "@redux-devtools/extension": "^3.3.0",
     "@reduxjs/toolkit": "^2.1.0",
     "@rjsf/core": "^5.17.0",

front/src/applications/editor/components/LayersModal.tsx

@@ -150,7 +150,7 @@ const LayersModal: FC<LayersModalProps> = ({
                     disabled={disabled}
                   />
                   {isString(icon) ? (
-                    <img className="mx-2" src={icon} alt="" height="20" />
+                    <img className="layer-modal-img mx-2" src={icon} alt="" />
                   ) : (
                     <div>{icon}</div>
                   )}

front/src/applications/operationalStudies/views/ScenarioV1.tsx

@@ -264,7 +264,7 @@ const ScenarioV1 = () => {
                     <div className="row">
                       <div className="col-md-6">
                         <div className="scenario-details-infra-name">
-                          <img src={infraLogo} alt="Infra logo" className="mr-2" />
+                          <img src={infraLogo} alt="Infra logo" className="infra-logo mr-2" />
                           {infra && <InfraLoadingState infra={infra} />}
                           <span className="scenario-infra-name">{scenario.infra_name}</span>
                           <small className="ml-auto text-muted">ID {scenario.infra_id}</small>
@@ -355,7 +355,7 @@ const ScenarioV1 = () => {
                     </button>
                     <div className="lead ml-2">{scenario.name}</div>
                     <div className="d-flex align-items-center ml-auto">
-                      <img src={infraLogo} alt="Infra logo" className="mr-2" height="16" />
+                      <img src={infraLogo} alt="Infra logo" className="infra-logo mr-2" />
                       {scenario.infra_name}
                     </div>
                     <div className="d-flex align-items-center ml-4">

front/src/applications/operationalStudies/views/v2/ScenarioV2.tsx

@@ -256,7 +256,7 @@ const ScenarioV2 = () => {
                     <div className="row">
                       <div className="col-md-6">
                         <div className="scenario-details-infra-name">
-                          <img src={infraLogo} alt="Infra logo" className="mr-2" />
+                          <img src={infraLogo} alt="Infra logo" className="infra-logo mr-2" />
                           {infra && <InfraLoadingState infra={infra} />}
                           <span className="scenario-infra-name">{scenario.infra_name}</span>
                           <small className="ml-auto text-muted">ID {scenario.infra_id}</small>
@@ -347,7 +347,7 @@ const ScenarioV2 = () => {
                     </button>
                     <div className="lead ml-2">{scenario.name}</div>
                     <div className="d-flex align-items-center ml-auto">
-                      <img src={infraLogo} alt="Infra logo" className="mr-2" height="16" />
+                      <img src={infraLogo} alt="Infra logo" className="infra-logo mr-2" />
                       {scenario.infra_name}
                     </div>
                     <div className="d-flex align-items-center ml-4">

front/src/common/Map/Settings/MapSettingsBackgroundSwitches.tsx

@@ -46,7 +46,7 @@ const FormatSwitch: FC<{
         checked={state}
         disabled={disabled}
       />
-      <img className="ml-2 rounded" src={icon} alt="" height="24" />
+      <img className="map-format-switch-img ml-2 rounded" src={icon} alt="" />
       <span className="ml-2">{t(label)}</span>
     </div>
   );

front/src/common/Map/Settings/MapSettingsLayers.tsx

@@ -58,7 +58,7 @@ export const FormatSwitch: FC<FormatSwitchProps> = ({ name, icon, color, disable
 };
 
 export const Icon2SVG: FC<{ file: string; altName?: string }> = ({ file, altName }) => (
-  <img src={file} alt={altName} height="16" />
+  <img className="icon-to-svg" src={file} alt={altName} />
 );
 
 const MapSettingsLayers: FC<unknown> = () => (

front/src/common/Pathfinding/Pathfinding.tsx

@@ -537,7 +537,7 @@ const Pathfinding = ({ zoomToFeature, path }: PathfindingProps) => {
     <div className="pathfinding-state-main-container flex-grow-1">
       {infra && infra.state !== 'CACHED' && (
         <div className="content infra-loading">
-          <img src={infraLogo} alt="Infra logo" className="mr-2" />
+          <img src={infraLogo} alt="Infra logo" className="infra-logo mr-2" />
           <div>{t('infraLoading')}</div>
           <InfraLoadingState infra={infra} />
         </div>

front/src/modules/scenario/components/ScenarioCard.tsx

@@ -69,7 +69,7 @@ export default function StudyCard({ setFilterChips, scenario }: StudyCardProps)
       </div>
       <div className="scenario-card-footer">
         <div className="scenario-card-infra">
-          <img src={infraLogo} alt="infra logo" />
+          <img src={infraLogo} alt="infra logo" className="infra-logo" />
           {scenario.infra_name}
         </div>
         <div className="scenario-card-trains-count ml-auto">

front/src/modules/study/components/StudyCard.tsx

@@ -33,7 +33,7 @@ export default function StudyCard({ setFilterChips, study }: StudyCardProps) {
     <div className="study-card">
       <div className="study-card-name" data-testid={study.name}>
         <span className="mr-2">
-          <img src={studyLogo} alt="study logo" height="24" />
+          <img className="study-card-img" src={studyLogo} alt="study logo" />
         </span>
         <span className="study-card-name-text" title={study.name}>
           {study.name}

front/src/modules/trainschedule/components/Timetable/TimetableTrainCard.tsx

@@ -230,7 +230,7 @@ function TimetableTrainCard({
                   className="mr-1 scenario-timetable-train-invalid-icons"
                   title={invalidTrainValues.NewerInfra}
                 >
-                  <img src={invalidInfra} alt="Invalid infra logo" />
+                  <img src={invalidInfra} alt="Invalid infra logo" className="infra-logo" />
                 </div>
               )}
               {train.invalid_reasons && train.invalid_reasons.includes('NewerRollingStock') && (

front/src/modules/trainschedule/components/TimetableV2/TimetableTrainCardV2.tsx

@@ -230,7 +230,7 @@ const TimetableTrainCardV2 = ({
                   className="mr-1 scenario-timetable-train-invalid-icons"
                   title={invalidTrainValues.NewerInfra}
                 >
-                  <img src={invalidInfra} alt="Invalid infra logo" />
+                  <img src={invalidInfra} alt="Invalid infra logo" className="infra-logo" />
                 </div>
               )}
               {train.invalid_reasons && train.invalid_reasons.includes('NewerRollingStock') && (

front/src/styles/scss/_uiCoreIntegration.scss

@@ -0,0 +1,26 @@
+@import '@osrd-project/ui-core/dist/theme.css';
+
+// https://github.com/tailwindlabs/tailwindcss/issues/942
+svg, img {
+  display:inline-block;
+  max-width: none;
+}
+
+//https://github.com/tailwindlabs/tailwindcss/pull/7742#issuecomment-1061332148
+.study-card-img, .map-format-switch-img {
+  height: 24px;
+}
+
+.infra-logo, .icon-to-svg {
+  height: 16px;
+}
+
+.layer-modal-img  {
+  height: 20px;
+}
+
+//https://github.com/tailwindlabs/tailwindcss/issues/6602
+.error-box button {
+  background-color: rgb(239, 239, 239);
+  color: black;
+}

front/src/styles/styles.scss

@@ -12,3 +12,4 @@
 @import 'scss/applications/operationalStudies';
 @import 'scss/applications/rollingStockEditor/rollingStockForm';
 @import 'scss/applications/stdcm';
+@import 'scss/_uiCoreIntegration.scss';