Fix: UI/UX issues on components (#59)

* Fix combobox issues

* Change unchecked tab color

* Update tab indicator styles for vertical alignment

* enhance font smoothing

* Add font variation settings for improved typography

Author: mohdsayed

packages/frappe-ui-react/src/components/combobox/combobox.tsx

@@ -38,13 +38,17 @@ export const Combobox: React.FC<ComboboxProps> = ({
     return flat;
   }, [options]);
 
+  // For filtering/search
+  const [query, setQuery] = useState("");
+
   const selectedOption = useMemo(() => {
     if (!value) return null;
-    return allOptionsFlat.find((opt) => getValue(opt) === value) ?? null;
-  }, [value, allOptionsFlat]);
 
-  // For filtering/search
-  const [query, setQuery] = useState("");
+    const opt = allOptionsFlat.find((opt) => getValue(opt) === value) ?? null;
+
+    setQuery(opt ? getLabel(opt) : "");
+    return opt;
+  }, [value, allOptionsFlat]);
 
   const filteredOptions = useMemo(() => {
     if (!query) return options;
@@ -105,9 +109,9 @@ export const Combobox: React.FC<ComboboxProps> = ({
           )}
           <ComboboxInput
             className={`
-              w-full border border-surface-gray-2 rounded
+              w-full bg-surface-gray-2 border border-surface-gray-2 rounded
               ${selectedOption && getIcon(selectedOption) ? "pl-8" : "pl-2"}
-              pr-2 py-1 min-h-[25px] text-base bg-surface-white
+              pr-2 py-1 min-h-[25px] text-base
               placeholder-ink-gray-4 text-ink-gray-8
               outline-none focus:border-outline-gray-4 focus:ring-2 focus:ring-outline-gray-3
               transition-colors
@@ -144,7 +148,7 @@ export const Combobox: React.FC<ComboboxProps> = ({
           {filteredOptions.map((opt) =>
             typeof opt === "object" && "group" in opt ? (
               <div key={opt.group}>
-                <div className="px-2 py-1 text-xs text-ink-gray-5 font-semibold bg-surface-gray-2">
+                <div className="p-2 text-xs text-ink-gray-5 font-semibold">
                   {opt.group}
                 </div>
                 {opt.options.map((option) => (
@@ -167,7 +171,7 @@ export const Combobox: React.FC<ComboboxProps> = ({
                     <span className="flex-1">{getLabel(option)}</span>
                     {selectedOption &&
                       getValue(option) === getValue(selectedOption) && (
-                        <span className="ml-2 text-green-600">
+                        <span className="ml-2 text-ink-gray-5">
                           <svg width="16" height="16" viewBox="0 0 16 16">
                             <path
                               d="M4 8l3 3 5-5"
@@ -202,7 +206,7 @@ export const Combobox: React.FC<ComboboxProps> = ({
                 {selectedOption &&
                   getValue(opt as SimpleOption) ===
                     getValue(selectedOption) && (
-                    <span className="ml-2 text-green-600">
+                    <span className="ml-2 text-ink-gray-5">
                       <svg width="16" height="16" viewBox="0 0 16 16">
                         <path
                           d="M4 8l3 3 5-5"

packages/frappe-ui-react/src/components/tabButtons/index.tsx

@@ -58,7 +58,7 @@ const TabButtons = ({
                     ? ""
                     : checked
                     ? "text-ink-gray-9 shadow"
-                    : "text-ink-gray-7"
+                    : "!text-ink-gray-5"
                 } cursor-pointer`}
               >
                 {!button.hideLabel && button.label && (

packages/frappe-ui-react/src/components/tabs/tabList.tsx

@@ -76,8 +76,8 @@ export const TabList = ({
       <div
         ref={indicatorRef}
         className={[
-          "tab-indicator absolute bg-surface-gray-7",
-          vertical ? "right-0 w-px" : "bottom-0 h-px",
+          "tab-indicator absolute",
+          vertical ? "right-0 w-px bg-transparent" : "bottom-0 h-px bg-surface-gray-7",
         ].join(" ")}
       />
     </div>

packages/frappe-ui-react/src/theme.css

@@ -1,11 +1,23 @@
-@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
 @import "tailwindcss";
 
 @config '../../../tailwind.config.cjs';
 
 @custom-variant dark (&:is(.dark *));
 
-button, label, input {
+html,
+body,
+button,
+p,
+span,
+div {
+  -webkit-font-smoothing: antialiased;
+  font-variation-settings: 'opsz';
+}
+
+button,
+label,
+input {
   @apply cursor-pointer hover:cursor-pointer;
 }