[Glitch] Fix focus and hover styles in web UI

Port cfd50f30bb to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>

app/javascript/flavours/glitch/styles/components/columns.scss

@@ -346,7 +346,6 @@ $ui-header-height: 55px;
   position: relative;
   z-index: 2;
   outline: 0;
-  overflow: hidden;
 
   & > button {
     display: flex;
@@ -363,6 +362,10 @@ $ui-header-height: 55px;
     overflow: hidden;
     white-space: nowrap;
     flex: 1;
+
+    &:focus-visible {
+      outline: $ui-button-icon-focus-outline;
+    }
   }
 
   & > .column-header__back-button {
@@ -427,6 +430,10 @@ $ui-header-height: 55px;
   font-size: 16px;
   padding: 0 15px;
 
+  &:last-child {
+    border-start-end-radius: 4px;
+  }
+
   &:hover {
     color: lighten($darker-text-color, 7%);
   }

app/javascript/flavours/glitch/styles/components/compose_form.scss

@@ -526,7 +526,7 @@
 
 .privacy-dropdown__dropdown {
   border-radius: 4px;
-  box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4);
+  box-shadow: var(--dropdown-shadow);
   background: $simple-background-color;
   overflow: hidden;
   transform-origin: 50% 0;
@@ -603,7 +603,7 @@
 .language-dropdown {
   &__dropdown {
     background: $simple-background-color;
-    box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4);
+    box-shadow: var(--dropdown-shadow);
     border-radius: 4px;
     overflow: hidden;
     z-index: 2;

app/javascript/flavours/glitch/styles/components/emoji.scss

@@ -14,7 +14,7 @@
 .emoji-picker-dropdown__menu {
   background: $simple-background-color;
   position: relative;
-  box-shadow: 4px 4px 6px rgba($base-shadow-color, 0.4);
+  box-shadow: var(--dropdown-shadow);
   border-radius: 4px;
   margin-top: 5px;
   z-index: 2;
@@ -98,7 +98,7 @@
     }
   }
 
-  &:focus {
+  &:focus-visible {
     img {
       outline: $ui-button-icon-focus-outline;
     }

app/javascript/flavours/glitch/styles/components/misc.scss

@@ -202,8 +202,8 @@
   &:hover,
   &:active,
   &:focus {
-    color: lighten($action-button-color, 20%);
-    background-color: $ui-button-icon-hover-background-color;
+    color: lighten($action-button-color, 7%);
+    background-color: rgba($action-button-color, 0.15);
   }
 
   &:focus-visible {
@@ -236,7 +236,7 @@
     &:active,
     &:focus {
       color: darken($lighter-text-color, 7%);
-      background-color: $ui-button-icon-hover-background-color;
+      background-color: rgba($lighter-text-color, 0.15);
     }
 
     &:focus-visible {
@@ -251,6 +251,13 @@
     &.active {
       color: $highlight-text-color;
 
+      &:hover,
+      &:active,
+      &:focus {
+        color: $highlight-text-color;
+        background-color: transparent;
+      }
+
       &.disabled {
         color: lighten($highlight-text-color, 13%);
       }
@@ -293,16 +300,12 @@
   cursor: pointer;
   padding: 0 3px;
   white-space: nowrap;
-  transition: all 100ms ease-in;
-  transition-property: background-color, color;
 
   &:hover,
   &:active,
   &:focus {
     color: darken($lighter-text-color, 7%);
-    background-color: $ui-button-icon-hover-background-color;
-    transition: all 200ms ease-out;
-    transition-property: background-color, color;
+    background-color: rgba($lighter-text-color, 0.15);
   }
 
   &:focus {
@@ -317,6 +320,13 @@
 
   &.active {
     color: $highlight-text-color;
+
+    &:hover,
+    &:active,
+    &:focus {
+      color: $highlight-text-color;
+      background-color: transparent;
+    }
   }
 }
 
@@ -561,7 +571,7 @@ body > [data-popper-placement] {
     font-size: inherit;
     line-height: inherit;
 
-    &:focus {
+    &:focus-visible {
       outline: 1px dotted;
     }