Merge pull request #2 from tomrpl/feat/refacto

feat(ui): improving the UI + little features
tomrpl · Jun 27, 2024 · e825b2a · e825b2a
2 parents 6da367f + b5cb495
commit e825b2a
Show file tree

Hide file tree

Showing 11 changed files with 536 additions and 219 deletions.
diff --git a/package.json b/package.json
@@ -14,6 +14,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-scripts": "5.0.1",
+    "react-select": "^5.8.0",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

diff --git a/src/component/CheckItem.tsx b/src/component/CheckItem.tsx
@@ -11,8 +11,6 @@ const CheckItem: React.FC<CheckItemProps> = ({
   isVerified,
   details,
 }) => {
-  const borderColor =
-    isVerified === null ? "grey" : isVerified ? "green" : "red";
   const backgroundColor =
     isVerified === null ? "#e2e3e5" : isVerified ? "#d4edda" : "#f8d7da";
   const textColor =
@@ -21,17 +19,17 @@ const CheckItem: React.FC<CheckItemProps> = ({
   return (
     <div
       style={{
-        border: `2px solid ${borderColor}`,
-        borderRadius: "4px",
+        border: `0.5px solid ${backgroundColor}`,
+        borderRadius: "8px",
         padding: "10px",
         margin: "10px 0",
         backgroundColor: backgroundColor,
         color: textColor,
       }}
     >
-      <h3 style={{ margin: "0" }}>{title}</h3>
-      <p style={{ margin: "0" }}>
-        {isVerified === null ? "🟡 Standby" : isVerified ? "✅" : "❌"}{" "}
+      <h2 style={{ margin: "0" }}>{title}</h2>
+      <p style={{ margin: "0", fontSize: "0.9rem" }}>
+        {isVerified === null ? "Standby" : isVerified ? "✅" : "❌"}{" "}
         {isVerified === null ? "" : details}
       </p>
     </div>