Updated modal design to KudoAI scripts' style ↞ [auto-sync from https…

…://github.com/adamlui/ai-web-extensions]
adamlui · Dec 19, 2024 · dcc83f4 · dcc83f4
1 parent 1bb7737
commit dcc83f4
Showing 1 changed file with 36 additions and 26 deletions.
diff --git a/greasemonkey/autoclear-chatgpt-history.user.js b/greasemonkey/autoclear-chatgpt-history.user.js
@@ -225,7 +225,7 @@
 // @description:zu      Ziba itshala lokucabanga okuzoshintshwa ngokuzenzakalelayo uma ukubuka chatgpt.com
 // @author              Adam Lui
 // @namespace           https://github.com/adamlui
-// @version             2024.12.19
+// @version             2024.12.19.1
 // @license             MIT
 // @icon                https://media.autoclearchatgpt.com/images/icons/openai/black/icon48.png?a8868ef
 // @icon64              https://media.autoclearchatgpt.com/images/icons/openai/black/icon64.png?a8868ef
@@ -268,12 +268,13 @@
 
     // Init ENV context
     const env = {
-        browser: { language: chatgpt.getUserLanguage() },
+        browser: { language: chatgpt.getUserLanguage(), isMobile: chatgpt.browser.isMobile()  },
         scriptManager: {
             name: (() => { try { return GM_info.scriptHandler } catch (err) { return 'unknown' }})(),
             version: (() => { try { return GM_info.version } catch (err) { return 'unknown' }})()
         }
     }
+    env.browser.isPortrait = env.browser.isMobile && (window.innerWidth < window.innerHeight)
     const xhr = typeof GM != 'undefined' && GM.xmlHttpRequest || GM_xmlhttpRequest
 
     // Init APP data
@@ -515,25 +516,40 @@
             }
             this.styles.innerText = (
                 `.${this.class} {`
+                  + 'padding: 20px 25px 24px 25px !important ; font-size: 20px ;'
                   + 'position: absolute ;' // to be click-draggable
                   + `border: 1px solid ${ chatgpt.isDarkMode() ? 'white' : '#b5b5b5' } !important ;`
+                  + `background-image: linear-gradient(180deg, ${
+                       chatgpt.isDarkMode() ? '#99a8a6 -200px, black 200px' : '#b6ebff -296px, white 171px' }) ;`
                   + 'opacity: 0 ;' // to fade-in
                   + 'transform: translateX(-4px) translateY(7px) !important ;' // offset to move-in from
                   + 'transition: opacity 0.65s cubic-bezier(.165,.84,.44,1),' // for fade-ins
                               + 'transform 0.55s cubic-bezier(.165,.84,.44,1) !important }' // for move-ins
               + `.${this.class}-bg { transition: background-color .25s ease }` // speed to show dim bg
               + `.${this.class}-bg.animated > div {` // modal fade/translate-in
                   + 'z-index: 13456 ; opacity: 0.98 ; transform: translate(0,0) !important }'
+              + `.${this.class} [class*="modal-close-btn"] {`
+                  + 'position: absolute !important ; float: right ; top: 14px !important ; right: 16px !important ;'
+                  + 'cursor: pointer ; width: 33px ; height: 33px ; border-radius: 20px }'
+              + `.${this.class} [class*="modal-close-btn"] path {`
+                  + `${ chatgpt.isDarkMode() ? 'stroke: white ; fill: white' : 'stroke: #9f9f9f ; fill: #9f9f9f' }}`
+              + ( chatgpt.isDarkMode() ?  // invert dark mode hover paths
+                    `.${this.class} [class*="modal-close-btn"]:hover path { stroke: black ; fill: black }` : '' )
+              + `.${this.class} [class*="modal-close-btn"]:hover { background-color: #f2f2f2 }` // hover underlay
+              + `.${this.class} [class*="modal-close-btn"] svg { margin: 11.5px }` // center SVG for hover underlay
+              + `.${this.class} a { color: #${ chatgpt.isDarkMode() ? '00cfff' : '1e9ebb' } !important }`
               + `.${this.class} button {`
-                  + 'font-size: 0.77rem ; text-transform: uppercase ;' // shrink/uppercase labels
+                  + 'font-size: 14px ; text-transform: uppercase ;' // shrink/uppercase labels
                   + 'border-radius: 0 !important ;' // square borders
                   + 'transition: transform 0.1s ease-in-out, box-shadow 0.1s ease-in-out ;' // smoothen hover fx
                   + 'cursor: pointer !important ;' // add finger cursor
-                  + 'padding: 5px !important ; min-width: 102px }' // resize
+                  + `border: 1px solid ${ chatgpt.isDarkMode() ? 'white' : 'black' } !important ;`
+                  + 'padding: 8px !important ; min-width: 102px }' // resize
               + `.${this.class} button:hover {` // add zoom, re-scheme
                   + 'transform: scale(1.055) ; color: black !important ;'
                   + `background-color: #${ chatgpt.isDarkMode() ? '00cfff' : '9cdaff' } !important }`
               + ( !env.browser.isMobile ? `.${this.class} .modal-buttons { margin-left: -13px !important }` : '' )
+              + `.about-em { color: ${ chatgpt.isDarkMode() ? 'white' : 'green' } !important }`
             )
         },
 
