feat: Add banner for usability testing survey participation request (#…

…1147) * feat: Add banner for usability tes†ing survey participation request * fix: docker error in ci build and erblinter errors
UCLALibrary · Aug 9, 2024 · cfd60fc · cfd60fc
1 parent f9a9fb8
commit cfd60fc
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 7 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -42,7 +42,11 @@ jobs:
   rspec:
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@5a4ac9002d0be2fb38bd78e4b4dbde5606d7042f
+    - uses: actions/checkout@v3
+    - name: Set up Docker Compose
+      run: |
+        sudo apt-get update
+        sudo apt-get install -y docker-compose
     - name: Login to DockerHub
       uses: docker/login-action@f3364599c6aa293cdc2b8391b1b56d0c30e45c8a
       with:
@@ -62,7 +66,11 @@ jobs:
   cypress:
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@5a4ac9002d0be2fb38bd78e4b4dbde5606d7042f
+    - uses: actions/checkout@v3
+    - name: Set up Docker Compose
+      run: |
+        sudo apt-get update
+        sudo apt-get install -y docker-compose
     - name: Login to DockerHub
       uses: docker/login-action@f3364599c6aa293cdc2b8391b1b56d0c30e45c8a
       with:

diff --git a/app/assets/stylesheets/theme_ursus/header/_ur-navbar-alert.scss b/app/assets/stylesheets/theme_ursus/header/_ur-navbar-alert.scss
@@ -1,7 +1,7 @@
 .alert-bar--ursus {
-  background-color: $white;
-  border: 1px solid $gray-10;
-  border-top: 3px solid $ucla-gold;
+  background-color: $ucla-gold;
+  // border: 1px solid $gray-10;
+  // border-top: 3px solid $ucla-gold;
 }
 
 .alert-title--ursus {
@@ -13,7 +13,14 @@
 }
 
 .alert-bar__wrapper--ursus {
-  padding: 20px 10px;
-
+  // padding: 20px 10px; // this is not used anywhere in code so comenting it out
+  justify-content: center; /* Center content horizontally */
+  width: 100%; /* Ensure wrapper takes full width */
+}
+
+.alert-bar__text--ursus {
+  font-weight: unset;
+  flex-basis: auto; /* Adjust to auto so it can take up necessary space */
+  text-align: center; /* Center text inside the span */
 }
 
diff --git a/app/views/shared/header/_alert-bar.html.erb b/app/views/shared/header/_alert-bar.html.erb
@@ -0,0 +1,10 @@
+<div
+  class="container-full alert-bar alert-bar--ursus"
+  id="alertBar">
+  <div class="alert-bar__wrapper alert-bar__wrapper--ursus">
+    <span class="alert-bar__text alert-bar__text--ursus">
+      <strong>Help us improve your digital library experience!</strong> Join a usability testing session by completing <a href="https://docs.google.com/forms/d/e/1FAIpQLSfXJw6U4Q0fvb7BHW9WqvrBN0JETewtkKlQLWHvm_s37rLzcA/viewform">our survey</a>.
+    </span>
+  </button>
+  </div>
+</div>
diff --git a/app/views/shared/header/_header_navbar.html.erb b/app/views/shared/header/_header_navbar.html.erb
@@ -1,3 +1,4 @@
+<%= render 'shared/header/alert-bar' %>
 <div class="container-full container-full--navbar site-navbar site-navbar--ursus">
   <nav class="navbar navbar-expand-lg navbar-dark site-navbar__wrapper site-navbar__wrapper--ursus" role="navigation">
     <div class="site-navbar__logo-block">