From 8f17bdf92d18de8615d4f53c87c74e786c9c185b Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Wed, 9 Aug 2023 16:40:53 +0000
Subject: [PATCH 1/2] Display error

---
 .../appearance/appearanceXService.ts          | 23 +++++++------------
 1 file changed, 8 insertions(+), 15 deletions(-)

diff --git a/site/src/xServices/appearance/appearanceXService.ts b/site/src/xServices/appearance/appearanceXService.ts
index 267d07608b726..901854a4529c6 100644
--- a/site/src/xServices/appearance/appearanceXService.ts
+++ b/site/src/xServices/appearance/appearanceXService.ts
@@ -1,12 +1,12 @@
-import { displaySuccess } from "components/GlobalSnackbar/utils"
+import { displayError, displaySuccess } from "components/GlobalSnackbar/utils"
 import { assign, createMachine } from "xstate"
 import * as API from "../../api/api"
 import { AppearanceConfig } from "../../api/typesGenerated"
+import { getErrorMessage } from "api/errors"
 
 export type AppearanceContext = {
   appearance?: AppearanceConfig
   getAppearanceError?: unknown
-  setAppearanceError?: unknown
   preview: boolean
 }
 
@@ -39,11 +39,7 @@ export const appearanceMachine = createMachine(
       idle: {
         on: {
           SET_PREVIEW_APPEARANCE: {
-            actions: [
-              "clearGetAppearanceError",
-              "clearSetAppearanceError",
-              "assignPreviewAppearance",
-            ],
+            actions: ["clearGetAppearanceError", "assignPreviewAppearance"],
           },
           SAVE_APPEARANCE: "savingAppearance",
         },
@@ -64,7 +60,6 @@ export const appearanceMachine = createMachine(
         },
       },
       savingAppearance: {
-        entry: "clearSetAppearanceError",
         invoke: {
           id: "setAppearance",
           src: "setAppearance",
@@ -74,7 +69,11 @@ export const appearanceMachine = createMachine(
           },
           onError: {
             target: "idle",
-            actions: ["assignSetAppearanceError"],
+            actions: (_, error) => {
+              displayError(
+                getErrorMessage(error, "Failed to update appearance settings."),
+              )
+            },
           },
         },
       },
@@ -99,12 +98,6 @@ export const appearanceMachine = createMachine(
       clearGetAppearanceError: assign({
         getAppearanceError: (_) => undefined,
       }),
-      assignSetAppearanceError: assign({
-        setAppearanceError: (_, event) => event.data,
-      }),
-      clearSetAppearanceError: assign({
-        setAppearanceError: (_) => undefined,
-      }),
     },
     services: {
       getAppearance: async () => {

From c332794aa4443f2b94deb385e9703bb82fc0be56 Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Wed, 9 Aug 2023 16:42:12 +0000
Subject: [PATCH 2/2] Set default color

---
 .../AppearanceSettingsPage/AppearanceSettingsPageView.tsx     | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/site/src/pages/DeploySettingsPage/AppearanceSettingsPage/AppearanceSettingsPageView.tsx b/site/src/pages/DeploySettingsPage/AppearanceSettingsPage/AppearanceSettingsPageView.tsx
index 78e23d7434afb..d14aad57ca3ae 100644
--- a/site/src/pages/DeploySettingsPage/AppearanceSettingsPage/AppearanceSettingsPageView.tsx
+++ b/site/src/pages/DeploySettingsPage/AppearanceSettingsPage/AppearanceSettingsPageView.tsx
@@ -21,6 +21,7 @@ import { Stack } from "components/Stack/Stack"
 import { useFormik } from "formik"
 import { useTheme } from "@mui/styles"
 import Link from "@mui/material/Link"
+import { colors } from "theme/colors"
 
 export type AppearanceSettingsPageViewProps = {
   appearance: UpdateAppearanceConfig
@@ -53,7 +54,8 @@ export const AppearanceSettingsPageView = ({
       initialValues: {
         message: appearance.service_banner.message,
         enabled: appearance.service_banner.enabled,
-        background_color: appearance.service_banner.background_color,
+        background_color:
+          appearance.service_banner.background_color ?? colors.blue[7],
       },
       onSubmit: (values) =>
         updateAppearance(