add in translation values, clarify colors

js/apps/admin-ui/public/locales/en/styles.json

@@ -28,7 +28,6 @@
   "primaryColorHelp": "Primary color to be used. Must be a hex value.",
   "secondaryColorHelp": "Secondary color to be used. Must be a hex value.",
   "backgroundColorHelp": "Background color to be used. Must be a hex value.",
-  "cssHelp": "Custom CSS. Will override any other values.",
   "formHelpHtmlTemplate": "HTML email template. Most email clients will show and render this version.",
   "formHelpTextTemplate": "Plain text email.",
   "formHelpHtmlTemplateInvalid": "Check your template for errors.",
@@ -56,5 +55,25 @@
   "portal_org_invitations_enabled_tooltip": "Organization invitations feature flag allows organization invitations to be sent out.",
   "portal_org_domains_enabled_tooltip": "Organization domains feature flag allows domains to be added and configured for a domain.",
   "portal_org_sso_enabled_tooltip": "Organization SSO feature flag allows SSO to be setup and configured.",
-  "portal_org_events_enabled_tooltip": "Organization events feature flag allows user to view organization activity."
+  "portal_org_events_enabled_tooltip": "Organization events feature flag allows user to view organization activity.",
+  "primaryColor100": "Primary Color 100",
+  "primaryColor200": "Primary Color 200",
+  "primaryColor400": "Primary Color 400",
+  "primaryColor500": "Primary Color 500",
+  "primaryColor600": "Primary Color 600",
+  "primaryColor700": "Primary Color 700",
+  "primaryColor900": "Primary Color 900",
+  "secondaryColor800": "Secondary Color 800",
+  "secondaryColor900": "Secondary Color 900",
+  "primaryColor100Help": "Color choice for the pallete used in the Admin Portal. Follows Tailwind CSS color naming conventions. 100 being the lightest shade and 900 being the darkest shade.",
+  "primaryColor200Help": "Color choice for the pallete used in the Admin Portal. Follows Tailwind CSS color naming conventions. 100 being the lightest shade and 900 being the darkest shade.",
+  "primaryColor400Help": "Color choice for the pallete used in the Admin Portal. Follows Tailwind CSS color naming conventions. 100 being the lightest shade and 900 being the darkest shade.",
+  "primaryColor500Help": "Color choice for the pallete used in the Admin Portal. Follows Tailwind CSS color naming conventions. 100 being the lightest shade and 900 being the darkest shade.",
+  "primaryColor600Help": "Color choice for the pallete used in the Admin Portal. Follows Tailwind CSS color naming conventions. 100 being the lightest shade and 900 being the darkest shade.",
+  "primaryColor700Help": "Color choice for the pallete used in the Admin Portal. Follows Tailwind CSS color naming conventions. 100 being the lightest shade and 900 being the darkest shade.",
+  "primaryColor900Help": "Color choice for the pallete used in the Admin Portal. Follows Tailwind CSS color naming conventions. 100 being the lightest shade and 900 being the darkest shade.",
+  "secondaryColor800Help": "Color choice for the pallete used in the Admin Portal. Follows Tailwind CSS color naming conventions. 100 being the lightest shade and 900 being the darkest shade.",
+  "secondaryColor900Help": "Color choice for the pallete used in the Admin Portal. Follows Tailwind CSS color naming conventions. 100 being the lightest shade and 900 being the darkest shade.",
+  "cssHelp": "Custom CSS to be applied. Ensure CSS is valid as no validation is performed.",
+  "colorHelpInvalid": "Color must be a valid hex value."
 }

js/apps/admin-ui/src/phaseII/custom-styles/portal/components/color-form-group.tsx → js/apps/admin-ui/src/phaseII/custom-styles/components/color-form-group.tsx

@@ -1,19 +1,19 @@
 import type {
   PortalStylesTypeColors,
   PortalStylesType,
-} from "../portal-styles";
+} from "../portal/portal-styles";
 import { useTranslation } from "react-i18next";
 import { FormGroup, Flex, FlexItem } from "@patternfly/react-core";
 import { HelpItem } from "ui-shared";
 import { ValidatedOptions } from "@patternfly/react-core/dist/js/helpers/constants";
