feat: update outline of email details when the user is editing

ajyey · Jun 24, 2023 · 8225fdc · 8225fdc
1 parent cd9f36f
commit 8225fdc
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 8 deletions.
diff --git a/src/pages/popup/components/home/detail/EmailAddress.tsx b/src/pages/popup/components/home/detail/EmailAddress.tsx
@@ -5,8 +5,10 @@ function EmailAddress({
   emailAddress: string | null;
   isEditing: boolean;
 }) {
-  const containerStyle = `border border-big-stone rounded-b-none rounded rounded-tl-lg rounded-tr-lg hover:bg-french-blue/[0.4] ${
-    isEditing ? 'bg-big-stone' : 'bg-astronaut'
+  const containerStyle = `border rounded-b-none rounded rounded-tl-lg rounded-tr-lg hover:bg-french-blue/[0.4] ${
+    isEditing
+      ? 'bg-big-stone border-iron/[0.5]'
+      : 'border-big-stone bg-astronaut'
   }`;
   return (
     <div className={containerStyle}>

diff --git a/src/pages/popup/components/home/detail/EmailDescription.tsx b/src/pages/popup/components/home/detail/EmailDescription.tsx
@@ -20,8 +20,10 @@ function EmailDescription({
     ? 'text-white'
     : 'text-gray-400';
   // Use different styles based on whether we're editing or not
-  const containerStyle = `border border-t-0 border-big-stone ${
-    isEditing ? 'bg-big-stone' : 'bg-astronaut hover:bg-french-blue/[0.4]'
+  const containerStyle = `border border-t-0 ${
+    isEditing
+      ? 'bg-big-stone border-iron/[0.5]'
+      : 'border-big-stone bg-astronaut hover:bg-french-blue/[0.4]'
   }`;
   return (
     <div className={containerStyle}>

diff --git a/src/pages/popup/components/home/detail/EmailDomain.tsx b/src/pages/popup/components/home/detail/EmailDomain.tsx
@@ -18,8 +18,10 @@ function EmailDomain({
   const handleDomainChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setEditedDomain(e.target.value);
   };
-  const containerStyle = `border border-big-stone border-t-0 ${
-    isEditing ? 'bg-big-stone' : 'bg-astronaut hover:bg-french-blue/[0.4]'
+  const containerStyle = `border border-t-0 ${
+    isEditing
+      ? 'bg-big-stone border-iron/[0.5]'
+      : 'border-big-stone bg-astronaut hover:bg-french-blue/[0.4]'
   }`;
   return (
     <div className={containerStyle}>

diff --git a/src/pages/popup/components/home/detail/EmailId.tsx b/src/pages/popup/components/home/detail/EmailId.tsx
@@ -5,8 +5,10 @@ function EmailId({
   emailId: string | null;
   isEditing: boolean;
 }) {
-  const containerStyle = `bg-astronaut border border-t-0 rounded-b-lg border-big-stone hover:bg-french-blue/[0.4] ${
-    isEditing ? 'bg-big-stone' : 'bg-astronaut hover:bg-french-blue/[0.4]'
+  const containerStyle = `border border-t-0 rounded-b-lg hover:bg-french-blue/[0.4] ${
+    isEditing
+      ? 'bg-big-stone border-iron/[0.5]'
+      : 'border-big-stone bg-astronaut hover:bg-french-blue/[0.4]'
   }`;
   return (
     <div className={containerStyle}>