From dc2ba955ab8f5a1e621a6ab4487390875f6c8d89 Mon Sep 17 00:00:00 2001
From: Rohan Chaturvedi <rohan.chaturvedi@protonmail.com>
Date: Tue, 6 Feb 2024 08:26:08 +0530
Subject: [PATCH] feat: improved tags styling (#171)

* wip: improve tags ui

* fix: tag style

---------

Co-authored-by: Nimish <nimish@phase.dev>
---
 frontend/components/environments/SecretRow.tsx | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/frontend/components/environments/SecretRow.tsx b/frontend/components/environments/SecretRow.tsx
index e609a815..b480ab9e 100644
--- a/frontend/components/environments/SecretRow.tsx
+++ b/frontend/components/environments/SecretRow.tsx
@@ -22,6 +22,8 @@ import {
   FaUserEdit,
   FaTrash,
   FaCheck,
+  FaDotCircle,
+  FaCircle,
 } from 'react-icons/fa'
 import { Button } from '../common/Button'
 import { Dialog, Switch, Transition } from '@headlessui/react'
@@ -43,8 +45,10 @@ export const Tag = (props: { tag: SecretTagType }) => {
   const { name, color } = props.tag
 
   return (
-    <div className="flex items-center px-2 rounded-full gap-1 border border-zinc-300 dark:border-zinc-700 text-neutral-500 text-base">
-      <div className={`h-2 w-2 rounded-full`} style={{ backgroundColor: color }}></div>
+    <div className="flex items-center rounded-full gap-1 border border-zinc-300 dark:border-zinc-700 text-zinc-700 dark:text-zinc-200 text-base px-2">
+      <div className="flex items-center justify-center h-4 w-4">
+        <FaCircle className="text-sm" color={color} />
+      </div>
       <span>{name}</span>
     </div>
   )
@@ -844,8 +848,8 @@ export default function SecretRow(props: {
             keyIsBlank
               ? 'ring-1 ring-inset ring-red-500'
               : keyIsDuplicate
-              ? 'ring-1 ring-inset ring-amber-500'
-              : 'focus:ring-1 focus:ring-inset focus:ring-zinc-500',
+                ? 'ring-1 ring-inset ring-amber-500'
+                : 'focus:ring-1 focus:ring-inset focus:ring-zinc-500',
             secretHasBeenModified() && '!text-amber-500'
           )}
           value={secret.key}