💻 Redesign go back button

build-tools/heroku/tailwind/styles.css

@@ -230,6 +230,20 @@ a.green-btn:hover {
   @apply active:bg-gray-700 active:border-gray-700;
 }
 
+.back-btn {
+  @apply gray-btn;
+  @apply text-blue-500;
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  width: 8rem;
+}
+
+.back-btn:hover {
+  @apply bg-gray-200;
+  @apply active:bg-gray-700 active:border-gray-700;
+}
+
 /* Styles only for use in MarkDown blocks */
 /* NOTE: I'm pretty sure we don't render class="markdown" anymore anywhere */
 .markdown {

messages.pot

@@ -254,12 +254,6 @@ msgstr ""
 msgid "ask_needs_var"
 msgstr ""
 
-msgid "back_to_class"
-msgstr ""
-
-msgid "back_to_teachers_page"
-msgstr ""
-
 msgid "become_a_sponsor"
 msgstr ""
 
@@ -659,6 +653,9 @@ msgstr ""
 msgid "give_link_to_teacher"
 msgstr ""
 
+msgid "go_back"
+msgstr ""
+
 msgid "go_back_to_main"
 msgstr ""
 

static/css/generated.full.css

@@ -1103,6 +1103,58 @@ a.green-btn:hover:active {
   background-color: rgb(74 85 104 / var(--tw-bg-opacity));
 }
 
+.back-btn {
+  font-weight: 400;
+  line-height: 1.5rem;
+  letter-spacing: 0.025em;
+  font-family: 'Balsamiq Sans', sans-serif;
+  border-radius: 0.25rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.25rem;
+  -webkit-text-decoration-line: none;
+          text-decoration-line: none;
+  display: inline-block;
+  --tw-bg-opacity: 1;
+  background-color: rgb(226 232 240 / var(--tw-bg-opacity));
+  --tw-text-opacity: 1;
+  color: rgb(160 174 192 / var(--tw-text-opacity));
+}
+
+.back-btn:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(247 250 252 / var(--tw-bg-opacity));
+}
+
+.back-btn:hover:active {
+  --tw-border-opacity: 1;
+  border-color: rgb(74 85 104 / var(--tw-border-opacity));
+  --tw-bg-opacity: 1;
+  background-color: rgb(74 85 104 / var(--tw-bg-opacity));
+}
+
+.back-btn {
+  --tw-text-opacity: 1;
+  color: rgb(66 153 225 / var(--tw-text-opacity));
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  width: 8rem;
+}
+
+.back-btn:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(237 242 247 / var(--tw-bg-opacity));
+}
+
+.back-btn:hover:active {
+  --tw-border-opacity: 1;
+  border-color: rgb(74 85 104 / var(--tw-border-opacity));
+  --tw-bg-opacity: 1;
+  background-color: rgb(74 85 104 / var(--tw-bg-opacity));
+}
+
 /* Styles only for use in MarkDown blocks */
 
 /* NOTE: I'm pretty sure we don't render class="markdown" anymore anywhere */

static/js/appbundle.js

@@ -98459,9 +98459,9 @@ notes_mapping = {
     "create_class_button",
     "create_adventure_button",
     "public-adventures-link",
-    "to_class_button",
+    "go_back_button",
+    "back_to_class",
     "customize_class_button",
-    "go_back_to_teacher_page_button",
     "live_stats_button",
     "grid_overview_button",
     "classes_info",

static/js/user-activity.ts

@@ -47,9 +47,9 @@ const ELEMENT_TO_TRACK = [
     "create_class_button",
     "create_adventure_button",
     "public-adventures-link",
-    "to_class_button",
+    "go_back_button",
+    "back_to_class",
     "customize_class_button",
-    "go_back_to_teacher_page_button",
     "live_stats_button",
     "grid_overview_button",
 

templates/class-grid.html

@@ -1,6 +1,10 @@
 {% extends "auth.html" %}
 {% block regular_content %}
 <div class="flex flex-col gap-2">
+  <button class="back-btn" id="go_back_button" onclick="window.location.href='/for-teachers/class/{{class_info.id}}'">
+    <span class="fa fa-arrow-{% if g.dir == "ltr" %}left{% else %}right{% endif %}">&nbsp;</span>
+    {{_('go_back')}}
+  </button>
   <h2>{{_('grid_overview')}}: {{class_info.name}}</h2>
   <div class="flex flex-row items-center justify-center mr-2 lg:w-1/12 md:w-3/12 sm:w-5/12 ml-4">
     <select class="py-2 px-1 mt-2 h-10 text-center w-full " 
@@ -29,11 +33,4 @@ <h2>{{_('grid_overview')}}: {{class_info.name}}</h2>
                     student_adventures=student_adventures,
                     matrix_values=matrix_values)
   }}
