Merge pull request #11 from a-company-jp/feature/ui

💄 uiの改善
a-company-jp · Apr 14, 2024 · 84d1095 · 84d1095
2 parents 964f0e0 + e435224
commit 84d1095
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 9 deletions.
diff --git a/src/app/components/GenerateLgtmModal.tsx b/src/app/components/GenerateLgtmModal.tsx
@@ -56,10 +56,10 @@ const GenerateLgtmModal = ({ setShowModal }: Props) => {
         {!uploadedImage ? (
           <div
             {...getRootProps()}
-            className="border-dashed border-4 border-gray-400 p-8 rounded-lg text-center cursor-pointer"
+            className="border-dashed border-4 border-cyan-500 p-8 rounded-lg text-center cursor-pointer"
           >
             <input {...getInputProps()} />
-            <p>Drag & drop a file here, or click to select file</p>
+            <p className="text-gray-600">Drag & drop a file here, or click to select file</p>
           </div>
         ) : (
           <>
@@ -73,13 +73,13 @@ const GenerateLgtmModal = ({ setShowModal }: Props) => {
                 <div className="w-[60%] mt-2 flex justify-between">
                   <button
                     onClick={handleDelete}
-                    className="bg-red-500 text-white py-2 px-4 rounded hover:bg-red-600"
+                    className="bg-red-500 text-white py-2 px-4 rounded hover:bg-red-600 transition-colors"
                   >
                     Delete
                   </button>
                   <button
                     onClick={handleSubmit}
-                    className="bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600"
+                    className="bg-blue-500  text-white py-2 px-4 rounded hover:bg-blue-600 transition-colors"
                   >
                     Submit
                   </button>

diff --git a/src/app/components/LgtmItem.tsx b/src/app/components/LgtmItem.tsx
@@ -25,7 +25,7 @@ const LgtmItem = ({ lgtm }: Props) => {
         <img
           src={lgtm.url}
           alt=""
-          className="inset-0 h-full w-full group-hover:opacity-20 rounded-xl"
+          className="inset-0 h-full w-full group-hover:opacity-20 rounded-xl transition-opacity"
         />
         {isCopying ? (
           <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 flex items-center">
@@ -34,7 +34,7 @@ const LgtmItem = ({ lgtm }: Props) => {
           </div>
         ) : (
           <FaRegCopy
-            className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 opacity-0 group-hover:opacity-75"
+            className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 opacity-0 group-hover:opacity-75 transition-opacity"
             color=""
             size={35}
           />

diff --git a/src/popup/Popup.tsx b/src/popup/Popup.tsx
@@ -12,9 +12,12 @@ const Popup = () => {
 
   return (
     <>
-      <div className="p-4 z-[999] flex justify-between bg-white outline sticky top-0">
-        <p className="text-2xl font-bold">LGTM Generator</p>
-        <button onClick={openModal} className="p-2 text-sm outline rounded hover:bg-gray-100">
+      <div className="p-4 z-[999] flex justify-between bg-white shadow-xl sticky top-0 bg-gradient-to-r from-cyan-500 to-blue-500">
+        <p className="text-2xl font-bold text-white outline-gray">LGTM Generator</p>
+        <button
+          onClick={openModal}
+          className="p-2 text-sm outline outline-gray-300 text-white rounded hover:bg-blue-400 transition-colors"
+        >
           + Generate
         </button>
       </div>