Merge pull request #3 from CMP26Projects/Alerts

Alerts

client/src/App.jsx

@@ -1,9 +1,17 @@
-import "./theme.scss";
+import React from "react";
+import Alert from "./components/common/Alerts";
 
 function App() {
   return (
     <>
-      <h1> 🚀 Sanity Check</h1>
+      <Alert
+        title="عنوان"
+        info="نص الرسالة"
+        buttontext="تمت المعاينة"
+        showRightBox={false}
+        Onclick={() => console.log("clicked")}
+        color="yellow"
+      />
     </>
   );
 }

client/src/assets/styles/_vars.scss

@@ -0,0 +1,5 @@
+$--grey-800: #1F2A37;
+$--grey-300: #D1D5DB;
+$--Teal-500: #0694A2;
+$--Red-700: #C81E1E;
+$--Yellow-500: #C27803;

client/src/assets/styles/components/Alert.scss

@@ -0,0 +1,142 @@
+@import "../_vars.scss";
+
+.alert-item {
+    display: flex;
+    flex-direction: column;
+
+    width: 340px;
+    height: fit-content;
+    flex-shrink: 0;
+    border-radius: 15px;
+    background: $--grey-800;
+
+    padding: 15px 15px;
+    justify-content: center;
+    align-items: end;
+
+    gap: 10px;
+}
+
+.top-bar {
+    display: flex;
+    flex-direction: row;
+
+    width: 100%;
+    height: fit-content;
+
+    justify-content: space-between;
+    align-items: center;
+}
+
+.title-box {
+    display: flex;
+    flex-direction: row;
+    justify-content: end;
+    align-items: center;
+    height: fit-content;
+}
+
+.right-box {
+    width: 15px;
+    height: 15px;
+    flex-shrink: 0;
+    border-radius: 2px;
+    margin-left: 10px;
+
+    &.red {
+        background: var(--Red-700, #C81E1E);
+    }
+
+    &.main {
+        background: $--grey-300;
+    }
+
+    &.mint-green {
+        background: $--Teal-500;
+    }
+
+    &.yellow {
+        background: $--Yellow-500;
+    }
+
+}
+
+.title {
+    text-align: right;
+    font-family: Noto Kufi Arabic;
+    font-size: 19.2px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: normal;
+
+    &.main {
+        color: $--grey-300;
+    }
+
+    &.mint-green {
+        color: $--Teal-500;
+    }
+
+    &.red {
+        color: $--Red-700;
+
+    }
+
+    &.yellow {
+
+        color: $--Yellow-500;
+    }
+}
+
+.alert-info {
+    height: 65%;
+    text-align: right;
+    color: $--grey-300;
+    font-family: Noto Kufi Arabic;
+    font-size: 13.33px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+}
+
+.alert-btn {
+    display: flex;
+    width: 100px;
+    height: 25px;
+    justify-content: center;
+    align-items: center;
+    gap: 7px;
+    flex-shrink: 0;
+
+    float: right;
+    border-radius: 5px;
+
+    color: $--grey-800;
+
+    font-family: Noto Kufi Arabic;
+    font-size: 13.33px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+
+    &.red {
+        background: var(--Red-700, #C81E1E);
+    }
+
+    &.main {
+        background: $--grey-300;
+    }
+
+    &.mint-green {
+        background: $--Teal-500;
+    }
+
+    &.yellow {
+        background: $--Yellow-500;
+    }
+}
+
+
+.hide {
+    display: none;
+}

client/src/components/common/Alerts.jsx

@@ -0,0 +1,38 @@
+import React from "react";
+import "../../assets/styles/components/Alert.scss";
+
+const Alert = ({ title, info, buttontext, Onclick, showRightBox, color }) => {
+  return (
+    <div className="alert-item">
+      <div className="top-bar">
+        <svg
+          className={"exit-btn " + color}
+          xmlns="http://www.w3.org/2000/svg"
+          width="21"
+          height="20"
+          viewBox="0 0 21 20" 
+        >
+          <path
+            d="M6.78033 5.21967C6.48744 4.92678 6.01256 4.92678 5.71967 5.21967C5.42678 5.51256 5.42678 5.98744 5.71967 6.28033L9.43934 10L5.71967 13.7197C5.42678 14.0126 5.42678 14.4874 5.71967 14.7803C6.01256 15.0732 6.48744 15.0732 6.78033 14.7803L10.5 11.0607L14.2197 14.7803C14.5126 15.0732 14.9874 15.0732 15.2803 14.7803C15.5732 14.4874 15.5732 14.0126 15.2803 13.7197L11.5607 10L15.2803 6.28033C15.5732 5.98744 15.5732 5.51256 15.2803 5.21967C14.9874 4.92678 14.5126 4.92678 14.2197 5.21967L10.5 8.93934L6.78033 5.21967Z"
+            fill="#D1D5DB"
+          />
+        </svg>
+
+        <div className="title-box">
+          <text className={"title " + color}>{title}</text>
+          <div
+            className={
+              showRightBox ? "right-box " + color : "right-box hide " + color
+            }
+          />
+        </div>
+      </div>
+      <text className="alert-info">{info}</text>
+      <button className={"alert-btn " + color} onClick={Onclick}>
+        {buttontext}
+      </button>
+    </div> 
+  );
+};
+
+export default Alert;