-  <div class="flex flex-col gap-2 mt-4">
-    <div class="flex flex-row ml-auto gap-2">
-      <button class="green-btn float-right" id="to_class_button" onclick="window.location.href='/for-teachers/class/{{class_info.id}}'">
-        {{_('back_to_class')}}
-      </button>
-    </div>
-</div>
 {% endblock %}

templates/class-overview.html

@@ -10,6 +10,10 @@
     </script>
     {% endif %}
     <div class="flex flex-col gap-4">
+        <button class="back-btn" id="go_back_button" onclick="window.location.href = '/for-teachers'">
+          <span class="fa fa-arrow-{% if g.dir == "ltr" %}left{% else %}right{% endif %}">&nbsp;</span>
+          {{_('go_back')}}
+        </button>
       <div id="survey" class="hidden"></div>
       {% if second_teacher %}<h1>{{_('role')}}: {{role}}</h1>{% endif %}
         <div class="flex flex-row items-center gap-2">
@@ -115,9 +119,6 @@ <h2>{{ _('teachers')}}</h2>
             <button class="green-btn" id="live_stats_button" onclick="window.location.href = '/live_stats/class/{{class_info.id}}'">{{_('class_live')}}</button>
             <button class="green-btn" id="grid_overview_button" onclick="window.location.href = '/grid_overview/class/{{class_info.id}}'">{{_('grid_overview')}}</button>
         </div>
-        <div class="flex ltr:ml-auto rtl:mr-auto">
-            <button class="blue-btn" id="go_back_to_teacher_page_button" onclick="window.location.href = '/for-teachers'">{{_('back_to_teachers_page')}}</button>
-        </div>
       </div>
       <div id="add_students_options" class="flex flex-col items-center border-t border-gray-500" style="display: none;">
           <h2 class="my-4 pt-4">{{_('add_students_options')}}</h2>

templates/create-accounts.html

@@ -2,6 +2,10 @@
 
 {% block regular_content %}
 <div>
+    <button class="back-btn" id="go_back_button" onclick="window.open('/for-teachers/class/{{ current_class.id }}', '_self');">
+        <span class="fa fa-arrow-{% if g.dir == "ltr" %}left{% else %}right{% endif %}">&nbsp;</span>
+        {{_('go_back')}}
+    </button>
     <h2>{{_('create_multiple_accounts')}}: {{current_class.name}}</h2>
     <div class="w-full mb-4">
         {{_('accounts_intro')|commonmark }}
@@ -43,7 +47,6 @@ <h2 class="w-full text-center my-0 py-0">{{_('password')}}</h2>
             </div>
         </div>
         <div class="flex flex-row mt-4">
-            <button class="green-btn" id="back_to_class_button" onclick="window.open('/for-teachers/class/{{ current_class.id }}', '_self');">{{_('back_to_class')}}</button>
             <div class="ltr:ml-auto flex flex-row items-center gap-2">
                 <div class="mx-auto border-gray-400 border-2 rounded-full py-2 px-4">
                   <label for="passwords_toggle" class="flex flex-row items-center justify-center cursor-pointer">

templates/customize-adventure.html

@@ -1,6 +1,12 @@
 {% extends "auth.html" %}
 
 {% block regular_content %}
+<button id='go_back_button' class="back-btn"
+onclick="window.open('/for-teachers', '_self');">
+    <span class="fa fa-arrow-{% if g.dir == "ltr" %}left{% else %}right{% endif %}">&nbsp;</span>
+    <span>{{_('go_back')}}</span>
+</button>
+<br><br>
 <div class="flex flex-col gap-2">
     <h2>{{_('customize_adventure')}}</h2>
     <div class="border-gray-400 border rounded-lg p-4">
