From b53f8c999a0d58cd3ee9630a2b6ee3c186b06e57 Mon Sep 17 00:00:00 2001
From: biast12 <53872542+biast12@users.noreply.github.com>
Date: Sat, 5 Sep 2026 15:53:31 +0200
Subject: [PATCH] Unify colour handling in selects and buttons

Adds shared colour utilities (`lib/colour.ts`) and centralized Discord button style constants (`constants/buttonStyles.ts`), then refactors components/pages to use them. This removes duplicated hex conversion logic, normalizes colour input formats, and applies consistent color swatches in Select/MultiSelect/role-related UIs (including proper fallback for Discord role color `0`). It also reuses shared gallery type badge/options metadata to eliminate duplicated type option definitions.
---
 .../components/AccessControlListEditor.tsx    | 19 +++++++++++--
 frontend/src/components/GalleryCard.tsx       |  9 ++-----
 frontend/src/components/LabelBadge.tsx        |  5 +---
 frontend/src/components/MultiSelect.tsx       | 16 ++++++-----
 frontend/src/components/Select.tsx            |  9 ++++---
 .../components/discord/container/Button.tsx   | 27 +++++++++----------
 .../gallery/GalleryListingPreview.tsx         | 27 ++++++++++++++++---
 frontend/src/constants/buttonStyles.ts        | 17 ++++++++++++
 frontend/src/lib/colour.ts                    | 16 +++++++++++
 frontend/src/pages/admin/affiliate/_index.tsx | 12 ++++++---
 frontend/src/pages/admin/bot-staff/_index.tsx | 12 ++++++---
 frontend/src/pages/admin/gallery/_index.tsx   | 13 ++++-----
 frontend/src/pages/gallery/_index.tsx         |  9 ++-----
 frontend/src/pages/manage/GuildSettings.tsx   |  2 ++
 .../src/pages/manage/blacklist/_index.tsx     |  3 ++-
 .../src/pages/manage/multipanels/create.tsx   |  3 ++-
 .../src/pages/manage/multipanels/edit.tsx     |  3 ++-
 frontend/src/pages/manage/panels/create.tsx   | 23 ++++++++--------
 frontend/src/pages/manage/panels/edit.tsx     | 23 ++++++++--------
 frontend/src/pages/manage/setup/Setup.tsx     |  1 +
 .../manage/setup/components/TeamsStep.tsx     |  9 +++++--
 frontend/src/pages/manage/teams/_index.tsx    |  3 ++-
 frontend/src/pages/manage/tickets/_index.tsx  | 10 ++-----
 .../src/pages/manage/transcripts/_index.tsx   | 10 ++-----
 24 files changed, 173 insertions(+), 108 deletions(-)
 create mode 100644 frontend/src/constants/buttonStyles.ts
 create mode 100644 frontend/src/lib/colour.ts

diff --git a/frontend/src/components/AccessControlListEditor.tsx b/frontend/src/components/AccessControlListEditor.tsx
index 6f4467ff..547e8313 100644
--- a/frontend/src/components/AccessControlListEditor.tsx
+++ b/frontend/src/components/AccessControlListEditor.tsx
@@ -4,6 +4,7 @@ import Button from "@/components/Button";
 import Select from "@/components/Select";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faArrowUp, faArrowDown, faXmark } from "@fortawesome/free-solid-svg-icons";
