Merge branch 'TMS-1045' into stage

devgeniem · Jun 10, 2024 · f671ce8 · f671ce8
2 parents 7c094fd + 8f1d156
commit f671ce8
Show file tree

Hide file tree

Showing 18 changed files with 105 additions and 73 deletions.
diff --git a/CHANGELOG.MD b/CHANGELOG.MD
@@ -7,6 +7,15 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+- TMS-1045: Style changes:
+    - Remove "Tampere Filharmonia" pseudo text-elements from hero
+    - Change hero CTA-button colors
+    - Change footer "Tampere"-logo color
+    - Change page background-color from grey to white
+    - Add borders to elements with a white background
+
+## [1.12.2] - 2024-05-20
+
 - TMS-1028: Fix footer social-media icon color
 
 ## [1.12.1] – 2023-05-24

diff --git a/assets/styles/blocks/_image-gallery.scss b/assets/styles/blocks/_image-gallery.scss
@@ -13,5 +13,9 @@
         .icon {
             fill: currentColor !important;
         }
+
+        &.is-primary .icon {
+            fill: $primary !important;
+        }
     }
 }
diff --git a/assets/styles/layouts/_articles.scss b/assets/styles/layouts/_articles.scss
@@ -40,3 +40,13 @@
         font-weight: 700 !important;
     }
 }
