#774 use layer-0 for dropdown bgs and fix class styles

.pre-commit-config.yaml

@@ -6,11 +6,15 @@ repos:
         args: [--fix, --exit-non-zero-on-fix]
       - id: ruff-format
 
-  - repo: https://github.com/pre-commit/mirrors-prettier
-    rev: "v4.0.0-alpha.8"
-    hooks:
-      - id: prettier
-        files: ^frontend\/[^\/]+
+  # - repo: https://github.com/pre-commit/mirrors-prettier
+  #   rev: "v4.0.0-alpha.8"
+  #   hooks:
+  #     - id: prettier
+  #       files: ^frontend\/[^\/]+
+  #       types_or: [vue, ts]
+  #       additional_dependencies:
+  #         - prettier
+  #         - prettier-plugin-tailwindcss
 
   - repo: https://github.com/pre-commit/pre-commit-hooks
     rev: v4.5.0

.prettierrc

@@ -7,4 +7,4 @@
     "prettier-plugin-tailwindcss"
   ],
   "tailwindConfig": "./frontend/tailwind.config.ts"
-}
+}

STYLEGUIDE.md

@@ -165,7 +165,7 @@ Note that for all colors we need to apply both the light and dark mode variants.
 
 ```html
 <!-- This div has a background that reacts to the color mode. -->
-<div class="bg-light-header dark:bg-dark-header"></div>
+<div class="bg-light-layer-2 dark:bg-dark-layer-2"></div>
 ```
 
 Note further that Tailwind allows for alpha components for opacity to be applied to colors directly within the class declaration. We thus do not need to save versions of colors with transparency unless they are inherently used with an alpha less than one. An example of a color that has an inherent non-one alpha is `light-text` (`"rgba(0, 0, 0, 0.85)"`). To apply an alpha component to a color in Tailwind you follow it with a slash and the alpha that should be used as in the following example:

backend/backend/urls.py

@@ -14,6 +14,7 @@
     1. Import the include() function: from django.urls import include, path
     2. Add a URL to urlpatterns:  path('blog/', include('blog.urls'))
 """
+
 from django.contrib import admin
 from django.urls import include, path
 from drf_spectacular.views import SpectacularAPIView, SpectacularSwaggerView

backend/events/models.py

@@ -16,6 +16,7 @@
     - EventTopic
     - EventTag
 """
+
 from uuid import uuid4
 
 from django.db import models

backend/manage.py

@@ -1,5 +1,6 @@
 #!/usr/bin/env python
 """Django's command-line utility for administrative tasks."""
+
 import os
 import sys
 

backend/pyproject.toml

@@ -1,17 +1,22 @@
 [tool.ruff]
 # Enable pycodestyle (`E`) and Pyflakes (`F`) codes by default.
-select = [
-    "E", # pycodestyle errors
-    "F", # pyflakes
-    "I", # isort
-]
+
+[tool.ruff.lint]
 
 fixable = ["I"]
 
 ignore = [
     "E501", # line too long, handled by black
 ]
 
+select = [
+    "E", # pycodestyle errors
+    "F", # pyflakes
+    "I", # isort
+]
+
+mccabe = [10]
+
 # Exclude a variety of commonly ignored directories.
 exclude = [
     "*/tests.py",
@@ -34,13 +39,6 @@ exclude = [
     "venv",
 ]
 
-# Same as Black.
-line-length = 88
-
-[tool.ruff.mccabe]
-# Unlike Flake8, default to a complexity level of 10.
-max-complexity = 10
-
 [tool.isort]
 line_length = 88
 
@@ -69,15 +67,10 @@ exclude = [
     "authentication/factories.py",
     "content/factories.py",
     "entities/factories.py",
-    "events/factories.py"
+    "events/factories.py",
 ]
 [[tool.mypy.overrides]]
-module = [
-    "authentication.*",
-    "content.*",
-    "entities.*",
-    "events.*"
-]
+module = ["authentication.*", "content.*", "entities.*", "events.*"]
 follow_imports = "skip"
 
 [tool.django-stubs]

frontend/components/ProgressBar.vue

@@ -3,14 +3,12 @@
     class="flex h-2 w-full items-center justify-between border-b border-light-section-div bg-light-layer-2 dark:border-dark-section-div dark:bg-dark-layer-2 md:h-8"
   >
     <div
-      :class="[
-        'h-full transition-width duration-500 ease-in',
-        {
-          'bg-light-placeholder dark:bg-dark-placeholder': type === 'default',
-          'bg-light-action-red dark:bg-dark-action-red': type === 'action',
-          'bg-light-learn-blue dark:bg-dark-learn-blue': type === 'learn',
-        },
-      ]"
+      class="h-full transition-width duration-500 ease-in"
+      :class="{
+        'bg-light-placeholder dark:bg-dark-placeholder': type === 'default',
+        'bg-light-action-red dark:bg-dark-action-red': type === 'action',
+        'bg-light-learn-blue dark:bg-dark-learn-blue': type === 'learn',
+      }"
       :style="{ width: `${percent}%` }"
     ></div>
     <NuxtLink

frontend/components/dropdown/DropdownBase.vue

@@ -69,7 +69,7 @@
     <MenuItems
       class="focus-brand rounded-md"
       :class="{
-        'bg-light-content dark:bg-dark-content absolute right-0 mt-2 origin-top-right divide-y shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:border dark:border-dark-text':
+        'absolute right-0 mt-2 origin-top-right divide-y bg-light-layer-0 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:border dark:border-dark-text dark:bg-dark-layer-0':
           !isSideLeftMenu,
         '!static': isSideMenu || isSideLeftMenu,
         'mt-1 bg-light-layer-2 p-1 dark:bg-dark-layer-2': isSideLeftMenu,

frontend/components/page/PageSubPageSelector.vue

@@ -10,13 +10,13 @@
         <Tab v-for="selector in selectors" :key="selector.id" class="w-full">
           <template #default="{ selected }">
             <NuxtLink
-              :class="[
-                'flex w-full justify-center border-y-[1px] border-l-[1px] px-3 py-1',
-                'border-light-text dark:border-dark-text',
-                selected
-                  ? 'bg-light-menu-selection text-light-layer-1 hover:bg-light-menu-selection/90 dark:bg-dark-menu-selection dark:text-dark-layer-1 dark:hover:bg-dark-menu-selection/90'
-                  : 'bg-light-layer-2 text-light-text hover:bg-light-highlight dark:bg-dark-layer-2 dark:text-dark-text dark:hover:bg-dark-highlight',
-              ]"
+              class="flex w-full justify-center border-y-[1px] border-l-[1px] border-light-text px-3 py-1 dark:border-dark-text"
+              :class="{
+                'bg-light-menu-selection text-light-layer-1 hover:bg-light-menu-selection/90 dark:bg-dark-menu-selection dark:text-dark-layer-1 dark:hover:bg-dark-menu-selection/90':
+                  selected,
+                'bg-light-layer-2 text-light-text hover:bg-light-highlight dark:bg-dark-layer-2 dark:text-dark-text dark:hover:bg-dark-highlight':
+                  !selected,
+              }"
               :to="localePath(selector.routeURL)"
             >
               {{ selector.label }}

frontend/i18n/check_repeat_i18n_values.py

@@ -5,7 +5,6 @@
 If yes, combine them in a `_global` sub name at the lowest matching name level of `en-US.json`.
 """
 
-
 import json
 import string
 from collections import Counter

frontend/i18n/check_unused_i18n_keys.py

@@ -5,7 +5,6 @@
 If yes, then remove those keys from the `en-US.json`.
 """
 
-
 import json
 import os
 from pathlib import Path