Merge pull request #469 from Sidekick-Poe/feature/focus-menu-outline

Remove outline on menu items and caret on keybind inputs
Sidekick-Poe · Jan 18, 2025 · fc2f984 · fc2f984
2 parents e3c5ea3 + bc4f510
commit fc2f984
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 58 deletions.
diff --git a/src/Sidekick.Common.Blazor/Settings/Components/KeybindEditor.razor b/src/Sidekick.Common.Blazor/Settings/Components/KeybindEditor.razor
@@ -2,6 +2,7 @@
            OnBlur="Blur"
            Label="@Label"
            Value="@InputValue"
+           AdditionalClasses="cursor-default caret-transparent"
            spellcheck="false">
     <AdornmentContent>
         <ButtonSecondary OnClick="Delete">@Resources["Reset"]</ButtonSecondary>

diff --git a/src/Sidekick.Common.Ui/Forms/FormInput.razor b/src/Sidekick.Common.Ui/Forms/FormInput.razor
@@ -13,7 +13,7 @@
            @onfocus="OnFocus"
            @onblur="OnBlur"
            value="@Value"
-           class="@UiClasses.FormInputClasses p-2 text-base min-w-0 grow"/>
+           class="@UiClasses.FormInputClasses p-2 text-base min-w-0 grow @AdditionalClasses" />
     @AdornmentContent
 </div>
 
@@ -40,6 +40,9 @@
     [Parameter(CaptureUnmatchedValues = true)]
     public Dictionary<string, object>? InputAttributes { get; set; }
 
+    [Parameter]
+    public string? AdditionalClasses { get; set; }
+
     private string Id { get; } = UiUtilities.GenerateId();
 
     private async Task OnChange(ChangeEventArgs args)

diff --git a/src/Sidekick.Common.Ui/Menu/MenuItem.razor b/src/Sidekick.Common.Ui/Menu/MenuItem.razor
@@ -1,5 +1,5 @@
 <a href="@Href"
-   class="@UiClasses.FocusClasses px-4 py-2 text-base font-medium tracking-wide text-white transition-colors duration-200 @(IsActive ? "bg-violet-700 hover:bg-violet-500" : "bg-transparent hover:text-violet-500")">
+   class="focus:outline-none focus:ring-inset focus:ring-2 focus:ring-offset-2 dark:focus:ring-violet-400 px-4 py-2 text-base font-medium tracking-wide text-white transition-colors duration-200 @(IsActive ? "bg-violet-700 hover:bg-violet-500" : "bg-transparent hover:text-violet-500")">
     @ChildContent
 </a>
 
@@ -13,8 +13,6 @@
     [Parameter]
     public RenderFragment? ChildContent { get; set; }
 
-    private bool IsActive => NavigationManager.ToAbsoluteUri(NavigationManager.Uri)
-                                              .AbsolutePath
-                             == Href;
+    private bool IsActive => NavigationManager.ToAbsoluteUri(NavigationManager.Uri).AbsolutePath == Href;
 
 }
diff --git a/src/Sidekick.Common.Ui/wwwroot/css/app.css b/src/Sidekick.Common.Ui/wwwroot/css/app.css
@@ -1500,11 +1500,6 @@ video {
   margin-bottom: 0px;
 }
 
-.my-1 {
-  margin-top: 0.25rem;
-  margin-bottom: 0.25rem;
-}
-
 .my-2 {
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
@@ -1536,10 +1531,6 @@ video {
   margin-bottom: 0.75rem;
 }
 
-.mb-4 {
-  margin-bottom: 1rem;
-}
-
 .ml-0 {
   margin-left: 0px;
 }
@@ -1564,22 +1555,10 @@ video {
   margin-left: auto;
 }
 
-.mr-1 {
-  margin-right: 0.25rem;
-}
-
 .mr-2 {
   margin-right: 0.5rem;
 }
 
-.mr-3 {
-  margin-right: 0.75rem;
-}
-
-.mr-4 {
-  margin-right: 1rem;
-}
-
 .mt-1 {
   margin-top: 0.25rem;
 }
@@ -1596,10 +1575,6 @@ video {
   margin-top: 1rem;
 }
 
-.mt-6 {
-  margin-top: 1.5rem;
-}
-
 .mt-9 {
   margin-top: 2.25rem;
 }
@@ -1940,10 +1915,6 @@ video {
   flex-grow: 1;
 }
 
-.flex-grow-0 {
-  flex-grow: 0;
-}
-
 .grow {
   flex-grow: 1;
 }
@@ -3332,10 +3303,6 @@ video {
   padding-bottom: 1rem;
 }
 
-.pb-0 {
-  padding-bottom: 0px;
-}
-
 .pb-2 {
   padding-bottom: 0.5rem;
 }
@@ -3352,10 +3319,6 @@ video {
   padding-bottom: 4px;
 }
 
-.pl-12 {
-  padding-left: 3rem;
-}
-
 .pl-2 {
   padding-left: 0.5rem;
 }
@@ -3372,22 +3335,6 @@ video {
   padding-right: 0.5rem;
 }
 
-.pr-4 {
-  padding-right: 1rem;
-}
-
-.pt-0 {
-  padding-top: 0px;
-}
-
-.pt-2 {
-  padding-top: 0.5rem;
-}
-
-.pt-4 {
-  padding-top: 1rem;
-}
-
 .pt-\[4px\] {
   padding-top: 4px;
 }
@@ -3806,6 +3753,10 @@ video {
   -moz-osx-font-smoothing: auto;
 }
 
+.caret-transparent {
+  caret-color: transparent;
+}
+
 .opacity-0 {
   opacity: 0;
 }
@@ -4304,10 +4255,18 @@ video {
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
 
+.focus\:ring-inset:focus {
+  --tw-ring-inset: inset;
+}
+
 .focus\:ring-offset-0:focus {
   --tw-ring-offset-width: 0px;
 }
 
+.focus\:ring-offset-2:focus {
+  --tw-ring-offset-width: 2px;
+}
+
 .focus\:hover\:text-center:hover:focus {
   text-align: center;
 }