✨ ags(apps-window): new style for apps-window! it now looks more integrated to the shell design

ags/style/_apps-window.scss

@@ -5,7 +5,9 @@
 
 .apps-window-container {
   padding: 24px;
-  background: rgba(0, 0, 0, .2);
+  background: colors.$bg-translucent;
+  border-top-left-radius: 24px;
+  border-top-right-radius: 24px;
 
   & > entry {
     background: rgba(colors.$bg-primary, .4);
@@ -27,7 +29,6 @@
     padding: 16px 24px;
 
     & > flowboxchild {
-
       & > button {
         padding: 8px;
         border-radius: 24px;
@@ -39,6 +40,7 @@
         & label {
           margin-top: 6px;
           text-shadow: 1px 1px 1px rgba(colors.$bg-primary, .2);
+          font-weight: 500;
         }
       }
 

ags/style/_wal.scss

@@ -1,26 +1,26 @@
 // SCSS Variables
 // Generated by 'wal'
-$wallpaper: "/home/joaov/wallpapers/Frieren Underwater.jpg";
+$wallpaper: "/home/joaov/wallpapers/Frieren Night Film.jpeg";
 
 // Special
-$background: #0a1d30;
-$foreground: #c1c6cb;
-$cursor: #c1c6cb;
+$background: #16131b;
+$foreground: #c4c4c6;
+$cursor: #c4c4c6;
 
 // Colors
-$color0: #0a1d30;
-$color1: #13A9D8;
-$color2: #4EAED3;
-$color3: #2AC9EB;
-$color4: #97A0AB;
-$color5: #D1B8B5;
-$color6: #9CB6CD;
-$color7: #93989d;
-$color8: #606b76;
-$color9: #6eadc0;
-$color10: #8abacd;
-$color11: #84bdca;
-$color12: #9cb2d4;
-$color13: #e3c2bf;
-$color14: #afc8dd;
-$color15: #c1c6cb;
+$color0: #16131b;
+$color1: #5D6893;
+$color2: #96768D;
+$color3: #5E98BA;
+$color4: #6E9EC4;
+$color5: #A3969E;
+$color6: #BEB4BA;
+$color7: #96909b;
+$color8: #655d71;
+$color9: #7080c2;
+$color10: #c87fb3;
+$color11: #85b1cb;
+$color12: #93b5d0;
+$color13: #d297ba;
+$color14: #dfb4cf;
+$color15: #c4c4c6;

ags/window/AppsWindow.ts

@@ -2,6 +2,7 @@ import { GObject, Variable } from "astal";
 import { Astal, Gdk, Gtk, Widget } from "astal/gtk3";
 import { cleanExec, getAppIcon, getApps, getAstalApps } from "../scripts/apps";
 import AstalApps from "gi://AstalApps";
+import { BackgroundWindow } from "../widget/BackgroundWindow";
 
 const { TOP, LEFT, RIGHT, BOTTOM } = Astal.WindowAnchor;
 
@@ -105,6 +106,8 @@ export const AppsWindow = (mon: number): (Widget.Window) => {
         return button;
     }
 
+    const bgWindow = BackgroundWindow(null, () => window.close(), () => window.close());
+
     const window = new Widget.Window({
         namespace: "apps-window",
         layer: Astal.Layer.OVERLAY,
@@ -112,9 +115,9 @@ export const AppsWindow = (mon: number): (Widget.Window) => {
         anchor: TOP | LEFT | RIGHT | BOTTOM,
         keymode: Astal.Keymode.EXCLUSIVE,
         monitor: mon,
+        marginTop: 64,
         onDestroy: () => {
-            searchString.set("");
-            entry.text = "";
+            bgWindow.close();
             searchSubscription?.();
             flowboxConnections.map(id => flowbox.disconnect(id));
         },
@@ -153,12 +156,16 @@ export const AppsWindow = (mon: number): (Widget.Window) => {
                 orientation: Gtk.Orientation.VERTICAL,
                 children: [
                     entry,
-                    new Widget.Scrollable({
+                    new Widget.Box({
+                        className: "apps-area",
+                        child: new Widget.Scrollable({
                             vscroll: Gtk.PolicyType.AUTOMATIC,
                             hscroll: Gtk.PolicyType.NEVER,
+                            overlayScrolling: true,
                             expand: true,
                             child: flowbox
                         } as Widget.ScrollableProps)
+                    } as Widget.BoxProps)
                 ]
             } as Widget.BoxProps)
         } as Widget.EventBoxProps),