feat: add more consistent styling for modal buttons

ajyey · Jun 30, 2023 · a1b8386 · a1b8386
1 parent a33bd9b
commit a1b8386
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 5 deletions.
diff --git a/src/pages/popup/components/home/detail/modals/CreateEmailModal.tsx b/src/pages/popup/components/home/detail/modals/CreateEmailModal.tsx
@@ -108,13 +108,13 @@ export default function CreateEmailModal({
             <div className="p-3 space-y-4">
               <input
                 type="text"
-                className="w-full px-3 py-2 text-white bg-gray-700 rounded-md focus:bg-gray-600"
+                className="w-full px-3 py-2 text-white text-sm bg-gray-600 rounded-md focus:bg-gray-500 outline-none"
                 placeholder="Domain"
                 value={domain}
                 onChange={(e) => setDomain(e.target.value)}
               />
               <textarea
-                className="w-full px-3 py-2 text-white bg-gray-700 rounded-md focus:bg-gray-600"
+                className="w-full px-3 py-2 text-white text-sm bg-gray-600 rounded-md focus:bg-gray-500 outline-none resize-none"
                 placeholder="Description"
                 maxLength={127}
                 value={description}
@@ -125,7 +125,7 @@ export default function CreateEmailModal({
             <div className="flex items-center justify-end p-6 space-x-2 border-t border-gray-200 rounded-b dark:border-gray-600">
               <button
                 type="button"
-                className="text-white bg-red-600 hover:bg-red-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center"
+                className="text-white hover:bg-french-blue bg-french-blue/[0.75] focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center"
                 onClick={handleCreate}
               >
                 Create

diff --git a/src/pages/popup/components/home/detail/modals/DeleteConfirmationModal.tsx b/src/pages/popup/components/home/detail/modals/DeleteConfirmationModal.tsx
@@ -68,7 +68,7 @@ export default function DeleteConfirmationModal({
               <button
                 data-modal-hide="defaultModal"
                 type="button"
-                className="text-white bg-red-600 hover:bg-red-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center"
+                className="text-white hover:bg-red-600 bg-red-700 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center"
                 onClick={handleDelete}
               >
                 Delete

diff --git a/src/pages/popup/components/home/detail/modals/LogoutConfirmationModal.tsx b/src/pages/popup/components/home/detail/modals/LogoutConfirmationModal.tsx
@@ -56,7 +56,7 @@ export default function LogoutConfirmationModal({
             <div className="flex items-center justify-end p-4 space-x-2 border-t border-gray-200 rounded-b dark:border-gray-600">
               <button
                 type="button"
-                className="text-white bg-french-blue hover:bg-french-blue/[0.75] focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center"
+                className="text-white hover:bg-french-blue bg-french-blue/[0.75] focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center"
                 onClick={logout}
               >
                 Logout