redesign distraction animation

theodo · Jul 5, 2023 · ea992fa · ea992fa
1 parent 595275d
commit ea992fa
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 19 deletions.
diff --git a/src/simulators/distractions.ts b/src/simulators/distractions.ts
@@ -94,11 +94,11 @@ const scriptImportedFromExternalRepository = () => {
   }
 
   const texts = [
-    "Did I eat lunch?",
-    "I have to get back to work soon...",
-    "The ventilation sounds a lot today. bzzzzzz",
-    "Should I answer that text message?",
-    "Must concentrate, must concentrate, must concentrate",
+    "J'ai mangé ce midi ?",
+    "Je dois retourner travailler...",
+    "La ventilation fait beaucoup de bruit aujourd'hui. bzzzzzz",
+    "Est-ce que je devrais répondre à ce message ?",
+    "Je dois me concentrer, me concentrer, me concentrer",
   ];
 
   texts.forEach(createTextElements);
@@ -140,11 +140,11 @@ const scriptImportedFromExternalRepository = () => {
     TIMEOUTS.setTimeout(() => {
       removeClass(textEl_4, textAnimation_4);
       TIMEOUTS.clearAllTimeouts();
-    }, 32000);
+    }, 36000);
   }
 
   launchAnimations();
-  distractionIntervale = setInterval(launchAnimations, 32000);
+  distractionIntervale = setInterval(launchAnimations, 36000);
 };
 
 export const removeDistractions = () => {

diff --git a/styles/globals.css b/styles/globals.css
@@ -86,71 +86,81 @@ a {
 .wds-text-element-0.wds-text-animation-0 {
   position: fixed !important;
   display: block !important;
-  color: red !important;
+  color: white !important;
   font-weight: bold !important;
   font-size: 80px !important;
-  background-color: white !important;
+  background-color: #d7263d !important;
   padding: 20px !important;
   width: auto !important;
   height: auto !important;
   top: 20% !important;
   left: 40% !important;
+  border-radius: 30px;
+  rotate: 15deg;
 }
 
 .wds-text-element-1.wds-text-animation-1 {
   position: fixed !important;
   display: block !important;
-  color: blue !important;
+  color: white !important;
   font-weight: bold !important;
   font-size: 60px !important;
-  background-color: white !important;
+  background-color: #f46036 !important;
   padding: 20px !important;
   width: auto !important;
   height: auto !important;
   top: 40% !important;
   left: 30% !important;
+  border-radius: 30px;
+  rotate: -15deg;
 }
 
 .wds-text-element-2.wds-text-animation-2 {
   position: fixed !important;
   display: block !important;
-  color: green !important;
+  color: white !important;
   font-weight: bold !important;
   font-size: 60px !important;
-  background-color: white !important;
+  background-color: #c5d86d !important;
   padding: 20px !important;
   width: auto !important;
   height: auto !important;
   top: 30% !important;
   left: 20% !important;
+  border-radius: 30px;
+  rotate: 25deg;
 }
 
 .wds-text-element-3.wds-text-animation-3 {
   position: fixed !important;
   display: block !important;
-  color: purple !important;
+  color: white !important;
   font-weight: bold !important;
   font-size: 50px !important;
-  background-color: white !important;
+  background-color: #1b998b !important;
   padding: 20px !important;
   width: auto !important;
   height: auto !important;
   top: 50% !important;
   left: 20% !important;
+  border-radius: 30px;
+  rotate: -25deg;
 }
 
 .wds-text-element-4.wds-text-animation-4 {
   position: fixed !important;
   display: block !important;
-  color: black !important;
+  color: white !important;
   font-weight: bold !important;
   font-size: 50px !important;
-  background-color: white !important;
+  background-color: #9486b6 !important;
   padding: 20px !important;
   width: auto !important;
   height: auto !important;
   top: 20% !important;
   left: 10% !important;
+  border-radius: 30px;
+  rotate: -5deg;
 }
 
 .wds-img-animation-1 {
@@ -166,10 +176,10 @@ a {
 
 @keyframes stretch {
   0% {
-    transform: scale(1);
+    scale: 1;
   }
   100% {
-    transform: scale(1.2);
+    scale: 1.2;
   }
 }