Update remaining-messages component (#1972)

* chore(tailwind): add blue-200

* chore: regen css/js

* style(pill): update pill style to match new designs

* chore: formatting

* feat(remaining-messages): add muted option + style

* chore: regen css

app/assets/stylesheets/tailwind/components/pill.css

@@ -12,11 +12,7 @@
   }
 
   .pill {
-    @apply bg-blue border-2 border-blue;
-  }
-
-  .pill > a + a {
-    @apply border-l-2 border-blue;
+    @apply bg-gray-100;
   }
 
   .pill a,
@@ -39,34 +35,34 @@
   }
 
   a.pill-selected-item {
-    @apply relative z-10 bg-gray-100 outline-white;
+    @apply relative z-10 bg-white outline-white border-2 border-b-0 border-blue;
   }
   a.pill-selected-item:hover {
-    @apply bg-blue-700 text-white;
+    @apply bg-blue-200;
   }
   a.pill-selected-item:focus {
     z-index: 1000;
     @apply outline-yellow;
   }
 
   a.pill-unselected-item {
-    @apply relative z-10 outline-white;
+    @apply relative z-10 outline-white border-b-2 border-blue;
   }
   /* LVHA-order: :link — :visited — :hover — :active */
   a.pill-unselected-item:link,
   a.pill-unselected-item:visited {
-    @apply bg-blue text-white;
+    @apply bg-gray-100 text-blue;
   }
   a.pill-unselected-item:hover {
-    @apply bg-blue-700;
+    @apply bg-blue-200;
   }
   a.pill-unselected-item:focus,
   a.pill-unselected-item:active {
     @apply bg-yellow text-blue;
   }
   a.pill-unselected-item:focus {
     z-index: 1000;
-    @apply outline-yellow;
+    @apply outline-yellow border-0;
   }
 
   .pill-centered-item {

app/assets/stylesheets/tailwind/components/remaining-messages.css

@@ -5,6 +5,10 @@
     @apply bg-blue text-white p-gutterHalf;
   }
 
+  .remaining-messages.muted {
+    @apply bg-gray-200 text-black;
+  }
+
   .rm-header {
     @apply text-smaller inline-block;
   }
@@ -23,6 +27,10 @@
     align-items: flex-end;
   }
 
