From 72e6c1b0a28a108e0a7a825d0f60148716724a02 Mon Sep 17 00:00:00 2001
From: Ali-Salman29 <ali.salman@arbisoft.com>
Date: Fri, 14 Jun 2024 01:05:07 +0200
Subject: [PATCH] fix: certificate detail page styling issues

---
 cms/static/sass/views/_certificates.scss      | 34 ++++++++++++++++---
 .../js/certificate-details.underscore         |  6 ++--
 .../js/certificate-editor.underscore          |  2 +-
 .../_accomplishment-rendering.html            |  4 +--
 4 files changed, 36 insertions(+), 10 deletions(-)

diff --git a/cms/static/sass/views/_certificates.scss b/cms/static/sass/views/_certificates.scss
index 7c7eb3fa5f3..0e429683bd4 100644
--- a/cms/static/sass/views/_certificates.scss
+++ b/cms/static/sass/views/_certificates.scss
@@ -68,6 +68,7 @@
 
   .certificate-info-section {
     overflow: auto;
+    display: flex;
 
     .course-title-section,
     .course-number-section {
@@ -154,13 +155,29 @@
 
         position: absolute;
         top: $baseline;
-        right: $baseline;
         opacity: 0;
 
+        @include rtl {
+          left: $baseline;
+        }
+  
+        // CASE: left to right layout
+        @include ltr {
+          right: $baseline;
+        }
+
         .action {
           display: inline-block;
           vertical-align: middle;
-          margin-right: ($baseline/4);
+
+          @include rtl {
+            margin-left: ($baseline/4);
+          }
+    
+          // CASE: left to right layout
+          @include ltr {
+            margin-right: ($baseline/4);
+          }
 
           .edit {
             @extend %ui-btn-non-blue;
@@ -419,8 +436,17 @@
         }
 
         .wrapper-delete-button {
-          float: right;
-          padding: ($baseline/4) ($baseline/2);
+          // CASE: right to left layout
+          @include rtl {
+            float: left;
+            padding: ($baseline/2) ($baseline/4);
+          }
+    
+          // CASE: left to right layout
+          @include ltr {
+            float: right;
+            padding: ($baseline/4) ($baseline/2);
+          }
 
           .is-disabled {
             color: $gray-l3;
diff --git a/cms/templates/js/certificate-details.underscore b/cms/templates/js/certificate-details.underscore
index 8c4f0223535..9bb00df3ff5 100644
--- a/cms/templates/js/certificate-details.underscore
+++ b/cms/templates/js/certificate-details.underscore
@@ -15,10 +15,10 @@
      <% if (showDetails) { %>
          <section class="certificate-settings course-details">
              <header>
-               <h2 class="title title-2"><%- gettext("Certificate Details") %></h2>
+               <h2 class="title"><%- gettext("Certificate Details") %></h2>
              </header>
              <div class='certificate-info-section'>
-                 <div class='course-title-section pull-left'>
+                 <div class='course-title-section'>
                     <p class="actual-course-title">
                             <span class="certificate-label"><%- gettext('Course Title') %>: </span>
                             <span class="certificate-value"><%- course.get('name') %></span>
@@ -37,7 +37,7 @@
                     <% } %>
                  </div>
 
-                <div class='course-number-section pull-left'>
+                <div class='course-number-section'>
                     <p class="actual-course-number">
                             <span class="certificate-label"><b><%- gettext('Course Number') %>: </b> </span>
                             <span class="certificate-value"><%- course.get('num') %></span>
diff --git a/cms/templates/js/certificate-editor.underscore b/cms/templates/js/certificate-editor.underscore
index ea89595bad3..a54a6bc7ee8 100644
--- a/cms/templates/js/certificate-editor.underscore
+++ b/cms/templates/js/certificate-editor.underscore
@@ -20,7 +20,7 @@
                 <span id="certificate-description-<%- uniqueId %>-tip" class="tip tip-stacked"><%- gettext("Description of the certificate") %></span>
             </div>
             <header>
-              <h2 class="title title-2"><%- gettext("Certificate Details") %></h2>
+              <h2 class="title"><%- gettext("Certificate Details") %></h2>
             </header>
             <div class="actual-course-title">
                 <span class="actual-course-title"><%- gettext("Course Title") %>: </span>
diff --git a/lms/templates/certificates/_accomplishment-rendering.html b/lms/templates/certificates/_accomplishment-rendering.html
index 2231c61fa46..db063363d30 100644
--- a/lms/templates/certificates/_accomplishment-rendering.html
+++ b/lms/templates/certificates/_accomplishment-rendering.html
@@ -12,7 +12,7 @@
         </style>
     </head>
     <body>
-        <div class="certificateWrapper" style="font-family:Diodrum">
+        <div class="certificateWrapper" style="font-family:Diodrum" dir="ltr">
             <div class="certificateWrapper__header">
                 <img
                     src="./../../static/images/SDAIA-Academy-logo.svg"
@@ -34,7 +34,7 @@ <h1 class="certificateWrapper__mainTitleWrap">
                                 Saudi Data and AI Authority (SDAIA) Certifies that
                             </div>
                             <div class="certificateWrapper__subTitleAR text-align diodrumFontFamily stronger">
-                                :الهيئة السعودية للبيانات والذكاء الاصطناعي ( سدايا ) تمنح
+                                الهيئة السعودية للبيانات والذكاء الاصطناعي ( سدايا ) تمنح
                             </div>
                         </div>
                         <div class="certificateWrapper__personWrap">