From c7eb4f062216e225296ad177212be631f3406105 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Krzysztof=20=C5=BBuraw?=
 <9116238+krzysztofzuraw@users.noreply.github.com>
Date: Wed, 8 Mar 2023 09:58:07 +0100
Subject: [PATCH] Fix limit reached alert position (#3297)

* fix: limit reached alert

* fix: icon background
---
 src/components/LimitReachedAlert.tsx | 33 +++++++++++++++-------------
 src/index.css                        |  4 ++++
 2 files changed, 22 insertions(+), 15 deletions(-)

diff --git a/src/components/LimitReachedAlert.tsx b/src/components/LimitReachedAlert.tsx
index 3051a5a13..5b731dcbd 100644
--- a/src/components/LimitReachedAlert.tsx
+++ b/src/components/LimitReachedAlert.tsx
@@ -1,22 +1,25 @@
-import { Alert, AlertProps, makeStyles } from "@saleor/macaw-ui";
+import { Alert, AlertProps } from "@saleor/macaw-ui";
+import { sprinkles } from "@saleor/macaw-ui/next";
+import clsx from "clsx";
 import React from "react";
 
-const useStyles = makeStyles(
-  theme => ({
-    root: {
-      marginBottom: theme.spacing(3),
-    },
-  }),
-  { name: "LimitReachedAlert" },
-);
-
 export type LimitReachedAlertProps = Omit<AlertProps, "variant" | "close">;
 
-const LimitReachedAlert: React.FC<LimitReachedAlertProps> = props => {
-  const classes = useStyles();
-
-  return <Alert variant="warning" close className={classes.root} {...props} />;
-};
+const LimitReachedAlert: React.FC<LimitReachedAlertProps> = props => (
+  // TODO: migrate to new macaw-ui alert
+  <Alert
+    variant="warning"
+    close
+    className={clsx(
+      sprinkles({
+        gridColumn: "8",
+        marginBottom: 5,
+      }),
+      "remove-icon-background",
+    )}
+    {...props}
+  />
+);
 
 LimitReachedAlert.displayName = "LimitReachedAlert";
 export default LimitReachedAlert;
diff --git a/src/index.css b/src/index.css
index 72d390ebb..9a0174a4a 100644
--- a/src/index.css
+++ b/src/index.css
@@ -36,3 +36,7 @@ body {
   animation: pulse 0.2s;
   transition: all 0.2s;
 }
+
+.remove-icon-background svg {
+  background: none !important;
+}