web: stop using custom styles for PatternFly Alert

web/package/agama-web-ui.changes

@@ -1,3 +1,9 @@
+-------------------------------------------------------------------
+Thu Mar 19 16:35:10 UTC 2026 - David Diaz <dgonzalez@suse.com>
+
+- Restore PF/Alert default styles, removing some custom overrides
+  (gh#agama-project/agama#3305).
+
 -------------------------------------------------------------------
 Wed Mar 18 22:29:48 UTC 2026 - Imobach Gonzalez Sosa <igonzalezsosa@suse.com>
 

web/src/assets/styles/index.scss

@@ -330,41 +330,9 @@ strong {
 // }
 
 :not(.pf-v6-c-alert-group__item) > .pf-v6-c-alert {
-  --pf-v6-c-alert--m-info__title--Color: var(--agm-t--color--waterhole);
-  --pf-v6-c-alert__icon--FontSize: var(--pf-t--global--font--size--md);
-  --pf-v6-c-content--MarginBlockEnd: var(--pf-t--global--spacer--xs);
-  // --pf-v6-c-alert--BoxShadow: var(--pf-t--global--box-shadow--sm);
-  --pf-v6-c-alert--BoxShadow: none;
-  --pf-v6-c-alert--PaddingBlockStart: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-alert--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-alert--PaddingInlineStart: var(--pf-t--global--spacer--md);
-  --pf-v6-c-alert--PaddingInlineEnd: var(--pf-t--global--spacer--md);
-  border-width: 0;
-  border-radius: 0;
-  border-inline-start-width: var(--pf-t--global--border--width--box--status--default);
-
   &:has(.pf-v6-c-alert__description) {
     row-gap: var(--pf-t--global--spacer--xs);
   }
-
-  $pf-alert-modifiers: "custom", "info", "success", "warning", "danger";
-
-  @each $modifier in $pf-alert-modifiers {
-    &.pf-m-#{$modifier} {
-      background: linear-gradient(
-        to right in srgb,
-        color-mix(in srgb, var(--pf-v6-c-alert--m-#{$modifier}--BorderColor), transparent 94%),
-        color-mix(in srgb, var(--pf-v6-c-alert--m-#{$modifier}--BorderColor), transparent 96%),
-        color-mix(in srgb, var(--pf-v6-c-alert--m-#{$modifier}--BorderColor), transparent 98%),
-        transparent
-      );
-    }
-  }
-
-  &.pf-m-plain {
-    border: 0;
-    background: none;
-  }
 }
 
 .pf-v6-c-alert-group.pf-m-toast {

web/src/components/core/InstallationFinished.tsx

@@ -43,7 +43,7 @@ const TpmAlert = () => {
   const title = _("TPM sealing requires the new system to be booted directly.");
 
   return (
-    <Alert title={title} variant="danger">
+    <Alert isInline title={title} variant="danger">
       <Stack hasGutter>
         <Divider />
         <Content isEditorial className={textStyles.fontSizeXl}>

web/src/components/core/IssuesAlert.tsx

@@ -32,6 +32,7 @@ export default function IssuesAlert({ issues }) {
 
   return (
     <Alert
+      isInline
       variant="warning"
       title={_("Before starting the installation, you need to address the following problems:")}
     >

web/src/components/core/LoginPage.tsx

@@ -99,7 +99,7 @@ user privileges.",
                 />
               </FormGroup>
               {authError && (
-                <Alert component="div" variant="danger" title={error.title}>
+                <Alert isInline variant="danger" title={error.title}>
                   {error.description}
                 </Alert>
               )}

web/src/components/core/ProgressBackdrop.tsx

@@ -158,6 +158,7 @@ export default function ProgressBackdrop({
           <CardTitle>
             <Alert
               isPlain
+              isInline
               customIcon={<></>}
               title={
                 <Flex

web/src/components/network/NoPersistentConnectionsAlert.tsx

@@ -37,7 +37,7 @@ export default function NoPersistentConnectionsAlert() {
   if (persistentConnections !== 0) return;
 
   return (
-    <Alert variant="custom" title={_("Installed system may not have network connections")}>
+    <Alert isInline variant="custom" title={_("Installed system may not have network connections")}>
       {_(
         "All network connections managed through this interface are currently set to be \
 used only during installation and will not be copied to the installed system",

web/src/components/network/WifiConnectionForm.tsx

@@ -57,7 +57,7 @@ const securityFrom = (supported: string[]) => {
 
 const PublicNetworkAlert = () => {
   return (
-    <Alert title={_("Not protected network")} variant="warning">
+    <Alert isInline title={_("Not protected network")} variant="warning">
       <Content component="p">
         {_("You will connect to a public network without encryption. Your data may not be secure.")}
       </Content>

web/src/components/storage/FixableConfigInfo.tsx

@@ -51,7 +51,7 @@ export default function FixableConfigInfo({ issues }: FixableConfigInfoProps) {
   );
 
   return (
-    <Alert variant="warning" title={title}>
+    <Alert isInline variant="warning" title={title}>
       <Description issues={issues} />
     </Alert>
   );

web/src/components/storage/PotentialDataLossAlert.tsx

@@ -48,7 +48,7 @@ export default function PotentialDataLossAlert({
   }
 
   return (
-    <Alert title={title} variant="danger">
+    <Alert isInline title={title} variant="danger">
       <Stack hasGutter>
         {!isCompact && (
           <List>

web/src/components/storage/ProposalFailedInfo.tsx

@@ -82,7 +82,7 @@ const Description = () => {
  */
 export default function ProposalFailedInfo() {
   return (
-    <Alert variant="warning" title={_("Failed to calculate a storage layout")}>
+    <Alert isInline variant="warning" title={_("Failed to calculate a storage layout")}>
       <Description />
     </Alert>
   );

web/src/components/storage/UnsupportedModelInfo.tsx

@@ -36,7 +36,7 @@ export default function UnsupportedModelInfo(): React.ReactNode {
   if (config) return null;
 
   return (
-    <Alert variant="info" title={_("Unable to modify the settings")}>
+    <Alert isInline variant="info" title={_("Unable to modify the settings")}>
       <Stack hasGutter>
         <StackItem>
           <Content component="p">