@@ -585,38 +601,34 @@
 
         about() {
 
-            // Init styles
-            const headingStyle = 'font-size: 1.15rem',
-                  pStyle = 'position: relative ; left: 3px',
-                  pBrStyle = 'position: relative ; left: 4px ',
-                  aStyle = 'color: ' + ( chatgpt.isDarkMode() ? '#c67afb' : '#8325c4' ) // purple
-
             // Show modal
             const aboutModal = modals.alert(
                 `${app.symbol} ${app.msgs.appName}`, // title
-                `<span style="${headingStyle}"><b>🏷️ <i>${app.msgs.about_version}</i></b>: </span>`
-                    + `<span style="${pStyle}">${app.version}</span>\n`
-                + `<span style="${headingStyle}"><b>⚡ <i>${app.msgs.about_poweredBy}</i></b>: </span>`
-                    + `<span style="${pStyle}">`
-                        + `<a style="${aStyle}" href="${app.urls.chatgptJS}" target="_blank" rel="noopener">`
-                            + `chatgpt.js</a> v${app.chatgptJSver}</span>\n`
-                + `<span style="${headingStyle}"><b>📜 <i>${app.msgs.about_sourceCode}</i></b>:</span>\n`
-                    + `<span style="${pBrStyle}"><a href="${app.urls.gitHub}" target="_blank" rel="nopener">`
-                        + app.urls.gitHub + '</a></span>',
+                `🏷️ ${app.msgs.about_version}: <span class="about-em">${app.version}</span>\n`
+                    + `⚡ ${app.msgs.about_poweredBy}: `
+                        + `<a href="${app.urls.chatgptJS}" target="_blank" rel="noopener">chatgpt.js</a>`
+                            + ` v${app.chatgptJSver}\n`
+                    + `📜 ${app.msgs.about_sourceCode}: `
+                        + `<a href="${app.urls.gitHub}" target="_blank" rel="nopener">`
+                            + app.urls.gitHub + '</a>',
                 [ // buttons
                     function checkForUpdates() { updateCheck() },
                     function getSupport(){},
                     function rateUs() {},
                     function moreAIextensions(){}
-                ], '', 546 // set width
+                ], '', 656 // set width
             )
 
             // Format text
-            aboutModal.querySelector('h2').style.cssText = 'text-align: center ; font-size: 37px ; padding: 9px'
-            aboutModal.querySelector('p').style.cssText = 'text-align: center'
+            aboutModal.querySelector('h2').style.cssText = (
+                'text-align: center ; font-size: 51px ; line-height: 46px ; padding: 15px 0' )
+            aboutModal.querySelector('p').style.cssText = (
+                'text-align: center ; overflow-wrap: anywhere ;'
+              + `margin: ${ env.browser.isPortrait ? '6px 0 -16px' : '3px 0 0' }` )
 
             // Hack buttons
             aboutModal.querySelectorAll('button').forEach(btn => {
+                btn.style.cssText = 'height: 58px ; min-width: 136px ; text-align: center'
 
                 // Replace link buttons w/ clones that don't dismiss modal
                 if (/support|rate|extensions/i.test(btn.textContent)) {
@@ -911,8 +923,6 @@
 
     menu.register() // create browser toolbar menu
 
-    modals.open('about')
-
     // Init UI props
     await Promise.race([chatgpt.isLoaded(), new Promise(resolve => setTimeout(resolve, 5000))]) // initial UI loaded
     await chatgpt.sidebar.isLoaded()
@@ -933,8 +943,8 @@
                 toggles.sidebar.status = 'missing' ; toggles.sidebar.insert() }
     }).observe(document.body, { attributes: true, subtree: true })
 
-    // Monitor SCHEME CHANGES to update sidebar toggle color
-    new MutationObserver(() => toggles.sidebar.updateColor())
+    // Monitor SCHEME CHANGES to update sidebar toggle + modal colors
+    new MutationObserver(() => { toggles.sidebar.updateColor() ; modals.stylize() })
         .observe(document.documentElement, { attributes: true, attributeFilter: ['class'] })
 
     // Disable distracting SIDEBAR CLICK-ZOOM effect