diff --git a/assets/css/dashboard-widgets/score.css b/assets/css/dashboard-widgets/score.css index 97d43f0f8..4d4cfbf5c 100644 --- a/assets/css/dashboard-widgets/score.css +++ b/assets/css/dashboard-widgets/score.css @@ -1,6 +1,7 @@ #progress_planner_dashboard_widget_score { .prpl-dashboard-widget { + padding-top: 5px; /* Total 16px top spacing */ display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); grid-gap: calc(var(--prpl-gap) / 2); @@ -36,12 +37,12 @@ } .prpl-dashboard-widget-footer { - margin-top: 1em; - padding-top: 1em; + margin-top: 1rem; + padding-top: 1rem; border-top: 1px solid #c3c4c7; /* same color as the one WP-Core uses */ font-size: var(--prpl-font-size-base); display: flex; - gap: 1em; + gap: 0.5rem; align-items: center; } } diff --git a/assets/images/logo_progress_planner_pro.svg b/assets/images/logo_progress_planner_pro.svg new file mode 100644 index 000000000..1532dfc31 --- /dev/null +++ b/assets/images/logo_progress_planner_pro.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/js/web-components/prpl-gauge.js b/assets/js/web-components/prpl-gauge.js index 0ccc0a12e..c82dec531 100644 --- a/assets/js/web-components/prpl-gauge.js +++ b/assets/js/web-components/prpl-gauge.js @@ -16,6 +16,9 @@ customElements.define( start: '270deg', cutout: '57%', contentFontSize: 'var(--prpl-font-size-6xl)', + contentPadding: + 'var(--prpl-padding) var(--prpl-padding) calc(var(--prpl-padding) * 2) var(--prpl-padding)', + marginBottom: 'var(--prpl-padding)', }, content = '' ) { @@ -41,11 +44,18 @@ customElements.define( props.cutout = this.getAttribute( 'cutout' ) || props.cutout; props.contentFontSize = this.getAttribute( 'contentFontSize' ) || props.contentFontSize; + props.contentPadding = + this.getAttribute( 'contentPadding' ) || props.contentPadding; + props.marginBottom = + this.getAttribute( 'marginBottom' ) || props.marginBottom; this.innerHTML = ` -