+  .muted .rm-bar {
+    box-shadow: inset 0 -10px #49535d;
+  }
+
   .rm-bar-usage {
     width: max(var(--usage), 4px);
     height: 30px;

app/config.py

@@ -25,8 +25,7 @@ class Config(object):
     ALLOW_DEBUG_ROUTE = env.bool("ALLOW_DEBUG_ROUTE", False)
 
     # List of allowed service IDs that are allowed to send HTML through their templates.
-    ALLOW_HTML_SERVICE_IDS: List[str] = [
-        id.strip() for id in os.getenv("ALLOW_HTML_SERVICE_IDS", "").split(",")]
+    ALLOW_HTML_SERVICE_IDS: List[str] = [id.strip() for id in os.getenv("ALLOW_HTML_SERVICE_IDS", "").split(",")]
     ADMIN_BASE_URL = (
         "https://" + os.environ.get("HEROKU_APP_NAME", "") + ".herokuapp.com"
         if os.environ.get("HEROKU_APP_NAME", "") != ""
@@ -48,15 +47,12 @@ class Config(object):
     BULK_SEND_AWS_BUCKET = os.getenv("BULK_SEND_AWS_BUCKET")
 
     CHECK_PROXY_HEADER = False
-    CONTACT_EMAIL = os.environ.get(
-        "CONTACT_EMAIL", "[email protected]")
-    CRM_GITHUB_PERSONAL_ACCESS_TOKEN = os.getenv(
-        "CRM_GITHUB_PERSONAL_ACCESS_TOKEN")
+    CONTACT_EMAIL = os.environ.get("CONTACT_EMAIL", "[email protected]")
+    CRM_GITHUB_PERSONAL_ACCESS_TOKEN = os.getenv("CRM_GITHUB_PERSONAL_ACCESS_TOKEN")
     CRM_ORG_LIST_URL = os.getenv("CRM_ORG_LIST_URL")
     CSV_MAX_ROWS = env.int("CSV_MAX_ROWS", 50_000)
     CSV_MAX_ROWS_BULK_SEND = env.int("CSV_MAX_ROWS_BULK_SEND", 100_000)
-    CSV_UPLOAD_BUCKET_NAME = os.getenv(
-        "CSV_UPLOAD_BUCKET_NAME", "notification-alpha-canada-ca-csv-upload")
+    CSV_UPLOAD_BUCKET_NAME = os.getenv("CSV_UPLOAD_BUCKET_NAME", "notification-alpha-canada-ca-csv-upload")
     DANGEROUS_SALT = os.environ.get("DANGEROUS_SALT")
     DEBUG = False
     DEBUG_KEY = os.environ.get("DEBUG_KEY", "")
@@ -71,42 +67,34 @@ class Config(object):
         "other": 25_000,
     }
     DEFAULT_LIVE_SERVICE_LIMIT = env.int("DEFAULT_LIVE_SERVICE_LIMIT", 10_000)
-    DEFAULT_LIVE_SMS_DAILY_LIMIT = env.int(
-        "DEFAULT_LIVE_SMS_DAILY_LIMIT", 1000)
+    DEFAULT_LIVE_SMS_DAILY_LIMIT = env.int("DEFAULT_LIVE_SMS_DAILY_LIMIT", 1000)
     DEFAULT_SERVICE_LIMIT = env.int("DEFAULT_SERVICE_LIMIT", 50)
     DEFAULT_SMS_DAILY_LIMIT = env.int("DEFAULT_SMS_DAILY_LIMIT", 50)
-    DOCUMENTATION_DOMAIN = os.getenv(
-        "DOCUMENTATION_DOMAIN", "documentation.notification.canada.ca")
+    DOCUMENTATION_DOMAIN = os.getenv("DOCUMENTATION_DOMAIN", "documentation.notification.canada.ca")
     EMAIL_2FA_EXPIRY_SECONDS = 1_800  # 30 Minutes
     EMAIL_EXPIRY_SECONDS = 3600  # 1 hour
 
     # for waffles: pull out the routes into a flat list of the form ['/home', '/accueil', '/why-gc-notify', ...]
-    EXTRA_ROUTES = [item for sublist in map(
-        lambda x: x.values(), GC_ARTICLES_ROUTES.values()) for item in sublist]
+    EXTRA_ROUTES = [item for sublist in map(lambda x: x.values(), GC_ARTICLES_ROUTES.values()) for item in sublist]
 
     # FEATURE FLAGS
     FF_SALESFORCE_CONTACT = env.bool("FF_SALESFORCE_CONTACT", True)
 
     FREE_YEARLY_EMAIL_LIMIT = env.int("FREE_YEARLY_EMAIL_LIMIT", 10_000_000)
     FREE_YEARLY_SMS_LIMIT = env.int("FREE_YEARLY_SMS_LIMIT", 25_000)
-    GC_ARTICLES_API = os.environ.get(
-        "GC_ARTICLES_API", "articles.alpha.canada.ca/notification-gc-notify")
-    GC_ARTICLES_API_AUTH_PASSWORD = os.environ.get(
-        "GC_ARTICLES_API_AUTH_PASSWORD")
-    GC_ARTICLES_API_AUTH_USERNAME = os.environ.get(
-        "GC_ARTICLES_API_AUTH_USERNAME")
+    GC_ARTICLES_API = os.environ.get("GC_ARTICLES_API", "articles.alpha.canada.ca/notification-gc-notify")
+    GC_ARTICLES_API_AUTH_PASSWORD = os.environ.get("GC_ARTICLES_API_AUTH_PASSWORD")
+    GC_ARTICLES_API_AUTH_USERNAME = os.environ.get("GC_ARTICLES_API_AUTH_USERNAME")
     GOOGLE_ANALYTICS_ID = os.getenv("GOOGLE_ANALYTICS_ID", "UA-102484926-14")
     GOOGLE_TAG_MANAGER_ID = os.getenv("GOOGLE_TAG_MANAGER_ID", "GTM-KRKRZQV")
     HC_EN_SERVICE_ID = os.getenv("HC_EN_SERVICE_ID")
     HC_FR_SERVICE_ID = os.getenv("HC_FR_SERVICE_ID")
     HIPB_ENABLED = True
     HTTP_PROTOCOL = "http"
     INVITATION_EXPIRY_SECONDS = 3_600 * 24 * 2  # 2 days - also set on api
-    IP_GEOLOCATE_SERVICE = os.environ.get(
-        "IP_GEOLOCATE_SERVICE", "").rstrip("/")
+    IP_GEOLOCATE_SERVICE = os.environ.get("IP_GEOLOCATE_SERVICE", "").rstrip("/")
     LANGUAGES = ["en", "fr"]
-    LOGO_UPLOAD_BUCKET_NAME = os.getenv(
-        "ASSET_UPLOAD_BUCKET_NAME", "notification-alpha-canada-ca-asset-upload")
+    LOGO_UPLOAD_BUCKET_NAME = os.getenv("ASSET_UPLOAD_BUCKET_NAME", "notification-alpha-canada-ca-asset-upload")
     MAX_FAILED_LOGIN_COUNT = 10
     MOU_BUCKET_NAME = os.getenv("MOU_BUCKET_NAME", "")
 
@@ -129,10 +117,8 @@ class Config(object):
     SCANFILES_URL = os.environ.get("SCANFILES_URL", "")
 
     SECRET_KEY = env.list("SECRET_KEY", [])
-    SECURITY_EMAIL = os.environ.get(
-        "SECURITY_EMAIL", "[email protected]")
-    SENDING_DOMAIN = os.environ.get(
-        "SENDING_DOMAIN", "notification.alpha.canada.ca")
+    SECURITY_EMAIL = os.environ.get("SECURITY_EMAIL", "[email protected]")
+    SENDING_DOMAIN = os.environ.get("SENDING_DOMAIN", "notification.alpha.canada.ca")
     SESSION_COOKIE_HTTPONLY = True
     SESSION_COOKIE_NAME = "notify_admin_session"
     SESSION_COOKIE_SAMESITE = "Lax"
@@ -146,10 +132,8 @@ class Config(object):
     STATSD_PORT = 8_125
     STATSD_PREFIX = os.getenv("STATSD_PREFIX")
 
-    TEMPLATE_PREVIEW_API_HOST = os.environ.get(
-        "TEMPLATE_PREVIEW_API_HOST", "http://localhost:6013")
-    TEMPLATE_PREVIEW_API_KEY = os.environ.get(
-        "TEMPLATE_PREVIEW_API_KEY", "my-secret-key")
+    TEMPLATE_PREVIEW_API_HOST = os.environ.get("TEMPLATE_PREVIEW_API_HOST", "http://localhost:6013")
+    TEMPLATE_PREVIEW_API_KEY = os.environ.get("TEMPLATE_PREVIEW_API_KEY", "my-secret-key")
     WAF_SECRET = os.environ.get("WAF_SECRET", "waf-secret")
     WTF_CSRF_ENABLED = True
     WTF_CSRF_TIME_LIMIT = None
@@ -160,8 +144,7 @@ class Config(object):
 
     NOTIFY_USER_ID = "6af522d0-2915-4e52-83a3-3690455a5fe6"
     NOTIFY_SERVICE_ID = "d6aa2c68-a2d9-4437-ab19-3ae8eb202553"
-    NO_BRANDING_ID = os.environ.get(
-        "NO_BRANDING_ID", "0af93cf1-2c49-485f-878f-f3e662e651ef")
+    NO_BRANDING_ID = os.environ.get("NO_BRANDING_ID", "0af93cf1-2c49-485f-878f-f3e662e651ef")
 
     @classmethod
     def get_sensitive_config(cls) -> list[str]:
@@ -189,8 +172,7 @@ def get_safe_config(cls) -> dict[str, Any]:
 
 
 class Development(Config):
-    ADMIN_CLIENT_SECRET = os.environ.get(
-        "ADMIN_CLIENT_SECRET", "dev-notify-secret-key")
+    ADMIN_CLIENT_SECRET = os.environ.get("ADMIN_CLIENT_SECRET", "dev-notify-secret-key")
     ANTIVIRUS_API_HOST = "http://localhost:6016"
     ANTIVIRUS_API_KEY = "test-key"
     API_HOST_NAME = os.environ.get("API_HOST_NAME", "http://localhost:6011")
@@ -207,8 +189,7 @@ class Development(Config):
 
 
 class Test(Development):
-    ADMIN_CLIENT_SECRET = os.environ.get(
-        "ADMIN_CLIENT_SECRET", "dev-notify-secret-key")
+    ADMIN_CLIENT_SECRET = os.environ.get("ADMIN_CLIENT_SECRET", "dev-notify-secret-key")
     ANTIVIRUS_API_HOST = "https://test-antivirus"
     ANTIVIRUS_API_KEY = "test-antivirus-secret"
     API_HOST_NAME = os.environ.get("API_HOST_NAME", "http://localhost:6011")
@@ -239,8 +220,7 @@ class Test(Development):
 
 
 class ProductionFF(Config):
-    ADMIN_CLIENT_SECRET = os.environ.get(
-        "ADMIN_CLIENT_SECRET", "dev-notify-secret-key")
+    ADMIN_CLIENT_SECRET = os.environ.get("ADMIN_CLIENT_SECRET", "dev-notify-secret-key")
     ANTIVIRUS_API_HOST = "https://test-antivirus"
     ANTIVIRUS_API_KEY = "test-antivirus-secret"
     API_HOST_NAME = os.environ.get("API_HOST_NAME", "http://localhost:6011")

app/templates/components/remaining-messages.html

@@ -1,6 +1,6 @@
-{% macro remaining_messages(header, total, used) %}
+{% macro remaining_messages(header, total, used, muted=false) %}
   {% set near_limit = ((used/total) >= 0.8) %}
-  <div class="remaining-messages">
+  <div class="remaining-messages{% if muted %} muted{% endif %}">
     <div class="rm-header mb-2">{{ header }}</div>
     <div class="rm-message mb-2">
       <span class="rm-used">{{ "{:,}".format(used) if session['userlang'] == 'en' else "{:,}".format(used).replace(',', ' ') }}</span>

app/utils.py

@@ -93,7 +93,7 @@ def from_lambda_api(line):
     return isinstance(line, dict)
 
 
-@cache.memoize(timeout=12*60*60)
+@cache.memoize(timeout=12 * 60 * 60)
 def get_latest_stats(lang, filter_heartbeats=None):
     results = service_api_client.get_stats_by_month(filter_heartbeats=filter_heartbeats)["data"]
 

tailwind.config.js

@@ -63,6 +63,7 @@ module.exports = {
         lightblue: "#0154B0",
         slightlight: "#284162",
         /* trying to slowly implement a more consistent scale below */
+        200: "#D2E5FA",
         300: "#71A7F3",
         500: "#4C8CE6",
         700: "#24508F",