From 1b97523563fb9f56cd5159898e8bbfd18589dc62 Mon Sep 17 00:00:00 2001 From: Aaron Hill Date: Tue, 23 Mar 2021 10:21:00 -0400 Subject: [PATCH 1/2] Apply our gentler color theming to Alert stylings Ref: https://github.com/radiusnetworks/iris/issues/3167 The colors were originally defined in Iris overrides, but those colors were only being applied to flash hashes. Error blocks and other bits here and there would have the original themed alerts come through, and these colors are more saturated and a bit "harsher". The original colors have been preserved in case they are used elsewhere, but the alerts themselves have been re-skinned to use the new color variables, which have been named in alignment with flashhash keys. --- .../stylesheets/radius-theme/app/alerts.scss | 17 ++++++++++++++++ .../radius-theme/app/variables.scss | 20 ++++++++++++++++++- lib/radius/rails/version.rb | 2 +- 3 files changed, 37 insertions(+), 2 deletions(-) diff --git a/app/assets/stylesheets/radius-theme/app/alerts.scss b/app/assets/stylesheets/radius-theme/app/alerts.scss index 3605a29..a93bceb 100644 --- a/app/assets/stylesheets/radius-theme/app/alerts.scss +++ b/app/assets/stylesheets/radius-theme/app/alerts.scss @@ -9,6 +9,23 @@ $alerts-position: 60px; $alerts-z-index: 9090; $alerts-width: 350px; +// Color overrides +.alert-success { + @include alert-variant($alert-flash-notice-bg, $alert-flash-notice-border, $alert-flash-notice-color); +} + +.alert-info { + @include alert-variant($alert-flash-info-bg, $alert-flash-info-border, $alert-flash-info-color); +} + +.alert-warning { + @include alert-variant($alert-flash-warning-bg, $alert-flash-warning-border, $alert-flash-warning-color); +} + +.alert-danger { + @include alert-variant($alert-flash-error-bg, $alert-flash-error-border, $alert-flash-error-color); +} + // Message container for positioning .alerts { diff --git a/app/assets/stylesheets/radius-theme/app/variables.scss b/app/assets/stylesheets/radius-theme/app/variables.scss index ba1f33a..a355928 100644 --- a/app/assets/stylesheets/radius-theme/app/variables.scss +++ b/app/assets/stylesheets/radius-theme/app/variables.scss @@ -652,8 +652,26 @@ $modal-sm: 300px; //== Alerts // -//## Define alert colors, border radius, and padding. +//## Alert Colors defined using FlashHash keys -- Used in for alerts, form errors, and flashhashes +$alert-flash-notice-color: #468847; +$alert-flash-notice-bg: #dff0d8; +$alert-flash-notice-border: #d6e9c6; + +$alert-flash-info-color: #3a87ad; +$alert-flash-info-bg: #d9edf7; +$alert-flash-info-border: #bce8f1; + +$alert-flash-warning-color: #c09853; +$alert-flash-warning-bg: #fcf8e3; +$alert-flash-warning-border:#fbeed5; + +$alert-flash-error-color: #b94a48; +$alert-flash-error-bg: #f2dede; +$alert-flash-error-border: #eed3d7; + +//## Define alert colors, border radius, and padding. +//## These are legacy definitions, preserved in case they are used elsewhere $alert-padding: 8px; $alert-border-radius: $border-radius-small; $alert-link-font-weight: bold; diff --git a/lib/radius/rails/version.rb b/lib/radius/rails/version.rb index 4f0ce31..1612dd8 100644 --- a/lib/radius/rails/version.rb +++ b/lib/radius/rails/version.rb @@ -1,5 +1,5 @@ module Radius module Rails - VERSION = "2.1.0" + VERSION = "2.1.1" end end From cef75b4bd36efc786ad73973cd9d0548a6d2961c Mon Sep 17 00:00:00 2001 From: Aaron Hill Date: Tue, 23 Mar 2021 11:34:39 -0400 Subject: [PATCH 2/2] Adds flash type definitions to CSS selectors. --- app/assets/stylesheets/radius-theme/app/alerts.scss | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/app/assets/stylesheets/radius-theme/app/alerts.scss b/app/assets/stylesheets/radius-theme/app/alerts.scss index a93bceb..3d8ddaa 100644 --- a/app/assets/stylesheets/radius-theme/app/alerts.scss +++ b/app/assets/stylesheets/radius-theme/app/alerts.scss @@ -10,19 +10,19 @@ $alerts-z-index: 9090; $alerts-width: 350px; // Color overrides -.alert-success { +.alert-success, .flash.notice { @include alert-variant($alert-flash-notice-bg, $alert-flash-notice-border, $alert-flash-notice-color); } -.alert-info { +.alert-info, .flash.info { @include alert-variant($alert-flash-info-bg, $alert-flash-info-border, $alert-flash-info-color); } -.alert-warning { +.alert-warning, .flash.warning { @include alert-variant($alert-flash-warning-bg, $alert-flash-warning-border, $alert-flash-warning-color); } -.alert-danger { +.alert-danger, .flash.error { @include alert-variant($alert-flash-error-bg, $alert-flash-error-border, $alert-flash-error-color); }