Fix Font color palette

Author: naveed-ahmad

app/javascript/controllers/tajweed_font_controller.js

@@ -8,21 +8,26 @@ export default class extends Controller {
   }
 
   addThemeButtons() {
-    const light = "<button class='btn btn-sm btn-primary' data-theme='theme-light'>Light</button>"
-    const dark = "<button class='btn btn-sm btn-primary' data-theme='theme-dark'>Dark</button>"
-    const sepia = "<button class='btn btn-sm btn-primary' data-theme='theme-sepia'>Sepia</button>"
-    const black = "<button class='btn btn-sm btn-primary' data-theme='theme-black-text'>Black</button>"
-    const light2 = "<button class='btn btn-sm btn-primary' data-theme='theme-light2'>L2</button>"
-    const dark2 = "<button class='btn btn-sm btn-primary' data-theme='theme-dark2'>D2</button>"
-    const sepia2 = "<button class='btn btn-sm btn-primary' data-theme='theme-sepia2'>S2</button>"
+    const light = "<button class='tw-btn tw-btn-sm tw-btn-info' data-theme='theme-light'>Light</button>"
+    const dark = "<button class='tw-btn tw-btn-sm tw-btn-info' data-theme='theme-dark'>Dark</button>"
+    const sepia = "<button class='tw-btn tw-btn-sm tw-btn-info' data-theme='theme-sepia'>Sepia</button>"
+    const black = "<button class='tw-btn tw-btn-sm tw-btn-info' data-theme='theme-black'>Black</button>"
 
-    this.el.append(`<div>${light} ${light2} ${dark} ${dark2} ${sepia} ${sepia2} ${black}</div>`)
+    const p1 = "<button class='tw-btn tw-btn-sm tw-btn-info' data-theme='theme1'>P1</button>"
+    const p2 = "<button class='tw-btn tw-btn-sm tw-btn-info' data-theme='theme2'>P2</button>"
+    const p3 = "<button class='tw-btn tw-btn-sm tw-btn-info' data-theme='theme3'>P3</button>"
+    const p4 = "<button class='tw-btn tw-btn-sm tw-btn-info' data-theme='theme4'>P4</button>"
+    const p5 = "<button class='tw-btn tw-btn-sm tw-btn-info' data-theme='theme5'>P5</button>"
+    const p6 = "<button class='tw-btn tw-btn-sm tw-btn-info' data-theme='theme6'>P6</button>"
+
+    this.el.append(`<div>${light} ${dark} ${sepia} ${black} ${p1} ${p2} ${p3} ${p4} ${p5} ${p6}</div>`)
   }
 
   bindEvents(){
     this.el.find('[data-theme]').on('click', (e) => {
-      this.el.removeClass("theme-light theme-dark theme-sepia theme-light2 theme-dark2 theme-sepia2 theme-black-text")
-      this.el.addClass(e.target.dataset.theme)
+      const theme = e.target.dataset.theme;
+      this.el.removeClass("theme-light theme-dark theme-sepia theme-black theme-normal theme1 theme2 theme3 theme4 theme5 theme6")
+      this.el.addClass(theme);
     })
   }
 }

app/views/shared/_mushaf_page.html.erb

@@ -29,9 +29,8 @@
 
 <%= turbo_frame_tag dom_id(mushaf, "page_#{page}") do %>
   <%= render 'shared/tajweed_images_styles' if use_images %>
-  <%= render 'shared/page_font', pages: [page], words: nil %>
 
-  <div class="theme-light mushaf mushaf-<%= mushaf.font_code %> <%= mushaf.font_code %> <%= mushaf_class %>" data-controller="mushaf-page tajweed-highlight">
+  <div class="mushaf mushaf-<%= mushaf.font_code %> <%= mushaf.font_code %> <%= mushaf_class %>" data-controller="mushaf-page tajweed-highlight">
     <% if show_controls %>
       <div class="mushaf-page-setting tw-flex flex-column tw-mb-4">
         <div><span>Name: <%= name %></span></div>
@@ -58,7 +57,7 @@
     <div class="page-wrapper tw-container tw-max-w-7xl tw-mx-auto tw-px-4 flex">
       <div id="page-<%= page %>"
            data-controller="<%= 'tajweed-font' if mushaf.font_code == 'v4-tajweed' %>"
-           class="page p<%= page %>-<%= mushaf.font_code %> <%= page_class %>">
+           class="theme-light page p<%= page %>-<%= mushaf.font_code %> <%= page_class %>">
         <% 1.upto(mushaf.lines_per_page) do |line_number| %>
           <%
             line_mapping = lines_mapping[line_number] || MushafLineAlignment.dummy
@@ -129,4 +128,6 @@
         </div>
   </div>
   </div>
+
+  <%= render 'shared/page_font', pages: [page], words: nil %>
 <% end %>