+import { roleColour } from "@/lib/colour";
 
 interface AccessControlListEditorProps {
   guildId: string;
@@ -60,12 +61,18 @@ const AccessControlListEditor: FC<AccessControlListEditorProps> = ({
     return role ? role.name : "Deleted Role";
   };
 
+  const roleColours = new Map(roles.map((r) => [r.id, roleColour(r.color)]));
+
   return (
     <div className="flex flex-col gap-3">
       <Select
         label="Add Role"
         placeholder="Add another role..."
-        options={availableRoles.map((r) => ({ key: r.id, label: r.name }))}
+        options={availableRoles.map((r) => ({
+          key: r.id,
+          label: r.name,
+          color: roleColour(r.color),
+        }))}
         value=""
         onChange={addRole}
         disabled={acl.length >= MAX_ACL_SIZE}
@@ -100,7 +107,15 @@ const AccessControlListEditor: FC<AccessControlListEditorProps> = ({
                   <FontAwesomeIcon icon={faArrowDown} />
                 </Button>
               </div>
-              <span className="text-white">{getRoleName(subject.role_id)}</span>
+              <span className="flex items-center gap-2 text-white">
+                {roleColours.has(subject.role_id) && (
+                  <span
+                    className="w-3 h-3 rounded-full shrink-0 ring-1 ring-white/15"
+                    style={{ backgroundColor: roleColours.get(subject.role_id) }}
+                  />
+                )}
+                {getRoleName(subject.role_id)}
+              </span>
               <div className="flex gap-1">
                 <Button
                   variant={subject.action === "allow" ? "success" : "danger"}
diff --git a/frontend/src/components/GalleryCard.tsx b/frontend/src/components/GalleryCard.tsx
index 14008aa0..48022970 100644
--- a/frontend/src/components/GalleryCard.tsx
+++ b/frontend/src/components/GalleryCard.tsx
@@ -4,6 +4,7 @@ import type { GalleryListing, GalleryTagSnapshot } from "@/types";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faDownload, faStar } from "@fortawesome/free-solid-svg-icons";
 import { Link } from "react-router";
+import { GALLERY_TYPE_BADGES } from "@/components/gallery/GalleryListingPreview";
 
 interface GalleryCardProps {
   listing: GalleryListing;
@@ -13,12 +14,6 @@ interface GalleryCardProps {
   actionLabel?: string;
 }
 
-const TYPE_BADGES: Record<string, { label: string; className: string }> = {
-  panel: { label: "Panel", className: "bg-purple-600/20 text-purple-400" },
-  tag: { label: "Tag", className: "bg-teal-600/20 text-teal-400" },
-  form: { label: "Form", className: "bg-orange-600/20 text-orange-400" },
-};
-
 const BODY_CLASS =
   "group flex flex-col flex-1 p-4 text-left transition-colors hover:bg-gray-700/50 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-inset";
 
@@ -52,7 +47,7 @@ const GalleryCard: FC<GalleryCardProps> = ({
 }) => {
   const colourHex = getColourHex(listing);
   const type = listing.listing_type || "panel";
-  const badge = TYPE_BADGES[type];
+  const badge = GALLERY_TYPE_BADGES[type];
 
   const body = (
     <>
diff --git a/frontend/src/components/LabelBadge.tsx b/frontend/src/components/LabelBadge.tsx
index f2fd45bd..533e4785 100644
--- a/frontend/src/components/LabelBadge.tsx
+++ b/frontend/src/components/LabelBadge.tsx
@@ -1,4 +1,5 @@
 import type { FC } from "react";
+import { intToColour } from "@/lib/colour";
 
 interface LabelBadgeProps {
   name: string;
@@ -7,10 +8,6 @@ interface LabelBadgeProps {
   onRemove?: () => void;
 }
 
-function intToColour(colour: number): string {
-  return `#${colour.toString(16).padStart(6, "0")}`;
-}
-
 const LabelBadge: FC<LabelBadgeProps> = ({ name, colour, removable, onRemove }) => {
   const hex = intToColour(colour);
 
diff --git a/frontend/src/components/MultiSelect.tsx b/frontend/src/components/MultiSelect.tsx
index c7514ce2..d02b6898 100644
--- a/frontend/src/components/MultiSelect.tsx
+++ b/frontend/src/components/MultiSelect.tsx
@@ -2,6 +2,7 @@ import type { FC } from "react";
 import { useState, useRef, useEffect, useId, useCallback } from "react";
 import { createPortal } from "react-dom";
 import { useFloatingDropdown } from "@/hooks/useFloatingDropdown";
+import { normaliseColour } from "@/lib/colour";
 
 interface MultiSelectOption {
   key: string;
@@ -115,8 +116,9 @@ const MultiSelect: FC<MultiSelectProps> = (props) => {
         <div className="w-full p-2 min-h-10 flex flex-wrap gap-1 items-center">
           {selectedOptions.length > 0 ? (
             selectedOptions.map((selectedOption) => {
-              const fadedBgStyle = selectedOption.color
-                ? { backgroundColor: `${selectedOption.color}20` }
+              const swatch = selectedOption.color && normaliseColour(selectedOption.color);
+              const fadedBgStyle = swatch
+                ? { backgroundColor: `color-mix(in srgb, ${swatch} 20%, transparent)` }
                 : {};
 
               return (
@@ -126,10 +128,10 @@ const MultiSelect: FC<MultiSelectProps> = (props) => {
                   style={fadedBgStyle}
                   title={selectedOption.label}
                 >
-                  {selectedOption.color && (
+                  {swatch && (
                     <div
-                      className="w-3 h-3 rounded-full mr-1 shrink-0"
-                      style={{ backgroundColor: `#${selectedOption.color}` }}
+                      className="w-3 h-3 rounded-full mr-1 shrink-0 ring-1 ring-white/15"
+                      style={{ backgroundColor: swatch }}
                     />
                   )}
                   <span className="min-w-0 truncate">{selectedOption.label}</span>
@@ -242,8 +244,8 @@ const MultiSelect: FC<MultiSelectProps> = (props) => {
                     </div>
                     {option.color && (
                       <div
-                        className="w-3 h-3 mt-1.5 shrink-0 rounded-full mr-2"
-                        style={{ backgroundColor: `#${option.color}` }}
+                        className="w-3 h-3 mt-1.5 shrink-0 rounded-full mr-2 ring-1 ring-white/15"
+                        style={{ backgroundColor: normaliseColour(option.color) }}
                       />
                     )}
                     <span className="min-w-0 flex-1 break-words text-white">{option.label}</span>
diff --git a/frontend/src/components/Select.tsx b/frontend/src/components/Select.tsx
index b22749a9..fea89315 100644
--- a/frontend/src/components/Select.tsx
+++ b/frontend/src/components/Select.tsx
@@ -6,6 +6,7 @@ import { faInfoCircle } from "@fortawesome/free-solid-svg-icons";
 import ChannelInfoModal from "@/components/modals/ChannelInfoModal";
 import type { SelectInfo } from "@/constants/panelChannelInfo";
 import { useFloatingDropdown } from "@/hooks/useFloatingDropdown";
+import { normaliseColour } from "@/lib/colour";
 
 interface SelectOption {
   key: string | null;
@@ -156,8 +157,8 @@ const Select: FC<SelectProps> = (props) => {
             <>
               {selectedOption.color && (
                 <div
-                  className="w-3 h-3 rounded-full"
-                  style={{ backgroundColor: selectedOption.color }}
+                  className="w-3 h-3 rounded-full shrink-0 ring-1 ring-white/15"
+                  style={{ backgroundColor: normaliseColour(selectedOption.color) }}
                 />
               )}
               <span className="text-white">{selectedOption.label}</span>
@@ -279,8 +280,8 @@ const Select: FC<SelectProps> = (props) => {
                         </div>
                         {option.color && (
                           <div
-                            className="w-3 h-3 rounded-full mr-2 shrink-0"
-                            style={{ backgroundColor: option.color }}
+                            className="w-3 h-3 rounded-full mr-2 shrink-0 ring-1 ring-white/15"
+                            style={{ backgroundColor: normaliseColour(option.color) }}
                           />
                         )}
                         <span className="text-white">{option.label}</span>
diff --git a/frontend/src/components/discord/container/Button.tsx b/frontend/src/components/discord/container/Button.tsx
index 1ae98f1f..bc966476 100644
--- a/frontend/src/components/discord/container/Button.tsx
+++ b/frontend/src/components/discord/container/Button.tsx
@@ -1,5 +1,6 @@
 import { isSafeUrl } from "@/lib/url";
 import { emojiUrl } from "@/lib/discord-cdn";
+import { BUTTON_STYLE_COLOURS } from "@/constants/buttonStyles";
 
 interface ButtonProps {
   button_style?: number;
@@ -12,20 +13,8 @@ interface ButtonProps {
 }
 
 function convertButtonStyle(style?: number): string {
-  switch (style) {
-    case 1:
-      return "text-white bg-[#4752c4]";
-    case 2:
-      return "bg-[#4f545c] text-white";
-    case 3:
-      return "text-white bg-[#2d7d46]";
-    case 4:
-      return "text-white bg-[#a12d2f]";
-    case 5:
-      return "bg-[#4f545c] text-white no-underline";
-    default:
-      return "";
-  }
+  if (style === undefined || BUTTON_STYLE_COLOURS[style] === undefined) return "";
+  return style === 5 ? "text-white no-underline" : "text-white";
 }
 
 export default function Button({
@@ -39,12 +28,16 @@ export default function Button({
 }: ButtonProps) {
   const baseClasses = `inline-flex items-center justify-center align-middle px-4 h-8 min-w-15 rounded text-sm font-medium select-none transition-colors duration-150 ${disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"}`;
   const styleClasses = convertButtonStyle(button_style);
+  const backgroundStyle = {
+    backgroundColor: button_style === undefined ? undefined : BUTTON_STYLE_COLOURS[button_style],
+  };
 
   if (button_style === 5 && url && isSafeUrl(url)) {
     return (
       <a
         href={url}
         className={`${baseClasses} ${styleClasses} ${className}`}
+        style={backgroundStyle}
         data-custom-id={custom_id || ""}
         target="_blank"
         rel="noopener noreferrer"
@@ -65,7 +58,11 @@ export default function Button({
   }
 
   return (
-    <div className={`${baseClasses} ${styleClasses} ${className}`} data-custom-id={custom_id || ""}>
+    <div
+      className={`${baseClasses} ${styleClasses} ${className}`}
+      style={backgroundStyle}
+      data-custom-id={custom_id || ""}
+    >
       {emoji &&
         (emoji.id && emoji.id !== "0" ? (
           <img
diff --git a/frontend/src/components/gallery/GalleryListingPreview.tsx b/frontend/src/components/gallery/GalleryListingPreview.tsx
index ccec3a8d..92b8f502 100644
--- a/frontend/src/components/gallery/GalleryListingPreview.tsx
+++ b/frontend/src/components/gallery/GalleryListingPreview.tsx
@@ -21,12 +21,31 @@ const FORM_INPUT_TYPE_NAMES: Record<number, string> = {
   22: "Checkbox Group",
 };
 
-export const GALLERY_TYPE_BADGES: Record<string, { label: string; className: string }> = {
-  panel: { label: "Panel", className: "bg-purple-600/20 text-purple-400" },
-  tag: { label: "Tag", className: "bg-teal-600/20 text-teal-400" },
-  form: { label: "Form", className: "bg-orange-600/20 text-orange-400" },
+export const GALLERY_TYPE_BADGES: Record<
+  string,
+  { label: string; plural: string; className: string; dot: string }
+> = {
+  panel: {
+    label: "Panel",
+    plural: "Panels",
+    className: "bg-purple-600/20 text-purple-400",
+    dot: "#C27AFF",
+  },
+  tag: { label: "Tag", plural: "Tags", className: "bg-teal-600/20 text-teal-400", dot: "#00D5BE" },
+  form: {
+    label: "Form",
+    plural: "Forms",
+    className: "bg-orange-600/20 text-orange-400",
+    dot: "#FF8904",
+  },
 };
 
+export const GALLERY_TYPE_OPTIONS = Object.entries(GALLERY_TYPE_BADGES).map(([key, badge]) => ({
+  key,
+  label: badge.plural,
+  color: badge.dot,
+}));
+
 // Anything the parser leaves as plain text renders identically either way.
 function hasMarkdown(content: string | undefined): boolean {
   if (!content) return false;
diff --git a/frontend/src/constants/buttonStyles.ts b/frontend/src/constants/buttonStyles.ts
new file mode 100644
index 00000000..09171b89
--- /dev/null
+++ b/frontend/src/constants/buttonStyles.ts
@@ -0,0 +1,17 @@
+export const BUTTON_STYLE_PRIMARY = "#5865F2";
+export const BUTTON_STYLE_SECONDARY = "#4E5058";
+export const BUTTON_STYLE_SUCCESS = "#248046";
+export const BUTTON_STYLE_DANGER = "#DA373C";
+
+export const BUTTON_STYLE_OPTIONS = [
+  { key: "1", label: "Blue", color: BUTTON_STYLE_PRIMARY },
+  { key: "2", label: "Grey", color: BUTTON_STYLE_SECONDARY },
+  { key: "3", label: "Green", color: BUTTON_STYLE_SUCCESS },
+  { key: "4", label: "Red", color: BUTTON_STYLE_DANGER },
+] as const;
+
+// Style 5 (Link) is not panel-selectable, but the preview renders imported gallery panels.
+export const BUTTON_STYLE_COLOURS: Record<number, string> = {
+  ...Object.fromEntries(BUTTON_STYLE_OPTIONS.map((o) => [Number(o.key), o.color] as const)),
+  5: BUTTON_STYLE_SECONDARY,
+};
diff --git a/frontend/src/lib/colour.ts b/frontend/src/lib/colour.ts
new file mode 100644
index 00000000..bf9bb567
--- /dev/null
+++ b/frontend/src/lib/colour.ts
@@ -0,0 +1,16 @@
+export function intToColour(colour: number): string {
+  return `#${colour.toString(16).padStart(6, "0")}`;
+}
+
+export function colourToInt(hex: string): number {
+  return parseInt(hex.replace("#", ""), 16);
+}
+
+// Discord sends 0 for "no colour"; it renders as the default grey, not black.
+export function roleColour(colour: number): string {
+  return colour === 0 ? "#99AAB5" : intToColour(colour);
+}
+
+export function normaliseColour(colour: string): string {
+  return colour.startsWith("#") ? colour : `#${colour}`;
+}
diff --git a/frontend/src/pages/admin/affiliate/_index.tsx b/frontend/src/pages/admin/affiliate/_index.tsx
index a1a87b12..b145cd51 100644
--- a/frontend/src/pages/admin/affiliate/_index.tsx
+++ b/frontend/src/pages/admin/affiliate/_index.tsx
@@ -36,6 +36,12 @@ const FLAGGED_SORT_COLUMNS: Record<FlaggedSortKey, SortColumn<AdminFlaggedReferr
   created_at: { value: (r) => toTime(r.created_at) },
 };
 
+const AFFILIATE_STATUS_DOTS: Record<string, string> = {
+  pending: "#E17100",
+  active: "#00A63E",
+  revoked: "#E7000B",
+};
+
 function AffiliateStatusBadge({ status }: { status: string }) {
   const colours: Record<string, string> = {
     pending: "bg-amber-600",
@@ -541,9 +547,9 @@ export default function AdminAffiliatePage() {
                 value={statusFilter}
                 options={[
                   { key: "all", label: "All statuses" },
-                  { key: "pending", label: "Pending" },
-                  { key: "active", label: "Active" },
-                  { key: "revoked", label: "Revoked" },
+                  { key: "pending", label: "Pending", color: AFFILIATE_STATUS_DOTS.pending },
+                  { key: "active", label: "Active", color: AFFILIATE_STATUS_DOTS.active },
+                  { key: "revoked", label: "Revoked", color: AFFILIATE_STATUS_DOTS.revoked },
                 ]}
                 onChange={(v) => {
                   setStatusFilter(v ?? "all");
diff --git a/frontend/src/pages/admin/bot-staff/_index.tsx b/frontend/src/pages/admin/bot-staff/_index.tsx
index c6974a74..19d4fdba 100644
--- a/frontend/src/pages/admin/bot-staff/_index.tsx
+++ b/frontend/src/pages/admin/bot-staff/_index.tsx
@@ -22,6 +22,12 @@ const TIER_BADGE_STYLES: Record<string, string> = {
   helper: "bg-gray-600/20 text-gray-400",
 };
 
+const TIER_DOTS: Record<string, string> = {
+  owner: "#C27AFF",
+  admin: "#51A2FF",
+  helper: "#99A1AF",
+};
+
 const staffRank = (member: BotStaffMember): number => {
   if (member.tier === "owner") return 0;
   if (member.tier === "admin") return member.global_view ? 1 : 2;
@@ -46,12 +52,12 @@ export default function BotStaffPage() {
   const tierOptions = useMemo(() => {
     if (isOwner) {
       return [
-        { key: "admin", label: "Admin" },
-        { key: "helper", label: "Helper" },
+        { key: "admin", label: "Admin", color: TIER_DOTS.admin },
+        { key: "helper", label: "Helper", color: TIER_DOTS.helper },
       ];
     }
     // Admins can only add helpers
-    return [{ key: "helper", label: "Helper" }];
+    return [{ key: "helper", label: "Helper", color: TIER_DOTS.helper }];
   }, [isOwner]);
 
   const fetchStaff = useCallback(async () => {
diff --git a/frontend/src/pages/admin/gallery/_index.tsx b/frontend/src/pages/admin/gallery/_index.tsx
index c9ed797e..6425b6e7 100644
--- a/frontend/src/pages/admin/gallery/_index.tsx
+++ b/frontend/src/pages/admin/gallery/_index.tsx
@@ -10,7 +10,10 @@ import GalleryPreviewModal from "@/components/modals/GalleryPreviewModal";
 import Select from "@/components/Select";
 import Slider from "@/components/Slider";
 import Tabs from "@/components/Tabs";
-import { GALLERY_TYPE_BADGES } from "@/components/gallery/GalleryListingPreview";
+import {
+  GALLERY_TYPE_BADGES,
+  GALLERY_TYPE_OPTIONS,
+} from "@/components/gallery/GalleryListingPreview";
 import Textarea from "@/components/Textarea";
 import SearchInput from "@/components/SearchInput";
 import { useUrlSearch } from "@/hooks/useUrlSearch";
@@ -28,12 +31,6 @@ const STATUS_BADGE: Record<TabStatus, string> = {
   rejected: "bg-red-600/20 text-red-400",
 };
 
-const TYPE_OPTIONS = [
-  { key: "panel", label: "Panels" },
-  { key: "tag", label: "Tags" },
-  { key: "form", label: "Forms" },
-];
-
 const AdminGalleryPage: FC = () => {
   const { user } = useAuthStore();
   const canModerate = isAtLeast(user?.admin_tier ?? "", "admin");
@@ -173,7 +170,7 @@ const AdminGalleryPage: FC = () => {
           label="Type"
           value={listingType}
           onChange={(v) => setListingType(v ?? "all")}
-          options={[{ key: "all", label: "All types" }, ...TYPE_OPTIONS]}
+          options={[{ key: "all", label: "All types" }, ...GALLERY_TYPE_OPTIONS]}
           placeholder="All types"
           hideSearch
           className="w-full sm:w-48"
diff --git a/frontend/src/pages/gallery/_index.tsx b/frontend/src/pages/gallery/_index.tsx
index 99f584dd..966622c2 100644
--- a/frontend/src/pages/gallery/_index.tsx
+++ b/frontend/src/pages/gallery/_index.tsx
@@ -6,6 +6,7 @@ import { apiClient } from "@/lib/api";
 import type { GalleryListing } from "@/types";
 import Button from "@/components/Button";
 import GalleryCard from "@/components/GalleryCard";
+import { GALLERY_TYPE_OPTIONS } from "@/components/gallery/GalleryListingPreview";
 import GalleryImportModal from "@/components/modals/GalleryImportModal";
 import GalleryImportTagModal from "@/components/modals/GalleryImportTagModal";
 import GalleryImportFormModal from "@/components/modals/GalleryImportFormModal";
@@ -26,12 +27,6 @@ const CATEGORY_OPTIONS = [
   { key: "other", label: "Other" },
 ];
 
-const TYPE_OPTIONS = [
-  { key: "panel", label: "Panels" },
-  { key: "tag", label: "Tags" },
-  { key: "form", label: "Forms" },
-];
-
 const SORT_OPTIONS = [
   { key: "popular", label: "Popular" },
   { key: "newest", label: "Newest" },
@@ -125,7 +120,7 @@ const GalleryBrowsePage: FC = () => {
             setListingType(v ?? "all");
             setPage(1);
           }}
-          options={[{ key: "all", label: "All types" }, ...TYPE_OPTIONS]}
+          options={[{ key: "all", label: "All types" }, ...GALLERY_TYPE_OPTIONS]}
           placeholder="All types"
           hideSearch
           className="w-full sm:w-40"
diff --git a/frontend/src/pages/manage/GuildSettings.tsx b/frontend/src/pages/manage/GuildSettings.tsx
index a3bb455a..abb2876b 100644
--- a/frontend/src/pages/manage/GuildSettings.tsx
+++ b/frontend/src/pages/manage/GuildSettings.tsx
@@ -20,6 +20,7 @@ import type { GuildSettings } from "@/types";
 import PermissionWarningBanner from "@/components/PermissionWarningBanner";
 import PanelSwitchBehaviourInfoModal from "@/components/modals/PanelSwitchBehaviourInfoModal";
 import { PANEL_SWITCH_OPTIONS } from "@/constants/panelSwitchBehaviour";
+import { intToColour } from "@/lib/colour";
 
 const PanelSwitchSelect: FC<{ value: number; onChange: (v: number) => void }> = ({
   value,
@@ -209,6 +210,7 @@ const GuildSettings: FC = () => {
               ...panels.map((p) => ({
                 key: p.panel_id.toString(),
                 label: p.title,
+                color: intToColour(p.colour),
               })),
             ]}
           />
diff --git a/frontend/src/pages/manage/blacklist/_index.tsx b/frontend/src/pages/manage/blacklist/_index.tsx
index 196d720b..9e27d81e 100644
--- a/frontend/src/pages/manage/blacklist/_index.tsx
+++ b/frontend/src/pages/manage/blacklist/_index.tsx
@@ -7,6 +7,7 @@ import { MainLayout } from "@/pages/layout/Main";
 import { useGuildStore } from "@/stores/guild";
 import Button from "@/components/Button";
 import Select from "@/components/Select";
+import { roleColour } from "@/lib/colour";
 import ConfirmModal from "@/components/modals/ConfirmModal";
 import ActionModal from "@/components/modal-primitives/ActionModal";
 import UserSearchSelect, { type UserOption } from "@/components/UserSearchSelect";
@@ -249,7 +250,7 @@ const BlacklistPage: FC = () => {
   const roleOptions = roles.map((role) => ({
     key: role.id,
     label: role.name,
-    color: `#${role.color.toString(16).padStart(6, "0")}`,
+    color: roleColour(role.color),
   }));
 
   const getRoleName = (roleId: string) => {
diff --git a/frontend/src/pages/manage/multipanels/create.tsx b/frontend/src/pages/manage/multipanels/create.tsx
index affc9c8d..9f012dd9 100644
--- a/frontend/src/pages/manage/multipanels/create.tsx
+++ b/frontend/src/pages/manage/multipanels/create.tsx
@@ -13,6 +13,7 @@ import MultiSelect from "@/components/MultiSelect";
 import Select from "@/components/Select";
 import TextInput from "@/components/TextInput";
 import ColourSelect from "@/components/ColourSelect";
+import { intToColour } from "@/lib/colour";
 import Textarea from "@/components/Textarea";
 import PanelPreview from "@/components/PanelPreview";
 import DateTimePicker from "@/components/DateTimePicker";
@@ -207,7 +208,7 @@ const MultiPanelsPage: FC = () => {
             options={panels?.map((panel) => ({
               label: panel.title,
               key: panel.panel_id.toString(),
-              color: panel.colour.toString(16).padStart(6, "0"),
+              color: intToColour(panel.colour),
             }))}
             onChange={(e) =>
               setMultiPanel((prev) => {
diff --git a/frontend/src/pages/manage/multipanels/edit.tsx b/frontend/src/pages/manage/multipanels/edit.tsx
index afff69c3..aad79e80 100644
--- a/frontend/src/pages/manage/multipanels/edit.tsx
+++ b/frontend/src/pages/manage/multipanels/edit.tsx
@@ -13,6 +13,7 @@ import MultiSelect from "@/components/MultiSelect";
 import Select from "@/components/Select";
 import TextInput from "@/components/TextInput";
 import ColourSelect from "@/components/ColourSelect";
+import { intToColour } from "@/lib/colour";
 import Textarea from "@/components/Textarea";
 import PanelPreview from "@/components/PanelPreview";
 import DateTimePicker from "@/components/DateTimePicker";
@@ -193,7 +194,7 @@ const MultiPanelsPage: FC = () => {
             options={panels?.map((panel) => ({
               label: panel.title,
               key: panel.panel_id.toString(),
-              color: panel.colour.toString(16).padStart(6, "0"),
+              color: intToColour(panel.colour),
             }))}
             onChange={(e) =>
               setMultiPanel((prev) => {
diff --git a/frontend/src/pages/manage/panels/create.tsx b/frontend/src/pages/manage/panels/create.tsx
index a6608045..3a61714d 100644
--- a/frontend/src/pages/manage/panels/create.tsx
+++ b/frontend/src/pages/manage/panels/create.tsx
@@ -21,6 +21,8 @@ import Select from "@/components/Select";
 import TextInput from "@/components/TextInput";
 import NumberInput from "@/components/NumberInput";
 import ColourSelect from "@/components/ColourSelect";
+import { BUTTON_STYLE_OPTIONS } from "@/constants/buttonStyles";
+import { roleColour } from "@/lib/colour";
 import Textarea from "@/components/Textarea";
 import EmojiPicker from "@/components/EmojiPicker";
 import PanelPreview from "@/components/PanelPreview";
@@ -349,12 +351,11 @@ const PanelsPage: FC = () => {
               <Select
                 label="Button Colour"
                 value={panel.button_style?.toString() || "1"}
-                options={[
-                  { label: "Blue", key: "1" },
-                  { label: "Grey", key: "2" },
-                  { label: "Green", key: "3" },
-                  { label: "Red", key: "4" },
-                ]}
+                options={BUTTON_STYLE_OPTIONS.map(({ key, label, color }) => ({
+                  key,
+                  label,
+                  color,
+                }))}
                 onChange={(e) =>
                   setPanel((prev) =>
                     prev ? { ...prev, button_style: e ?? prev.button_style } : prev,
@@ -515,15 +516,15 @@ const PanelsPage: FC = () => {
             options={
               selectedGuild?.roles
                 ? [
-                    { label: "Ticket Opener", key: "user", color: "ffffff" },
-                    { label: "@here", key: "here", color: "ffffff" },
+                    { label: "Ticket Opener", key: "user", color: "#FFFFFF" },
+                    { label: "@here", key: "here", color: "#FFFFFF" },
                     ...(selectedGuild.roles.map((role) => ({
                       label: role.name,
                       key: role.id,
-                      color: role.color.toString(16),
-                    })) || [{ label: "@here", key: "here", color: "ffffff" }]),
+                      color: roleColour(role.color),
+                    })) || [{ label: "@here", key: "here", color: "#FFFFFF" }]),
                   ]
-                : [{ label: "@here", key: "here", color: "ffffff" }]
+                : [{ label: "@here", key: "here", color: "#FFFFFF" }]
             }
             onChange={(e) => setPanel((prev) => (prev ? { ...prev, mentions: e } : prev))}
           />
diff --git a/frontend/src/pages/manage/panels/edit.tsx b/frontend/src/pages/manage/panels/edit.tsx
index fa2adcbc..5d4562b7 100644
--- a/frontend/src/pages/manage/panels/edit.tsx
+++ b/frontend/src/pages/manage/panels/edit.tsx
@@ -22,6 +22,8 @@ import Select from "@/components/Select";
 import TextInput from "@/components/TextInput";
 import NumberInput from "@/components/NumberInput";
 import ColourSelect from "@/components/ColourSelect";
+import { BUTTON_STYLE_OPTIONS } from "@/constants/buttonStyles";
+import { roleColour } from "@/lib/colour";
 import Textarea from "@/components/Textarea";
 import EmojiPicker from "@/components/EmojiPicker";
 import PanelPreview from "@/components/PanelPreview";
@@ -265,12 +267,11 @@ const EditPanelsPage: FC = () => {
               <Select
                 label="Button Colour"
                 value={panel.button_style?.toString() || "1"}
-                options={[
-                  { label: "Blue", key: "1" },
-                  { label: "Grey", key: "2" },
-                  { label: "Green", key: "3" },
-                  { label: "Red", key: "4" },
-                ]}
+                options={BUTTON_STYLE_OPTIONS.map(({ key, label, color }) => ({
+                  key,
+                  label,
+                  color,
+                }))}
                 onChange={(e) =>
                   setPanel((prev) =>
                     prev ? { ...prev, button_style: e ?? prev.button_style } : prev,
@@ -435,15 +436,15 @@ const EditPanelsPage: FC = () => {
             options={
               selectedGuild?.roles
                 ? [
-                    { label: "Ticket Opener", key: "user", color: "ffffff" },
-                    { label: "@here", key: "here", color: "ffffff" },
+                    { label: "Ticket Opener", key: "user", color: "#FFFFFF" },
+                    { label: "@here", key: "here", color: "#FFFFFF" },
                     ...(selectedGuild.roles.map((role) => ({
                       label: role.name,
                       key: role.id,
-                      color: role.color.toString(16),
-                    })) || [{ label: "@here", key: "here", color: "ffffff" }]),
+                      color: roleColour(role.color),
+                    })) || [{ label: "@here", key: "here", color: "#FFFFFF" }]),
                   ]
-                : [{ label: "@here", key: "here", color: "ffffff" }]
+                : [{ label: "@here", key: "here", color: "#FFFFFF" }]
             }
             onChange={(e) => setPanel((prev) => (prev ? { ...prev, mentions: e } : prev))}
           />
diff --git a/frontend/src/pages/manage/setup/Setup.tsx b/frontend/src/pages/manage/setup/Setup.tsx
index cb0b991f..e3b77c61 100644
--- a/frontend/src/pages/manage/setup/Setup.tsx
+++ b/frontend/src/pages/manage/setup/Setup.tsx
@@ -231,6 +231,7 @@ function Setup() {
               roles={(guild.roles ?? []).map((r) => ({
                 id: r.id,
                 name: r.name,
+                color: r.color,
               }))}
               existingTeams={createdTeams}
               onTeamsChange={setCreatedTeams}
diff --git a/frontend/src/pages/manage/setup/components/TeamsStep.tsx b/frontend/src/pages/manage/setup/components/TeamsStep.tsx
index 6d831575..3a742527 100644
--- a/frontend/src/pages/manage/setup/components/TeamsStep.tsx
+++ b/frontend/src/pages/manage/setup/components/TeamsStep.tsx
@@ -4,10 +4,11 @@ import { toast } from "sonner";
 import TextInput from "@/components/TextInput";
 import Button from "@/components/Button";
 import MultiSelect from "@/components/MultiSelect";
+import { roleColour } from "@/lib/colour";
 
 interface TeamsStepProps {
   guildId: string;
-  roles: Array<{ id: string; name: string }>;
+  roles: Array<{ id: string; name: string; color: number }>;
   existingTeams: Array<{ id: number; name: string }>;
   onTeamsChange: (teams: Array<{ id: number; name: string }>) => void;
 }
@@ -23,7 +24,11 @@ const TeamsStep: FC<TeamsStepProps> = ({ guildId, roles, existingTeams, onTeamsC
   const [newTeamName, setNewTeamName] = useState("");
   const [isCreating, setIsCreating] = useState(false);
 
-  const roleOptions = roles.map((r) => ({ key: r.id, label: r.name }));
+  const roleOptions = roles.map((r) => ({
+    key: r.id,
+    label: r.name,
+    color: roleColour(r.color),
+  }));
 
   const handleCreateTeam = async () => {
     const trimmed = newTeamName.trim();
diff --git a/frontend/src/pages/manage/teams/_index.tsx b/frontend/src/pages/manage/teams/_index.tsx
index fa60e7e4..4027d604 100644
--- a/frontend/src/pages/manage/teams/_index.tsx
+++ b/frontend/src/pages/manage/teams/_index.tsx
@@ -7,6 +7,7 @@ import { MainLayout } from "@/pages/layout/Main";
 import { useGuildStore } from "@/stores/guild";
 import Button from "@/components/Button";
 import Select from "@/components/Select";
+import { roleColour } from "@/lib/colour";
 import TextInput from "@/components/TextInput";
 import Slider from "@/components/Slider";
 import ConfirmModal from "@/components/modals/ConfirmModal";
@@ -396,7 +397,7 @@ const TeamsPage: FC = () => {
   const roleOptions = roles.map((role) => ({
     key: role.id,
     label: role.name,
-    color: `#${role.color.toString(16).padStart(6, "0")}`,
+    color: roleColour(role.color),
   }));
 
   const teamOptions = teams.map((team) => ({
diff --git a/frontend/src/pages/manage/tickets/_index.tsx b/frontend/src/pages/manage/tickets/_index.tsx
index cafbb84e..ee2997ac 100644
--- a/frontend/src/pages/manage/tickets/_index.tsx
+++ b/frontend/src/pages/manage/tickets/_index.tsx
@@ -39,6 +39,7 @@ import Textarea from "@/components/Textarea";
 import LabelBadge from "@/components/LabelBadge";
 import LabelAssignDropdown from "@/components/LabelAssignDropdown";
 import ColourSelect from "@/components/ColourSelect";
+import { colourToInt, intToColour } from "@/lib/colour";
 import ActionModal from "@/components/modal-primitives/ActionModal";
 import DismissibleModal from "@/components/modal-primitives/DismissibleModal";
 import EmptyState from "@/components/EmptyState";
@@ -63,14 +64,6 @@ function getRelativeTime(date: Date): string {
   return rtf.format(-seconds, "second");
 }
 
-function intToColour(colour: number): string {
-  return `#${colour.toString(16).padStart(6, "0")}`;
-}
-
-function colourToInt(hex: string): number {
-  return parseInt(hex.replace("#", ""), 16);
-}
-
 // --- Types ---
 
 interface ResolvedUser {
@@ -738,6 +731,7 @@ const TicketsPage: FC = () => {
                 ...panels.map((p) => ({
                   key: p.panel_id.toString(),
                   label: p.title,
+                  color: intToColour(p.colour),
                 })),
               ]}
             />
diff --git a/frontend/src/pages/manage/transcripts/_index.tsx b/frontend/src/pages/manage/transcripts/_index.tsx
index 4dc263c6..2ce5f882 100644
--- a/frontend/src/pages/manage/transcripts/_index.tsx
+++ b/frontend/src/pages/manage/transcripts/_index.tsx
@@ -28,6 +28,7 @@ import Select from "@/components/Select";
 import LabelBadge from "@/components/LabelBadge";
 import LabelAssignDropdown from "@/components/LabelAssignDropdown";
 import ColourSelect from "@/components/ColourSelect";
+import { colourToInt, intToColour } from "@/lib/colour";
 import ActionDropdown from "@/components/ActionDropdown";
 import ActionModal from "@/components/modal-primitives/ActionModal";
 import DismissibleModal from "@/components/modal-primitives/DismissibleModal";
@@ -76,14 +77,6 @@ const cellClassFor = (key: ColumnKey) => cellClass(COLUMN_BY_KEY[key].breakpoint
 
 const DEFAULT_COLUMNS: ColumnKey[] = ["id", "username", "rating", "close_reason", "labels"];
 
-function intToColour(colour: number): string {
-  return `#${colour.toString(16).padStart(6, "0")}`;
-}
-
-function colourToInt(hex: string): number {
-  return parseInt(hex.replace("#", ""), 16);
-}
-
 const TranscriptsPage: FC = () => {
   let { guildId } = useParams();
   guildId = guildId!;
@@ -548,6 +541,7 @@ const TranscriptsPage: FC = () => {
                 ...panels.map((p) => ({
                   key: p.panel_id.toString(),
                   label: p.title,
+                  color: intToColour(p.colour),
                 })),
               ]}
             />