From 50b325c9446f14cd33db0793e386072b2209f426 Mon Sep 17 00:00:00 2001
From: David Cook <david@redcliffs.net>
Date: Wed, 7 Feb 2024 14:53:24 +1100
Subject: [PATCH] Annotate and arrange scss

---
 .../css/admin_v3/components/buttons.scss      | 23 ++++++++-----------
 .../css/admin_v3/shared/typography.scss       |  1 +
 2 files changed, 10 insertions(+), 14 deletions(-)

diff --git a/app/webpacker/css/admin_v3/components/buttons.scss b/app/webpacker/css/admin_v3/components/buttons.scss
index 0215f75952..dd70719357 100644
--- a/app/webpacker/css/admin_v3/components/buttons.scss
+++ b/app/webpacker/css/admin_v3/components/buttons.scss
@@ -1,3 +1,6 @@
+// Button styles
+// Design reference: https://github.com/openfoodfoundation/openfoodnetwork/wiki/Design-styleguide%3A-links-and-buttons
+
 @mixin disabled-button() {
   &:disabled,
   &:disabled:hover {
@@ -47,11 +50,7 @@ button:not(.plain):not(.trix-button),
     color: $color-btn-hover-text;
   }
 
-  &.fullwidth {
-    width: 100%;
-    text-align: center;
-  }
-
+  // --- Colours ---
   &.secondary {
     background-color: $color-btn-secondary-bg;
     color: $color-link;
@@ -86,6 +85,7 @@ button:not(.plain):not(.trix-button),
     }
   }
 
+  // --- Sizes ---
   &.mini {
     line-height: 18px;
     height: auto; // DC: I don't like fixed heights.
@@ -110,15 +110,9 @@ button:not(.plain):not(.trix-button),
     text-transform: uppercase;
   }
 
-  &.red {
-    background-color: $color-btn-red-bg;
-    border-color: $color-btn-red-bg;
-    @include disabled-button(); // required for specifity
-
-    &:hover {
-      background-color: $color-btn-red-hover-bg;
-      border-color: $color-btn-red-hover-bg;
-    }
+  &.fullwidth {
+    width: 100%;
+    text-align: center;
   }
 
   .badge {
@@ -144,6 +138,7 @@ button:not(.plain):not(.trix-button),
   }
 }
 
+// --- Reset buttons ---
 input[type="reset"] {
   // Reset button looks like a link, but has a border the same as buttons when active.
   background: none;
diff --git a/app/webpacker/css/admin_v3/shared/typography.scss b/app/webpacker/css/admin_v3/shared/typography.scss
index a716aeeeaf..84822b39da 100644
--- a/app/webpacker/css/admin_v3/shared/typography.scss
+++ b/app/webpacker/css/admin_v3/shared/typography.scss
@@ -45,6 +45,7 @@ b {
 }
 
 // links
+// Design reference: https://github.com/openfoodfoundation/openfoodnetwork/wiki/Design-styleguide%3A-links-and-buttons
 //--------------------------------------------------------------
 a:not(.button) {
   color: $color-link;