From 3d0c6e4c009d1cbaf20e57dfe2e049539b645041 Mon Sep 17 00:00:00 2001
From: Zane <75694352+zanesq@users.noreply.github.com>
Date: Tue, 27 May 2025 17:03:37 -0700
Subject: [PATCH] Cleanup for recipe urls in dark mode and create schedule
 button hover state (#2687)

---
 ui/desktop/src/components/RecipeEditor.tsx    | 63 +++++++++----------
 .../schedule/CreateScheduleModal.tsx          |  4 +-
 2 files changed, 32 insertions(+), 35 deletions(-)

diff --git a/ui/desktop/src/components/RecipeEditor.tsx b/ui/desktop/src/components/RecipeEditor.tsx
index 1713f733..db95533e 100644
--- a/ui/desktop/src/components/RecipeEditor.tsx
+++ b/ui/desktop/src/components/RecipeEditor.tsx
@@ -377,42 +377,39 @@ export default function RecipeEditor({ config }: RecipeEditorProps) {
 
             {/* Deep Link Display */}
             <div className="w-full p-4 bg-bgSubtle rounded-lg">
-              <div className="flex items-center justify-between mb-2">
-                <div className="text-sm text-textSubtle text-xs text-textSubtle mt-2">
-                  Copy this link to share with friends or paste directly in Chrome to open
+              {!title.trim() || !description.trim() ? (
+                <div className="text-sm text-textSubtle text-xs text-textSubtle">
+                  Fill in required fields to generate link
                 </div>
-                <button
+              ) : (
+                <div className="flex items-center justify-between mb-2">
+                  <div className="text-sm text-textSubtle text-xs text-textSubtle">
+                    Copy this link to share with friends or paste directly in Chrome to open
+                  </div>
+                  <button
+                    onClick={() => validateForm() && handleCopy()}
+                    className="ml-4 p-2 hover:bg-bgApp rounded-lg transition-colors flex items-center disabled:opacity-50 disabled:hover:bg-transparent"
+                  >
+                    {copied ? (
+                      <Check className="w-4 h-4 text-green-500" />
+                    ) : (
+                      <Copy className="w-4 h-4 text-iconSubtle" />
+                    )}
+                    <span className="ml-1 text-sm text-textSubtle">
+                      {copied ? 'Copied!' : 'Copy'}
+                    </span>
+                  </button>
+                </div>
+              )}
+              {title.trim() && description.trim() && (
+                <div
                   onClick={() => validateForm() && handleCopy()}
-                  className="ml-4 p-2 hover:bg-bgApp rounded-lg transition-colors flex items-center disabled:opacity-50 disabled:hover:bg-transparent"
-                  title={
-                    !title.trim() || !description.trim()
-                      ? 'Fill in required fields first'
-                      : 'Copy link'
-                  }
-                  disabled={!title.trim() || !description.trim()}
+                  className={`text-sm truncate dark:text-white font-mono ${!title.trim() || !description.trim() ? 'text-textDisabled' : 'text-textStandard'}`}
                 >
-                  {copied ? (
-                    <Check className="w-4 h-4 text-green-500" />
-                  ) : (
-                    <Copy className="w-4 h-4 text-iconSubtle" />
-                  )}
-                  <span className="ml-1 text-sm text-textSubtle">
-                    {copied ? 'Copied!' : 'Copy'}
-                  </span>
-                </button>
-              </div>
-              <div
-                className={`text-sm truncate font-mono ${!title.trim() || !description.trim() ? 'text-textDisabled' : 'text-textStandard'}`}
-                title={
-                  !title.trim() || !description.trim()
-                    ? 'Fill in required fields to generate link'
-                    : deeplink
-                }
-              >
-                {deeplink}
-              </div>
+                  {deeplink}
+                </div>
+              )}
             </div>
-
             {/* Action Buttons */}
             <div className="flex flex-col space-y-2 pt-1">
               <button
@@ -422,7 +419,7 @@ export default function RecipeEditor({ config }: RecipeEditorProps) {
                 }}
                 className="w-full p-3 text-textSubtle rounded-lg hover:bg-bgSubtle"
               >
-                Cancel
+                Close
               </button>
             </div>
           </div>
diff --git a/ui/desktop/src/components/schedule/CreateScheduleModal.tsx b/ui/desktop/src/components/schedule/CreateScheduleModal.tsx
index 8ea6a06a..8aacc960 100644
--- a/ui/desktop/src/components/schedule/CreateScheduleModal.tsx
+++ b/ui/desktop/src/components/schedule/CreateScheduleModal.tsx
@@ -419,7 +419,7 @@ export const CreateScheduleModal: React.FC<CreateScheduleModalProps> = ({
             variant="ghost"
             onClick={handleClose}
             disabled={isLoadingExternally}
-            className="w-full h-[60px] rounded-none border-t dark:border-gray-600 text-gray-400 hover:bg-gray-50 dark:border-gray-600 text-lg font-regular"
+            className="w-full h-[60px] rounded-none border-t text-gray-400 hover:bg-gray-50 dark:border-gray-600 text-lg font-regular"
           >
             Cancel
           </Button>
@@ -428,7 +428,7 @@ export const CreateScheduleModal: React.FC<CreateScheduleModalProps> = ({
             form="new-schedule-form"
             variant="default"
             disabled={isLoadingExternally}
-            className="w-full h-[60px] rounded-none border-t dark:border-gray-600 text-lg hover:bg-gray-50 hover:dark:text-black dark:text-white dark:border-gray-600 font-regular"
+            className="w-full h-[60px] rounded-none border-t dark:border-gray-600 text-lg dark:text-white dark:border-gray-600 font-regular"
           >
             {isLoadingExternally ? 'Creating...' : 'Create Schedule'}
           </Button>