2203: Change icon

itk-dev · Aug 28, 2024 · 3df08f6 · 3df08f6
1 parent ff52def
commit 3df08f6
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 6 deletions.
diff --git a/web/modules/custom/giv_din_stemme/templates/components/button-microphone-toggle.html.twig b/web/modules/custom/giv_din_stemme/templates/components/button-microphone-toggle.html.twig
@@ -1,5 +1,5 @@
 <button id="btn-microphone-toggle" class="btn-microphone-toggle rounded-full flex place-content-center w-20 h-20 text-center bg-brand hover:bg-orange-700 visualizer-shadow transition">
-    <i class="text-white text-3xl fa-solid fa-microphone-slash place-self-center"></i>
-    <i class="text-white text-3xl fa-solid fa-microphone place-self-center"></i>
+    <i id="icon-stop" class="text-white text-3xl fa-solid fa-stop place-self-center"></i>
+    <i id="icon-record"  class="text-white text-3xl fa-solid fa-microphone place-self-center"></i>
     <span class="sr-only">{{ "Toggle microphone on / off"|t }}</span>
 </button>
diff --git a/web/modules/custom/giv_din_stemme/templates/read-page.html.twig b/web/modules/custom/giv_din_stemme/templates/read-page.html.twig
@@ -10,7 +10,7 @@
       <div class="mb-5 pb-5 border-b-2"></div>
     </div>
 
-    <div class="relative flex flex-col md:flex-row md:gap-5 md:min-h-36">
+    <div class="relative flex flex-col md:flex-row md:gap-5 md:min-h-36 md:py-16">
       <div class="consent-text max-h-52 overflow-y-auto flex align-content-center grow">
         <p class="text-xl mx-3 md:mx-5">
           {{ textToRead }}

diff --git a/web/themes/custom/giv_din_stemme_theme/js/fontawesome.js b/web/themes/custom/giv_din_stemme_theme/js/fontawesome.js
@@ -12,6 +12,7 @@ const {
   faMicrophone,
   faMicrophoneSlash,
   faArrowRightFromBracket,
+  faStop,
 } = require("@fortawesome/free-solid-svg-icons");
 
 // Import icons from the free regular package
@@ -34,6 +35,7 @@ library.add(
   faClock,
   faUser,
   faArrowRightFromBracket,
+  faStop,
 );
 
 // Run <i> to <svg> replace

diff --git a/web/themes/custom/giv_din_stemme_theme/styles.css b/web/themes/custom/giv_din_stemme_theme/styles.css
@@ -113,13 +113,13 @@
   .btn-microphone-toggle.active.visualizer-shadow {
     box-shadow: 0 0 calc(var(--volume, 2px) / 4) calc(var(--volume, 2px) / 4) hsla(9, 86%, 54%, 60%);
   }
-  .btn-microphone-toggle.active .fa-microphone {
+  .btn-microphone-toggle.active #icon-record {
     display: none;
   }
-  .btn-microphone-toggle.active .fa-microphone-slash {
+  .btn-microphone-toggle.active #icon-stop {
     display: inline;
   }
-  .btn-microphone-toggle .fa-microphone-slash {
+  .btn-microphone-toggle #icon-stop {
     display: none;
   }