[gnome-shell/wip/snwh/appgrid-regression-fixes] theme: Fixes to regressions in app grid

[Sam Hewitt <snwh src gnome org>]

commit bb0e3e40f23082831a5816e52b38b5e1a8523b3d
Author: Sam Hewitt <sam snwh org>
Date:   Tue Feb 15 12:30:51 2022 -0330

    theme: Fixes to regressions in app grid
    
    - fixes dash radii and spacing
    - fixes running dot indicator margins
    - fixes loss of mouse interaction below dash
    - fixes launcher icon size issues
    - fixes search padding & margin problems on low-resolution displays
    - fixes with inconsistent sizing in app folders
    - fixes app switcher hover state

 data/theme/gnome-shell-sass/_common.scss                |  1 +
 data/theme/gnome-shell-sass/_drawing.scss               | 11 ++++++-----
 data/theme/gnome-shell-sass/widgets/_app-grid.scss      | 17 ++++++-----------
 data/theme/gnome-shell-sass/widgets/_dash.scss          | 10 ++++++++--
 .../theme/gnome-shell-sass/widgets/_switcher-popup.scss |  3 ++-
 5 files changed, 23 insertions(+), 19 deletions(-)
---
diff --git a/data/theme/gnome-shell-sass/_common.scss b/data/theme/gnome-shell-sass/_common.scss
index f86de2053c..af6a05f2bb 100644
--- a/data/theme/gnome-shell-sass/_common.scss
+++ b/data/theme/gnome-shell-sass/_common.scss
@@ -84,6 +84,7 @@ stage {
 %tile {
   border-radius: $base_border_radius * 2; // 16px
   padding: $base_padding;
+  spacing: $base_padding;
   border: 2px solid transparent;
   transition-duration: 100ms;
   text-align: center;
diff --git a/data/theme/gnome-shell-sass/_drawing.scss b/data/theme/gnome-shell-sass/_drawing.scss
index 10c1c3f3fc..89bde8d2db 100644
--- a/data/theme/gnome-shell-sass/_drawing.scss
+++ b/data/theme/gnome-shell-sass/_drawing.scss
@@ -239,10 +239,11 @@ $button_bg_color: mix($tc, $c, 5%);
     background-color: transparentize($color, .84);
   }
   &:hover { background-color: transparentize($color, .9);}
-  &:selected, &:focus {
-    background-color: transparentize($color, .87);
-    &:hover { background-color: transparentize($color, .84);}
-    &:active { background-color: transparentize($color, .87);}
+  &:selected,
+  &:focus {
+    background-color:transparentize($color, .87);
+    &:hover { background-color:transparentize($color, .84);}
+    &:active { background-color:transparentize($color, .87);}
   }
   &:active { background-color: transparentize($color, .84);}
   &:outlined, &:checked {
@@ -268,7 +269,7 @@ $button_bg_color: mix($tc, $c, 5%);
 
   &:selected .overview-icon,
   &:focus .overview-icon {
-    background-color: transparentize($color, .87);
+    background-color: transparentize($color, .8);
     &:hover .overview-icon { background-color: transparentize($color, .84);}
     &:active .overview-icon { background-color: transparentize($color, .87);}
   }
diff --git a/data/theme/gnome-shell-sass/widgets/_app-grid.scss 
b/data/theme/gnome-shell-sass/widgets/_app-grid.scss
index 25e29ef648..c936e4b6d4 100644
--- a/data/theme/gnome-shell-sass/widgets/_app-grid.scss
+++ b/data/theme/gnome-shell-sass/widgets/_app-grid.scss
@@ -20,7 +20,7 @@ $app_icon_size: 96px;
 .app-well-app {
   @include overview_icon($osd_fg_color);
 
-  .overview-icon {padding: $base_padding*2;}
+  .overview-icon { padding: $base_padding*2;}
   .overview-icon.overview-icon-with-label {
     > StBoxLayout {
       spacing: $base_padding;
@@ -37,7 +37,6 @@ $app_icon_size: 96px;
 .app-folder-dialog {
   border-radius: $modal_radius*2;
   background-color: $dash_background_color;
-  padding: 12px 0px 12px 0px;
 
   & .folder-name-container {
     padding: 24px 36px 0;
@@ -54,15 +53,11 @@ $app_icon_size: 96px;
     & .folder-name-label { padding: 5px 7px; color: $osd_fg_color; }
 
     & .edit-folder-button {
-      @include button(undecorated);
+      @extend %button;
+      padding: 0;
       width: 36px;
       height: 36px;
-      border-radius: 18px;
-
-      &:focus {@include button(focus);}
-      &:hover {@include button(hover);}
-      &:active {@include button(active);}
-
+      border-radius: 99px;
       & > StIcon { icon-size: $base_icon_size }
     }
   }
@@ -83,8 +78,8 @@ $app_icon_size: 96px;
 
 .app-folder-dialog-container {
   padding: $base_padding*2;
-  width: 620px;
-  height: 620px;
+  width: 640px;
+  height: 640px;
 }
 
 // Running app indicator (also shown in dash)
diff --git a/data/theme/gnome-shell-sass/widgets/_dash.scss b/data/theme/gnome-shell-sass/widgets/_dash.scss
index 25755e73d7..8f5d5f939b 100644
--- a/data/theme/gnome-shell-sass/widgets/_dash.scss
+++ b/data/theme/gnome-shell-sass/widgets/_dash.scss
@@ -8,7 +8,7 @@ $dash_border_radius: $modal_radius + $dash_padding;
 // container for the dash
 #dash {
   @extend %caption;
-  margin: $base_margin * 3;
+  margin-top: $dash_padding;
 
   .placeholder {
     // background-image: url("resource:///org/gnome/shell/theme/dash-placeholder.svg");
@@ -24,7 +24,7 @@ $dash_border_radius: $modal_radius + $dash_padding;
 
   // Running app indicator (also shown in app grid)
   .app-well-app-running-dot {
-    margin-bottom: 15px; // hardcoded
+    margin-bottom: 14px; // hardcoded
   }
 }
 
@@ -34,6 +34,7 @@ $dash_border_radius: $modal_radius + $dash_padding;
   border-radius: $dash_border_radius;
   padding: $dash_padding;
   spacing: $base_padding;
+  margin-bottom: $dash_padding;
 }
 
 // items on the dash
@@ -49,6 +50,10 @@ $dash_border_radius: $modal_radius + $dash_padding;
 
   // show apps button
   .show-apps { @include overview_icon($osd_fg_color);}
+
+  .show-apps, .app-well-app {
+    padding-bottom: $dash_padding;
+  }
 }
 
 // separator between favourites and running apps
@@ -56,6 +61,7 @@ $dash_border_radius: $modal_radius + $dash_padding;
   width: 1px;
   margin: 0 $base_margin;
   background-color: $borders_color;
+  margin-bottom: $dash_padding;
 }
 
 // OSD Tooltip
diff --git a/data/theme/gnome-shell-sass/widgets/_switcher-popup.scss 
b/data/theme/gnome-shell-sass/widgets/_switcher-popup.scss
index 892d3351d5..cec6c9aab8 100644
--- a/data/theme/gnome-shell-sass/widgets/_switcher-popup.scss
+++ b/data/theme/gnome-shell-sass/widgets/_switcher-popup.scss
@@ -25,8 +25,9 @@ $switcher_border_radius: $modal_radius + 8px;
 
   // each item in the list
   .item-box {
-
     @include tile_button($osd_fg_color);
+    // override over style so mouse doesn't steal focus
+    &:hover {background: none;}
   }
 
   .separator {