1 files changed, 48 insertions, 0 deletions
diff --git a/server/web/src/design/components/Alert.design.tsx b/server/web/src/design/components/Alert.design.tsx
new file mode 100644
index 0000000..ff634bf
--- /dev/null
+++ b/server/web/src/design/components/Alert.design.tsx
@@ -0,0 +1,48 @@
+import { IAlertButton } from '../../interfaces/design/AlertDesign.interface';
+import styled from 'styled-components';
+
+const calcBgColor = (color: string) => {
+    switch (color) {
+        case 'SUCCESS':
+            return 'rgb(24, 79, 59)';
+        case 'DANGER':
+            return 'rgb(175, 45, 45)';
+        case 'WARNING':
+            return 'rgb(175, 121, 21)';
+        case 'INFO':
+            return 'rgb(23, 52, 102)';
+    }
+};
+
+export const AlertButton = styled('div') <IAlertButton>`
+    background-color: ${(props) => calcBgColor(props.bgColor)};
+    border: solid thin rgb(255, 255, 255);
+    grid-template-columns: 1fr auto;
+    color: rgb(255, 255, 255);
+    align-items: center;
+    min-height: 2.5rem;
+    text-align: center;
+    font-size: 0.8rem;
+    width: 17.5rem;
+    display: grid;
+
+    @media (min-width: 768px) {
+        width: 22.5rem;
+    }
+`;
+
+export const AlertButtonCross = styled('span')`
+    border-left: solid thin rgb(255, 255, 255);
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    padding: 0.5rem 1rem;
+    align-items: center;
+    font-size: 1.25rem;
+    user-select: none;
+    cursor: pointer;
+    display: grid;
+    height: 100%;
+`;