From bd104bc5060498b5e47866592ac3ac381a471c08 Mon Sep 17 00:00:00 2001
From: Nemanja Pavlovic <me@pavlovicnemanja.com>
Date: Mon, 15 Apr 2024 13:55:21 +0200
Subject: [PATCH] fix(UI): Small ui fixes

---
 client/components/Dashboard/Tenant.jsx      | 22 +++++++--------
 client/components/UI/ArticleStatusLabel.jsx |  4 +--
 client/styles/_publisher.scss               | 31 ++++++++++++++++++++-
 3 files changed, 43 insertions(+), 14 deletions(-)

diff --git a/client/components/Dashboard/Tenant.jsx b/client/components/Dashboard/Tenant.jsx
index 276fee22..703e869d 100644
--- a/client/components/Dashboard/Tenant.jsx
+++ b/client/components/Dashboard/Tenant.jsx
@@ -3,12 +3,12 @@ import PropTypes from "prop-types";
 
 const Tenant = ({ tenant, sessionToken }) => {
   const tenant_href = tenant.pwa_config && tenant.pwa_config.url
-                ? tenant.pwa_config.url
-                : tenant.output_channel
-                ? tenant.output_channel.config.url
-                : tenant.subdomain
-                ? "https://" + tenant.subdomain + "." + tenant.domain_name
-                : "https://" + tenant.domain_name;
+    ? tenant.pwa_config.url
+    : tenant.output_channel
+      ? tenant.output_channel.config.url
+      : tenant.subdomain
+        ? "https://" + tenant.subdomain + "." + tenant.domain_name
+        : "https://" + tenant.domain_name;
   return (
     <React.Fragment>
       <div className="sd-grid-item-header">
@@ -28,21 +28,21 @@ const Tenant = ({ tenant, sessionToken }) => {
       </div>
       <div className="sd-card sd-card--flex-grow">
         <div className="dashboard-content-header sd-shadow--z1">
-          <div className="big-number-block big-number-block--grow big-number-block--center">
+          <div className={`
+            big-number-block big-number-block--grow big-number-block--center
+            ${tenant.articles_count.toString().length > 5 ? 'big-number-block--wrap' : ''}`}>
             <div className="big-number-block__number">
               {tenant.articles_count}
             </div>
             <div className="big-number-block__text">
-              Published
-              <br />
-              items
+              Published <span>items</span>
             </div>
           </div>
           {!tenant.output_channel ? (
             <div className="btn-icon-group">
               {tenant.pwa_config && tenant.pwa_config.url && (
                 <a
-                  href={tenant_href+"/page-editor?token="+sessionToken}
+                  href={tenant_href + "/page-editor?token=" + sessionToken}
                   className="btn btn--icon-only-circle btn--large btn--hollow"
                   sd-tooltip="Theme Editor"
                   flow="down"
diff --git a/client/components/UI/ArticleStatusLabel.jsx b/client/components/UI/ArticleStatusLabel.jsx
index 808fe03a..ef4353f5 100644
--- a/client/components/UI/ArticleStatusLabel.jsx
+++ b/client/components/UI/ArticleStatusLabel.jsx
@@ -6,7 +6,7 @@ const ArticleStatusLabel = ({ article, style, url }) => {
   if (article.status === "published") {
     return (
       <a
-        className="label label--success cursorPointer"
+        className="label label--success cursorPointer sd-margin-r--1"
         href={url}
         target="_blank"
         style={style}
@@ -18,7 +18,7 @@ const ArticleStatusLabel = ({ article, style, url }) => {
   } else {
     return (
       <span
-        className={classNames("label", {
+        className={classNames("label sd-margin-r--1", {
           "label--alert": article.status == "unpublished"
         })}
         style={style}
diff --git a/client/styles/_publisher.scss b/client/styles/_publisher.scss
index 62da7054..8a4bf1d6 100644
--- a/client/styles/_publisher.scss
+++ b/client/styles/_publisher.scss
@@ -14,9 +14,10 @@
 @import "wizardThemeDetails.scss";
 @import "iconOnHover.scss";
 
-.sd-list-item-group li + li .sd-list-item {
+.sd-list-item-group li+li .sd-list-item {
   border-top: 1px solid rgba(123, 123, 123, 0.2);
 }
+
 .sd-kanban-list__board--wide {
   max-width: 40rem;
 }
@@ -39,9 +40,11 @@
   height: 100% !important;
   max-width: 100% !important;
 }
+
 .modal--kindafullscreen .modal__content {
   margin: 0;
 }
+
 .modal--kindafullscreen .modal__content .modal__body {
   max-width: 100% !important;
 }
@@ -52,7 +55,33 @@
   border-top: 2px dashed red;
   color: red;
 }
+
 .filter-type {
   display: flex;
   gap: var(--gap--small);
 }
+
+.big-number-block__text {
+  >span {
+    display: block;
+  }
+}
+
+.big-number-block {
+  &--wrap {
+    flex-direction: column;
+    align-items: flex-start !important;
+
+    br {
+      display: inline-block;
+    }
+
+    .big-number-block__text {
+      margin-left: 0;
+
+      span {
+        display: inline-block;
+      }
+    }
+  }
+}