From 984e5b8df7f3b264fe61a3b83692fadfffb3237f Mon Sep 17 00:00:00 2001
From: Best Codes <106822363+The-Best-Codes@users.noreply.github.com>
Date: Mon, 12 May 2025 15:55:22 -0500
Subject: [PATCH] UI Tweaks including border and padding fixes, contrast
 improvements, and more (#2489)

---
 ui/desktop/src/components/ChatInput.tsx       |  6 ++---
 .../components/more_menu/MoreMenuLayout.tsx   | 10 +++++--
 .../permission/PermissionSetting.tsx          | 27 +++++++++++--------
 3 files changed, 27 insertions(+), 16 deletions(-)

diff --git a/ui/desktop/src/components/ChatInput.tsx b/ui/desktop/src/components/ChatInput.tsx
index c5569d7d..51d28a69 100644
--- a/ui/desktop/src/components/ChatInput.tsx
+++ b/ui/desktop/src/components/ChatInput.tsx
@@ -287,7 +287,7 @@ export default function ChatInput({
             maxHeight: `${maxHeight}px`,
             overflowY: 'auto',
           }}
-          className="w-full pl-4 pr-[68px] outline-none border-none focus:ring-0 bg-transparent pt-3 pb-1.5 text-sm resize-none text-textStandard placeholder:text-textPlaceholder placeholder:opacity-50"
+          className="w-full pl-4 pr-[68px] outline-none border-none focus:ring-0 bg-transparent pt-3 pb-1.5 text-sm resize-none text-textStandard placeholder:text-textPlaceholder"
         />
 
         {isLoading ? (
@@ -310,10 +310,10 @@ export default function ChatInput({
             size="icon"
             variant="ghost"
             disabled={!displayValue.trim()}
-            className={`absolute right-3 top-2 transition-colors rounded-full hover:cursor w-7 h-7 [&_svg]:size-4 ${
+            className={`absolute right-3 top-2 transition-colors rounded-full w-7 h-7 [&_svg]:size-4 ${
               !displayValue.trim()
                 ? 'text-textSubtle cursor-not-allowed'
-                : 'bg-bgAppInverse text-white'
+                : 'bg-bgAppInverse text-textProminentInverse hover:cursor-pointer'
             }`}
           >
             <Send />
diff --git a/ui/desktop/src/components/more_menu/MoreMenuLayout.tsx b/ui/desktop/src/components/more_menu/MoreMenuLayout.tsx
index e86148fb..b030d65f 100644
--- a/ui/desktop/src/components/more_menu/MoreMenuLayout.tsx
+++ b/ui/desktop/src/components/more_menu/MoreMenuLayout.tsx
@@ -16,18 +16,24 @@ export default function MoreMenuLayout({
   setIsGoosehintsModalOpen?: (isOpen: boolean) => void;
 }) {
   const [isTooltipOpen, setIsTooltipOpen] = useState(false);
+
+  // Assume macOS if not explicitly set
+  const safeIsMacOS = (window?.electron?.platform || 'darwin') === 'darwin';
+
   return (
     <div
       className="relative flex items-center h-14 border-b border-borderSubtle w-full"
       style={{ WebkitAppRegion: 'drag' }}
     >
       {showMenu && (
-        <div className="flex items-center justify-between w-full h-full pl-[86px] pr-4">
+        <div
+          className={`flex items-center justify-between w-full h-full ${safeIsMacOS ? 'pl-[86px]' : 'pl-[8px]'} pr-4`}
+        >
           <TooltipProvider>
             <Tooltip open={isTooltipOpen} onOpenChange={setIsTooltipOpen}>
               <TooltipTrigger asChild>
                 <button
-                  className="z-[100] no-drag hover:cursor-pointer border border-subtle hover:border-borderStandard rounded-lg p-2 pr-3 text-textSubtle hover:text-textStandard text-sm flex items-center transition-colors [&>svg]:size-4 "
+                  className="z-[100] no-drag hover:cursor-pointer border border-borderSubtle hover:border-borderStandard rounded-lg p-2 pr-3 text-textSubtle hover:text-textStandard text-sm flex items-center transition-colors [&>svg]:size-4 "
                   onClick={async () => {
                     if (hasMessages) {
                       window.electron.directoryChooser();
diff --git a/ui/desktop/src/components/settings_v2/permission/PermissionSetting.tsx b/ui/desktop/src/components/settings_v2/permission/PermissionSetting.tsx
index 000d5dfc..be9af5bb 100644
--- a/ui/desktop/src/components/settings_v2/permission/PermissionSetting.tsx
+++ b/ui/desktop/src/components/settings_v2/permission/PermissionSetting.tsx
@@ -83,17 +83,22 @@ export default function PermissionSettingsView({ onClose }: { onClose: () => voi
         <div className="flex flex-col pb-24">
           <div className="px-8 pt-6 pb-4">
             <BackButton onClick={() => onClose()} className="mb-4" />
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="64"
-              height="64"
-              viewBox="0 0 64 64"
-              fill="none"
-            >
-              <circle cx="32" cy="32" r="32" fill="#101010" />
-              <rect x="22" y="17" width="8" height="8" rx="4" fill="white" />
-              <rect x="22" y="28" width="20" height="20" rx="10" fill="white" />
-            </svg>
+            <div className="rounded-full bg-bgAppInverse w-16 h-16 flex items-center justify-center mb-4">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+                className="stroke-bgApp fill-textProminent"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              >
+                <path d="m15.5 7.5 2.3 2.3a1 1 0 0 0 1.4 0l2.1-2.1a1 1 0 0 0 0-1.4L19 4" />
+                <path d="m21 2-9.6 9.6" />
+                <circle cx="7.5" cy="15.5" r="5.5" />
+              </svg>
+            </div>
             <h1 className="text-3xl font-medium text-textStandard mt-4">Permission Rules</h1>
             <p className="text-textSubtle">
               Hidden instructions that will be passed to the provider to help direct and add context