From 36931240430dbb8fe9e22a4c8b767436a7490f3c Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Fri, 16 Jun 2023 16:18:01 -0700
Subject: [PATCH] Style updates

---
 components/common/Button/index.scss      |  2 +-
 components/common/Popover/index.scss     |  2 +-
 components/common/Select/index.scss      |  6 +++---
 components/raids/RaidCombobox/index.scss | 20 +++++++++++++++++++-
 styles/globals.scss                      |  6 ++++++
 5 files changed, 30 insertions(+), 6 deletions(-)

diff --git a/components/common/Button/index.scss b/components/common/Button/index.scss
index ce7399b7..ac4d42d0 100644
--- a/components/common/Button/index.scss
+++ b/components/common/Button/index.scss
@@ -1,7 +1,7 @@
 .Button {
   align-items: center;
   background: var(--button-bg);
-  border: none;
+  border: 2px solid transparent;
   border-radius: $input-corner;
   color: var(--button-text);
   display: inline-flex;
diff --git a/components/common/Popover/index.scss b/components/common/Popover/index.scss
index 73dc61d3..6664eef6 100644
--- a/components/common/Popover/index.scss
+++ b/components/common/Popover/index.scss
@@ -5,10 +5,10 @@
   border: 0.5px solid rgba(0, 0, 0, 0.18);
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.24);
   outline: none;
-  overflow: hidden;
   padding: $unit;
   transform-origin: var(--radix-popover-content-transform-origin);
   width: var(--radix-popover-trigger-width);
+  min-width: 440px;
   z-index: 5;
 
   &.Flush {
diff --git a/components/common/Select/index.scss b/components/common/Select/index.scss
index b0d2566f..170dba71 100644
--- a/components/common/Select/index.scss
+++ b/components/common/Select/index.scss
@@ -2,7 +2,7 @@
   align-items: center;
   background-color: var(--input-bg);
   border-radius: $input-corner;
-  border: none;
+  border: 2px solid transparent;
   display: flex;
   gap: $unit;
   padding: ($unit * 1.5) $unit-2x;
@@ -73,13 +73,13 @@
 }
 
 .Select {
-  background: var(--select-bg);
+  background: var(--dialog-bg);
   border-radius: $card-corner;
   border: $hover-stroke;
   box-shadow: $hover-shadow;
   padding: 0 $unit;
   z-index: 40;
-
+  min-width: var(--radix-select-trigger-width);
   .Scroll.Up,
   .Scroll.Down {
     padding: $unit 0;
diff --git a/components/raids/RaidCombobox/index.scss b/components/raids/RaidCombobox/index.scss
index 0ccd0de1..38851685 100644
--- a/components/raids/RaidCombobox/index.scss
+++ b/components/raids/RaidCombobox/index.scss
@@ -7,6 +7,7 @@
   .Value {
     display: flex;
     gap: $unit-half;
+    width: 100%;
 
     .Info {
       display: flex;
@@ -65,6 +66,8 @@
 
   .Header {
     background: var(--dialog-bg);
+    border-top-left-radius: $card-corner;
+    border-top-right-radius: $card-corner;
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
@@ -72,7 +75,7 @@
     padding: $unit;
     width: 100%;
 
-    .Button {
+    .Clear.Button {
       background: none;
       padding: ($unit * 0.75) $unit-half $unit-half;
       display: none;
@@ -119,6 +122,8 @@
   }
 
   .Raids {
+    border-bottom-left-radius: $card-corner;
+    border-bottom-right-radius: $card-corner;
     height: 40vh;
     overflow-y: scroll;
     padding: 0 $unit;
@@ -169,3 +174,16 @@
     }
   }
 }
+.Filters .SelectTrigger.Raid {
+  & > span {
+    overflow: hidden;
+  }
+
+  .Raid {
+    display: block;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    width: 100%;
+  }
+}
diff --git a/styles/globals.scss b/styles/globals.scss
index ff42b9fd..a06cb236 100644
--- a/styles/globals.scss
+++ b/styles/globals.scss
@@ -66,11 +66,17 @@ a {
 button,
 input,
 textarea {
+  border: 2px solid transparent;
   font-family: system-ui, -apple-system, 'Helvetica Neue', Helvetica, Arial,
     sans-serif;
   font-size: $font-regular;
 }
 
+button:focus-visible {
+  border: 2px solid $blue;
+  outline: none;
+}
+
 h1,
 h2,
 h3,