fix: making the background of the topbar brighter so the contrast bet… (

#840)

* fix: making the background of the topbar brighter so the contrast between background and hover has more contrast

* fix: removing comments

* fix: make format

* make format

* 2.221.2

* fix: message show more

package.json

@@ -1,6 +1,6 @@
 {
   "name": "clever-components",
-  "version": "2.221.1",
+  "version": "2.221.2",
   "description": "A library of helpful React components and less styles",
   "repository": {
     "type": "git",

src/AnnouncementBubble/QuotedAnnouncementBubble.tsx

@@ -176,7 +176,7 @@ export const QuotedAnnouncementBubble: React.FC<Props> = ({
       )}
       <Button
         className={cssClass("button--outer")}
-        ariaLabel={buttonText}
+        ariaLabel={`${buttonText} of message at ${sentAtTimestamp}`}
         onClick={() => {
           if (onToggleShow) {
             onToggleShow();

src/Button/Button.less

@@ -2,6 +2,7 @@
 @import (reference) "../less/index";
 
 @alert_red_hover: #880b0e;
+@button_hover_contrast: #002b6a;
 
 .buttonColor(@backgroundColor: @primary_blue, @disabled: false) {
   background-color: @backgroundColor;
@@ -75,8 +76,8 @@ button {
     &:hover,
     &:focus,
     &:active {
-      background-color: @primary_blue_shade_2;
-      border-color: @primary_blue_shade_2;
+      background-color: @button_hover_contrast;
+      border-color: @button_hover_contrast;
       color: @neutral_white;
     }
   }

src/TopBar/index.less

@@ -8,7 +8,7 @@
   .padding--x--2xs;
   // TODO: Consider creating a color variable if this should be a color used elsewhere.
   /* stylelint-disable-next-line declaration-property-value-whitelist */
-  background-color: #3761e9;
+  background-color: #436cf2;
 
   /* stylelint-disable unit-whitelist */
   box-shadow: 0 1px 6px 2px rgba(33, 70, 189, 0.25);