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

[Sam Hewitt <snwh src gnome org>]

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

    theme: Fixes to regressions in app grid

 data/theme/gnome-shell-sass/_common.scss                |  1 +
 data/theme/gnome-shell-sass/_drawing.scss               | 17 ++++++++++-------
 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 |  1 -
 5 files changed, 25 insertions(+), 21 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..1cd7e9a8f5 100644
--- a/data/theme/gnome-shell-sass/_drawing.scss
+++ b/data/theme/gnome-shell-sass/_drawing.scss
@@ -239,10 +239,12 @@ $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: mix(transparentize($selected_bg_color, 0.5), transparentize($color, .87), 50%);
+    border-color: transparentize($selected_bg_color, 0.5);
+    &:hover { background-color: mix(transparentize($selected_bg_color, 0.5), transparentize($color, .84), 
50%);}
+    &:active { background-color: mix(transparentize($selected_bg_color, 0.5), transparentize($color, .87), 
50%);}
   }
   &:active { background-color: transparentize($color, .84);}
   &:outlined, &:checked {
@@ -268,9 +270,10 @@ $button_bg_color: mix($tc, $c, 5%);
 
   &:selected .overview-icon,
   &:focus .overview-icon {
-    background-color: transparentize($color, .87);
-    &:hover .overview-icon { background-color: transparentize($color, .84);}
-    &:active .overview-icon { background-color: transparentize($color, .87);}
+    background-color: mix(transparentize($selected_bg_color, 0.5), transparentize($color, .87), 50%);
+    border-color: transparentize($selected_bg_color, 0.5);
+    &:hover .overview-icon { background-color: mix(transparentize($selected_bg_color, 0.5), 
transparentize($color, .84), 50%);}
+    &:active .overview-icon { background-color: mix(transparentize($selected_bg_color, 0.5), 
transparentize($color, .87), 50%);}
   }
   &:active .overview-icon { background-color: transparentize($color, .84);}
   &:outlined .overview-icon,
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..1b03c9d050 100644
--- a/data/theme/gnome-shell-sass/widgets/_switcher-popup.scss
+++ b/data/theme/gnome-shell-sass/widgets/_switcher-popup.scss
@@ -25,7 +25,6 @@ $switcher_border_radius: $modal_radius + 8px;
 
   // each item in the list
   .item-box {
-
     @include tile_button($osd_fg_color);
   }