Added shadows to the Bar, Menus, OSD and Notifications. (#777)

* Added shadows to the Bar, Menus and notifications.

* Add OSD shadows

src/components/menus/shared/dropdown/index.tsx

@@ -3,7 +3,7 @@ import { DropdownMenuProps } from 'src/lib/types/dropdownmenu';
 import { BarEventMargins } from './eventBoxes/index';
 import { globalEventBoxes } from 'src/globals/dropdown';
 import { bind } from 'astal';
-import { App, Astal, Gdk } from 'astal/gtk3';
+import { App, Astal, Gdk, Gtk } from 'astal/gtk3';
 import { Revealer } from 'astal/gtk3/widget';
 import { locationMap } from 'src/lib/types/defaults/bar';
 
@@ -88,7 +88,7 @@ export default ({
                                 transitionType={transition}
                                 transitionDuration={bind(options.menus.transitionTime)}
                             >
-                                <box className="dropdown-menu-container" canFocus>
+                                <box className="dropdown-content" halign={Gtk.Align.CENTER} expand canFocus>
                                     {child}
                                 </box>
                             </revealer>

src/components/settings/pages/config/bar/index.tsx

@@ -1,7 +1,7 @@
-import { Option } from 'src/components/settings/shared/Option';
 import { Header } from 'src/components/settings/shared/Header';
 import options from 'src/options';
 import { Gtk } from 'astal/gtk3';
+import { Option } from 'src/components/settings/shared/Option';
 
 export const BarSettings = (): JSX.Element => {
     return (
@@ -53,6 +53,18 @@ export const BarSettings = (): JSX.Element => {
                     enums={['none', 'full', 'top', 'right', 'bottom', 'left', 'horizontal', 'vertical']}
                 />
                 <Option opt={options.theme.bar.border.width} title="Bar Border Width" type="string" />
+                <Option
+                    opt={options.theme.bar.shadow}
+                    title="Bar Shadow"
+                    subtitle="Requires that sufficient margins have been set to house the shadow."
+                    type="string"
+                />
+                <Option
+                    opt={options.theme.bar.shadowMargins}
+                    title="Bar Shadow Margins"
+                    subtitle="Margins count mouse events as clicks 'inside' the menu."
+                    type="string"
+                />
                 <Option
                     opt={options.theme.bar.border_radius}
                     title="Border Radius"

src/components/settings/pages/config/general/index.tsx

@@ -65,6 +65,18 @@ export const BarGeneral = (): JSX.Element => {
                     max={10000}
                     increment={25}
                 />
+                <Option
+                    opt={options.theme.bar.menus.shadow}
+                    title="Menu Shadow"
+                    subtitle="Requires that sufficient margins have been set to house the shadow."
+                    type="string"
+                />
+                <Option
+                    opt={options.theme.bar.menus.shadowMargins}
+                    title="Menu Shadow Margins"
+                    subtitle="Margins count mouse events as clicks 'inside' the menu."
+                    type="string"
+                />
 
                 <Header title="Scaling" />
                 <Option

src/components/settings/pages/config/notifications/index.tsx

@@ -22,6 +22,17 @@ export const NotificationSettings = (): JSX.Element => {
                     enums={['top left', 'top', 'top right', 'right', 'bottom right', 'bottom', 'bottom left', 'left']}
                 />
                 <Option opt={options.theme.notification.border_radius} title="Border Radius" type="string" />
+                <Option
+                    opt={options.theme.notification.shadow}
+                    title="Notification Shadow"
+                    subtitle="Requires that sufficient margins have been set to house the shadow."
+                    type="string"
+                />
+                <Option
+                    opt={options.theme.notification.shadowMargins}
+                    title="Notification Shadow Margins"
+                    type="string"
+                />
                 <Option
                     opt={options.notifications.monitor}
                     title="Monitor"

src/components/settings/pages/config/osd/index.tsx

@@ -48,6 +48,13 @@ export const OSDSettings = (): JSX.Element => {
                     subtitle="Format: top right bottom left"
                     type="string"
                 />
+
+                <Option
+                    opt={options.theme.osd.shadow}
+                    title="OSD Shadow"
+                    subtitle="Requires that sufficient margins have been set to house the shadow."
+                    type="string"
+                />
                 <Option opt={options.theme.osd.border.size} title="Border Size" type="string" />
                 <Option opt={options.theme.osd.radius} title="Radius" subtitle="Radius of the OSD" type="string" />
                 <Option

src/options.ts

@@ -120,6 +120,8 @@ const options = mkOptions(CONFIG, {
             label: opt(colors.lavender),
             border: opt(secondary_colors.surface0),
             border_radius: opt('0.6em'),
+            shadow: opt('0px 1px 2px 1px #16161e'),
+            shadowMargins: opt('4px 4px'),
             time: opt(secondary_colors.overlay1),
             text: opt(colors.text),
             labelicon: opt(colors.lavender),
@@ -148,7 +150,8 @@ const options = mkOptions(CONFIG, {
             monitor: opt(0),
             active_monitor: opt(true),
             radius: opt('0.4em'),
-            margins: opt('0px 5px 0px 0px'),
+            margins: opt('7px 7px 7px 7px'),
+            shadow: opt('0px 0px 3px 2px #16161e'),
             location: opt<OSDAnchor>('right'),
             muted_zero: opt(false),
         },
@@ -159,6 +162,8 @@ const options = mkOptions(CONFIG, {
             layer: opt<WindowLayer>('top'),
             margin_top: opt('0.5em'),
             opacity: opt(100),
+            shadow: opt('0px 1px 2px 1px #16161e'),
+            shadowMargins: opt('0px 0px 4px 0px'),
             margin_bottom: opt('0em'),
             margin_sides: opt('0.5em'),
             border_radius: opt('0.4em'),
@@ -431,6 +436,8 @@ const options = mkOptions(CONFIG, {
                     radius: opt('0.7em'),
                     color: opt(colors.surface0),
                 },
+                shadow: opt('0px 0px 3px 1px #16161e'),
+                shadowMargins: opt('5px 5px'),
                 text: opt(colors.text),
                 dimtext: opt(colors.surface2),
                 feinttext: opt(colors.surface0),

src/scss/style/bar/bar.scss

@@ -16,6 +16,9 @@
         background: if($bar-transparent, transparent, transparentize($bar-background, $transparency-value));
         border-radius: if($bar-floating, $bar-border_radius, 0em);
 
+        margin: $bar-shadowMargins;
+        box-shadow: $bar-shadow;
+
         &.withBorder {
             border-top: if(
                 $bar-border_location == 'top' or $bar-border_location == 'horizontal' or $bar-border_location == 'full',

src/scss/style/menus/calendar.scss

@@ -10,7 +10,6 @@
     border: $bar-menus-border-size solid
         if($bar-menus-monochrome, $bar-menus-border-color, $bar-menus-menu-clock-border-color);
     border-radius: $bar-menus-border-radius;
-    margin-right: 0.5em;
     opacity: $bar-menus-opacity * 0.01;
 }
 

src/scss/style/menus/dashboard.scss

@@ -3,7 +3,6 @@
 }
 
 .dashboard-content-items {
-    margin-left: 0.5em;
     min-width: 28.5em;
     background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-menu-dashboard-background-color);
     border: $bar-menus-border-size solid

src/scss/style/menus/menu.scss

@@ -226,6 +226,12 @@
     min-height: 10em;
 }
 
+.dropdown-content {
+    border-radius: $bar-menus-border-radius;
+    margin: $bar-menus-shadowMargins;
+    box-shadow: $bar-menus-shadow;
+}
+
 .menu-label {
     margin: 0.5em 1em;
     color: $sky;

src/scss/style/menus/notifications.scss

@@ -10,7 +10,6 @@
     border: $bar-menus-border-size solid
         if($bar-menus-monochrome, $bar-menus-border-color, $bar-menus-menu-notifications-border);
     border-radius: $bar-menus-border-radius;
-    margin-right: 0.45em;
     opacity: $bar-menus-opacity * 0.01;
 
     .window-content.notificationsmenu-window {

src/scss/style/notifications/popups.scss

@@ -7,6 +7,8 @@
     min-height: 4em;
     border-radius: $notification-border_radius;
     opacity: $notification-opacity * 0.01;
+    margin: $notification-shadowMargins;
+    box-shadow: $notification-shadow;
 }
 
 .notification-card-container {

src/scss/style/osd/index.scss

@@ -6,6 +6,8 @@
     .osd-container {
         margin: $osd-margins;
         opacity: $osd-opacity * 0.01;
+        box-shadow: $osd-shadow;
+        border-radius: $osd-radius;
     }
 
     .osd-label-container {