Repository: manusa/electronim
Pull request #205 (2022-11-16 16:37:53)

✨ about dialog shows logo


Patch:
diff --git a/src/about/about.browser.css b/src/about/about.browser.css
index 42f3a90..db783ee 100644
--- a/src/about/about.browser.css
+++ b/src/about/about.browser.css
@@ -27,6 +27,23 @@ body {
 .about-content {
   padding: 16px;
 }
+
+.about-content .card__image {
+  --negative-margin: calc(-1 * var(--material3-card-padding));
+  margin: var(--negative-margin) var(--negative-margin) var(--material3-card-padding) var(--negative-margin);
+  background-color: var(--md-sys-color-surface-variant);
+  border-radius: var(--md-sys-shape-corner-medium-default-size);
+  padding: var(--material3-card-padding);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.about-content .electronim-logo {
+  width: 30%;
+  max-width: 250px;
+}
+
 .about-content .about-content__release {
   margin: 8px 0;
 }
diff --git a/src/about/about.browser.mjs b/src/about/about.browser.mjs
index 03ed1aa..22d5f06 100644
--- a/src/about/about.browser.mjs
+++ b/src/about/about.browser.mjs
@@ -13,7 +13,7 @@
    See the License for the specific language governing permissions and
    limitations under the License.
  */
-import {ELECTRONIM_VERSION, html, render, Card, TopAppBar} from '../components/index.mjs';
+import {ELECTRONIM_VERSION, html, render, Card, Logo, TopAppBar} from '../components/index.mjs';
 
 const {close, versions} = window.electron;
 
@@ -31,7 +31,10 @@ const Version = ({component, value}) => html`
 const About = () => html`
   <${TopAppBar} icon='\uE5C4' iconClick=${close} headline='About ElectronIM'/>
   <div class='about-content'>
-    <${Card} headline=${`ElectronIM ${ELECTRONIM_VERSION}`}>
+    <${Card}
+        image=${html`<${Logo} />`}
+        headline=${`ElectronIM ${ELECTRONIM_VERSION}`}
+    >
       <div class='about-content__release'>
         <a href=${`https://github.com/manusa/electronim/releases/tag/v${ELECTRONIM_VERSION}`}>
           Release Notes
diff --git a/src/components/card.mjs b/src/components/card.mjs
index 3310794..7fd7840 100644
--- a/src/components/card.mjs
+++ b/src/components/card.mjs
@@ -19,19 +19,26 @@ import {html} from './index.mjs';
  A card based on Material design (3) guidelines.
  */
 export const Card = ({
+  type = Card.types.elevated,
+  image,
   headline,
   subHeadline,
   children
 }) => html`
-  <div class='material3 card elevation-1 surface shape-medium body-medium'>
+  <div class=${`material3 card body-medium ${type}`}>
     <div class='card__content'>
-      <div class='card__headline headline-large'>${headline}</div>
+      ${image && html`<div class='card__image'>${image}</div>`}
+      ${headline && html`<div class='card__headline headline-large'>${headline}</div>`}
       ${subHeadline && html`<div class='card__subHeadline headline-small'>${subHeadline}</div>`}
       <div>${children}</div>
     </div>
   </div>
 `;
 
+Card.types = {
+  elevated: 'elevated'
+};
+
 Card.Divider = () => html`
   <div class='card__divider' />
 `;
diff --git a/src/components/electronim.mjs b/src/components/electronim.mjs
new file mode 100644
index 0000000..e3665e0
--- /dev/null
+++ b/src/components/electronim.mjs
@@ -0,0 +1,66 @@
+/*
+   Copyright 2019 Marc Nuri San Felix
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.
+ */
+import {html} from './index.mjs';
+
+export const Logo = ({
+  electronColor = '#87c7d8',
+  nucleusColor = '#42598c',
+  orbitColor = '#d89f87',
+  ...props
+}) => html`
+  <svg class='electronim-logo' viewBox='0 0 390 390' xmlSpace='preserve' ...${props} >
+    <style>
+      .electron{
+        fill: ${electronColor}
+      }
+      .nucleus {
+        fill: url(#nucleusGradient);
+      }
+      .orbit {
+        fill: none;
+        stroke: ${orbitColor};
+        stroke-width: 2.7469;
+        stroke-miterlimit: 10;
+      }
+    </style>
+    <path
+      id='orbit'
+      d='M160.3 340.5c-6.4-3.3-11.9-8.1-16.8-13.7-14-16-23.4-39-33.6-53.1-10.3-14.1-22.9-43.8-34.3-78.1-8.4-25.1-10.3-75.9-8.2-85.3 1.9-8.5 9-22 20.1-33.1 15.8-15.8 38.7-14.6 63.1-12.4C203.1 69.5 263.3 98 278.8 107c39.1 22.7 76 44.2 77.8 77.8 1.9 34.9-32.3 66.5-69.1 89.8-15.9 10.1-75.3 47.9-153 45.7-22.1-.6-38.8-2.2-52.3-16.9C66.4 286 65.6 253 70 218.3c7.3-57.3 33.2-98 42.6-113.1 25.6-41.1 51.6-68.8 82.4-71.4 43.2-3.6 66.7 48 90.6 87 11.3 18.5 43 74.6 37.1 142.8-2.3 26.4-8.6 36.4-13.7 42.1-22 24.6-64 18.5-97.1 13.7 0 0-99.9-14.5-165.7-92-6.7-7.9-13.9-18.1-14.6-31.6-.9-17.1 9.2-30.4 19.7-43.9 15.1-19.4 31.5-32 43.9-40.3 33.9-22.6 64.7-31 92.9-38.5 2.5-.7 40.3-10.4 78.3-8.2 7.5.4 18.6 1.5 30.2 8.2 3.8 2.2 14.3 8.5 20.6 20.6 6.5 12.5 8.6 28.6 8.7 36.6.7 41.9-10.4 79.7-31 122.7-10.9 22.7-23.5 35.6-37.7 54.9-10.5 14.4-17.8 22.5-28.8 29.3-11.9 7.3-26.5 10.4-34.3 11.6 0 .1-14.1 1.8-33.8-8.3z'
+      class='orbit'
+    />
+    <g id='electrons'>
+      <circle id='b' class='electron' cx=${195} cy=${351.6} r=${25.2}/>
+      <circle id='b-r' class='electron' cx=${282.9} cy=${282.9} r=${25.2}/>
+      <circle id='b-l' class='electron' cx=${112.6} cy=${282.9} r=${25.2}/>
+      <circle id='m-r' class='electron' cx=${354.3} cy=${197.7} r=${25.2}/>
+      <radialGradient id='nucleusGradient'>
+        <stop offset=${0} style=${{stopColor: nucleusColor}} />
+        <stop offset='75%' style=${{stopColor: nucleusColor, stopOpacity: 0.92}} />
+        <stop offset='100%'
+          style=${{stopColor: nucleusColor, stopOpacity: 0.8}} />
+      </radialGradient>
+      <path
+        id='nucleus'
+        d='M195 122.2c-41.7 0-75.6 33.9-75.6 75.6 0 41.7 33.9 75.6 75.6 75.6 41.7 0 75.6-33.9 75.6-75.6 0-41.7-33.9-75.6-75.6-75.6zm33.9 106.5h-66v-12h66zm-18-24h-48v-12h48zm18-24h-66v-12h66z'
+        class='nucleus'
+      />
+      <circle id='m-l' class='electron' cx=${35.7} cy=${197.7} r=${25.2}/>
+      <circle id='t-r' class='electron' cx=${282.9} cy=${109.8} r=${25.2}/>
+      <circle id='t-l' class='electron' cx=${112.6} cy=${109.8} r=${25.2}/>
+      <circle id='t' class='electron' cx=${195} cy=${38.4} r=${25.2}/>
+    </g>
+  </svg>
+`;
diff --git a/src/components/index.mjs b/src/components/index.mjs
index 9cc5db9..a6fcc00 100644
--- a/src/components/index.mjs
+++ b/src/components/index.mjs
@@ -21,6 +21,7 @@ export {Checkbox, Field, HorizontalField, Select, sizes} from './form/index.mjs'
 export {DropDown} from './drop-down.mjs';
 export {Icon} from './icon.mjs';
 export {IconButton} from './icon-button.mjs';
+export {Logo} from './electronim.mjs';
 export {Menu} from './menu.mjs';
 export {Panel} from './panel.mjs';
 export {TopAppBar} from './top-app-bar.mjs';
diff --git a/src/styles/components/card.css b/src/styles/components/card.css
index 1653421..6afb1b1 100644
--- a/src/styles/components/card.css
+++ b/src/styles/components/card.css
@@ -17,8 +17,37 @@
   --material3-card-padding: 16px;
 }
 
-.electronim .material3.card:hover {
-  background-color: var(--md-sys-color-secondary-container);
+.electronim .material3.card {
+  position: relative;
+  z-index: 0;
+  border-radius: var(--md-sys-shape-corner-medium-default-size);
+}
+
+.electronim .material3.card.elevated {
+  background-color: var(--md-sys-color-surface);
+  box-shadow: var(--md-sys-elevation-1);
+}
+
+.electronim .material3.card.elevated:hover {
+  box-shadow: var(--md-sys-elevation-2);
+}
+
+.electronim .material3.card::before {
+  content: '';
+  border-radius: var(--md-sys-shape-corner-medium-default-size);
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: -1;
+  opacity: 0;
+  transition: opacity 200ms linear;
+}
+
+.electronim .material3.card.elevated:hover::before {
+  background-color: var(--md-sys-color-on-surface);
+  opacity: var(--md-sys-state-hover-state-layer-opacity);
 }
 
 .electronim .material3.card .card__content {


Test patch:
diff --git a/src/about/__tests__/about.browser.test.mjs b/src/about/__tests__/about.browser.test.mjs
index 2cd2984..0aa294b 100644
--- a/src/about/__tests__/about.browser.test.mjs
+++ b/src/about/__tests__/about.browser.test.mjs
@@ -45,5 +45,9 @@ describe('About in Browser test suite', () => {
       }));
     expect(versions).toContainEqual({label, version: expectedVersion});
   });
+  test('Shows an icon with ElectronIM logo', () => {
+    expect(document.querySelector('.about-content .card__image svg.electronim-logo'))
+      .not.toBeNull();
+  });
 });