EG

OpenConext · Feb 9, 2025 · 9f18c2d · 9f18c2d
1 parent db985cf
commit 9f18c2d
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 3 deletions.
diff --git a/servicedesk-gui/src/components/UnitHeader.jsx b/servicedesk-gui/src/components/UnitHeader.jsx
@@ -1,12 +1,21 @@
-import React from "react";
+import React, {useState} from "react";
 import "./UnitHeader.scss";
 import Frontdesk from "../icons/frontdesk.svg";
+
 export const UnitHeader = ({obj, children}) => {
 
+    const [isAnimating, setIsAnimating] = useState(false);
+
+    const toggleAnimation = () => {
+        setIsAnimating(true);
+        setTimeout(() => setIsAnimating(false), 2250);
+    }
+
     return (
         <div className="unit-header-container">
             <div className="unit-header">
-                <div className={`image ${obj.style || ""}`}>
+                <div className={`image ${obj.style || ""} ${isAnimating ? "animated" : ""}`}
+                     onClick={toggleAnimation}>
                     <Frontdesk/>
                 </div>
                 <div className="obj-name">

diff --git a/servicedesk-gui/src/components/UnitHeader.scss b/servicedesk-gui/src/components/UnitHeader.scss
@@ -44,12 +44,43 @@
             border-radius: 5px;
             border: 1px solid var(--sds--color--gray--300);
 
+            @keyframes rainbow {
+                0% {
+                    fill: red;
+                }
+                14% {
+                    fill: orange;
+                }
+                28% {
+                    fill: yellow;
+                }
+                42% {
+                    fill: green;
+                }
+                57% {
+                    fill: blue;
+                }
+                71% {
+                    fill: indigo;
+                }
+                85% {
+                    fill: violet;
+                }
+                100% {
+                    fill: red;
+                }
+            }
+
             svg {
                 height: 76px;
                 width: auto;
                 margin-bottom: auto;
             }
 
+            &.animated svg {
+                animation: rainbow 2s linear ;
+            }
+
             &.small {
                 svg {
                     width: 28px;

diff --git a/servicedesk-gui/src/tabs/Control.jsx b/servicedesk-gui/src/tabs/Control.jsx
@@ -122,7 +122,7 @@ const Control = ({restart, proceed}) => {
                                 onChange={val => confirm(4, val)}/>
                     </div>
                     {!validDayOfBirth &&
-                        <div className={`validation-item-inner birthday ${birthDay === null ? "invalid" : ""}`}>
+                        <div className={`validation-item-inner birthday ${birthDay === null ? "invalid" : "valid"}`}>
                             <p>{I18n.t(`control.${birthDay === null ? "invalidDate" : "validDate"}`)}</p>
                             <DatePicker
                                 ref={inputRef}

diff --git a/servicedesk-gui/src/tabs/Control.scss b/servicedesk-gui/src/tabs/Control.scss
@@ -72,6 +72,10 @@ div.control {
             &.invalid {
                 color: var(--sds--color--red--400);
             }
+
+            &.valid {
+                font-weight: 600;
+            }
         }
 
         .sds--tooltip-parent {