Fix bold

components/toolbar/toolbar.scss

@@ -109,6 +109,11 @@ body {
     }
 
     .about {
+        &__no-errors {
+            text-align: center;
+            padding-bottom: 1.5rem;
+        }
+
         p {
             font-size: 0.875rem;
             font-weight: 700;

components/toolbar/toolbar.tsx

@@ -24,6 +24,10 @@ const Toolbar = () => {
         null
     );
 
+    const first_sentence_cookie = 'Strona dokonała zapisu i odczytu plików Cookie dla domen ';
+    const first_sentence_history =
+        'Część informacji o Twojej historii przeglądania została wysłana do ';
+
     React.useEffect(() => {
         const listener = async () => {
             const tab = await getCurrentTab();
@@ -51,29 +55,24 @@ const Toolbar = () => {
             .filter((cluster) => cluster.exposesOrigin())
             .map((cluster) => cluster.id);
         setExposedOriginDomainCopy('');
-        const first_sentence = `Strona ${origin} wysłała informacje o części Twojej historii przeglądania do `;
 
         switch (exposedOriginDomains.length) {
             case 0:
                 return null;
             case 1:
-                return setExposedOriginDomainCopy(first_sentence + `${exposedOriginDomains[0]}.`);
+                return setExposedOriginDomainCopy(`${exposedOriginDomains[0]}.`);
             case 2:
                 return setExposedOriginDomainCopy(
-                    first_sentence + `${exposedOriginDomains[0]} oraz ${exposedOriginDomains[1]}.`
+                    `${exposedOriginDomains[0]} oraz ${exposedOriginDomains[1]}.`
                 );
             case 3:
                 return setExposedOriginDomainCopy(
-                    first_sentence +
                     `${exposedOriginDomains[0]}, ${exposedOriginDomains[1]} oraz ${exposedOriginDomains[2]}.`
                 );
             default:
                 return setExposedOriginDomainCopy(
-                    first_sentence +
                     `${exposedOriginDomains[0]}, ${exposedOriginDomains[1]} (i ${
-                            exposedOriginDomains.length - 2 < 2
+                        exposedOriginDomains.length - 2 < 2 ? 2 : exposedOriginDomains.length - 2
-                                ? 2
-                                : exposedOriginDomains.length - 2
                     } innych).`
                 );
         }
@@ -84,25 +83,20 @@ const Toolbar = () => {
             .filter((cluster) => cluster.hasCookies())
             .map((cluster) => cluster.id);
         setCookieDomainCopy('');
-        const first_sentence = `Strona ${origin} dokonała zapisu i odczytu plików Cookie dla domen `;
 
         switch (cookieDomains.length) {
             case 0:
                 return null;
             case 1:
-                return setCookieDomainCopy(first_sentence + `${cookieDomains[0]}.`);
+                return setCookieDomainCopy(`${cookieDomains[0]}.`);
             case 2:
-                return setCookieDomainCopy(
+                return setCookieDomainCopy(`${cookieDomains[0]} oraz ${cookieDomains[1]}.`);
-                    first_sentence + `${cookieDomains[0]} oraz ${cookieDomains[1]}.`
-                );
             case 3:
                 return setCookieDomainCopy(
-                    first_sentence +
                     `${cookieDomains[0]}, ${cookieDomains[1]} oraz ${cookieDomains[2]}.`
                 );
             default:
                 return setCookieDomainCopy(
-                    first_sentence +
                     `${cookieDomains[0]}, ${cookieDomains[1]} (i ${
                         cookieDomains.length - 2 < 2 ? 2 : cookieDomains.length - 2
                     } innych).`
@@ -184,6 +178,7 @@ const Toolbar = () => {
             </section>
 
             <section className="details">
+                {exposedOriginDomainCopy ? (
                     <p
                         data-event={`${eventCounts['*']}`}
                         title={Object.values(getMemory().getClustersForOrigin(origin))
@@ -191,8 +186,11 @@ const Toolbar = () => {
                             .map((domain) => domain.id)
                             .join(', ')}
                     >
-                    {exposedOriginDomainCopy}
+                        {first_sentence_cookie}
+                        <strong>{exposedOriginDomainCopy}</strong>
                     </p>
+                ) : null}
+                {cookieDomainCopy ? (
                     <p
                         data-event={`${eventCounts['*']}`}
                         title={Object.values(getMemory().getClustersForOrigin(origin))
@@ -200,11 +198,13 @@ const Toolbar = () => {
                             .map((domain) => domain.id)
                             .join(', ')}
                     >
-                    {cookieDomainCopy}
+                        {first_sentence_history}
+                        <strong>{cookieDomainCopy}</strong>
                     </p>
+                ) : null}
             </section>
 
-            {exposedOriginDomainCopy !== null || cookieDomainCopy !== null ? (
+            {exposedOriginDomainCopy || cookieDomainCopy ? (
                 <Fragment>
                     <section className="about">
                         <p>
@@ -229,7 +229,13 @@ const Toolbar = () => {
                         </button>
                     </section>
                 </Fragment>
-            ) : null}
+            ) : (
+                <Fragment>
+                    <section className="about about__no-errors">
+                        <p>Nie znaleziono problemów na tej stronie.</p>
+                    </section>
+                </Fragment>
+            )}
         </div>
     );
 };