fix layout login page

app/assets/stylesheets/ugent/_override.scss

@@ -60,14 +60,14 @@
 }
 
 #sign-in-form {
-  display: flex;
   gap: 30px;
-  flex-wrap: wrap;
 }
-#sign-in-form > .panel {
+
+#sign-in-form > .card {
   flex: 1;
   text-align: center;
   min-width: 350px;
+  border: 1px solid black;
 }
 
 /*

app/views/branded/home/index.html.erb

@@ -1,9 +1,9 @@
 <div class="row">
-  <div class="col-md-8">
+  <div>
     <%= render partial: 'home/welcome' %>
   </div>
 
-  <div class="col-md-4">
+  <div>
     <%= render partial: 'shared/access_controls' %>
   </div>
 </div>

app/views/branded/shared/_access_controls.html.erb

@@ -1,6 +1,6 @@
 <div class="sign-in">
   <div class="tab-content">
-    <div id="sign-in-form" role="tabpanel" class="tab-pane show active">
+    <div id="sign-in-form" class="card-group">
       <% if ENV["DMP_LOCAL_LOGIN"].to_s == "true" %>
         <%= render(partial: "shared/dev_sign_in_form") %>
       <% else %>

app/views/branded/shared/_dev_sign_in_form.html.erb

@@ -1,27 +1,27 @@
-<div class="panel panel-default">
-  <div class="panel-heading">
+<div class="card">
+  <div class="card-header">
     <h3>Sign in with your credentials</h3>
   </div>
-  <div class="panel-body">
+  <div class="card-body">
   <%= form_for resource, as: 'user', namespace: 'signin', url: user_session_path, html: {id: "sign_in_form"} do |f| %>
-    <div class="form-group">
-      <%= f.label(:email, _('Email'), class: 'control-label') %>
+    <div class="form-control mb-3">
+      <%= f.label(:email, _('Email'), class: 'form-label') %>
       <%= f.email_field(:email, class: 'form-control', "aria-required": true) %>
     </div>
-    <div class="form-group">
-      <%= f.label(:password, _('Password'), class: 'control-label') %>
+    <div class="form-control mb-3">
+      <%= f.label(:password, _('Password'), class: 'form-label') %>
       <%= f.password_field(:password, class: 'form-control', "aria-required": true) %>
     </div>
-    <div>
+    <div class="row mb-3">
       <%= link_to _('Forgot password?'), new_password_path('user') %>
     </div>
-    <div class="checkbox">
-      <%= label_tag 'remember_email' do %>
-        <%= check_box_tag 'remember_email' %>
+    <div class="form-check">
+      <%= label_tag 'remember_email', class: 'form-check-label' do %>
+        <%= check_box_tag 'remember_email', 'form-check-input' %>
         <%= _('Remember email') %>
       <% end %>
     </div>
-    <%= f.button(_('Sign in'), class: "btn btn-default", type: "submit") %>
+    <%= f.button(_('Sign in'), class: "btn btn-primary", type: "submit") %>
 
   <% end %>
   </div>

app/views/branded/shared/_sign_in_with_orcid.html.erb

@@ -1,8 +1,8 @@
-<div class="panel panel-default">
-  <div class="panel-heading">
+<div class="card">
+  <div class="card-header">
     <h3>Sign in with ORCID</h3>
   </div>
-  <div class="panel-body">
+  <div class="card-body">
     <%= link_to(
           "Sign in with ORCID",
           Rails.application.routes.url_helpers.send("user_orcid_omniauth_authorize_path"),

app/views/branded/shared/_sign_in_with_shibboleth.html.erb

@@ -1,10 +1,10 @@
-<div class="panel panel-default">
-  <div class="panel-heading">
+<div class="card">
+  <div class="card-header">
     <h3>Sign in with your institutional account</h3>
   </div>
-  <div class="panel-body">
+  <div class="card-body">
     <form action="<%= Rails.configuration.x.shibboleth.login_url %>" method="post">
-      <div class="form-group">
+      <div class="form-control">
         <input type="hidden" name="target" value="<%= user_shibboleth_omniauth_callback_url %>">
         <select class="form-select form-select-lg" name="entityID" required>
           <option value="">-- Select your institution --</option>

public/tinymce/skins/oxide/skin.css

@@ -336,21 +336,41 @@ button::-moz-focus-inner {
   box-shadow: none;
   color: #fff;
 }
-.tox .tox-button.tox-button--enabled,
-.tox .tox-button.tox-button--enabled:hover {
-  background: #a6ccf7;
-  border-width: 1px;
+.tox .tox-button.tox-button--enabled {
+  background-color: #0054b4;
+  background-image: none;
+  border-color: #0054b4;
   box-shadow: none;
-  color: #222f3e;
+  color: #fff;
 }
-.tox .tox-button.tox-button--enabled > *,
-.tox .tox-button.tox-button--enabled:hover > * {
-  transform: none;
+.tox .tox-button.tox-button--enabled[disabled] {
+  background-color: #0054b4;
+  background-image: none;
+  border-color: #0054b4;
+  box-shadow: none;
+  color: rgba(255, 255, 255, 0.5);
+  cursor: not-allowed;
 }
-.tox .tox-button.tox-button--enabled svg,
-.tox .tox-button.tox-button--enabled:hover svg {
-  /* stylelint-disable-line no-descending-specificity */
-  fill: #222f3e;
+.tox .tox-button.tox-button--enabled:focus:not(:disabled) {
+  background-color: #00489b;
+  background-image: none;
+  border-color: #00489b;
+  box-shadow: none;
+  color: #fff;
+}
+.tox .tox-button.tox-button--enabled:hover:not(:disabled) {
+  background-color: #00489b;
+  background-image: none;
+  border-color: #00489b;
+  box-shadow: none;
+  color: #fff;
+}
+.tox .tox-button.tox-button--enabled:active:not(:disabled) {
+  background-color: #003c81;
+  background-image: none;
+  border-color: #003c81;
+  box-shadow: none;
+  color: #fff;
 }
 .tox .tox-button--icon-and-text,
 .tox .tox-button.tox-button--icon-and-text,
