From f2ec6997affd53dccfdfab13f2d154b6265ef80e Mon Sep 17 00:00:00 2001
From: undefined <i@undefined.moe>
Date: Tue, 13 Dec 2022 13:39:53 +0800
Subject: [PATCH] ui: fix help-text display style

---
 .../autocomplete/autocomplete.page.styl       | 27 ++++++++++++++-----
 .../autocomplete/components/AutoComplete.tsx  |  2 +-
 2 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/packages/ui-default/components/autocomplete/autocomplete.page.styl b/packages/ui-default/components/autocomplete/autocomplete.page.styl
index ff150f4fe..46233b99f 100644
--- a/packages/ui-default/components/autocomplete/autocomplete.page.styl
+++ b/packages/ui-default/components/autocomplete/autocomplete.page.styl
@@ -2,23 +2,36 @@
   display: none !important
 
 .autocomplete-wrapper
-  width: 300px
   border: 1px solid #d9d9d9
-  background-color: #fff
   padding: 1px
   display: flex
   flex-wrap: wrap
   overflow-y: auto
 
+  form-styles()
+  background-color: $input-background-color
+  outline: $input-outline
+  transition: outline-color .2s, border-color .2s
+  transition-timing-function: ease-out-cubic
+
+  &:focus, &.focused
+    border-color: $input-focus-border-color
+    outline: $input-focus-outline
+    outline-offset: 0
+    box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2)
+
+  // Overwrite, for IE compatibility
+  &:read-only
+    outline: 0
+
+  &:disabled
+    opacity: 0.5
+
   &:hover
     border-color: #40a9ff
 
-  &.focused
-    border-color: #40a9ff
-    box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2)
-
   input
-    background-color: #fff
+    background-color: $input-background-color
     color: rgba(0,0,0,.85)
     height: 30px
     box-sizing: border-box
diff --git a/packages/ui-default/components/autocomplete/components/AutoComplete.tsx b/packages/ui-default/components/autocomplete/components/AutoComplete.tsx
index 88299462a..a3ce4ed7b 100644
--- a/packages/ui-default/components/autocomplete/components/AutoComplete.tsx
+++ b/packages/ui-default/components/autocomplete/components/AutoComplete.tsx
@@ -274,7 +274,7 @@ const AutoComplete = forwardRef(function Impl<T>(props: AutoCompleteProps<T>, re
   };
 
   return (
-    <div style={{ display: 'inline-block', width: '100%' }}>
+    <div style={{ display: 'inline-block', width: '100%', marginBottom: '1rem' }}>
       <div
         className={focused ? 'autocomplete-wrapper focused' : 'autocomplete-wrapper'}
         style={{ width, height }}