@@ -154,8 +160,5 @@ <h3>{{_('adventure_exp_classes')}}</h3>
             </div>
         </div>
     </div>
-    <div>
-        <button class="blue-btn" id="go_back_button" onclick="window.open('/for-teachers', '_self');">{{_('back_to_teachers_page')}}</button>
-    </div>
 </div>
 {% endblock %}

templates/customize-class.html

@@ -1,5 +1,10 @@
 {% extends "auth.html" %}
 {% block regular_content %}
+<button id="back_to_class" class="back-btn" data-cy="back_to_class">
+    <span class="fa fa-arrow-{% if g.dir == "ltr" %}left{% else %}right{% endif %}">&nbsp;</span>
+    <span>{{_('go_back')}}</span>
+</button>
+<br><br>
 <div class="flex flex-col gap-2">
     <h2>{{_('customize_class')}}: {{class_info.name}}</h2>
 
@@ -185,7 +190,6 @@ <h3 class="px-4"><u>{{_('other_settings')}}</u></h3>
                         onclick='hedyApp.restore_customization_to_default({{_('remove_customizations_prompt')|default(None)|tojson}})'>
                             {{_('remove_customization')}}
                     </button>
-                    <button id='back_to_class' class="green-btn" data-cy="back_to_class">{{_('back_to_class')}}</button>
                 </div>
             </div>
             {% endif %}

templates/partial-class-live-stats.html

@@ -1,8 +1,11 @@
 <div id="main_content">
     <!--  Back to class button  -->
-    <button class="green-btn float-right" id="to_class_button" onclick="window.location.href='/for-teachers/class/{{class_info.id}}'" target="_blank">
-      {{_('back_to_class')}}
+    <button id='go_back_button' class="back-btn"
+    onclick="window.location.href='/for-teachers/class/{{class_info.id}}'" target="_blank">
+        <span class="fa fa-arrow-{% if g.dir == "ltr" %}left{% else %}right{% endif %}">&nbsp;</span>
+        <span>{{_('go_back')}}</span>
     </button>
+    <br><br>
 
     <!-- Title  -->
     <div class="flex flex-col gap-4">

tests/cypress/e2e/for-teacher_page/class_page/create_accounts_page/create_accounts.cy.js

