City-of-Helsinki · eemeli-kukkonen-siili · Sep 15, 2025 · Sep 9, 2025 · Sep 9, 2025 · Sep 9, 2025
diff --git a/public/locales/fi/translation.json b/public/locales/fi/translation.json
@@ -266,9 +266,9 @@
     "fieldset-info":"Yhteensä {{fieldAmount}} tietuetta.",
     "no-fields":"Suodatinvalinnalla ei löytynyt tämän otsikon alta suodatettavia kenttiä.",
     "link-to-map":"Linkki projektin karttapalveluun.",
-    "add-new-board":"Lisää uusi lautakunta",
-    "add-new-presence":"Lisää uusi esilläolo",
-    "add-new-review": "Lisää uusi nähtävilläolo",
+    "add-new-board":"Lisää lautakunta",
+    "add-new-presence":"Lisää esilläolo",
+    "add-new-review": "Lisää nähtävilläolo",
     "adding":"Lisätään",
     "saving":"Tietoja tallennetaan",
     "deleting":"Poistetaan"

diff --git a/src/components/ProjectTimeline/VisTimeline.scss b/src/components/ProjectTimeline/VisTimeline.scss
@@ -65,7 +65,6 @@
     }
 
     .timeline-menu-container {
-        padding-top: $size12;
         position: sticky;
         top: 0;
         background-color: #ffffff;
@@ -78,6 +77,7 @@
         align-items: center;
         .time-menu{
             padding-left: 291px;
+            padding-top: $size12;
             button {
                 --min-size: $size32; //hds syntax
                 width: $size44;
@@ -103,6 +103,7 @@
             }
         }
         .today-menu{
+            padding-top: $size12;
             button {
                 --min-size: $size32; //hds syntax
                 height: $size44;
@@ -150,7 +151,6 @@
                 color: $black1;
                 border: 1px #1A1A1A solid;
                 border-radius: $size16;
-                margin-bottom: $size12;
                 margin-right: $size16;
                 &:hover {
                     background-color: $color-black-20;
@@ -178,7 +178,6 @@
                 border: 1px #1A1A1A solid;
                 border-radius: $size16;
                 outline-offset: 2px;
-                margin-bottom: $size16;
                 margin-right: $size16;
                 outline: 3px solid $color-coat-of-arms;
             }
@@ -330,6 +329,10 @@
         &.past {
             background: $color-gray;
         }
+        &.board-only {
+            background-color: transparent;
+            left: 0;
+        }
     }
 
     .vis-dot.board-only{
@@ -957,6 +960,8 @@
 
 .foreground-highlight{
     background-color: #F0F0FF80;
+    z-index: 100;
+    min-height: 36px;
 }
 .january-first {
     border-left:$size1 solid $border-gray4 !important;

diff --git a/src/components/ProjectTimeline/VisTimelineGroup.jsx b/src/components/ProjectTimeline/VisTimelineGroup.jsx
@@ -333,7 +333,6 @@ const VisTimelineGroup = forwardRef(({ groups, items, deadlines, visValues, dead
 
     const openDialog = (data, container) => {
       const groupId = data.id;
-      const phaseId = `${data?.phaseID}_${data?.id}`;
       const timelineElement = timelineRef?.current;
 
       setToggleTimelineModal(prev => {
@@ -351,7 +350,7 @@ const VisTimelineGroup = forwardRef(({ groups, items, deadlines, visValues, dead
 
         if (timelineElement) {
           removeHighlights(timelineElement);
-          addHighlights(timelineElement, phaseId, data, container);
+          addHighlights(timelineElement, data, container);
         }
 
         setTimelineData({group: data.nestedInGroup, content: data.content});
@@ -375,31 +374,34 @@ const VisTimelineGroup = forwardRef(({ groups, items, deadlines, visValues, dead
       });
     };
 
-    const addHighlights = (timelineElement, phaseId, data, container) => {
-      if (phaseId && timelineElement) {
-        const matchedItem = timelineElement.querySelector(`.vis-item[class*="${phaseId}"]`);
-        if (matchedItem) {
-          const groupEl = matchedItem.closest(".vis-group");
+    const addHighlights = (timelineElement, data, container) => {
+      // Remove previous highlights
+      timelineElement
+        .querySelectorAll(".vis-group.foreground-highlight")
+        .forEach(el => el.classList.remove("foreground-highlight"));
+
+      // setTimeout(..., 0) ensures DOM elements are rendered before highlighting;
+      // without it, elements may not exist yet, causing highlight logic to fail.
+      setTimeout(() => {
+        if (timelineElement && data?.deadlinegroup) {
+          const groupEls = timelineElement.querySelectorAll(`.vis-group.${data.deadlinegroup}`);
+          const groupEl = Array.from(groupEls).find(
+            el => el.parentElement?.classList?.contains('vis-foreground')
+          );
+          groupEl?.classList?.add("foreground-highlight");
           if (groupEl) {
-            localStorage.setItem('timelineHighlightedElement', phaseId);
-            groupEl.classList.add("foreground-highlight");
+            localStorage.setItem('timelineHighlightedElement', data.deadlinegroup);
           }
         }
-      }
-      if (container) {
+
         container?.classList?.add("highlight-selected");
-        if (container.parentElement.parentElement) {
-          container.parentElement.parentElement.classList.add("highlight-selected");
-        }
+        container?.parentElement?.parentElement?.classList?.add("highlight-selected");
         localStorage.setItem('menuHighlight', data.className ? data.className : false);
-      }
-      const groupContainer = timelineElement.querySelector(`#timeline-group-${data.id}`);
-      if (groupContainer) {
-        groupContainer.classList.add("highlight-selected");
-        if (groupContainer.parentElement.parentElement) {
-          groupContainer.parentElement.parentElement.classList.add("highlight-selected");
-        }
-      }
+
+        const groupContainer = timelineElement.querySelector(`#timeline-group-${data.id}`);
+        groupContainer?.classList?.add("highlight-selected");
+        groupContainer?.parentElement?.parentElement?.classList?.add("highlight-selected");
+      }, 0);
     };
 
     const handleClosePanel = () => {

diff --git a/src/components/common/Fonts.scss b/src/components/common/Fonts.scss
@@ -1,7 +1,6 @@
 @font-face {
   font-family: 'Helsinki Grotesk Regular';
-  src: url('../../assets/fonts/HelsinkiGrotesk-Regular.woff2') format('woff2'),
-       url('../../assets/fonts/HelsinkiGrotesk-Regular.woff') format('woff'),
+  src: url('../../assets/fonts/HelsinkiGrotesk-Regular.woff') format('woff'),
        url('../../assets/fonts/HelsinkiGrotesk-Regular.ttf') format('truetype');
   font-weight: 400;
   font-style: normal;
@@ -10,8 +9,7 @@
 
 @font-face {
   font-family: 'Helsinki Grotesk Bold';
-  src: url('../../assets/fonts/HelsinkiGrotesk-Bold.woff2') format('woff2'),
-       url('../../assets/fonts/HelsinkiGrotesk-Bold.woff') format('woff'),
+  src: url('../../assets/fonts/HelsinkiGrotesk-Bold.woff') format('woff'),
        url('../../assets/fonts/HelsinkiGrotesk-Bold.ttf') format('truetype');
   font-weight: 700;
   font-style: normal;
@@ -20,8 +18,7 @@
 
 @font-face {
   font-family: 'Helsinki Grotesk Medium';
-  src: url('../../assets/fonts/HelsinkiGrotesk-Medium.woff2') format('woff2'),
-       url('../../assets/fonts/HelsinkiGrotesk-Medium.woff') format('woff'),
+  src: url('../../assets/fonts/HelsinkiGrotesk-Medium.woff') format('woff'),
        url('../../assets/fonts/HelsinkiGrotesk-Medium.ttf') format('truetype');
   font-weight: 500;
   font-style: normal;
@@ -30,8 +27,7 @@
 
 @font-face {
   font-family: 'Helsinki Grotesk Medium Italic';
-  src: url('../../assets/fonts/HelsinkiGrotesk-MediumItalic.woff2') format('woff2'),
-       url('../../assets/fonts/HelsinkiGrotesk-MediumItalic.woff') format('woff'),
+  src: url('../../assets/fonts/HelsinkiGrotesk-MediumItalic.woff') format('woff'),
        url('../../assets/fonts/HelsinkiGrotesk-MediumItalic.ttf') format('truetype');
   font-weight: 500;
   font-style: italic;

diff --git a/src/components/common/_Common.scss b/src/components/common/_Common.scss
@@ -1150,13 +1150,17 @@ header{
     padding-left: $size34 !important;
     padding-top: $size16 !important;
     padding-bottom: $size24 !important;
+    font-family: 'Helsinki Grotesk Medium', sans-serif !important;
 
     .button-primary,.button-danger,.button-secondary {
       margin-right: $size16;
     }
     .button-secondary{
       border: 2px solid $color-error;
-      color: $color-error
+      color: $color-error;
+      &:hover {
+        background-color: $color-error-light;
+      }
     }
   }
 }

diff --git a/src/components/common/colors.scss b/src/components/common/colors.scss
@@ -96,7 +96,7 @@ $color-black-5: #F2F2F2;
 $color-black-10: #e5e5e5;
 $color-black-20: #ccc;
 $color-black-30: #b2b2b2;
-$color-black-40: #999898;
+$color-black-40: #999999;
 $color-black-50: #808080;
 $color-black-60: #666;
 $color-black-70: #4c4c4c;

diff --git a/src/components/project/EditProjectTimetableModal/index.jsx b/src/components/project/EditProjectTimetableModal/index.jsx
@@ -618,6 +618,7 @@ class EditProjectTimeTableModal extends Component {
           startDate = formValues && formValues["hyvaksymispaatos_pvm"] 
           ? new Date(formValues["hyvaksymispaatos_pvm"]) 
           : phaseStart
+          startDate.setHours(12, 0, 0, 0);
         }
         else{
           //If formValues has deadline.attribute use that values, it if not then use deadline[i].date in startDate.

diff --git a/src/components/projectEdit/ProjectEdit.scss b/src/components/projectEdit/ProjectEdit.scss
@@ -591,8 +591,9 @@
     }
 
     &::-webkit-scrollbar-track {
-      background-color: transparent;
-      margin-block-start: 165px;
+      background-color: #D8D8D8;
+      margin-block-start: 155px;
+      margin-block-end: 4px;
     }
 
     .timeline-group-header {
@@ -658,7 +659,7 @@
         justify-content: flex-start;
         margin:0;
         div{
-          margin: $size12;
+          margin: $size10;
         }
         span{
           color: $black1;
@@ -673,7 +674,6 @@
         color: $color-black-40 !important;
         cursor: not-allowed;
         pointer-events: none;
-        border: none;
         span {
           color: $color-black-40 !important;
         }
@@ -685,7 +685,7 @@
     }
 
     .add-button-info{
-      color: $color-info;
+      color: #0062b9;
       padding-left: $size48;
       padding-right: $size24;
       padding-bottom: $size12;
@@ -710,6 +710,10 @@
     margin: 0px 0 0 0 !important;
     border-top: 1px solid #808080 !important;
     background-color: #fff !important;
+    font-family: 'Helsinki Grotesk Medium', sans-serif !important;
+    font-size: $size16;
+    font-weight: 500;
+    line-height: $size24;
     .form-buttons{
       margin-top: 24px;
       margin-bottom: 24px;
@@ -738,12 +742,6 @@
 }
 
 .timeline-edit-right{
-/*   max-height: 79vh;
-  max-width: 513px !important;
-  margin: auto 8px auto auto !important;
-  position: relative !important;
-  margin-top: 70px !important;
-  overflow-y: auto; */
   height: calc(98% - 177px);
   max-width: 529px !important;
   position: absolute !important;