Fixed text-overflow & add hover effects

inciner8r · Mar 26, 2023 · 05b43da · 05b43da
1 parent b8d2279
commit 05b43da
Show file tree

Hide file tree

Showing 4 changed files with 11,291 additions and 16,580 deletions.
diff --git a/popup/src/App.css b/popup/src/App.css
@@ -1,38 +1,36 @@
-.App {
+.fill-btn {
+  border-radius: 4px;
+  background-color: #496BE1;
+  border: none;
+  color: #FFFFFF;
   text-align: center;
+  font-size: 20px;
+  width: 70px;
+  transition: all 0.5s;
+  cursor: pointer;
 }
 
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
+.fill-btn .fill-btn-txt {
+  cursor: pointer;
+  display: inline-block;
+  position: relative;
+  transition: 0.5s;
 }
 
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
+.fill-btn .fill-btn-txt:after {
+  content: '\00bb';
+  position: absolute;
+  opacity: 0;
+  top: 0;
+  right: -20px;
+  transition: 0.5s;
 }
 
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
+.fill-btn:hover .fill-btn-txt {
+  padding-right: 25px;
 }
 
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
+.fill-btn:hover .fill-btn-txt:after {
+  opacity: 1;
+  right: 0;
+}
diff --git a/popup/src/pages/my-passwords/index.tsx b/popup/src/pages/my-passwords/index.tsx
@@ -35,23 +35,27 @@ const MyPasswords = () => {
       <div className="py-5">
         <h1 className="text-2xl font-bold ml-4">PolyPass</h1>
 
-        <hr className="border-gray-300 mx-3" />
+        <hr className="border-gray-300 mx-3 mt-5" />
       </div>
       {AllData.map((item) => (
-        <div className="flex justify-around py-5" key={item.data["id"]}>
+        <div className="flex justify-around pb-5" key={item.data["id"]}>
           <div>
             <div className="inline-block ml-4">
-              <span className="text-lg font-medium">{item.data["url"]}</span>{" "}
+              <p className="text-lg inline-block font-medium w-28 whitespace-nowrap overflow-hidden text-ellipsis">
+                {item.data["url"]}
+              </p>{" "}
               <br />
-              <span className="text-gray-700">{item.data["username"]}</span>
+              <p className="text-gray-700 inline-block w-28 whitespace-nowrap overflow-hidden text-ellipsis">
+                {item.data["username"]}
+              </p>
             </div>
           </div>
 
           <button
-            className="bg-[#496BE1] text-white w-16 font-medium rounded-3xl"
+            className="fill-btn"
             onClick={() => navigateDetails(item.data["id"])}
           >
-            Fill
+            <span className="fill-btn-txt">Fill </span>
           </button>
         </div>
       ))}