@@ -51,7 +51,7 @@ describe('Is able to go to logs page', () => {
         currentUrl = url;
         cy.get('#add-student').click();
         cy.get('#create-accounts').click(); 
-        cy.get('#back_to_class_button').click();
+        cy.get('#go_back_button').click();
         cy.wait(1000);
         let statsUrl = Cypress.env('class_page') + currentUrl.substring(currentUrl.indexOf('class/')+6);
         cy.url().should('include', statsUrl); 

tests/cypress/e2e/for-teacher_page/class_page/create_accounts_page/create_accounts_second_teachers.cy.js

@@ -49,7 +49,7 @@ describe('Is able to go to logs page', () => {
         currentUrl = url;
         cy.get('#add-student').click();
         cy.get('#create-accounts').click(); 
-        cy.get('#back_to_class_button').click();
+        cy.get('#go_back_button').click();
         cy.wait(1000);
         let statsUrl = Cypress.env('class_page') + currentUrl.substring(currentUrl.indexOf('class/')+6);
         cy.url().should('include', statsUrl); 

tests/cypress/e2e/for-teacher_page/class_page/go_back_to_teacher_page_button.cy.js

@@ -10,7 +10,7 @@ describe('Is able to go to logs page', () => {
     cy.get(".view_class").first().click(); // Press view class button
     cy.get('body').then($b => $b.find("#survey")).then($s => $s.length && $s.hide())
 
-    cy.get('#go_back_to_teacher_page_button')
+    cy.get('#go_back_button')
       .should('be.visible')
       .should('not.be.disabled')
       .click();   

translations/ar/LC_MESSAGES/messages.po

@@ -281,12 +281,6 @@ msgstr "هل أنت متأكد؟ لا يمكنك التراجع عن هذا ال
 msgid "ask_needs_var"
 msgstr "ابتداء من المستوى الثاني، نستخدم الأمر اسأل مع متغير. مثال: الاسم هو اسأل ما اسمك؟"
 
-msgid "back_to_class"
-msgstr "الرجوع الى صف"
-
-msgid "back_to_teachers_page"
-msgstr "الرجوع الى صفحة المعلم"
-
 #, fuzzy
 msgid "become_a_sponsor"
 msgstr "Become a sponsor"
@@ -741,6 +735,9 @@ msgstr "Get your certificate!"
 msgid "give_link_to_teacher"
 msgstr "Give the following link to your teacher:"
 
+msgid "go_back"
+msgstr ""
+
 msgid "go_back_to_main"
 msgstr "الرجوع الى الصفحة الرئيسية"
 
@@ -2249,3 +2246,6 @@ msgstr "Your program"
 #~ msgid "hide_quiz"
 #~ msgstr "نهاية الفحص السريع"
 
+#~ msgid "back_to_class"
+#~ msgstr "الرجوع الى صف"
+

translations/bg/LC_MESSAGES/messages.po

@@ -318,14 +318,6 @@ msgstr "Внимание! Това действие е необратимо."
 msgid "ask_needs_var"
 msgstr "От ниво 2 нагоре, командата ask изисква променлива. Например: name is ask What are you called?"
 
-#, fuzzy
-msgid "back_to_class"
-msgstr "Go back to class"
-
-#, fuzzy
-msgid "back_to_teachers_page"
-msgstr "Go back to teachers page"
-
 #, fuzzy
 msgid "become_a_sponsor"
 msgstr "Become a sponsor"
@@ -840,6 +832,9 @@ msgstr "Get your certificate!"
 msgid "give_link_to_teacher"
 msgstr "Give the following link to your teacher:"
 
+msgid "go_back"
+msgstr ""
+
 #, fuzzy
 msgid "go_back_to_main"
 msgstr "Go back to main page"
@@ -2528,3 +2523,6 @@ msgstr "Your program"
 #~ msgid "hide_quiz"
 #~ msgstr "Hide quiz"
 
+#~ msgid "back_to_class"
+#~ msgstr "Go back to class"
+

translations/bn/LC_MESSAGES/messages.po

@@ -333,14 +333,6 @@ msgstr "Are you sure? You cannot revert this action."
 msgid "ask_needs_var"
 msgstr "Starting in level 2, ask needs to be used with a variable. Example: name is ask What are you called?"
 
-#, fuzzy
-msgid "back_to_class"
-msgstr "Go back to class"
-
-#, fuzzy
-msgid "back_to_teachers_page"
-msgstr "Go back to teachers page"
-
 #, fuzzy
 msgid "become_a_sponsor"
 msgstr "Become a sponsor"
@@ -873,6 +865,9 @@ msgstr "Get your certificate!"
 msgid "give_link_to_teacher"
 msgstr "Give the following link to your teacher:"
 
+msgid "go_back"
+msgstr ""
+
 #, fuzzy
 msgid "go_back_to_main"
 msgstr "Go back to main page"
@@ -2632,3 +2627,6 @@ msgstr "Your program"
 #~ msgid "hide_quiz"
 #~ msgstr "Hide quiz"
 
+#~ msgid "back_to_class"
+#~ msgstr "Go back to class"
+

translations/ca/LC_MESSAGES/messages.po

@@ -269,12 +269,6 @@ msgstr "Estàs segur? No pots desfer aquesta acció."
 msgid "ask_needs_var"
 msgstr "A partir del nivell 2, cal utilitzar {ask} amb una variable. Exemple: nom {is} {ask} Com et dius?"
 
-msgid "back_to_class"
-msgstr "Torna a la classe"
-
-msgid "back_to_teachers_page"
-msgstr "Tornar a la pàgina de professors"
-
 msgid "become_a_sponsor"
 msgstr "Fes-te patrocinador"
 
@@ -690,6 +684,9 @@ msgstr "Aconsegueix el teu certificat!"
 msgid "give_link_to_teacher"
 msgstr "Fes arribar el següent enllaç al teu professor:"
 
+msgid "go_back"
+msgstr ""
+
 msgid "go_back_to_main"
 msgstr "Torna a la pàgina principal"
 
@@ -2269,3 +2266,6 @@ msgstr "El teu programa"
 #~ msgid "hide_quiz"
 #~ msgstr "Amaga el qüestionari"
 
+#~ msgid "back_to_class"
+#~ msgstr "Torna a la classe"
+