chore: finalize style

NodeSecure · Nov 30, 2024 · 3d137ca · 3d137ca
1 parent a596d39
commit 3d137ca
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 16 deletions.
diff --git a/public/components/searchbar/searchbar.css b/public/components/searchbar/searchbar.css
@@ -217,7 +217,7 @@ div.search-result-pannel .package+.package {
   display: flex;
   align-items: center;
   padding: 0 10px;
-  background: rgb(88, 78, 158);
+  font-family: "Roboto";
 }
 
 #search-nav .packages {
@@ -234,9 +234,11 @@ div.search-result-pannel .package+.package {
   font-family: "mononoki";
   display: flex;
   align-items: center;
-  background: linear-gradient(to right, rgba(55, 34, 175, 1) 1%, rgba(90, 68, 218, 1) 100%);
+  background: linear-gradient(to right,  rgba(55,34,175,1) 0%,rgba(87,74,173,1) 50%,rgb(59, 110, 205) 100%);
   padding: 0 10px;
   border-right: 2px solid #0f041a;
+  text-shadow: 1px 1px 10px #000;
+  color: #def7ff;
 }
 
 #search-nav .packages>.package>* {
@@ -249,17 +251,29 @@ div.search-result-pannel .package+.package {
 
 #search-nav .packages>.package:not(.active):hover {
   background: linear-gradient(to right, rgba(55, 34, 175, 1) 1%, rgb(68, 121, 218) 100%);
+  color: #defff9;
   cursor: pointer;
 }
 
 #search-nav .packages>.package.active {
-  background: linear-gradient(to right, rgba(55, 34, 175, 1) 1%, rgb(218, 68, 111) 100%);
+  background: linear-gradient(to right,  rgba(55,34,175,1) 0%,rgba(87,74,173,1) 50%,rgb(59, 110, 205) 100%);
 }
 
 #search-nav .packages>.package.active>.remove {
   display: block;
 }
 
+#search-nav .packages>.package>b{
+  font-weight: bold;
+  font-size: 12px;
+  margin-left: 5px;
+  background: var(--secondary-darker);
+  padding: 3px 5px;
+  border-radius: 2px;
+  font-family: "Roboto";
+  letter-spacing: 1px;
+}
+
 #search-nav .add {
   height: inherit;
   color: white;
@@ -269,10 +283,12 @@ div.search-result-pannel .package+.package {
   cursor: pointer;
   padding: 0 7px;
   border-right: 2px solid #0f041a;
+  transition: 0.5s all ease;
+  color: #def7ff;
 }
 
 #search-nav .add:hover {
-  background: #3e93e7;
+  background: #1566b6;
   cursor: pointer;
 }
 
@@ -286,9 +302,16 @@ div.search-result-pannel .package+.package {
   background: transparent;
   position: relative;
   cursor: pointer;
-  color: white;
-  background: rgba(162, 26, 13, 0.774);
+  color: #fff5dc;
+  background: #ff3434e2;
   font-family: "mononoki";
   margin-left: 10px;
-  border-radius: 50%;
+  border-radius: 2px;
+  text-shadow: 1px 1px 10px #000;
+  font-weight: bold;
+}
+
+#search-nav button.remove:hover {
+  cursor: pointer;
+  background: #ff5353e2;
 }
diff --git a/public/components/views/search/search.css b/public/components/views/search/search.css
@@ -49,8 +49,9 @@
   max-height: calc(100vh - 340px);
   overflow-y: auto;
   margin-top: 10px;
-  border-radius: 0 0 10px 10px;
+  border-radius: 4px;
   width: 100%;
+  overflow: hidden;
 }
 
 .result-container::-webkit-scrollbar {
@@ -108,14 +109,23 @@
   margin: auto;
   padding: 10px;
   border-radius: 4px;
-  background: white;
-  border: 2px solid var(--primary);
+  background: radial-gradient(ellipse at center, rgba(242, 245, 246, 1) 0%, rgba(227, 234, 237, 1) 37%, rgba(200, 215, 220, 1) 100%);
+  box-shadow: 2px 2px 20px #3722af1f;
+}
+
+.form-group>input,
+.form-group>input::placeholder,
+.form-group>input:-webkit-autofill {
+  background-color: transparent;
+  font-family: "mononoki" !important;
+  color: var(--primary-lighter) !important;
+  font-style: normal !important;
 }
 
 #search--view .icon-search {
   filter: invert(64%) sepia(100%) saturate(2094%) hue-rotate(241deg) brightness(67%) contrast(114%);
-  max-width: 16px;
   margin-right: 10px;
+  font-size: 20px;
 }
 
 .scan-info {
@@ -148,13 +158,15 @@ input:-webkit-autofill {
   align-items: flex-start;
   padding-left: 5px;
   width: 100%;
+  border-radius: 4px;
 }
 
 .package-result .description {
   font-size: 14px;
   color: rgb(78, 76, 76);
   margin-top: 5px;
   margin-bottom: 8px;
+  line-height: 20px;
 }
 
 .cache-packages {

diff --git a/public/core/search-nav.js b/public/core/search-nav.js
@@ -1,5 +1,5 @@
 // Import Internal Dependencies
-import { createDOMElement } from "../common/utils";
+import { createDOMElement, parseNpmSpec } from "../common/utils";
 import { SearchBar } from "../components/searchbar/searchbar";
 
 // CONSTANTS
@@ -17,13 +17,19 @@ export function initSearchNav(data, nsn, secureDataSet) {
 
   for (const pkg of pkgs) {
     // Initialize Search nav
-    const pkgElement = document.createElement("div");
-    pkgElement.classList.add("package");
+    const { name, version } = parseNpmSpec(pkg);
+
+    const pkgElement = createDOMElement("div", {
+      classList: ["package"],
+      childs: [
+        createDOMElement("p", { text: name }),
+        createDOMElement("b", { text: `v${version}` })
+      ]
+    });
     if (pkg === data.current) {
       window.activePackage = pkg;
       pkgElement.classList.add("active");
     }
-    pkgElement.appendChild(createDOMElement("p", { text: pkg }));
     pkgElement.addEventListener("click", () => {
       if (window.activePackage !== pkg) {
         window.socket.send(JSON.stringify({ pkg, action: "SEARCH" }));

diff --git a/views/index.html b/views/index.html
@@ -172,7 +172,7 @@
         <form>
           <div class="form-group">
             <i class="icon-search"></i>
-            <input type="text" id="package" name="package" placeholder="fastify, express..." required>
+            <input type="text" id="package" name="package" placeholder="fastify, express..." autocomplete="off" required>
           </div>
         </form>
         <div class="cache-packages">