From 5fb32e8084b235f479ed7922de19348466945c22 Mon Sep 17 00:00:00 2001
From: Lorenzo <lorenzo.cavazzi.tech@gmail.com>
Date: Thu, 15 Aug 2024 11:47:51 +0200
Subject: [PATCH 1/3] refactor: change the alert icons

* Do not use text classes for the non-text icon.
* Use the non-filled icons as in most v1 components.
* Inherit the color used for the alert to improve contrast.
---
 client/src/components/Alert.jsx | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/client/src/components/Alert.jsx b/client/src/components/Alert.jsx
index 1c3bbbc2d..bffbd642a 100644
--- a/client/src/components/Alert.jsx
+++ b/client/src/components/Alert.jsx
@@ -26,9 +26,9 @@ import { Component } from "react";
 import { Alert } from "reactstrap";
 
 import {
-  CheckCircleFill,
-  ExclamationTriangleFill,
-  InfoCircleFill,
+  CheckCircle,
+  ExclamationTriangle,
+  InfoCircle,
 } from "react-bootstrap-icons";
 
 /**
@@ -84,11 +84,12 @@ class RenkuAlert extends Component {
   }
 
   getIcon() {
+    const iconSize = 32;
     const icon = {
-      danger: <ExclamationTriangleFill className={cx("bi", "text-danger")} />,
-      info: <InfoCircleFill className={cx("bi", "text-info")} />,
-      warning: <ExclamationTriangleFill className={cx("bi", "text-warning")} />,
-      success: <CheckCircleFill className={cx("bi", "text-success")} />,
+      danger: <ExclamationTriangle size={iconSize} />,
+      info: <InfoCircle size={iconSize} />,
+      warning: <ExclamationTriangle size={iconSize} />,
+      success: <CheckCircle size={iconSize} />,
     }[this.props.color];
 
     return icon;
@@ -108,7 +109,7 @@ class RenkuAlert extends Component {
         data-cy={this.props.dataCy}
       >
         <div className={cx("d-flex", "gap-3")}>
-          <div className={cx("fs-1", "my-auto")}>{alertIcon}</div>
+          <div>{alertIcon}</div>
           <div className={cx("my-auto", "overflow-auto", "w-100")}>
             {this.props.children}
           </div>

From ee9a1722c93eaa9bac9ef8f5ee93f0fd0401b68e Mon Sep 17 00:00:00 2001
From: Lorenzo <lorenzo.cavazzi.tech@gmail.com>
Date: Tue, 20 Aug 2024 11:53:41 +0200
Subject: [PATCH 2/3] refactor: move constant to a separate file

---
 client/src/components/Alert.constants.ts | 19 +++++++++++++++++++
 client/src/components/Alert.jsx          |  4 ++--
 2 files changed, 21 insertions(+), 2 deletions(-)
 create mode 100644 client/src/components/Alert.constants.ts

diff --git a/client/src/components/Alert.constants.ts b/client/src/components/Alert.constants.ts
new file mode 100644
index 000000000..337320410
--- /dev/null
+++ b/client/src/components/Alert.constants.ts
@@ -0,0 +1,19 @@
+/*!
+ * Copyright 2024 - Swiss Data Science Center (SDSC)
+ * A partnership between École Polytechnique Fédérale de Lausanne (EPFL) and
+ * Eidgenössische Technische Hochschule Zürich (ETHZ).
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export const iconSize = 32;
diff --git a/client/src/components/Alert.jsx b/client/src/components/Alert.jsx
index bffbd642a..63234e571 100644
--- a/client/src/components/Alert.jsx
+++ b/client/src/components/Alert.jsx
@@ -24,13 +24,14 @@
 import cx from "classnames";
 import { Component } from "react";
 import { Alert } from "reactstrap";
-
 import {
   CheckCircle,
   ExclamationTriangle,
   InfoCircle,
 } from "react-bootstrap-icons";
 
+import { iconSize } from "./Alert.constants";
+
 /**
  * Display a alert that can be dismissed.
  *
@@ -84,7 +85,6 @@ class RenkuAlert extends Component {
   }
 
   getIcon() {
-    const iconSize = 32;
     const icon = {
       danger: <ExclamationTriangle size={iconSize} />,
       info: <InfoCircle size={iconSize} />,

From 31fa94ab13a9d574062976d1ebb1968602d3387c Mon Sep 17 00:00:00 2001
From: Lorenzo <lorenzo.cavazzi.tech@gmail.com>
Date: Tue, 20 Aug 2024 13:03:05 +0200
Subject: [PATCH 3/3] refactor: use capital letters for constants

---
 client/src/components/Alert.constants.ts |  2 +-
 client/src/components/Alert.jsx          | 10 +++++-----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/client/src/components/Alert.constants.ts b/client/src/components/Alert.constants.ts
index 337320410..41c7437f0 100644
--- a/client/src/components/Alert.constants.ts
+++ b/client/src/components/Alert.constants.ts
@@ -16,4 +16,4 @@
  * limitations under the License.
  */
 
-export const iconSize = 32;
+export const ALERT_ICON_SIZE = 32;
diff --git a/client/src/components/Alert.jsx b/client/src/components/Alert.jsx
index 63234e571..bff24ce5e 100644
--- a/client/src/components/Alert.jsx
+++ b/client/src/components/Alert.jsx
@@ -30,7 +30,7 @@ import {
   InfoCircle,
 } from "react-bootstrap-icons";
 
-import { iconSize } from "./Alert.constants";
+import { ALERT_ICON_SIZE } from "./Alert.constants";
 
 /**
  * Display a alert that can be dismissed.
@@ -86,10 +86,10 @@ class RenkuAlert extends Component {
 
   getIcon() {
     const icon = {
-      danger: <ExclamationTriangle size={iconSize} />,
-      info: <InfoCircle size={iconSize} />,
-      warning: <ExclamationTriangle size={iconSize} />,
-      success: <CheckCircle size={iconSize} />,
+      danger: <ExclamationTriangle size={ALERT_ICON_SIZE} />,
+      info: <InfoCircle size={ALERT_ICON_SIZE} />,
+      warning: <ExclamationTriangle size={ALERT_ICON_SIZE} />,
+      success: <CheckCircle size={ALERT_ICON_SIZE} />,
     }[this.props.color];
 
     return icon;