Repository: manusa/electronim
Pull request #198 (2022-11-12 16:02:10)

♻️ Help doesn't use Bulma

sonarcloud[bot]: Kudos, SonarCloud Quality Gate passed!&nbsp; &nbsp; [![Quality Gate passed](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/checks/QualityGateBadge/passed-16px.png 'Quality Gate passed')](https://sonarcloud.io/dashboard?id=manusa_electronim&pullRequest=198)

[![Bug](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/bug-16px.png 'Bug')](https://sonarcloud.io/project/issues?id=manusa_electronim&pullRequest=198&resolved=false&types=BUG) [![A](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/checks/RatingBadge/A-16px.png 'A')](https://sonarcloud.io/project/issues?id=manusa_electronim&pullRequest=198&resolved=false&types=BUG) [0 Bugs](https://sonarcloud.io/project/issues?id=manusa_electronim&pullRequest=198&resolved=false&types=BUG)  
[![Vulnerability](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/vulnerability-16px.png 'Vulnerability')](https://sonarcloud.io/project/issues?id=manusa_electronim&pullRequest=198&resolved=false&types=VULNERABILITY) [![A](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/checks/RatingBadge/A-16px.png 'A')](https://sonarcloud.io/project/issues?id=manusa_electronim&pullRequest=198&resolved=false&types=VULNERABILITY) [0 Vulnerabilities](https://sonarcloud.io/project/issues?id=manusa_electronim&pullRequest=198&resolved=false&types=VULNERABILITY)  
[![Security Hotspot](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/security_hotspot-16px.png 'Security Hotspot')](https://sonarcloud.io/project/security_hotspots?id=manusa_electronim&pullRequest=198&resolved=false&types=SECURITY_HOTSPOT) [![A](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/checks/RatingBadge/A-16px.png 'A')](https://sonarcloud.io/project/security_hotspots?id=manusa_electronim&pullRequest=198&resolved=false&types=SECURITY_HOTSPOT) [0 Security Hotspots](https://sonarcloud.io/project/security_hotspots?id=manusa_electronim&pullRequest=198&resolved=false&types=SECURITY_HOTSPOT)  
[![Code Smell](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/code_smell-16px.png 'Code Smell')](https://sonarcloud.io/project/issues?id=manusa_electronim&pullRequest=198&resolved=false&types=CODE_SMELL) [![A](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/checks/RatingBadge/A-16px.png 'A')](https://sonarcloud.io/project/issues?id=manusa_electronim&pullRequest=198&resolved=false&types=CODE_SMELL) [0 Code Smells](https://sonarcloud.io/project/issues?id=manusa_electronim&pullRequest=198&resolved=false&types=CODE_SMELL)

[![100.0%](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/checks/CoverageChart/100-16px.png '100.0%')](https://sonarcloud.io/component_measures?id=manusa_electronim&pullRequest=198&metric=new_coverage&view=list) [100.0% Coverage](https://sonarcloud.io/component_measures?id=manusa_electronim&pullRequest=198&metric=new_coverage&view=list)  
[![0.0%](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/checks/Duplications/3-16px.png '0.0%')](https://sonarcloud.io/component_measures?id=manusa_electronim&pullRequest=198&metric=new_duplicated_lines_density&view=list) [0.0% Duplication](https://sonarcloud.io/component_measures?id=manusa_electronim&pullRequest=198&metric=new_duplicated_lines_density&view=list)


sonarcloud[bot]: Kudos, SonarCloud Quality Gate passed!&nbsp; &nbsp; [![Quality Gate passed](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/checks/QualityGateBadge/passed-16px.png 'Quality Gate passed')](https://sonarcloud.io/dashboard?id=manusa_electronim&pullRequest=198)

[![Bug](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/bug-16px.png 'Bug')](https://sonarcloud.io/project/issues?id=manusa_electronim&pullRequest=198&resolved=false&types=BUG) [![A](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/checks/RatingBadge/A-16px.png 'A')](https://sonarcloud.io/project/issues?id=manusa_electronim&pullRequest=198&resolved=false&types=BUG) [0 Bugs](https://sonarcloud.io/project/issues?id=manusa_electronim&pullRequest=198&resolved=false&types=BUG)  
[![Vulnerability](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/vulnerability-16px.png 'Vulnerability')](https://sonarcloud.io/project/issues?id=manusa_electronim&pullRequest=198&resolved=false&types=VULNERABILITY) [![A](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/checks/RatingBadge/A-16px.png 'A')](https://sonarcloud.io/project/issues?id=manusa_electronim&pullRequest=198&resolved=false&types=VULNERABILITY) [0 Vulnerabilities](https://sonarcloud.io/project/issues?id=manusa_electronim&pullRequest=198&resolved=false&types=VULNERABILITY)  
[![Security Hotspot](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/security_hotspot-16px.png 'Security Hotspot')](https://sonarcloud.io/project/security_hotspots?id=manusa_electronim&pullRequest=198&resolved=false&types=SECURITY_HOTSPOT) [![A](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/checks/RatingBadge/A-16px.png 'A')](https://sonarcloud.io/project/security_hotspots?id=manusa_electronim&pullRequest=198&resolved=false&types=SECURITY_HOTSPOT) [0 Security Hotspots](https://sonarcloud.io/project/security_hotspots?id=manusa_electronim&pullRequest=198&resolved=false&types=SECURITY_HOTSPOT)  
[![Code Smell](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/code_smell-16px.png 'Code Smell')](https://sonarcloud.io/project/issues?id=manusa_electronim&pullRequest=198&resolved=false&types=CODE_SMELL) [![A](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/checks/RatingBadge/A-16px.png 'A')](https://sonarcloud.io/project/issues?id=manusa_electronim&pullRequest=198&resolved=false&types=CODE_SMELL) [0 Code Smells](https://sonarcloud.io/project/issues?id=manusa_electronim&pullRequest=198&resolved=false&types=CODE_SMELL)

[![100.0%](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/checks/CoverageChart/100-16px.png '100.0%')](https://sonarcloud.io/component_measures?id=manusa_electronim&pullRequest=198&metric=new_coverage&view=list) [100.0% Coverage](https://sonarcloud.io/component_measures?id=manusa_electronim&pullRequest=198&metric=new_coverage&view=list)  
[![0.0%](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/checks/Duplications/3-16px.png '0.0%')](https://sonarcloud.io/component_measures?id=manusa_electronim&pullRequest=198&metric=new_duplicated_lines_density&view=list) [0.0% Duplication](https://sonarcloud.io/component_measures?id=manusa_electronim&pullRequest=198&metric=new_duplicated_lines_density&view=list)



Patch:
diff --git a/src/components/top-bar.mjs b/src/components/top-bar.mjs
index 1cfc16b..f07dcaa 100644
--- a/src/components/top-bar.mjs
+++ b/src/components/top-bar.mjs
@@ -51,10 +51,13 @@ export const TopAppBar = ({
   icon,
   iconClick = () => {},
   headline
-}) => html`
-  <div class='material3 top-app-bar small elevation-0 surface'>
-    <div class='leading-navigation-icon title-large' onClick=${iconClick}>${icon}</div>
-    <div class='top-app-bar__headline title-large'>${headline}</div>
-    <div class='trailing-icon title-large'></div>
-  </div>
-`;
+}) => {
+  document.body.classList.add('has-top-app-bar');
+  return html`
+    <div class='material3 top-app-bar small elevation-0 surface'>
+      <div class='leading-navigation-icon title-large' onClick=${iconClick}>${icon}</div>
+      <div class='top-app-bar__headline title-large'>${headline}</div>
+      <div class='trailing-icon title-large'></div>
+    </div>
+  `;
+};
diff --git a/src/help/help.browser.css b/src/help/help.browser.css
index 60589e7..8d8ed4e 100644
--- a/src/help/help.browser.css
+++ b/src/help/help.browser.css
@@ -16,14 +16,13 @@
 @import '../styles/main.css';
 
 :root {
-  --top-bar-height: 60px;
   --toc-min-width: 250px;
   overflow: hidden;
 }
 
 .help-root {
   position: fixed;
-  top: var(--top-bar-height);
+  top: var(--material3-top-app-bar-height);
   left: 0;
   bottom: 0;
   right: 0;
@@ -89,6 +88,10 @@
   margin-bottom: var(--default-spacing);
 }
 
+.documents-container img {
+  max-width: 100%;
+}
+
 .documents-container .documents-footer {
   margin: 0;
   padding: calc(var(--default-spacing) * 2);
diff --git a/src/help/help.browser.mjs b/src/help/help.browser.mjs
index 0e73334..fea27fd 100644
--- a/src/help/help.browser.mjs
+++ b/src/help/help.browser.mjs
@@ -15,7 +15,7 @@
  */
 const {docs, close} = window.electron;
 
-import {ELECTRONIM_VERSION, TopBar, html, render} from '../components/index.mjs';
+import {ELECTRONIM_VERSION, html, render, TopAppBar} from '../components/index.mjs';
 
 const helpRoot = () => document.querySelector('.help-root');
 
@@ -53,14 +53,8 @@ const Content = () => html`
 `;
 
 const Help = () => html`
-    <${TopBar} fixed=${true} title='Help'
-      endComponents=${html`
-        <div class='navbar-item'>
-          <button class="button is-link is-light" onClick=${close}>Close</button>
-        </div>
-      `}
-    />
-    <div class="help-content">
+    <${TopAppBar} headline='Help' icon='\uE5C4' iconClick=${close} />
+    <div class="help-content body-large">
       <${Toc} />
       <${Content} />
     </div>
diff --git a/src/help/index.html b/src/help/index.html
index b34bc70..e7fd9ba 100644
--- a/src/help/index.html
+++ b/src/help/index.html
@@ -25,8 +25,5 @@ limitations under the License.
   <body>
     <div class="help-root"></div>
     <script src="./help.browser.mjs" type="module" ></script>
-    <script src="../../bundles/lib/bulma/css/bulma.css.js"></script>
-    <script src="../../bundles/lib/bulma/bulma.dark.scss.js"></script>
-    <script src="../../bundles/lib/@fortawesome/fontawesome-free/css/all.css.js"></script>
   </body>
 </html>
diff --git a/src/styles/base/base.css b/src/styles/base/base.css
index a715f86..d17a3e4 100644
--- a/src/styles/base/base.css
+++ b/src/styles/base/base.css
@@ -60,6 +60,12 @@ html.electronim,
   border-radius: 6px;
   font-size: 85%;
   padding: 16px;
+  overflow-x: auto;
+}
+
+.electronim table {
+  border-spacing: 0;
+  border-collapse: collapse;
 }
 
 .electronim table th,
diff --git a/src/styles/components/top-bar.css b/src/styles/components/top-bar.css
index e7dea9c..02d119d 100644
--- a/src/styles/components/top-bar.css
+++ b/src/styles/components/top-bar.css
@@ -17,9 +17,24 @@
   background: var(--color-canvas-default);
 }
 
+:root {
+  --material3-top-app-bar-height: 64px;
+}
+
+.electronim body.has-top-app-bar {
+  margin-top: var(--material3-top-app-bar-height);
+}
+
+.electronim .material3.top-app-bar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+}
+
 .electronim .material3.top-app-bar.small {
   padding: 0 16px;
-  height: 64px;
+  height: var(--material3-top-app-bar-height);
   display: flex;
   gap: 16px;
   align-items: center;
@@ -30,6 +45,7 @@
   cursor: pointer;
   user-select: none;
 }
+
 .electronim .material3.top-app-bar.small .leading-navigation-icon {
   width: 24px;
   text-align: center;


Test patch:
diff --git a/src/help/__tests__/help.browser.test.mjs b/src/help/__tests__/help.browser.test.mjs
index bfa044f..1e601cd 100644
--- a/src/help/__tests__/help.browser.test.mjs
+++ b/src/help/__tests__/help.browser.test.mjs
@@ -53,7 +53,7 @@ describe('Help in Browser test suite', () => {
   describe('Main Button events', () => {
     test('Close should send close dialog event', () => {
       // When
-      fireEvent.click(document.querySelector('.button.is-link.is-light'));
+      fireEvent.click(document.querySelector('.top-app-bar .leading-navigation-icon'));
       // Then
       expect(mockIpcRenderer.send).toHaveBeenCalledTimes(1);
       expect(mockIpcRenderer.send).toHaveBeenCalledWith('closeDialog');