From 95ff77516199db2cd1681805491c3b3d1b7ab856 Mon Sep 17 00:00:00 2001 From: Debian Date: Thu, 14 Mar 2024 23:13:29 +0000 Subject: [PATCH 01/26] add WhatsNew component --- frontend/src/ts/components/Admin.tsx | 2 ++ frontend/src/ts/components/WhatsNew.tsx | 22 ++++++++++++++++++++++ 2 files changed, 24 insertions(+) create mode 100644 frontend/src/ts/components/WhatsNew.tsx diff --git a/frontend/src/ts/components/Admin.tsx b/frontend/src/ts/components/Admin.tsx index 04ec708..b70d476 100644 --- a/frontend/src/ts/components/Admin.tsx +++ b/frontend/src/ts/components/Admin.tsx @@ -15,6 +15,7 @@ import { IFormProps } from './FormProps'; import HelpResources from './HelpResources'; import SupportLinks from './SupportLinks'; import WelcomePanel from './WelcomePanel'; +import WhatsNew from './WhatsNew'; const getSSOContainer = (props: IFormProps) => { const adminOptions = props.data.adminOptions; @@ -230,6 +231,7 @@ const getActiveTabView = (props: IFormProps) => { const Admin = (props: IFormProps) => (
+ {props.data.adminOptions.disqus_installed ? : null} {getActiveTabView(props)} diff --git a/frontend/src/ts/components/WhatsNew.tsx b/frontend/src/ts/components/WhatsNew.tsx new file mode 100644 index 0000000..e37651f --- /dev/null +++ b/frontend/src/ts/components/WhatsNew.tsx @@ -0,0 +1,22 @@ +import * as React from 'react'; + +const versionNumber = '3.0.25'; +const updates = [ + 'The Disqus Embed will now render properly on sites using WordPress Block Themes in addition to Classic Themes', + 'A refreshed and improved UI for the Disqus plugin admin panel' +] + +const WhatsNew: React.FC = () => { + return ( +
+

+ What's New in v{versionNumber}: +

+
    + {updates.map(update =>
  • - {update}
    • )} +
+
+ ); +}; + +export default WhatsNew; From 94c1c329d0db6717cc4b7fefce77ce6c60859b4f Mon Sep 17 00:00:00 2001 From: Debian Date: Fri, 15 Mar 2024 15:54:25 +0000 Subject: [PATCH 02/26] add more to WhatsNew --- frontend/src/ts/components/WhatsNew.tsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/frontend/src/ts/components/WhatsNew.tsx b/frontend/src/ts/components/WhatsNew.tsx index e37651f..1bbbd54 100644 --- a/frontend/src/ts/components/WhatsNew.tsx +++ b/frontend/src/ts/components/WhatsNew.tsx @@ -1,16 +1,18 @@ import * as React from 'react'; -const versionNumber = '3.0.25'; +const latestVersion = '3.0.25'; const updates = [ 'The Disqus Embed will now render properly on sites using WordPress Block Themes in addition to Classic Themes', - 'A refreshed and improved UI for the Disqus plugin admin panel' + 'A refreshed UI for the Disqus plugin admin panel', + 'Robust improvements to manual and automatic syncing: multiple bug fixes and increased allowable manual syncing data range', + 'More informative error messaging in the browser console and plugin UI when encountering issues with manual and automatic syncing for easier troubleshooting' ] const WhatsNew: React.FC = () => { return (

- What's New in v{versionNumber}: + What's New in v{latestVersion}:

    {updates.map(update =>
  • - {update}
    • )} From 0b46aab1b048c9f29b1e41a665b289eba8439053 Mon Sep 17 00:00:00 2001 From: Debian Date: Mon, 18 Mar 2024 16:28:39 +0000 Subject: [PATCH 03/26] add keys to WhatsNew --- frontend/src/ts/components/WhatsNew.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/ts/components/WhatsNew.tsx b/frontend/src/ts/components/WhatsNew.tsx index 1bbbd54..709f82b 100644 --- a/frontend/src/ts/components/WhatsNew.tsx +++ b/frontend/src/ts/components/WhatsNew.tsx @@ -15,7 +15,7 @@ const WhatsNew: React.FC = () => { What's New in v{latestVersion}:
      - {updates.map(update =>
    • - {update}
      • )} + {updates.map((update, index) =>
    • - {update}
      • )}
); From e8fd3a90f1c01bdae84ffb1229087629cd226157 Mon Sep 17 00:00:00 2001 From: Debian Date: Mon, 18 Mar 2024 16:49:37 +0000 Subject: [PATCH 04/26] welcome panel link styling update --- disqus/admin/css/disqus-admin.css | 27 +++++++++++++++++++-- frontend/src/ts/components/WelcomePanel.tsx | 2 +- 2 files changed, 26 insertions(+), 3 deletions(-) diff --git a/disqus/admin/css/disqus-admin.css b/disqus/admin/css/disqus-admin.css index 50d4408..b0a3784 100755 --- a/disqus/admin/css/disqus-admin.css +++ b/disqus/admin/css/disqus-admin.css @@ -3,6 +3,10 @@ * included in this file. */ +:root { + --disqus-blue: rgb(46, 159, 255); +} + #wpadminbar #wp-admin-bar-disqus .ab-icon:before { content: "\f101"; top: 3px; @@ -40,8 +44,27 @@ text-align: center; } -.welcome-panel-column .button { - margin-bottom: 1.33em; +.welcome-panel .welcome-panel-content .welcome-panel-column-container .welcome-panel-column { + display: flex; + flex-direction: column; + gap: 0px; + max-width: 300px; + + .button { + margin-bottom: 1.33em; + } + + li { + box-shadow: inset 0 0 0 0 var(--disqus-blue); + padding: .25rem; + transition: color 1.3s ease-in-out, box-shadow .3s ease-in-out; + &:hover { + box-shadow: inset 150px 0 0 0 var(--disqus-blue); + a { + color: white + } + } + } } .button-large .dashicons { diff --git a/frontend/src/ts/components/WelcomePanel.tsx b/frontend/src/ts/components/WelcomePanel.tsx index f54e73d..05352f3 100644 --- a/frontend/src/ts/components/WelcomePanel.tsx +++ b/frontend/src/ts/components/WelcomePanel.tsx @@ -30,7 +30,7 @@ const WelcomePanel = (props: IWelcomePanelProps) => (
  • - {__('Restricted Words Filter')} + {__('Restricted Words')}
  • From 8404bdb2f841bccd1803043ed236ac7a5c62aa43 Mon Sep 17 00:00:00 2001 From: Debian Date: Mon, 18 Mar 2024 18:10:48 +0000 Subject: [PATCH 05/26] update welcome panel banner text, styling, and spacing. also add mobile styling and centering --- disqus/admin/css/disqus-admin.css | 47 +++++++++++++-------- frontend/src/ts/components/WelcomePanel.tsx | 2 +- 2 files changed, 31 insertions(+), 18 deletions(-) diff --git a/disqus/admin/css/disqus-admin.css b/disqus/admin/css/disqus-admin.css index b0a3784..d9d8351 100755 --- a/disqus/admin/css/disqus-admin.css +++ b/disqus/admin/css/disqus-admin.css @@ -38,30 +38,43 @@ .about-description { font-size: 40px !important; - color: #dcdcde; + color: var(--disqus-blue); font-weight: bold; align-items: center; text-align: center; } -.welcome-panel .welcome-panel-content .welcome-panel-column-container .welcome-panel-column { +.welcome-panel .welcome-panel-content .welcome-panel-column-container { display: flex; - flex-direction: column; - gap: 0px; - max-width: 300px; - - .button { - margin-bottom: 1.33em; + justify-content: center; + gap: 10vw; + @media screen and (max-width: 768px) { + flex-direction: column; + align-items: center; + ul { + display: flex; + flex-direction: column; + } } - - li { - box-shadow: inset 0 0 0 0 var(--disqus-blue); - padding: .25rem; - transition: color 1.3s ease-in-out, box-shadow .3s ease-in-out; - &:hover { - box-shadow: inset 150px 0 0 0 var(--disqus-blue); - a { - color: white + .welcome-panel-column { + display: flex; + flex-direction: column; + gap: 0px; + width: fit-content; + max-width: 300px; + .button { + margin-bottom: 1.33em; + } + li { + box-shadow: inset 0 0 0 0 var(--disqus-blue); + padding: .25rem; + transition: color 1.3s ease-in-out, box-shadow .3s ease-in-out; + white-space: nowrap; + &:hover { + box-shadow: inset 150px 0 0 0 var(--disqus-blue); + a { + color: white + } } } } diff --git a/frontend/src/ts/components/WelcomePanel.tsx b/frontend/src/ts/components/WelcomePanel.tsx index 05352f3..c09c961 100644 --- a/frontend/src/ts/components/WelcomePanel.tsx +++ b/frontend/src/ts/components/WelcomePanel.tsx @@ -9,7 +9,7 @@ const WelcomePanel = (props: IWelcomePanelProps) => (

    - {__('Manage Community')} + {__('Manage Your Community')}

    From 56a9dea55db741a19db3e5b33e81c98a31fcbf95 Mon Sep 17 00:00:00 2001 From: Debian Date: Mon, 18 Mar 2024 22:01:19 +0000 Subject: [PATCH 06/26] hover effects and styling for nav tabs --- disqus/admin/css/disqus-admin.css | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/disqus/admin/css/disqus-admin.css b/disqus/admin/css/disqus-admin.css index d9d8351..9c08750 100755 --- a/disqus/admin/css/disqus-admin.css +++ b/disqus/admin/css/disqus-admin.css @@ -80,6 +80,22 @@ } } +.nav-tab-wrapper { + display: flex; + gap: 10px; + border-bottom: none; + .nav-tab { + border-radius: 12px; + border: 1px solid #c3c4c7; + margin-left: 0; + transition: color .3s ease-in-out, background-color .3s ease-in-out; + &:hover { + background-color: var(--disqus-blue); + color: white; + } + } +} + .button-large .dashicons { margin-top: 4px; } From e7cdca615a69fe02c52ab3d2dab6bea65dfa42c9 Mon Sep 17 00:00:00 2001 From: Debian Date: Mon, 18 Mar 2024 22:15:15 +0000 Subject: [PATCH 07/26] border-radius for welcome panel --- disqus/admin/css/disqus-admin.css | 1 + 1 file changed, 1 insertion(+) diff --git a/disqus/admin/css/disqus-admin.css b/disqus/admin/css/disqus-admin.css index 9c08750..2f66afd 100755 --- a/disqus/admin/css/disqus-admin.css +++ b/disqus/admin/css/disqus-admin.css @@ -34,6 +34,7 @@ .welcome-panel { overflow: hidden; + border-radius: 12px; } .about-description { From ed1a12b8608ac19dbd9519920ff248db1f46acc2 Mon Sep 17 00:00:00 2001 From: Debian Date: Mon, 18 Mar 2024 22:23:59 +0000 Subject: [PATCH 08/26] welcome-panel spacing --- disqus/admin/css/disqus-admin.css | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/disqus/admin/css/disqus-admin.css b/disqus/admin/css/disqus-admin.css index 2f66afd..bc62f6e 100755 --- a/disqus/admin/css/disqus-admin.css +++ b/disqus/admin/css/disqus-admin.css @@ -35,6 +35,9 @@ .welcome-panel { overflow: hidden; border-radius: 12px; + .welcome-panel-content { + min-height: unset; + } } .about-description { @@ -49,9 +52,11 @@ display: flex; justify-content: center; gap: 10vw; + padding: 12px; @media screen and (max-width: 768px) { flex-direction: column; align-items: center; + gap: 0px; ul { display: flex; flex-direction: column; From c1b0f7dacdc38de326b0730fde8cdfd91a452c9e Mon Sep 17 00:00:00 2001 From: Debian Date: Mon, 18 Mar 2024 22:29:14 +0000 Subject: [PATCH 09/26] add scroll for nav-tab overflow for mobile --- disqus/admin/css/disqus-admin.css | 3 +++ 1 file changed, 3 insertions(+) diff --git a/disqus/admin/css/disqus-admin.css b/disqus/admin/css/disqus-admin.css index bc62f6e..66e0cf9 100755 --- a/disqus/admin/css/disqus-admin.css +++ b/disqus/admin/css/disqus-admin.css @@ -90,6 +90,9 @@ display: flex; gap: 10px; border-bottom: none; + @media screen and (max-width: 682px) { + overflow: scroll hidden; + } .nav-tab { border-radius: 12px; border: 1px solid #c3c4c7; From 75049907583a79dc99fb9c2e72b5d1d8dab88ce5 Mon Sep 17 00:00:00 2001 From: Debian Date: Mon, 18 Mar 2024 22:50:06 +0000 Subject: [PATCH 10/26] add button hover and focus effects --- disqus/admin/css/disqus-admin.css | 20 +++++++++++++++++++- 1 file changed, 19 insertions(+), 1 deletion(-) diff --git a/disqus/admin/css/disqus-admin.css b/disqus/admin/css/disqus-admin.css index 66e0cf9..140f767 100755 --- a/disqus/admin/css/disqus-admin.css +++ b/disqus/admin/css/disqus-admin.css @@ -76,12 +76,16 @@ padding: .25rem; transition: color 1.3s ease-in-out, box-shadow .3s ease-in-out; white-space: nowrap; + border-radius: 12px; &:hover { box-shadow: inset 150px 0 0 0 var(--disqus-blue); a { - color: white + color: white; } } + a:focus { + box-shadow: unset !important; + } } } } @@ -113,6 +117,20 @@ text-decoration: none; } +.button { + border-radius: 12px !important; + &:hover { + background-color: var(--disqus-blue) !important; + color: white !important; + transition: color .1s ease-in-out, background-color .3s ease-in-out !important; + } +} + +.button.button-link { + padding: 0px 5px; + border-radius: 6px; +} + /* Placeholder spinner */ .dsq-loading-container { From d5642f962c1aa389140fb4b4235e45685666d015 Mon Sep 17 00:00:00 2001 From: Debian Date: Mon, 18 Mar 2024 23:46:24 +0000 Subject: [PATCH 11/26] link styling across plugin --- disqus/admin/css/disqus-admin.css | 16 ++++++++++++++++ frontend/src/ts/components/HelpResources.tsx | 2 +- 2 files changed, 17 insertions(+), 1 deletion(-) diff --git a/disqus/admin/css/disqus-admin.css b/disqus/admin/css/disqus-admin.css index 140f767..8aa849d 100755 --- a/disqus/admin/css/disqus-admin.css +++ b/disqus/admin/css/disqus-admin.css @@ -24,6 +24,17 @@ .dsq-admin-wrapper { margin-top: 20px; + a { + &:hover { + color: white; + background-color: var(--disqus-blue); + transition: color .3s ease-in-out, background-color .3s ease-in-out; + } + } + .description a { + padding: 5px; + border-radius: 12px; + } } .button-hero .disqus-icon { @@ -224,4 +235,9 @@ .dsq-support-list-item a { text-decoration: none; font-size: 14px; + &:hover { + /* text-decoration: underline; */ + background-color: transparent; + color: var(--disqus-blue); + } } diff --git a/frontend/src/ts/components/HelpResources.tsx b/frontend/src/ts/components/HelpResources.tsx index 9e7703b..9611d9d 100644 --- a/frontend/src/ts/components/HelpResources.tsx +++ b/frontend/src/ts/components/HelpResources.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; const HelpResources = () => ( -
    From d58749d8883266dbfaede3fb84539a502e331de7 Mon Sep 17 00:00:00 2001 From: Debian Date: Thu, 21 Mar 2024 18:01:15 +0000 Subject: [PATCH 22/26] scope all changes to #disqus-admin id --- disqus/admin/css/disqus-admin.css | 462 +++++++++++++++--------------- 1 file changed, 231 insertions(+), 231 deletions(-) diff --git a/disqus/admin/css/disqus-admin.css b/disqus/admin/css/disqus-admin.css index e9104b0..c9e429c 100755 --- a/disqus/admin/css/disqus-admin.css +++ b/disqus/admin/css/disqus-admin.css @@ -3,273 +3,273 @@ * included in this file. */ -:root { - --disqus-blue: rgb(46, 159, 255); -} #wpadminbar #wp-admin-bar-disqus .ab-icon:before { content: "\f101"; top: 3px; } -.dsq-admin-header { - background: #494e58; - height: 100px; - position: absolute; - top: 0; - left: -20px; - right: -20px; - color: white; -} - -.dsq-admin-wrapper { - margin-top: 20px; - a { - &:hover { - color: white; - background-color: var(--disqus-blue); - transition: color .3s ease-in-out, background-color .3s ease-in-out; - } +#disqus-admin { + --disqus-blue: rgb(46, 159, 255); + .dsq-admin-header { + background: #494e58; + height: 100px; + position: absolute; + top: 0; + left: -20px; + right: -20px; + color: white; } - .disqus-logo { - img { - padding: 3px; - border: 3px transparent solid; + + .dsq-admin-wrapper { + margin-top: 20px; + a { + &:hover { + color: white; + background-color: var(--disqus-blue); + transition: color .3s ease-in-out, background-color .3s ease-in-out; + } } - &:hover { - background-color: transparent; + .disqus-logo { img { - border-bottom: 3px var(--disqus-blue) solid; + padding: 3px; + border: 3px transparent solid; + } + &:hover { + background-color: transparent; + img { + border-bottom: 3px var(--disqus-blue) solid; + } + } + &:focus { + box-shadow: unset !important; } } - &:focus { - box-shadow: unset !important; + + .description a { + padding: 5px; + border-radius: 12px; } - } - .description a { - padding: 5px; - border-radius: 12px; + input { + border-radius: 6px; + } + textarea { + border-radius: 0; + } } - - input { - border-radius: 6px; + + .button-hero .disqus-icon { + float: left; + margin-top: 7px; + margin-right: 7px; } - textarea { - border-radius: 0; + + .whats-new { + padding: 5px; + &.visible { + border: 2px black solid; + border-radius: 12px; + background-color: white; + } } -} - -.button-hero .disqus-icon { - float: left; - margin-top: 7px; - margin-right: 7px; -} - -.whats-new { - padding: 5px; - &.visible { - border: 2px black solid; + + .welcome-panel { + overflow: hidden; border-radius: 12px; - background-color: white; - } -} - -.welcome-panel { - overflow: hidden; - border-radius: 12px; - .welcome-panel-content { - min-height: unset; + .welcome-panel-content { + min-height: unset; + } } -} - -.about-description { - font-size: 40px !important; - color: var(--disqus-blue); - font-weight: bold; - align-items: center; - text-align: center; -} - -.welcome-panel .welcome-panel-content .welcome-panel-column-container { - display: flex; - justify-content: center; - gap: 10vw; - padding: 12px; - @media screen and (max-width: 768px) { - flex-direction: column; + + .about-description { + font-size: 40px !important; + color: var(--disqus-blue); + font-weight: bold; align-items: center; - gap: 0px; - ul { + text-align: center; + } + + .welcome-panel .welcome-panel-content .welcome-panel-column-container { + display: flex; + justify-content: center; + gap: 10vw; + padding: 12px; + @media screen and (max-width: 768px) { + flex-direction: column; + align-items: center; + gap: 0px; + ul { + display: flex; + flex-direction: column; + } + } + .welcome-panel-column { display: flex; flex-direction: column; + gap: 0px; + width: fit-content; + max-width: 300px; + .button { + margin-bottom: 1.33em; + } + li { + box-shadow: inset 0 0 0 0 var(--disqus-blue); + padding: .25rem; + transition: color 1.3s ease-in-out, box-shadow .3s ease-in-out; + white-space: nowrap; + border-radius: 12px; + &:hover { + box-shadow: inset 150px 0 0 0 var(--disqus-blue); + a { + color: white; + } + } + a:focus { + box-shadow: unset !important; + } + } } } - .welcome-panel-column { + + .nav-tab-wrapper { display: flex; - flex-direction: column; - gap: 0px; - width: fit-content; - max-width: 300px; - .button { - margin-bottom: 1.33em; + gap: 10px; + border-bottom: none; + @media screen and (max-width: 682px) { + overflow: scroll hidden; } - li { - box-shadow: inset 0 0 0 0 var(--disqus-blue); - padding: .25rem; - transition: color 1.3s ease-in-out, box-shadow .3s ease-in-out; - white-space: nowrap; + .nav-tab { border-radius: 12px; + border: 1px solid #c3c4c7; + margin-left: 0; + transition: color .3s ease-in-out, background-color .3s ease-in-out; &:hover { - box-shadow: inset 150px 0 0 0 var(--disqus-blue); - a { - color: white; - } - } - a:focus { - box-shadow: unset !important; + background-color: var(--disqus-blue); + color: white; } } } -} - -.nav-tab-wrapper { - display: flex; - gap: 10px; - border-bottom: none; - @media screen and (max-width: 682px) { - overflow: scroll hidden; + + .button-large .dashicons { + margin-top: 4px; } - .nav-tab { - border-radius: 12px; - border: 1px solid #c3c4c7; - margin-left: 0; - transition: color .3s ease-in-out, background-color .3s ease-in-out; + + .submit .button-link { + text-decoration: none; + } + + .button { + border-radius: 12px !important; &:hover { - background-color: var(--disqus-blue); - color: white; + background-color: var(--disqus-blue) !important; + color: white !important; + transition: color .1s ease-in-out, background-color .3s ease-in-out !important; } } -} - -.button-large .dashicons { - margin-top: 4px; -} - -.submit .button-link { - text-decoration: none; -} - -.button { - border-radius: 12px !important; - &:hover { - background-color: var(--disqus-blue) !important; - color: white !important; - transition: color .1s ease-in-out, background-color .3s ease-in-out !important; + + .button.button-link { + padding: 0px 5px; + border-radius: 6px; } -} - -.button.button-link { - padding: 0px 5px; - border-radius: 6px; -} - -/* Placeholder spinner */ - -.dsq-loading-container { - height: 130px; - padding-top: 120px; -} - -.dsq-spinner { - z-index: 500; - - border: 3px solid transparent; - border-color: transparent #c2c9d4 transparent #c2c9d4; - - animation: rotate-loading 1.2s linear 0s infinite normal; - transform-origin: 50% 50%; - - margin: auto; - width: 25px; - height: 25px; - - border-radius: 28px; -} - -@keyframes rotate-loading { - 0% { - transform: rotate(0deg); + + /* Placeholder spinner */ + + .dsq-loading-container { + height: 130px; + padding-top: 120px; } - - 100% { - transform: rotate(360deg); + + .dsq-spinner { + z-index: 500; + + border: 3px solid transparent; + border-color: transparent #c2c9d4 transparent #c2c9d4; + + animation: rotate-loading 1.2s linear 0s infinite normal; + transform-origin: 50% 50%; + + margin: auto; + width: 25px; + height: 25px; + + border-radius: 28px; } -} - -.dsq-installation__instruction-list { - padding-left: 0px; - counter-reset: li 0; - margin: 35px 0px 0px 70px; -} - -.dsq-installation__instruction-list::before, .installation__instruction-list::after { - content: " "; - display: table; -} - -.dsq-installation__instruction-list > li { - font-size: 16px; - line-height: 1.5em; - position: relative; - z-index: 200; - margin-bottom: 40px; - list-style: none; -} - -.dsq-installation__instruction-list > li::before { - content: counter(li); - counter-increment: li 1; - position: absolute; - top: -8px; - left: -65px; - width: 40px; - height: 22px; - margin-right: 8px; - color: rgb(255, 255, 255); - font-size: 21px; - font-weight: 600; - text-align: center; - padding: 0.42em 0px; - background: rgb(255, 211, 79); - border-radius: 1em; -} - -.dsq-icon-support { - font-size: 72px; - width: 72px; - height: 72px; - display: block; - margin: 0 auto 5px auto; -} - -.dsq-support-list-container { - display: flex; - flex-wrap: wrap; - list-style: none; -} - -.dsq-support-list-item { - text-align: center; - padding: 10px 30px; -} - -.dsq-support-list-item a { - text-decoration: none; - font-size: 14px; - &:hover { - border-bottom: 1px var(--disqus-blue) solid; - background-color: transparent; - color: var(--disqus-blue); + + @keyframes rotate-loading { + 0% { + transform: rotate(0deg); + } + + 100% { + transform: rotate(360deg); + } + } + + .dsq-installation__instruction-list { + padding-left: 0px; + counter-reset: li 0; + margin: 35px 0px 0px 70px; + } + + .dsq-installation__instruction-list::before, .installation__instruction-list::after { + content: " "; + display: table; + } + + .dsq-installation__instruction-list > li { + font-size: 16px; + line-height: 1.5em; + position: relative; + z-index: 200; + margin-bottom: 40px; + list-style: none; + } + + .dsq-installation__instruction-list > li::before { + content: counter(li); + counter-increment: li 1; + position: absolute; + top: -8px; + left: -65px; + width: 40px; + height: 22px; + margin-right: 8px; + color: rgb(255, 255, 255); + font-size: 21px; + font-weight: 600; + text-align: center; + padding: 0.42em 0px; + background: rgb(255, 211, 79); + border-radius: 1em; + } + + .dsq-icon-support { + font-size: 72px; + width: 72px; + height: 72px; + display: block; + margin: 0 auto 5px auto; + } + + .dsq-support-list-container { + display: flex; + flex-wrap: wrap; + list-style: none; + } + + .dsq-support-list-item { + text-align: center; + padding: 10px 30px; + } + + .dsq-support-list-item a { + text-decoration: none; + font-size: 14px; + &:hover { + border-bottom: 1px var(--disqus-blue) solid; + background-color: transparent; + color: var(--disqus-blue); + } } } From 83a7fc30e2e575cbfe6f7bc8c8975a7cc70e34f3 Mon Sep 17 00:00:00 2001 From: Debian Date: Thu, 21 Mar 2024 18:31:34 +0000 Subject: [PATCH 23/26] update latest version to 3.1 --- frontend/src/ts/components/WhatsNew.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/ts/components/WhatsNew.tsx b/frontend/src/ts/components/WhatsNew.tsx index b9dc476..0f47c1e 100644 --- a/frontend/src/ts/components/WhatsNew.tsx +++ b/frontend/src/ts/components/WhatsNew.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; -const latestVersion: String = '3.0.25'; +const latestVersion: String = '3.1'; const updates: Array = [ 'The Disqus Embed will now render properly on sites using WordPress Block Themes in addition to Classic Themes', 'A refreshed UI for the Disqus plugin admin panel', From 76eca655cecf238b0339fcaf56f1abdcc25a7273 Mon Sep 17 00:00:00 2001 From: Debian Date: Thu, 21 Mar 2024 20:50:05 +0000 Subject: [PATCH 24/26] linting --- disqus/admin/css/disqus-admin.css | 60 +++++++++++++++---------------- 1 file changed, 30 insertions(+), 30 deletions(-) diff --git a/disqus/admin/css/disqus-admin.css b/disqus/admin/css/disqus-admin.css index c9e429c..e6286b2 100755 --- a/disqus/admin/css/disqus-admin.css +++ b/disqus/admin/css/disqus-admin.css @@ -20,7 +20,7 @@ right: -20px; color: white; } - + .dsq-admin-wrapper { margin-top: 20px; a { @@ -45,12 +45,12 @@ box-shadow: unset !important; } } - + .description a { padding: 5px; border-radius: 12px; } - + input { border-radius: 6px; } @@ -58,13 +58,13 @@ border-radius: 0; } } - + .button-hero .disqus-icon { float: left; margin-top: 7px; margin-right: 7px; } - + .whats-new { padding: 5px; &.visible { @@ -73,7 +73,7 @@ background-color: white; } } - + .welcome-panel { overflow: hidden; border-radius: 12px; @@ -81,7 +81,7 @@ min-height: unset; } } - + .about-description { font-size: 40px !important; color: var(--disqus-blue); @@ -89,7 +89,7 @@ align-items: center; text-align: center; } - + .welcome-panel .welcome-panel-content .welcome-panel-column-container { display: flex; justify-content: center; @@ -131,7 +131,7 @@ } } } - + .nav-tab-wrapper { display: flex; gap: 10px; @@ -150,15 +150,15 @@ } } } - + .button-large .dashicons { margin-top: 4px; } - + .submit .button-link { text-decoration: none; } - + .button { border-radius: 12px !important; &:hover { @@ -167,56 +167,56 @@ transition: color .1s ease-in-out, background-color .3s ease-in-out !important; } } - + .button.button-link { padding: 0px 5px; border-radius: 6px; } - + /* Placeholder spinner */ - + .dsq-loading-container { height: 130px; padding-top: 120px; } - + .dsq-spinner { z-index: 500; - + border: 3px solid transparent; border-color: transparent #c2c9d4 transparent #c2c9d4; - + animation: rotate-loading 1.2s linear 0s infinite normal; transform-origin: 50% 50%; - + margin: auto; width: 25px; height: 25px; - + border-radius: 28px; } - + @keyframes rotate-loading { 0% { transform: rotate(0deg); } - + 100% { transform: rotate(360deg); } } - + .dsq-installation__instruction-list { padding-left: 0px; counter-reset: li 0; margin: 35px 0px 0px 70px; } - + .dsq-installation__instruction-list::before, .installation__instruction-list::after { content: " "; display: table; } - + .dsq-installation__instruction-list > li { font-size: 16px; line-height: 1.5em; @@ -225,7 +225,7 @@ margin-bottom: 40px; list-style: none; } - + .dsq-installation__instruction-list > li::before { content: counter(li); counter-increment: li 1; @@ -243,7 +243,7 @@ background: rgb(255, 211, 79); border-radius: 1em; } - + .dsq-icon-support { font-size: 72px; width: 72px; @@ -251,18 +251,18 @@ display: block; margin: 0 auto 5px auto; } - + .dsq-support-list-container { display: flex; flex-wrap: wrap; list-style: none; } - + .dsq-support-list-item { text-align: center; padding: 10px 30px; } - + .dsq-support-list-item a { text-decoration: none; font-size: 14px; From 1a4edd1e5fabe9efbe1050f0768bbfa5b2e1d513 Mon Sep 17 00:00:00 2001 From: Chris Date: Thu, 21 Mar 2024 14:03:52 -0700 Subject: [PATCH 25/26] fix snapshot tests --- .../__snapshots__/HelpResources.test.tsx.snap | 16 +++++++++++++++- .../__snapshots__/WelcomePanel.test.tsx.snap | 13 +++++++++++-- 2 files changed, 26 insertions(+), 3 deletions(-) diff --git a/frontend/tests/components/__snapshots__/HelpResources.test.tsx.snap b/frontend/tests/components/__snapshots__/HelpResources.test.tsx.snap index 2a8cbed..0fd91ee 100644 --- a/frontend/tests/components/__snapshots__/HelpResources.test.tsx.snap +++ b/frontend/tests/components/__snapshots__/HelpResources.test.tsx.snap @@ -1,7 +1,21 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`SupportLinks renders with correct links 1`] = ` -
    From 41f2f7afe000f5d32a43eda681b17123d225cbe2 Mon Sep 17 00:00:00 2001 From: Debian Date: Thu, 28 Mar 2024 18:18:48 +0000 Subject: [PATCH 26/26] update spacing for link in support --- disqus/admin/css/disqus-admin.css | 5 ----- 1 file changed, 5 deletions(-) diff --git a/disqus/admin/css/disqus-admin.css b/disqus/admin/css/disqus-admin.css index e6286b2..3f4d84f 100755 --- a/disqus/admin/css/disqus-admin.css +++ b/disqus/admin/css/disqus-admin.css @@ -46,11 +46,6 @@ } } - .description a { - padding: 5px; - border-radius: 12px; - } - input { border-radius: 6px; }