-import { KeycloakTextInput } from "../../../../components/keycloak-text-input/KeycloakTextInput";
+import { KeycloakTextInput } from "../../../components/keycloak-text-input/KeycloakTextInput";
 import type {
   FieldErrors,
   UseFormGetValues,
   UseFormRegister,
   UseFormSetValue,
 } from "react-hook-form";
-import { ColorPicker } from "../../components/ColorPicker";
+import { ColorPicker } from "./ColorPicker";
 
 const HexColorPattern = "^#([0-9a-f]{3}){1,2}$";
 
@@ -36,11 +36,14 @@ const ColorFormGroup: React.FC<ColorFormGroupProps> = ({
   return (
     <FormGroup
       labelIcon={
-        <HelpItem helpText={`styles:${colorKey}Help`} fieldLabelId={colorKey} />
+        <HelpItem
+          helpText={t(`styles:${colorKey}Help`)}
+          fieldLabelId={colorKey}
+        />
       }
       label={t(colorKey)}
       fieldId={`kc-styles-${colorKey}-url`}
-      helperTextInvalid={t(`styles:${colorKey}HelpInvalid`)}
+      helperTextInvalid={t(`styles:colorHelpInvalid`)}
       validated={
         errors[colorKey] ? ValidatedOptions.error : ValidatedOptions.default
       }

js/apps/admin-ui/src/phaseII/custom-styles/login/login-styles.tsx

@@ -167,7 +167,7 @@ export const LoginStyles = () => {
         <FormGroup
           labelIcon={
             <HelpItem
-              helpText="styles:primaryColorHelp"
+              helpText={t("styles:primaryColorHelp")}
               fieldLabelId="primaryColor"
             />
           }
@@ -208,7 +208,7 @@ export const LoginStyles = () => {
         <FormGroup
           labelIcon={
             <HelpItem
-              helpText="styles:secondaryColorHelp"
+              helpText={t("styles:secondaryColorHelp")}
               fieldLabelId="secondaryColor"
             />
           }
@@ -249,7 +249,7 @@ export const LoginStyles = () => {
         <FormGroup
           labelIcon={
             <HelpItem
-              helpText="styles:backgroundColorHelp"
+              helpText={t("styles:backgroundColorHelp")}
               fieldLabelId="backgroundColor"
             />
           }
@@ -288,7 +288,9 @@ export const LoginStyles = () => {
 
         {/* CSS */}
         <FormGroup
-          labelIcon={<HelpItem helpText="styles:cssHelp" fieldLabelId="css" />}
+          labelIcon={
+            <HelpItem helpText={t("styles:cssHelp")} fieldLabelId="css" />
+          }
           label={t("css")}
           fieldId="kc-styles-logo-url"
           helperTextInvalid={t("styles:cssHelpInvalid")}

js/apps/admin-ui/src/phaseII/custom-styles/portal/portal-styles.tsx

@@ -17,7 +17,7 @@ import { get, mapKeys, pick } from "lodash-es";
 import { useAlerts } from "../../../components/alert/Alerts";
 import { KeycloakTextArea } from "../../../components/keycloak-text-area/KeycloakTextArea";
 import { adminClient } from "../../../admin-client";
-import ColorFormGroup from "./components/color-form-group";
+import ColorFormGroup from "../components/color-form-group";
 
 export type PortalStylesTypeColors = {
   primaryColor100: string;
@@ -273,6 +273,19 @@ export const PortalStyles = () => {
     <PageSection variant="light" className="keycloak__form">
       <Form isHorizontal>
         <h3 className="pf-c-title pf-m-xl">{t("branding")}</h3>
+        <p>
+          Follows Tailwind CSS{" "}
+          <a
+            href="https://tailwindcss.com/docs/theme#colors"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            color
+          </a>{" "}
+          naming convention. There are custom defined colors available for
+          configuration below.
+        </p>
+
         {/* Primary Color */}
         {colorKeys.map((k) => (
           <ColorFormGroup
@@ -284,7 +297,9 @@ export const PortalStyles = () => {
 
         {/* CSS */}
         <FormGroup
-          labelIcon={<HelpItem helpText="styles:cssHelp" fieldLabelId="css" />}
+          labelIcon={
+            <HelpItem helpText={t("styles:cssHelp")} fieldLabelId="css" />
+          }
           label={t("css")}
           fieldId="kc-styles-logo-url"
           helperTextInvalid={t("styles:cssHelpInvalid")}