From 08508d719a4fe423a839912833d1eaf958a72f91 Mon Sep 17 00:00:00 2001
From: mariaozamiz <ozamiz.m@gmail.com>
Date: Mon, 5 Feb 2024 09:11:28 +0100
Subject: [PATCH 1/3] feat: add theme with custom colors

---
 src/webapp/pages/app/themes/customTheme.ts | 14 ++++++++++++++
 1 file changed, 14 insertions(+)
 create mode 100644 src/webapp/pages/app/themes/customTheme.ts

diff --git a/src/webapp/pages/app/themes/customTheme.ts b/src/webapp/pages/app/themes/customTheme.ts
new file mode 100644
index 0000000..e660c31
--- /dev/null
+++ b/src/webapp/pages/app/themes/customTheme.ts
@@ -0,0 +1,14 @@
+const customTheme = {
+    color: {
+        white: "#ffffff",
+        black: "#111111",
+        grey: "#8e8e8e",
+        lightGrey: "#F2F2F2",
+        lightGreen: "#D8EDD9",
+        green: "#355B37",
+    },
+};
+
+export type Theme = typeof customTheme;
+
+export default customTheme;

From 2e59b818c7598aac722e09559aa1a30f33932613 Mon Sep 17 00:00:00 2001
From: mariaozamiz <ozamiz.m@gmail.com>
Date: Mon, 5 Feb 2024 09:12:14 +0100
Subject: [PATCH 2/3] feat: create EmptyState component

---
 .../components/empty-state/EmptyState.tsx     | 45 +++++++++++++++++++
 1 file changed, 45 insertions(+)
 create mode 100644 src/webapp/components/empty-state/EmptyState.tsx

diff --git a/src/webapp/components/empty-state/EmptyState.tsx b/src/webapp/components/empty-state/EmptyState.tsx
new file mode 100644
index 0000000..03b141c
--- /dev/null
+++ b/src/webapp/components/empty-state/EmptyState.tsx
@@ -0,0 +1,45 @@
+import Typography from "@material-ui/core/Typography";
+import styled, { css } from "styled-components";
+import i18n from "$/utils/i18n";
+import React from "react";
+import customTheme from "$/webapp/pages/app/themes/customTheme";
+
+type Props = {
+    message: string;
+    variant: "neutral" | "success";
+};
+
+export type ContainerProps = {
+    $variant: Props["variant"];
+};
+
+export const EmptyState: React.FC<Props> = React.memo(({ message, variant }) => {
+    return (
+        <Container $variant={variant}>
+            <Typography>{i18n.t(message)}</Typography>
+        </Container>
+    );
+});
+
+const Container = styled.section<ContainerProps>`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: ${customTheme.color.lightGrey};
+    color: ${customTheme.color.grey};
+    border-color: ${customTheme.color.grey};
+    border: 1px solid;
+    border-radius: 4px;
+    height: 39.125rem;
+    width: 100%;
+
+    ${({ $variant }) => {
+        if ($variant === "success") {
+            return css`
+                background-color: ${customTheme.color.lightGreen};
+                color: ${customTheme.color.green};
+                border-color: ${customTheme.color.green};
+            `;
+        }
+    }}
+`;

From e1890317ee59b739986e3d683ea12d1fa33c1ecc Mon Sep 17 00:00:00 2001
From: mariaozamiz <ozamiz.m@gmail.com>
Date: Mon, 5 Feb 2024 09:35:26 +0100
Subject: [PATCH 3/3] chore: simplify variant

---
 src/webapp/components/empty-state/EmptyState.tsx | 16 +++++++---------
 1 file changed, 7 insertions(+), 9 deletions(-)

diff --git a/src/webapp/components/empty-state/EmptyState.tsx b/src/webapp/components/empty-state/EmptyState.tsx
index 03b141c..2714df7 100644
--- a/src/webapp/components/empty-state/EmptyState.tsx
+++ b/src/webapp/components/empty-state/EmptyState.tsx
@@ -33,13 +33,11 @@ const Container = styled.section<ContainerProps>`
     height: 39.125rem;
     width: 100%;
 
-    ${({ $variant }) => {
-        if ($variant === "success") {
-            return css`
-                background-color: ${customTheme.color.lightGreen};
-                color: ${customTheme.color.green};
-                border-color: ${customTheme.color.green};
-            `;
-        }
-    }}
+    ${({ $variant }) =>
+        $variant === "success" &&
+        css`
+            background-color: ${customTheme.color.lightGreen};
+            color: ${customTheme.color.green};
+            border-color: ${customTheme.color.green};
+        `};
 `;