Merge branch 'main' into link-lms-accounts

openstax · Jul 7, 2023 · f843b55 · f843b55
2 parents bf16e79 + 1008d27
commit f843b55
Show file tree

Hide file tree

Showing 9 changed files with 85 additions and 39 deletions.
diff --git a/app/assets/javascripts/application/remote-access-helpers.coffee b/app/assets/javascripts/application/remote-access-helpers.coffee
@@ -40,10 +40,6 @@ $(document).ready ->
   # the below clause will that window
   # or (window.opener and window.name is 'oxlogin')
 
-  # we're being loaded inside an iframe or a popup
-  # Set a css class to adjusted to fit a narrow screen
-  $(document.body).addClass('condensed iframe')
-
   relayHeading()
 
   # notify the parent iframe of our size now and whenever it's changed

diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
@@ -20,7 +20,6 @@ $font-path: '/accounts/fonts';
 @import "misc";
 @import "application_js_hooks";
 @import "pagination";
-@import "condensed";
 
 
 /* Set a max-width, maintaining responsiveness */

diff --git a/app/assets/stylesheets/condensed.scss b/app/assets/stylesheets/condensed.scss
diff --git a/app/assets/stylesheets/controls/_buttons.scss b/app/assets/stylesheets/controls/_buttons.scss
@@ -32,6 +32,38 @@ button {
 
   &.primary {
     @include ox-button($os_orange);
+
+    &.new-style {
+      font-size: 1.6rem;
+      line-height: 2rem;
+      -moz-osx-font-smoothing: grayscale;
+      -webkit-font-smoothing: antialiased;
+      display: inline-flex;
+      flex-direction: row;
+      justify-content: center;
+      align-items: center;
+      height: 4rem;
+      padding: 0 3rem;
+      background: #D4450C;
+      color: #FFFFFF;
+      border: 0;
+      border-radius: 5px;
+      box-shadow: 0px 0.2rem 0.4rem rgba(0, 0, 0, 0.2);
+      transition: all 0.2s ease-in-out;
+      text-decoration: none;
+      user-select: none;
+      white-space: nowrap;
+      text-transform: none;
+
+      &:not([disabled]) {
+        &:hover {
+          background: #be3c08;
+        }
+        &:active {
+          background: #b03808;
+        }
+      }
+    }
   }
 
 }
diff --git a/app/assets/stylesheets/controls/_card.scss b/app/assets/stylesheets/controls/_card.scss
@@ -1,14 +1,19 @@
 .ox-card {
   $input-height: 50px;
   $input-border-color: darken($os_light_gray, 10%);
+  $card-padding: 50px;
 
   display: block;
   margin: auto;
   max-width: 570px;
   background-color: $os_light_gray;
-  padding: 30px 50px 50px 50px;
+  padding: 30px $card-padding $card-padding;
   font-size: 14px;
 
+  &.wide {
+    max-width: initial;
+  }
+
   h1, h2, h3, .minor-heading {
     font-family: $os_heading_font_family;
     font-weight: 700;
@@ -130,4 +135,36 @@
     }
   }
 
+  .footer {
+    margin: $card-padding $card-padding*-1 $card-padding*-1;
+    padding: 1.8rem $card-padding;
+    border-top: 1px solid #D5D5D5;
+    background: #F5F5F5;
+    display: flex;
+    justify-content: space-between;
+    gap: 4rem;
+
+    @media (max-width: $screen-sm - ($card-padding * 2)) {
+      flex-direction: column;
+      gap: 1.6rem;
+    }
+
+    .checkbox {
+      label {
+        display: flex;
+        align-items: center;
+        padding: 0;
+
+        input[type="checkbox"] {
+          margin: 0 1.6rem 0 0;
+          position: initial;
+          flex-shrink: 0;
+        }
+      }
+    }
+
+    input[type=submit] {
+      margin-right: 0;
+    }
+  }
 }
diff --git a/app/assets/stylesheets/ox-controls.scss b/app/assets/stylesheets/ox-controls.scss
@@ -33,3 +33,10 @@
     top: 50%;
   }
 }
+
+
+input[type="checkbox"].new-style {
+  accent-color: #026AA1;
+  width: 2rem;
+  height: 2rem;
+}
diff --git a/app/views/terms/pose.html.erb b/app/views/terms/pose.html.erb
@@ -1,4 +1,4 @@
-<%= ox_card(heading: @contract.title) do %>
+<%= ox_card(heading: @contract.title, classes: "wide") do %>
 
   <% if FinePrint.signed_any_version_of_contract?(current_user, @contract) %>
     <p><%= t :".contracts_changed_notice", contract_title: @contract.title %></p>
@@ -13,16 +13,17 @@
   <%= lev_form_for(
     :agreement,
     url: agree_to_terms_path(r: params[:r], token: params[:token]),
-    method: :post
+    method: :post,
+    html: { class: 'footer' }
   ) do |f| %>
     <div class="checkbox">
       <label>
-        <%= f.check_box :i_agree %> <%= t :".have_read_terms_and_agree" %>
+        <%= f.check_box :i_agree, class: 'new-style' %> <%= t :".have_read_terms_and_agree" %>
       </label>
     </div>
 
     <%= f.hidden_field :contract_id, value: @contract.id %>
-    <%= f.submit (t :".agree"), id: "agreement_submit", class: 'primary' %>
+    <%= f.submit (t :".agree"), id: "agreement_submit", class: 'primary new-style' %>
   <% end %>
 
 <% end %>

diff --git a/config/locales/en.yml b/config/locales/en.yml
@@ -487,7 +487,7 @@ en:
       page_heading: Site Terms & Policies
 
     pose:
-      agree: I agree
+      agree: Accept and continue
       contract_acceptance_required: >-
         To continue, please review and agree to the following site terms by
         clicking the agreement button at the bottom of this page.

diff --git a/config/locales/pl.yml b/config/locales/pl.yml
@@ -87,7 +87,7 @@ pl:
     educator_pending_cs_verification_description: >-
       Twój dostęp do instruktora jest w toku.
        Sprawdzimy Twój status instruktora w ciągu 3-4 dni roboczych.
-       Aktualizacje Twojego statusu weryfikacji zostaną wysłane na adres <b>% {email_addess} </b>.
+       Aktualizacje Twojego statusu weryfikacji zostaną wysłane na adres <b>%{email_addess}</b>.
        W międzyczasie możesz uzyskać dostęp do wszystkich książek i zasobów
        z wyjątkiem tych, które wymagają weryfikacji instruktora.
     join_as_student_description: >-
@@ -436,7 +436,7 @@ pl:
       page_heading: Regulaminy użytkowania serwisu
 
     pose:
-      agree: Zgadzam się
+      agree: Zaakceptuj i kontynuuj
       contract_acceptance_required: >-
         Aby kontynuować, zapoznaj się z treścią poniższych regulaminów
         i zaakceptuj je klikając „Zgadzam się” na końcu tej strony.