From 0f1d1a673f3e4895963a2135e3d17d07447b1515 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Fri, 13 Oct 2023 11:20:56 +0300
Subject: [PATCH] Add glow image

---
 assets/styles/layout/_docsearch.scss     | 38 +++++++++---------------
 assets/styles/layout/_glow.scss          | 15 ++++++++++
 assets/styles/layout/_responsive.scss    |  1 -
 assets/styles/layout/_topbar.scss        |  4 +--
 assets/styles/layout/landing/_dark.scss  |  2 ++
 assets/styles/layout/landing/_light.scss |  2 ++
 assets/styles/layout/layout.scss         |  1 +
 layouts/AppTopBar.vue                    |  4 ++-
 8 files changed, 39 insertions(+), 28 deletions(-)
 create mode 100644 assets/styles/layout/_glow.scss

diff --git a/assets/styles/layout/_docsearch.scss b/assets/styles/layout/_docsearch.scss
index f239e6121..c587b182f 100644
--- a/assets/styles/layout/_docsearch.scss
+++ b/assets/styles/layout/_docsearch.scss
@@ -1,11 +1,11 @@
 .DocSearch-Button {
     border-radius: var(--border-radius);
-    width: 24rem;
+    border: 1px solid var(--surface-border);
+    height: 2rem;
+    background-color: var(--surface-card);
     margin: 0;
     transition: border-color .3s;
-    border: 1px solid transparent;
-    height: 2.5rem;
-    padding: 0 .75rem;
+    padding: 0 .5rem;
 
     &:hover {
         border-color: var(--primary-color);
@@ -17,8 +17,8 @@
     }
 
     .DocSearch-Search-Icon {
-        width: 1.25rem;
-        height: 1.25rem;
+        width: 1rem;
+        height: 1rem;
     }
 
     .DocSearch-Button-Keys {
@@ -26,7 +26,7 @@
         overflow: hidden;
         min-width: auto;
         height: 1.5rem;
-        background: var(--docsearch-key-gradient);
+        background: transparent;
         display: flex;
         align-items: center;
         justify-content: center;
@@ -48,7 +48,7 @@
                 justify-content: end;
                 font-size: 0.8rem;
                 font-weight: 700;
-                line-height: 13.5px;
+                line-height: normal;
                 svg{
                     height: 14.5px;
                 }
@@ -126,6 +126,12 @@
     color: var(--primary-color);
 }
 
+.DocSearch-Button-Placeholder {
+    text-align: center;
+    display: inline-block;
+    font-size: .875rem;
+}
+
 :root {
     --docsearch-searchbox-focus-background: var(--surface-card);
     --docsearch-text-color: var(--text-color);
@@ -144,19 +150,3 @@
     --docsearch-hit-active-color: var(--primary-color-text);
 }
 
-.DocSearch-Button-Placeholder {
-    text-align: center;
-    display: inline-block;
-}
-
-.layout-light {
-    .DocSearch-Button {
-        background: #edf0f3;
-    }
-}
-
-.layout-light {
-    .DocSearch-Dark {
-        background: var(--surface-100);
-    }
-}
\ No newline at end of file
diff --git a/assets/styles/layout/_glow.scss b/assets/styles/layout/_glow.scss
new file mode 100644
index 000000000..237d24ef6
--- /dev/null
+++ b/assets/styles/layout/_glow.scss
@@ -0,0 +1,15 @@
+.landing, .layout-wrapper {
+    &:before {
+        top: 0;
+        width: 100%;
+        height: 236px;
+        content: "";
+        display: block;
+        z-index: 0;
+        background-image: var(--glow-image);
+        position: fixed;
+        background-position: top;
+        background-repeat: no-repeat;
+        background-size: contain;
+    }
+}
\ No newline at end of file
diff --git a/assets/styles/layout/_responsive.scss b/assets/styles/layout/_responsive.scss
index c94568913..1e245b0cb 100644
--- a/assets/styles/layout/_responsive.scss
+++ b/assets/styles/layout/_responsive.scss
@@ -30,7 +30,6 @@
         }
 
         #docsearch {
-            margin-left: auto;
             margin-right: .5rem;
         }
 
diff --git a/assets/styles/layout/_topbar.scss b/assets/styles/layout/_topbar.scss
index 387c18d5c..84ce69f51 100644
--- a/assets/styles/layout/_topbar.scss
+++ b/assets/styles/layout/_topbar.scss
@@ -5,7 +5,7 @@
     width: calc(100% - var(--scrollbar-width, 0px));
     z-index: 1100;
     transition: background-color 1s;
-    border-bottom: 1px solid var(--surface-border);
+    border-bottom: 1px solid var(--topbar-border);
 
     &.layout-topbar-sticky {
         backdrop-filter: blur(8px);
@@ -37,7 +37,7 @@
             width: 25px;
         }
     }
-
+    
     .menu-button {
         display: none;
     }
diff --git a/assets/styles/layout/landing/_dark.scss b/assets/styles/layout/landing/_dark.scss
index 6f0cb6463..7a25ad83a 100644
--- a/assets/styles/layout/landing/_dark.scss
+++ b/assets/styles/layout/landing/_dark.scss
@@ -1,4 +1,6 @@
 .layout-dark {
+    --glow-image: url(https://www.primefaces.org/cdn/primevue/images/layout/top-pattern-light.png);
+    --topbar-border: var(--surface-border);
     --home-highlight-color:#10b981;
     --home-highlight-darker-color:#059669;
     --home-highlight-fore-color:#ffffff;
diff --git a/assets/styles/layout/landing/_light.scss b/assets/styles/layout/landing/_light.scss
index b05122dce..fea70b953 100644
--- a/assets/styles/layout/landing/_light.scss
+++ b/assets/styles/layout/landing/_light.scss
@@ -1,4 +1,6 @@
 .layout-light {
+    --glow-image: url(https://www.primefaces.org/cdn/primevue/images/layout/top-pattern-light.png);
+    --topbar-border: rgba(0,0,0,.05);
     --home-highlight-color:#10b981;
     --home-highlight-darker-color:#059669;
     --home-highlight-fore-color:#ffffff;
diff --git a/assets/styles/layout/layout.scss b/assets/styles/layout/layout.scss
index 409cea863..0a3624e8b 100644
--- a/assets/styles/layout/layout.scss
+++ b/assets/styles/layout/layout.scss
@@ -1,6 +1,7 @@
 @charset 'UTF-8';
 
 @import './_core';
+@import './_glow';
 @import './_topbar';
 @import './_sidebar';
 @import './_content';
diff --git a/layouts/AppTopBar.vue b/layouts/AppTopBar.vue
index f01bf70ac..be59b2828 100755
--- a/layouts/AppTopBar.vue
+++ b/layouts/AppTopBar.vue
@@ -59,9 +59,11 @@
                     </svg>
                 </PrimeVueNuxtLink>
             </div>
-            <div id="docsearch"></div>
 
             <ul class="flex list-none m-0 p-0 gap-2 align-items-center">
+                <li>
+                    <div id="docsearch"></div>
+                </li>
                 <li>
                     <a
                         href="https://github.com/primefaces/primevue"