From 2932e0f704b043b3ec2a7bc799ea3898a37e76ca Mon Sep 17 00:00:00 2001 From: Chris Tang <82986336+chrisjtang@users.noreply.github.com> Date: Thu, 28 Mar 2024 22:10:26 -0700 Subject: [PATCH] UI/UX Refresh (#134) * add WhatsNew component * add more to WhatsNew * add keys to WhatsNew * welcome panel link styling update * update welcome panel banner text, styling, and spacing. also add mobile styling and centering * hover effects and styling for nav tabs * border-radius for welcome panel * welcome-panel spacing * add scroll for nav-tab overflow for mobile * add button hover and focus effects * link styling across plugin * add icon hover effects * decrease bottom-border for support icon hover to 1px * add border radius to input fields * add ad-optional copy to support tab * add hide and show button for whatsnew * remove box shadow on focus for disqus logo * add styling for whats-new container * update readme * update link in help resources for pricing page * add remove ads button * scope all changes to #disqus-admin id * update latest version to 3.1 * linting * fix snapshot tests * update spacing for link in support --------- Co-authored-by: Chris --- disqus/README.txt | 2 + disqus/admin/css/disqus-admin.css | 344 ++++++++++++------ frontend/src/ts/components/Admin.tsx | 2 + frontend/src/ts/components/HelpResources.tsx | 5 +- frontend/src/ts/components/WelcomePanel.tsx | 13 +- frontend/src/ts/components/WhatsNew.tsx | 29 ++ .../__snapshots__/HelpResources.test.tsx.snap | 16 +- .../__snapshots__/WelcomePanel.test.tsx.snap | 13 +- 8 files changed, 307 insertions(+), 117 deletions(-) create mode 100644 frontend/src/ts/components/WhatsNew.tsx diff --git a/disqus/README.txt b/disqus/README.txt index 22017a2..1c87310 100755 --- a/disqus/README.txt +++ b/disqus/README.txt @@ -14,6 +14,8 @@ Disqus is the web's most popular comment system. Use Disqus to increase engageme The Disqus for WordPress plugin lets site owners and developers easily add Disqus to their sites, replacing the default WordPress comment system. Disqus installs in minutes and automatically imports your existing comments. +In addition to our free-to-use, ad-supported Basic plan, we also offer ad-optional subscription plans that come with more advanced features and access to priority support. Please see our [pricing page](https://disqus.com/pricing/) for more details. + = Why Disqus? = * Simple one-click installation that seamlessly integrates with WordPress without ever needing to edit a single line of code or losing any of your existing comments diff --git a/disqus/admin/css/disqus-admin.css b/disqus/admin/css/disqus-admin.css index 50d4408..3f4d84f 100755 --- a/disqus/admin/css/disqus-admin.css +++ b/disqus/admin/css/disqus-admin.css @@ -3,146 +3,268 @@ * included in this file. */ + #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; -} +#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; + } -.dsq-admin-wrapper { - margin-top: 20px; -} + .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-logo { + img { + padding: 3px; + border: 3px transparent solid; + } + &:hover { + background-color: transparent; + img { + border-bottom: 3px var(--disqus-blue) solid; + } + } + &:focus { + box-shadow: unset !important; + } + } -.button-hero .disqus-icon { - float: left; - margin-top: 7px; - margin-right: 7px; -} + input { + border-radius: 6px; + } + textarea { + border-radius: 0; + } + } -.welcome-panel { - overflow: hidden; -} + .button-hero .disqus-icon { + float: left; + margin-top: 7px; + margin-right: 7px; + } -.about-description { - font-size: 40px !important; - color: #dcdcde; - font-weight: bold; - align-items: center; - text-align: center; -} + .whats-new { + padding: 5px; + &.visible { + border: 2px black solid; + border-radius: 12px; + background-color: white; + } + } -.welcome-panel-column .button { - margin-bottom: 1.33em; -} + .welcome-panel { + overflow: hidden; + border-radius: 12px; + .welcome-panel-content { + min-height: unset; + } + } -.button-large .dashicons { - margin-top: 4px; -} + .about-description { + font-size: 40px !important; + color: var(--disqus-blue); + font-weight: bold; + align-items: center; + text-align: center; + } -.submit .button-link { - text-decoration: none; -} + .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; + } + } + } + } -/* Placeholder spinner */ + .nav-tab-wrapper { + 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; + margin-left: 0; + transition: color .3s ease-in-out, background-color .3s ease-in-out; + &:hover { + background-color: var(--disqus-blue); + color: white; + } + } + } -.dsq-loading-container { - height: 130px; - padding-top: 120px; -} + .button-large .dashicons { + margin-top: 4px; + } -.dsq-spinner { - z-index: 500; + .submit .button-link { + text-decoration: none; + } - border: 3px solid transparent; - border-color: transparent #c2c9d4 transparent #c2c9d4; + .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; + } + } - animation: rotate-loading 1.2s linear 0s infinite normal; - transform-origin: 50% 50%; + .button.button-link { + padding: 0px 5px; + border-radius: 6px; + } - margin: auto; - width: 25px; - height: 25px; + /* Placeholder spinner */ - border-radius: 28px; -} + .dsq-loading-container { + height: 130px; + padding-top: 120px; + } + + .dsq-spinner { + z-index: 500; + + border: 3px solid transparent; + border-color: transparent #c2c9d4 transparent #c2c9d4; -@keyframes rotate-loading { - 0% { - transform: rotate(0deg); + animation: rotate-loading 1.2s linear 0s infinite normal; + transform-origin: 50% 50%; + + margin: auto; + width: 25px; + height: 25px; + + border-radius: 28px; } - 100% { - transform: rotate(360deg); + @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 { + 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::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 { + 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-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-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-container { + display: flex; + flex-wrap: wrap; + list-style: none; + } -.dsq-support-list-item { - text-align: center; - padding: 10px 30px; -} + .dsq-support-list-item { + text-align: center; + padding: 10px 30px; + } -.dsq-support-list-item a { - text-decoration: none; - font-size: 14px; + .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); + } + } } 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/HelpResources.tsx b/frontend/src/ts/components/HelpResources.tsx index 9e7703b..ef48bb1 100644 --- a/frontend/src/ts/components/HelpResources.tsx +++ b/frontend/src/ts/components/HelpResources.tsx @@ -1,7 +1,10 @@ import * as React from 'react'; const HelpResources = () => ( -
diff --git a/frontend/src/ts/components/WhatsNew.tsx b/frontend/src/ts/components/WhatsNew.tsx new file mode 100644 index 0000000..0f47c1e --- /dev/null +++ b/frontend/src/ts/components/WhatsNew.tsx @@ -0,0 +1,29 @@ +import * as React from 'react'; + +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', + '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 = () => { + const [showWhatsNew, setShowWhatsNew] = React.useState(false); + + const handleClick = (): void => { + setShowWhatsNew(!showWhatsNew); + } + return ( +
+ +
+
    + {updates.map((update, index) =>
  • - {update}
    • )} +
+
+
+ ); +}; + +export default WhatsNew; 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`] = ` -