From b84e3ece6de87f82f5994b189fa83d89c8de4db1 Mon Sep 17 00:00:00 2001
From: cea2aj <42848445+cea2aj@users.noreply.github.com>
Date: Mon, 2 Aug 2021 16:37:57 -0400
Subject: [PATCH] Listening dot CSS classes (#1500)

Add listening dot css classes so that the dots colors can be changed with CSS

example:
```
.yxt-SearchBar-dot1 { fill: red }
.yxt-SearchBar-dot2 { fill: yellow }
.yxt-SearchBar-dot3 { fill: blue }
.yxt-SearchBar-dot4 { fill: green }
```

J=none
TEST=manual

Add some CSS to a search bar page and confirm the colors appear
---
 src/ui/icons/svg/voice_search_dots.svg | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/ui/icons/svg/voice_search_dots.svg b/src/ui/icons/svg/voice_search_dots.svg
index 312b7787d..ab5a67525 100644
--- a/src/ui/icons/svg/voice_search_dots.svg
+++ b/src/ui/icons/svg/voice_search_dots.svg
@@ -22,7 +22,7 @@
                                     <animate class="js-yxt-SearchBar-dotsListening"  attributeName="height" calcMode="spline" dur="0.3s" fill="freeze" keySplines="0 0 1 1;0.42 0 0.58 1;0.42 0 0.58 1;0.42 0 0.58 1" keyTimes="0;0.125;0.5;0.875;1" repeatCount="indefinite" values="5;5;9;5;5"/>
                                     <g clip-path="" label="maskPath">
                                         <g label="layerShadow" filter="">
-                                        <path d="M0,2.5c-0,-1.371,1.129,-2.5,2.5,-2.5 0,0,0,0,0,0 1.371,-0,2.5,1.129,2.5,2.5 0,0,0,0,0,0 0,0,0,0,0,0 0,1.371,-1.129,2.5,-2.5,2.5 -0,0,-0,0,-0,0 0,0,0,0,0,0 -1.371,0,-2.5,-1.129,-2.5,-2.5 0,0,0,0,0,0 0,0,0,-0,0,-0zM0,2.5" fill="#87B7F7" id="dot4" stroke="#00000000" stroke-dasharray="0" stroke-dashoffset="0" stroke-miterlimit="4" stroke-width="1">
+                                        <path class="yxt-SearchBar-dot4" d="M0,2.5c-0,-1.371,1.129,-2.5,2.5,-2.5 0,0,0,0,0,0 1.371,-0,2.5,1.129,2.5,2.5 0,0,0,0,0,0 0,0,0,0,0,0 0,1.371,-1.129,2.5,-2.5,2.5 -0,0,-0,0,-0,0 0,0,0,0,0,0 -1.371,0,-2.5,-1.129,-2.5,-2.5 0,0,0,0,0,0 0,0,0,-0,0,-0zM0,2.5" fill="#87B7F7" id="dot4" stroke="#00000000" stroke-dasharray="0" stroke-dashoffset="0" stroke-miterlimit="4" stroke-width="1">
                                             <animate class="js-yxt-SearchBar-dotsListening"  attributeName="d" calcMode="spline" dur="0.3s" fill="freeze" href="#dot4" keySplines="0 0 1 1;0.42 0 0.58 1;0.42 0 0.58 1;0.42 0 0.58 1" keyTimes="0;0.125;0.5;0.875;1" repeatCount="indefinite" values="M0,2.5c-0,-1.371,1.129,-2.5,2.5,-2.5 0,0,0,0,0,0 1.371,-0,2.5,1.129,2.5,2.5 0,0,0,0,0,0 0,0,0,0,0,0 0,1.371,-1.129,2.5,-2.5,2.5 -0,0,-0,0,-0,0 0,0,0,0,0,0 -1.371,0,-2.5,-1.129,-2.5,-2.5 0,0,0,0,0,0 0,0,0,-0,0,-0zM0,2.5;M0,2.5c-0,-1.371,1.129,-2.5,2.5,-2.5 0,0,0,0,0,0 1.371,-0,2.5,1.129,2.5,2.5 0,0,0,0,0,0 0,0,0,0,0,0 0,1.371,-1.129,2.5,-2.5,2.5 -0,0,-0,0,-0,0 0,0,0,0,0,0 -1.371,0,-2.5,-1.129,-2.5,-2.5 0,0,0,0,0,0 0,0,0,-0,0,-0zM0,2.5;M0,2.5c-0,-1.371,1.129,-2.5,2.5,-2.5 0,0,0,0,0,0 1.371,-0,2.5,1.129,2.5,2.5 0,0,0,0,0,0 0,0,0,4,0,4 0,1.371,-1.129,2.5,-2.5,2.5 0,0,-0,0,-0,0 0,0,0,0,0,0 -1.371,0,-2.5,-1.129,-2.5,-2.5 0,0,0,0,0,0 0,0,0,-4,0,-4zM0,2.5;M0,2.5c-0,-1.371,1.129,-2.5,2.5,-2.5 0,0,0,0,0,0 1.371,-0,2.5,1.129,2.5,2.5 0,0,0,0,0,0 0,0,0,0,0,0 0,1.371,-1.129,2.5,-2.5,2.5 -0,0,-0,0,-0,0 0,0,0,0,0,0 -1.371,0,-2.5,-1.129,-2.5,-2.5 0,0,0,0,0,0 0,0,0,-0,0,-0zM0,2.5;M0,2.5c-0,-1.371,1.129,-2.5,2.5,-2.5 0,0,0,0,0,0 1.371,-0,2.5,1.129,2.5,2.5 0,0,0,0,0,0 0,0,0,0,0,0 0,1.371,-1.129,2.5,-2.5,2.5 -0,0,-0,0,-0,0 0,0,0,0,0,0 -1.371,0,-2.5,-1.129,-2.5,-2.5 0,0,0,0,0,0 0,0,0,-0,0,-0zM0,2.5"/>
                                         </path>
                         
@@ -44,7 +44,7 @@
                                     <animate class="js-yxt-SearchBar-dotsListening"  attributeName="height" calcMode="spline" dur="0.3s" fill="freeze" keySplines="0.42 0 0.58 1;0.42 0 0.58 1;0.42 0 0.58 1" keyTimes="0;0.375;0.75;1" repeatCount="indefinite" values="5;15;5;5"/>
                                     <g clip-path="" label="maskPath">
                                         <g label="layerShadow" filter="">
-                                        <path d="M0,2.5c-0,-1.371,1.129,-2.5,2.5,-2.5 0,0,0,0,0,0 1.371,-0,2.5,1.129,2.5,2.5 0,0,0,0,0,0 0,0,0,0,0,0 0,1.371,-1.129,2.5,-2.5,2.5 -0,0,-0,0,-0,0 0,0,0,0,0,0 -1.371,0,-2.5,-1.129,-2.5,-2.5 0,0,0,0,0,0 0,0,0,-0,0,-0zM0,2.5" fill="#87B7F7" id="dot3" stroke="#00000000" stroke-dasharray="0" stroke-dashoffset="0" stroke-miterlimit="4" stroke-width="1">
+                                        <path class="yxt-SearchBar-dot3" d="M0,2.5c-0,-1.371,1.129,-2.5,2.5,-2.5 0,0,0,0,0,0 1.371,-0,2.5,1.129,2.5,2.5 0,0,0,0,0,0 0,0,0,0,0,0 0,1.371,-1.129,2.5,-2.5,2.5 -0,0,-0,0,-0,0 0,0,0,0,0,0 -1.371,0,-2.5,-1.129,-2.5,-2.5 0,0,0,0,0,0 0,0,0,-0,0,-0zM0,2.5" fill="#87B7F7" id="dot3" stroke="#00000000" stroke-dasharray="0" stroke-dashoffset="0" stroke-miterlimit="4" stroke-width="1">
                                             <animate class="js-yxt-SearchBar-dotsListening"  attributeName="d" calcMode="spline" dur="0.3s" fill="freeze" href="#dot3" keySplines="0.42 0 0.58 1;0.42 0 0.58 1;0.42 0 0.58 1" keyTimes="0;0.375;0.75;1" repeatCount="indefinite" values="M0,2.5c-0,-1.371,1.129,-2.5,2.5,-2.5 0,0,0,0,0,0 1.371,-0,2.5,1.129,2.5,2.5 0,0,0,0,0,0 0,0,0,0,0,0 0,1.371,-1.129,2.5,-2.5,2.5 -0,0,-0,0,-0,0 0,0,0,0,0,0 -1.371,0,-2.5,-1.129,-2.5,-2.5 0,0,0,0,0,0 0,0,0,-0,0,-0zM0,2.5;M0,2.5c-0,-1.371,1.129,-2.5,2.5,-2.5 0,0,0,0,0,0 1.371,-0,2.5,1.129,2.5,2.5 0,0,0,0,0,0 0,0,0,10,0,10 0,1.371,-1.129,2.5,-2.5,2.5 0,0,-0,0,-0,0 0,0,0,0,0,0 -1.371,0,-2.5,-1.129,-2.5,-2.5 0,0,0,0,0,0 0,0,0,-10,0,-10zM0,2.5;M0,2.5c-0,-1.371,1.129,-2.5,2.5,-2.5 0,0,0,0,0,0 1.371,-0,2.5,1.129,2.5,2.5 0,0,0,0,0,0 0,0,0,0,0,0 0,1.371,-1.129,2.5,-2.5,2.5 -0,0,-0,0,-0,0 0,0,0,0,0,0 -1.371,0,-2.5,-1.129,-2.5,-2.5 0,0,0,0,0,0 0,0,0,-0,0,-0zM0,2.5;M0,2.5c-0,-1.371,1.129,-2.5,2.5,-2.5 0,0,0,0,0,0 1.371,-0,2.5,1.129,2.5,2.5 0,0,0,0,0,0 0,0,0,0,0,0 0,1.371,-1.129,2.5,-2.5,2.5 -0,0,-0,0,-0,0 0,0,0,0,0,0 -1.371,0,-2.5,-1.129,-2.5,-2.5 0,0,0,0,0,0 0,0,0,-0,0,-0zM0,2.5"/>
                                         </path>
                         
@@ -66,7 +66,7 @@
                                     <animate class="js-yxt-SearchBar-dotsListening"  attributeName="height" calcMode="spline" dur="0.3s" fill="freeze" keySplines="0 0 1 1;0.42 0 0.58 1;0.42 0 0.58 1;0.42 0 0.58 1" keyTimes="0;0.125;0.5;0.875;1" repeatCount="indefinite" values="5;5;11;5;5"/>
                                     <g clip-path="" label="maskPath">
                                         <g label="layerShadow" filter="">
-                                        <path d="M0,2.5c-0,-1.371,1.129,-2.5,2.5,-2.5 0,0,0,0,0,0 1.371,-0,2.5,1.129,2.5,2.5 0,0,0,0,0,0 0,0,0,0,0,0 0,1.371,-1.129,2.5,-2.5,2.5 -0,0,-0,0,-0,0 0,0,0,0,0,0 -1.371,0,-2.5,-1.129,-2.5,-2.5 0,0,0,0,0,0 0,0,0,-0,0,-0zM0,2.5" fill="#87B7F7" id="dot2" stroke="#00000000" stroke-dasharray="0" stroke-dashoffset="0" stroke-miterlimit="4" stroke-width="1">
+                                        <path class="yxt-SearchBar-dot2" d="M0,2.5c-0,-1.371,1.129,-2.5,2.5,-2.5 0,0,0,0,0,0 1.371,-0,2.5,1.129,2.5,2.5 0,0,0,0,0,0 0,0,0,0,0,0 0,1.371,-1.129,2.5,-2.5,2.5 -0,0,-0,0,-0,0 0,0,0,0,0,0 -1.371,0,-2.5,-1.129,-2.5,-2.5 0,0,0,0,0,0 0,0,0,-0,0,-0zM0,2.5" fill="#87B7F7" id="dot2" stroke="#00000000" stroke-dasharray="0" stroke-dashoffset="0" stroke-miterlimit="4" stroke-width="1">
                                             <animate class="js-yxt-SearchBar-dotsListening"  attributeName="d" calcMode="spline" dur="0.3s" fill="freeze" href="#dot2" keySplines="0 0 1 1;0.42 0 0.58 1;0.42 0 0.58 1;0.42 0 0.58 1" keyTimes="0;0.125;0.5;0.875;1" repeatCount="indefinite" values="M0,2.5c-0,-1.371,1.129,-2.5,2.5,-2.5 0,0,0,0,0,0 1.371,-0,2.5,1.129,2.5,2.5 0,0,0,0,0,0 0,0,0,0,0,0 0,1.371,-1.129,2.5,-2.5,2.5 -0,0,-0,0,-0,0 0,0,0,0,0,0 -1.371,0,-2.5,-1.129,-2.5,-2.5 0,0,0,0,0,0 0,0,0,-0,0,-0zM0,2.5;M0,2.5c-0,-1.371,1.129,-2.5,2.5,-2.5 0,0,0,0,0,0 1.371,-0,2.5,1.129,2.5,2.5 0,0,0,0,0,0 0,0,0,0,0,0 0,1.371,-1.129,2.5,-2.5,2.5 -0,0,-0,0,-0,0 0,0,0,0,0,0 -1.371,0,-2.5,-1.129,-2.5,-2.5 0,0,0,0,0,0 0,0,0,-0,0,-0zM0,2.5;M0,2.5c-0,-1.371,1.129,-2.5,2.5,-2.5 0,0,0,0,0,0 1.371,-0,2.5,1.129,2.5,2.5 0,0,0,0,0,0 0,0,0,6,0,6 0,1.371,-1.129,2.5,-2.5,2.5 0,0,-0,0,-0,0 0,0,0,0,0,0 -1.371,0,-2.5,-1.129,-2.5,-2.5 0,0,0,0,0,0 0,0,0,-6,0,-6zM0,2.5;M0,2.5c-0,-1.371,1.129,-2.5,2.5,-2.5 0,0,0,0,0,0 1.371,-0,2.5,1.129,2.5,2.5 0,0,0,0,0,0 0,0,0,0,0,0 0,1.371,-1.129,2.5,-2.5,2.5 -0,0,-0,0,-0,0 0,0,0,0,0,0 -1.371,0,-2.5,-1.129,-2.5,-2.5 0,0,0,0,0,0 0,0,0,-0,0,-0zM0,2.5;M0,2.5c-0,-1.371,1.129,-2.5,2.5,-2.5 0,0,0,0,0,0 1.371,-0,2.5,1.129,2.5,2.5 0,0,0,0,0,0 0,0,0,0,0,0 0,1.371,-1.129,2.5,-2.5,2.5 -0,0,-0,0,-0,0 0,0,0,0,0,0 -1.371,0,-2.5,-1.129,-2.5,-2.5 0,0,0,0,0,0 0,0,0,-0,0,-0zM0,2.5"/>
                                         </path>
                         
@@ -86,7 +86,7 @@
                                     <animate class="js-yxt-SearchBar-dotsListening"  attributeName="height" calcMode="spline" dur="0.3s" fill="freeze" keySplines="0 0 1 1;0.42 0 0.58 1;0.42 0 0.58 1" keyTimes="0;0.25;0.625;1" repeatCount="indefinite" values="5;5;7;5"/>
                                     <g clip-path="" label="maskPath">
                                         <g label="layerShadow" filter="">
-                                        <path d="M0,2.5c-0,-1.371,1.129,-2.5,2.5,-2.5 0,0,0,0,0,0 1.371,-0,2.5,1.129,2.5,2.5 0,0,0,0,0,0 0,0,0,0,0,0 0,1.371,-1.129,2.5,-2.5,2.5 -0,0,-0,0,-0,0 0,0,0,0,0,0 -1.371,0,-2.5,-1.129,-2.5,-2.5 0,0,0,0,0,0 0,0,0,-0,0,-0zM0,2.5" fill="#87B7F7" id="dot1" stroke="#00000000" stroke-dasharray="0" stroke-dashoffset="0" stroke-miterlimit="4" stroke-width="1">
+                                        <path class="yxt-SearchBar-dot1" d="M0,2.5c-0,-1.371,1.129,-2.5,2.5,-2.5 0,0,0,0,0,0 1.371,-0,2.5,1.129,2.5,2.5 0,0,0,0,0,0 0,0,0,0,0,0 0,1.371,-1.129,2.5,-2.5,2.5 -0,0,-0,0,-0,0 0,0,0,0,0,0 -1.371,0,-2.5,-1.129,-2.5,-2.5 0,0,0,0,0,0 0,0,0,-0,0,-0zM0,2.5" fill="#87B7F7" id="dot1" stroke="#00000000" stroke-dasharray="0" stroke-dashoffset="0" stroke-miterlimit="4" stroke-width="1">
                                             <animate class="js-yxt-SearchBar-dotsListening"  attributeName="d" calcMode="spline" dur="0.3s" fill="freeze" href="#dot1" keySplines="0 0 1 1;0.42 0 0.58 1;0.42 0 0.58 1" keyTimes="0;0.25;0.625;1" repeatCount="indefinite" values="M0,2.5c-0,-1.371,1.129,-2.5,2.5,-2.5 0,0,0,0,0,0 1.371,-0,2.5,1.129,2.5,2.5 0,0,0,0,0,0 0,0,0,0,0,0 0,1.371,-1.129,2.5,-2.5,2.5 -0,0,-0,0,-0,0 0,0,0,0,0,0 -1.371,0,-2.5,-1.129,-2.5,-2.5 0,0,0,0,0,0 0,0,0,-0,0,-0zM0,2.5;M0,2.5c-0,-1.371,1.129,-2.5,2.5,-2.5 0,0,0,0,0,0 1.371,-0,2.5,1.129,2.5,2.5 0,0,0,0,0,0 0,0,0,0,0,0 0,1.371,-1.129,2.5,-2.5,2.5 -0,0,-0,0,-0,0 0,0,0,0,0,0 -1.371,0,-2.5,-1.129,-2.5,-2.5 0,0,0,0,0,0 0,0,0,-0,0,-0zM0,2.5;M0,2.5c-0,-1.371,1.129,-2.5,2.5,-2.5 0,0,0,0,0,0 1.371,-0,2.5,1.129,2.5,2.5 0,0,0,0,0,0 0,0,0,2,0,2 0,1.371,-1.129,2.5,-2.5,2.5 0,0,-0,0,-0,0 0,0,0,0,0,0 -1.371,0,-2.5,-1.129,-2.5,-2.5 0,0,0,0,0,0 0,0,0,-2,0,-2zM0,2.5;M0,2.5c-0,-1.371,1.129,-2.5,2.5,-2.5 0,0,0,0,0,0 1.371,-0,2.5,1.129,2.5,2.5 0,0,0,0,0,0 0,0,0,0,0,0 0,1.371,-1.129,2.5,-2.5,2.5 -0,0,-0,0,-0,0 0,0,0,0,0,0 -1.371,0,-2.5,-1.129,-2.5,-2.5 0,0,0,0,0,0 0,0,0,-0,0,-0zM0,2.5"/>
                                         </path>