@@ -412,6 +432,41 @@ button::-moz-focus-inner {
   box-shadow: none;
   color: #222f3e;
 }
+.tox .tox-button--secondary.tox-button--enabled {
+  background-color: #a8c8ed;
+  background-image: none;
+  border-color: #a8c8ed;
+  box-shadow: none;
+  color: #222f3e;
+}
+.tox .tox-button--secondary.tox-button--enabled[disabled] {
+  background-color: #a8c8ed;
+  background-image: none;
+  border-color: #a8c8ed;
+  box-shadow: none;
+  color: rgba(34, 47, 62, 0.5);
+}
+.tox .tox-button--secondary.tox-button--enabled:focus:not(:disabled) {
+  background-color: #93bbe9;
+  background-image: none;
+  border-color: #93bbe9;
+  box-shadow: none;
+  color: #222f3e;
+}
+.tox .tox-button--secondary.tox-button--enabled:hover:not(:disabled) {
+  background-color: #93bbe9;
+  background-image: none;
+  border-color: #93bbe9;
+  box-shadow: none;
+  color: #222f3e;
+}
+.tox .tox-button--secondary.tox-button--enabled:active:not(:disabled) {
+  background-color: #7daee4;
+  background-image: none;
+  border-color: #7daee4;
+  box-shadow: none;
+  color: #222f3e;
+}
 .tox .tox-button--icon,
 .tox .tox-button.tox-button--icon,
 .tox .tox-button.tox-button--secondary.tox-button--icon {
@@ -3301,6 +3356,7 @@ body.tox-dialog__disable-scroll {
   text-transform: none;
 }
 .tox .tox-tree .tox-trbtn .tox-tree__label {
+  cursor: default;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;