+
+.Home,
+.layout-articles,
+.layout-blog-articles {
+    .highlight-article {
+        .has-background-secondary {
+            border: 1px solid $secondary-invert !important;
+        }
+    }
+}
diff --git a/assets/styles/layouts/_hero.scss b/assets/styles/layouts/_hero.scss
@@ -38,35 +38,6 @@
 
         @include from($desktop) {
             min-height: 36.198vw !important; // sass-lint:disable-line no-important
-
-            &::before,
-            &::after {
-                content: '';
-                position: absolute;
-                top: 0;
-                bottom: 0;
-                z-index: 1;
-                width: 40px;
-                height: 100%;
-                background-repeat: no-repeat;
-                background-position-y: center;
-                background-size: contain;
-            }
-
-            &::before {
-                top: 7.5%;
-                bottom: 7.5%;
-                left: 0;
-                height: 85%;
-                background-image: url('images/tampere-pysty.svg');
-                background-position-x: 0;
-            }
-
-            &::after {
-                right: 0;
-                background-image: url('images/tampere-filharmonia-pysty.svg');
-                background-position-x: 100%;
-            }
         }
 
         @include from(1600px) {

diff --git a/assets/styles/layouts/_textblock.scss b/assets/styles/layouts/_textblock.scss
@@ -0,0 +1,7 @@
+.layout-textblock {
+    &.has-background-primary {
+        h2 {
+            color: $primary-invert !important;
+        }
+    }
+}
diff --git a/assets/styles/layouts/index.scss b/assets/styles/layouts/index.scss
@@ -12,3 +12,4 @@
 @import "events";
 @import "logo-wall";
 @import "content-columns";
+@import "textblock";
diff --git a/assets/styles/overrides/_button.scss b/assets/styles/overrides/_button.scss
@@ -1,7 +1,7 @@
 .button {
     &.is-primary {
         color: $primary-invert !important;
-        
+
         .icon {
             fill: $primary-invert !important;
         }
@@ -16,7 +16,7 @@
 
         &:hover,
         &:focus {
-            border-color: $primary-invert !important;
+            border-color: $primary !important;
         }
     }
 
@@ -27,7 +27,8 @@
             &:hover {
                 color: $primary !important;
                 background-color: $primary-invert !important;
-                border-color: $primary-invert !important;
+                border-color: $primary !important;
+                text-decoration: underline !important;
 
                 .icon {
                     fill: $primary !important;
@@ -39,8 +40,8 @@
             &.is-focused,
             &:focus {
                 color: $secondary-invert !important;
-                background-color: $primary-invert !important;
-                border-color: $primary-invert !important;
+                background-color: $tertiary !important;
+                border-color: $tertiary !important;
 
                 .icon {
                     fill: $secondary-invert !important;
@@ -73,8 +74,9 @@
             &.is-hovered,
             &:hover {
                 color: $secondary-invert !important;
-                background-color: $primary-invert !important;
-                border-color: $primary-invert !important;
+                background-color: $tertiary !important;
+                border-color: $secondary-invert !important;
+                text-decoration: underline !important;
 
                 .icon {
                     fill: $secondary-invert !important;

diff --git a/assets/styles/overrides/_colors.scss b/assets/styles/overrides/_colors.scss
@@ -33,3 +33,9 @@
         color: $secondary-invert;
     }
 }
+
+.has-colors-white,
+.has-background-secondary,
+.has-colors-secondary {
+    border: 1px solid $secondary-invert;
+}
diff --git a/assets/styles/overrides/_events.scss b/assets/styles/overrides/_events.scss
@@ -4,6 +4,8 @@
 
 .events {
     &__item {
+        border: 1px solid $secondary-invert;
+
         .pill {
             display: none;
         }

diff --git a/assets/styles/overrides/_forms.scss b/assets/styles/overrides/_forms.scss
@@ -0,0 +1,12 @@
+/**
+ * Gravityforms
+ */
+.gform_wrapper {
+    form {
+        select,
+        input,
+        textarea {
+            border: 1px solid $secondary-invert;
+        }
+    }
+}
diff --git a/assets/styles/overrides/_grid.scss b/assets/styles/overrides/_grid.scss
@@ -5,7 +5,7 @@
 .grid {
     &__item {
         color: $secondary-invert !important;
-        background-color: $secondary !important;
+        border: 1px solid $secondary-invert;
 
         .button {
             color: $white !important;
@@ -22,6 +22,12 @@
             }
         }
 
+        &.has-colors-accent {
+            .button {
+                border-color: $white !important;
+            }
+        }
+
         &--featured {
             a {
                 &.button {

diff --git a/assets/styles/overrides/_header-top.scss b/assets/styles/overrides/_header-top.scss
@@ -1,5 +1,4 @@
 .site-header {
-
     &__logo-image {
         @include from($tablet) {
             min-width: 10rem;
@@ -29,7 +28,7 @@
             padding-left: 1rem;
             border-color: $black !important;
             color: $black !important;
-    
+
             .icon {
                 fill: $black !important;
             }
@@ -43,11 +42,11 @@
             padding-top: 0;
             border-bottom-right-radius: 0.25rem;
             border-bottom-left-radius: 0.25rem;
-            
+
             .dropdown-content {
                 background-color: $secondary;
             }
-           
+
         }
 
     }

diff --git a/assets/styles/overrides/_share-links.scss b/assets/styles/overrides/_share-links.scss
@@ -1,6 +1,7 @@
 .share-links {
     a {
         transition: box-shadow $easing $speed;
+        border: 1px solid $secondary-invert;
 
         &.is-hovered,
         &:hover {

diff --git a/assets/styles/overrides/index.scss b/assets/styles/overrides/index.scss
@@ -7,6 +7,7 @@
 @import "colors";
 @import "events";
 @import "fly-out-nav";
+@import "forms";
 @import "footer";
 @import "grid";
 @import "header-top";

diff --git a/assets/styles/theme-filharmonia.scss b/assets/styles/theme-filharmonia.scss
@@ -11,14 +11,14 @@ $primary-light-invert: $color-white;
 $primary-dark: bulmaDarken($primary, 15);
 $primary-dark-invert: $color-white;
 
-$secondary: #dee3e3;
+$secondary: $color-white;
 $secondary-invert: $color-black;
 $secondary-light: bulmaLighten($secondary, 10);
 $secondary-light-invert: $color-black;
 $secondary-dark: bulmaDarken($secondary, 10);
 $secondary-dark-invert: $color-black;
 
-$tertiary: $color-white;
+$tertiary: #dee3e3;
 $tertiary-invert: $color-black;
 
 $light: $primary-light;

diff --git a/lib/ThemeCustomizationController.php b/lib/ThemeCustomizationController.php
@@ -21,100 +21,100 @@ class ThemeCustomizationController implements Controller {
      * @return void
      */
     public function hooks() : void {
-        add_filter(
+        \add_filter(
             'tms/theme/header/colors',
             \Closure::fromCallable( [ $this, 'header_colors' ] ),
             10,
             1
         );
 
-        add_filter(
+        \add_filter(
             'tms/theme/footer/colors',
             \Closure::fromCallable( [ $this, 'footer_colors' ] ),
             10,
             1
         );
 
-        add_filter(
+        \add_filter(
             'tms/theme/footer/typgraphy',
             \Closure::fromCallable( [ $this, 'footer_typography' ] ),
             10,
             1
         );
 
-        add_filter(
+        \add_filter(
             'tms/theme/share_links/link_class',
             fn() => 'has-background-primary-invert'
         );
 
-        add_filter(
+        \add_filter(
             'tms/theme/share_links/icon_class',
             fn() => 'is-black'
         );
 
-        add_filter(
+        \add_filter(
             'tms/theme/accent_colors',
             [ $this, 'get_theme_accent_colors' ]
         );
 
-        add_filter(
+        \add_filter(
             'tms/theme/search/search_item',
             [ $this, 'search_classes' ]
         );
 
-        add_filter(
+        \add_filter(
             'tms/theme/base/search_result_item',
             [ $this, 'alter_search_result_item' ]
         );
 
-        add_filter(
+        \add_filter(
             'tms/theme/event/hero_info_classes',
-            fn() => 'has-colors-tertiary'
+            fn() => 'has-colors-secondary'
         );
 
-        add_filter( 'tms/theme/event/group_title', function () {
+        \add_filter( 'tms/theme/event/group_title', function () {
             return [
-                'title' => 'has-background-tertiary',
+                'title' => 'has-background-secondary',
                 'icon'  => 'is-accent',
             ];
         } );
 
-        add_filter( 'tms/acf/block/material/data', function ( $data ) {
+        \add_filter( 'tms/acf/block/material/data', function ( $data ) {
             $data['button_classes'] = 'is-primary';
 
             return $data;
         } );
 
-        add_filter(
+        \add_filter(
             'tms/plugin-materials/page_materials/material_page_item_button_classes',
             fn() => 'is-primary'
         );
 
-        add_filter(
+        \add_filter(
             'tms/plugin-materials/page_materials/material_page_item_classes',
             fn() => ''
         );
 
-        add_filter( 'tms/theme/event/info_group_classes', fn() => '' );
+        \add_filter( 'tms/theme/event/info_group_classes', fn() => '' );
 
-        add_filter(
+        \add_filter(
             'tms/acf/block/quote/data',
             [ $this, 'alter_quote_block_data' ]
         );
 
-        add_filter(
+        \add_filter(
             'tms/acf/block/subpages/data',
             [ $this, 'alter_block_subpages_data' ],
             30
         );
 
-        add_filter(
+        \add_filter(
             'tms/theme/layout_events/all_events_link',
             fn() => 'is-size-7 has-text-decoration-underline'
         );
 
-        add_filter( 'tms/acf/layout/image_carousel/data', [ $this, 'alter_image_carousel_data' ], 20 );
-        add_filter( 'tms/acf/block/image_carousel/data', [ $this, 'alter_image_carousel_data' ], 20 );
+        \add_filter( 'tms/acf/layout/image_carousel/data', [ $this, 'alter_image_carousel_data' ], 20 );
+        \add_filter( 'tms/acf/block/image_carousel/data', [ $this, 'alter_image_carousel_data' ], 20 );
     }
 
     /**
@@ -150,7 +150,6 @@ public function footer_colors( $colors ) : array {
         $colors['container']   = 'has-background-secondary has-text-secondary-invert';
         $colors['back_to_top'] = 'is-secondary-invert is-outlined';
         $colors['link']        = 'has-text-secondary-invert';
-        $colors['link_icon']   = 'is-black';
 
         return $colors;
     }