From 07911d55d3328c639af12a4d87401d7b184ced5b Mon Sep 17 00:00:00 2001
From: Ammar-Radwan <ammarradwan03@gmail.com>
Date: Wed, 25 Sep 2024 17:08:40 +0300
Subject: [PATCH] update tagsbox css

---
 frontend/src/pages/MetricCreateEdit.jsx    |  2 +-
 frontend/src/pages/ServiceCreateEdit.jsx   |  2 +-
 frontend/src/styles/components/TagsBox.css | 61 ++++++++++++++++++++++
 3 files changed, 63 insertions(+), 2 deletions(-)
 create mode 100644 frontend/src/styles/components/TagsBox.css

diff --git a/frontend/src/pages/MetricCreateEdit.jsx b/frontend/src/pages/MetricCreateEdit.jsx
index 329b158..6f9ffa0 100644
--- a/frontend/src/pages/MetricCreateEdit.jsx
+++ b/frontend/src/pages/MetricCreateEdit.jsx
@@ -5,7 +5,7 @@ import Layout from '../layouts/Layout';
 import TagsBox from '../components/TagsBox';
 import { getMetricById, editMetric, postMetric } from '../api/metrics';
 import '../styles/pages/Metrics.css';
-
+import '../styles/components/TagsBox.css';
 
 const MetricCreateEdit = (props) => {
   const navigate = useNavigate();
diff --git a/frontend/src/pages/ServiceCreateEdit.jsx b/frontend/src/pages/ServiceCreateEdit.jsx
index 21b2d4e..18b3ed3 100644
--- a/frontend/src/pages/ServiceCreateEdit.jsx
+++ b/frontend/src/pages/ServiceCreateEdit.jsx
@@ -6,7 +6,7 @@ import {
     editService, getAllScorecrds, getAllTeams, 
     getServiceById, getServiceDetailsById, postService 
 } from '../api/services';
-import '../styles/components/TagsList.css'
+import '../styles/components/TagsBox.css'
 
 
 const ServiceCreateEdit = (props) => {
diff --git a/frontend/src/styles/components/TagsBox.css b/frontend/src/styles/components/TagsBox.css
new file mode 100644
index 0000000..00b33af
--- /dev/null
+++ b/frontend/src/styles/components/TagsBox.css
@@ -0,0 +1,61 @@
+form :where(.box ul, li, li i){
+	display: flex;
+	align-items: center;
+}
+
+form .box {
+	border: 1px solid #d3d3d3;
+	border-radius: 6px;
+}
+
+form .box input {
+	width: 150px;
+	outline: none;
+	border: none;
+	margin-left: 10px;
+	margin-bottom: 10px;
+} 
+
+form .input-note {
+	color: #919191
+} 
+form :where(ul, li, li i){
+	display: flex;
+	align-items: center;
+}
+
+form ul {
+	display: flex;
+	flex-wrap: wrap;
+	list-style-type: none;
+	padding: 10px;
+	margin: 0
+} 
+form ul li {
+	margin: 0 5px 5px 0;
+	padding: 2px 7px;
+	background-color: #eee;
+	border: 1px solid #d3d3d3;
+	border-radius: 3px;
+	text-align: center;
+	user-select: none;
+	z-index: 1000;
+} 
+
+form ul li button {
+	background-color: none;
+	border: none;
+	outline: none;
+} 
+
+form ul li i {
+	color: #757575;
+	width: 15px;
+	height: 15px;
+	padding: 0 4px;
+	border-radius: 30px;
+	margin-left: 4px;
+	font-size: 13px;
+	cursor: pointer;
+} 
+