Merge branch 'main' into release

lightningrodlabs · Mar 27, 2024 · 3e05439 · 3e05439
2 parents 7d3f171 + 638fd92
commit 3e05439
Show file tree

Hide file tree

Showing 20 changed files with 449 additions and 227 deletions.
diff --git a/example/ui/src/applet-main.ts b/example/ui/src/applet-main.ts
@@ -131,6 +131,7 @@ export class AppletMain extends LitElement {
       <div class="column" style="margin-bottom: 500px;">
         <div class="row">
           <div class="column">
+          asdf
             <create-post style="margin: 16px;"></create-post>
             <button @click=${() => this.sendLowNotification(5000)}>
               Send Low Urgency Notification with 5 seconds delay

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "org.lightningrodlabs.we-electron-alpha",
-  "version": "0.11.5",
+  "version": "0.11.6",
   "private": true,
   "description": "Moss (Alpha)",
   "main": "./out/main/index.js",

diff --git a/resources/icons/32x32.png → resources/icons/[email protected] b/resources/icons/32x32.png → resources/icons/[email protected]
diff --git a/resources/icons/icon_priority_high_32x32.png → ...ces/icons/[email protected] b/resources/icons/icon_priority_high_32x32.png → ...ces/icons/[email protected]
diff --git a/...rces/icons/icon_priority_medium_32x32.png → ...s/icons/[email protected] b/...rces/icons/icon_priority_medium_32x32.png → ...s/icons/[email protected]
diff --git a/src/main/index.ts b/src/main/index.ts
@@ -217,12 +217,12 @@ let SYSTRAY: Tray | undefined = undefined;
 let isAppQuitting = false;
 
 // icons
-const SYSTRAY_ICON_DEFAULT = nativeImage.createFromPath(path.join(ICONS_DIRECTORY, '32x32.png'));
+const SYSTRAY_ICON_DEFAULT = nativeImage.createFromPath(path.join(ICONS_DIRECTORY, '32x32@2x.png'));
 const SYSTRAY_ICON_HIGH = nativeImage.createFromPath(
-  path.join(ICONS_DIRECTORY, 'icon_priority_high_32x32.png'),
+  path.join(ICONS_DIRECTORY, 'icon_priority_high_32x32@2x.png'),
 );
 const SYSTRAY_ICON_MEDIUM = nativeImage.createFromPath(
-  path.join(ICONS_DIRECTORY, 'icon_priority_medium_32x32.png'),
+  path.join(ICONS_DIRECTORY, 'icon_priority_medium_32x32@2x.png'),
 );
 
 const handleSignZomeCall = (_e: IpcMainInvokeEvent, zomeCall: ZomeCallUnsignedNapi) => {

diff --git a/src/renderer/public/magic-wand.svg b/src/renderer/public/magic-wand.svg
diff --git a/src/renderer/public/moss-icon.svg b/src/renderer/public/moss-icon.svg
diff --git a/src/renderer/src/elements/feed-element.ts b/src/renderer/src/elements/feed-element.ts
@@ -87,20 +87,22 @@ export class FeedElement extends LitElement {
           }
         }}
       >
-        <div class="row">
-          <applet-title
-            .appletHash=${decodeHashFromBase64(this.notification.appletId)}
-            style="--size: 35px; font-size: 18px;"
-          ></applet-title>
-          <span style="display: flex; flex: 1;"></span>${timeAgo.format(
+        <div class="row" style="align-items: center; justify-content: space-between; width: 100%; opacity: .7;">
+          <div style=" display: flex; align-items: center;">
+            <applet-title
+              .appletHash=${decodeHashFromBase64(this.notification.appletId)}
+              style="--size: 18px; font-size: 12px; color: #fff; display: inline-block;"
+            ></applet-title>
+            <span style="font-size: 12px; display; inline-block; padding-left: 5px;">- ${this.notification.notification.title}</span>
+          </div>
+          <span style="font-size: 12px; padding-right: 10px;">${timeAgo.format(
             this.notification.notification.timestamp,
-          )}
+          )}</span>
         </div>
         <div
           class="row"
-          style="align-items: center; margin-top: 6px; font-size: 20px; font-weight: bold;"
+          style="align-items: center; margin-top: 6px; font-size: 14px; font-weight: bold;"
         >
-          <span>${this.notification.notification.title}</span>
           <span style="display: flex; flex: 1;"></span>
           ${this.notification.notification.icon_src
             ? html`<img
@@ -109,9 +111,11 @@ export class FeedElement extends LitElement {
               />`
             : html``}
 
-          <span style="font-weight: normal; font-size: 18px; margin-left: 6px;"
-            >${this.notification.notification.notification_type}</span
-          >
+          <!-- <span style="font-weight: normal; font-size: 18px; margin-left: 6px;"
+             >${this.notification.notification.notification_type}</span
+           >
+           I'm not sure this is necessary with notification.notification.title already here -Aaron
+          -->
         </div>
         <div class="row" style="display:flex; flex: 1; align-items: center; margin-top: 5px;">
           ${messageParts.map((part) => {
@@ -124,7 +128,7 @@ export class FeedElement extends LitElement {
                 return html`
                   <group-context .groupDnaHash=${this.groupDnaHash}>
                     <profile-detail
-                      style="margin: 0 8px; color: darkblue; font-weight: bold;"
+                      style="margin: 0 8px 0 0; color: white; font-weight: 900;"
                       .agentPubKey=${decodeHashFromBase64(part.pubkey)}
                     ></profile-detail>
                   </group-context>
@@ -168,14 +172,18 @@ export class FeedElement extends LitElement {
       .notification {
         padding: 10px;
         border-radius: 10px;
-        background: var(--sl-color-tertiary-200);
+        background: rgba(22, 35, 17, 1.0);
         margin: 5px;
-        box-shadow: 1px 1px 3px var(--sl-color-primary-800);
+        border: 2px solid 
         cursor: pointer;
+        color: #fff;
+        border: 2px solid rgba(96, 124, 4, .50);
+        transition: all .25s ease;
       }
 
       .notification:hover {
-        background: var(--sl-color-tertiary-100);
+        background-color: rgba(96, 124, 4, 1.0);
+        cursor: pointer;
       }
     `,
     weStyles,

diff --git a/src/renderer/src/elements/group-applets-sidebar.ts b/src/renderer/src/elements/group-applets-sidebar.ts
@@ -55,7 +55,7 @@ export class GroupAppletsSidebar extends LitElement {
           class="row"
           style="align-items: center; font-size: 20px; padding-left: 10px; font-weight: 500;"
         >
-          <span> No applets installed in this group... </span>
+          <span style="color: #fff; font-size: 14px; opacity: .5;"> No applets installed. Join an applet to get started... </span>
         </div>
       `;
     }

diff --git a/src/renderer/src/elements/groups-sidebar.ts b/src/renderer/src/elements/groups-sidebar.ts
@@ -230,7 +230,7 @@ export class GroupsSidebar extends LitElement {
         ${this.renderGroupsLoading()}
 
         <sl-tooltip placement="right" .content=${msg('Add Group')} hoist>
-          <sl-button
+          <button class="moss-button"
             size="large"
             circle
             @click=${() => {
@@ -241,7 +241,6 @@ export class GroupsSidebar extends LitElement {
                 }),
               );
             }}
-            style="margin-top: 8px;"
           >
             <div class="column center-content" style="height: 100%;">
               <sl-icon
@@ -265,7 +264,6 @@ export class GroupsSidebar extends LitElement {
       }
 
       .sidebar {
-        padding-top: 12px;
         align-items: center;
       }
 
@@ -305,6 +303,27 @@ export class GroupsSidebar extends LitElement {
       .active .dropzone-indicator {
         display: block;
       }
+
+      .sidebar {
+        padding-bottom: 10px;
+      }
+
+      .moss-button {
+        width: 40px;
+        height: 40px;
+        outline: none;
+        border: none;
+        color: #fff;
+        background: linear-gradient(270deg, #394333 0%, #526C44 100%);
+        box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+        border-radius: 5px;
+        margin-top: 15px;
+      }
+
+      .moss-button:hover {
+        background: linear-gradient(270deg, #495542 0%, #67924F 100%);
+        cursor: pointer;
+      }
     `,
   ];
 }

diff --git a/src/renderer/src/elements/main-dashboard.ts b/src/renderer/src/elements/main-dashboard.ts
@@ -1009,10 +1009,9 @@ export class MainDashboard extends LitElement {
             ? 'selected'
             : ''}"
         >
-          <sidebar-button
-            style="--size: 58px; --border-radius: 20px; --hover-color: transparent;"
+          <button
+            class="home-button"
             .selected=${false}
-            logoSrc="icon.png"
             .tooltipText=${msg('Home')}
             placement="bottom"
             tabindex="0"
@@ -1032,7 +1031,9 @@ export class MainDashboard extends LitElement {
                 });
               }
             }}
-          ></sidebar-button>
+          >
+            <img class="moss-icon" src="moss-icon.svg" />
+          </button>
         </div>
 
         <groups-sidebar
@@ -1055,36 +1056,45 @@ export class MainDashboard extends LitElement {
         <span style="display: flex; flex: 1;"></span>
 
         <!-- TAB BAR BUTTON -->
-        <div class="row center-content" style="margin-bottom: 5px;">
+        <div class="row center-content" style="margin-bottom: 5px; position: relative;">
           <sl-tooltip content="${msg('Create New Asset')}" placement="right" hoist>
-            <img
+            <button
               tabindex="0"
-              class="search-button"
+              class="moss-button"
               @click=${() => this.openCreatablePanel()}
               @keypress=${(e: KeyboardEvent) => {
                 if (e.key === 'Enter') {
                   this.openCreatablePanel();
                 }
               }}
-              style="height: 58px; margin-bottom: 3px; filter: invert(100%) sepia(32%) saturate(3851%) hue-rotate(178deg) brightness(103%) contrast(104%);"
-              src="magic_hat.svg"
-            />
+            >
+              <img
+                tabindex="0"
+                class="moss-button-icon"
+                src="magic-wand.svg"
+                style="width: 24px; height: 24px;"
+              />
+            </button>
           </sl-tooltip>
         </div>
         <div class="row center-content" style="margin-bottom: 5px;">
           <sl-tooltip content="Search" placement="right" hoist>
-            <sl-icon
-              tabindex="0"
-              class="search-button"
+            <button
+              class="moss-button"
               @click=${() => this.openClipboard()}
               @keypress=${(e: KeyboardEvent) => {
                 if (e.key === 'Enter') {
                   this.openClipboard();
                 }
               }}
-              .src=${wrapPathInSvg(mdiMagnify)}
-              style="color: var(--sl-color-tertiary-0);"
-            ></sl-icon>
+            >
+              <sl-icon
+                tabindex="0"
+                class="moss-button-icon"
+                .src=${wrapPathInSvg(mdiMagnify)}
+                style="color: #fff; height: 24px; width: 24px"
+              ></sl-icon>
+            </button>
           </sl-tooltip>
         </div>
         <div
@@ -1143,7 +1153,7 @@ export class MainDashboard extends LitElement {
                   ></group-applets-sidebar>
                 </group-context>
               `
-            : html`<div style="font-size: 28px;">Home</div>`}
+            : html``}
         </div>
         <div style="display: flex; flex: 1;"></div>
         <div class="row">
@@ -1251,14 +1261,25 @@ export class MainDashboard extends LitElement {
         .top-left-corner {
           align-items: center;
           justify-content: center;
-          background: var(--sl-color-primary-950);
           height: var(--sidebar-width);
-          border-radius: 25px 25px 0 0;
+        }
+
+        .home-button {
+          background-color: transparent;
+          border: none;
+          width: 50px;
+          height: 50px;
+          outline: none;
+        }
+
+        .home-button:hover {
+          cursor: pointer;
         }
 
         .top-left-corner:hover {
-          border-radius: 25px 0 0 25px;
-          background: var(--sl-color-primary-300);
+          border-radius: 100% 0 0 100%;
+          background: linear-gradient(90deg, #96d96e 0%, #394333 90.91%);
+          cursor: pointer;
         }
 
         .hover-browser {
@@ -1311,7 +1332,13 @@ export class MainDashboard extends LitElement {
           left: 74px;
           bottom: 0;
           right: 0;
-          background: white;
+          padding-left: 8px;
+          background-color: rgba(57, 67, 50, 1);
+        }
+
+        #group-view-area {
+          overflow: hidden;
+          max-height: calc(100vh - 70px);
         }
 
         .invisible-scrollbars {
@@ -1324,8 +1351,8 @@ export class MainDashboard extends LitElement {
         }
 
         .selected {
-          border-radius: 25px 0 0 25px;
-          background-color: var(--sl-color-primary-300);
+          border-radius: 100% 0 0 100%;
+          background: linear-gradient(90deg, #597448 0%, #394333 90.91%);
         }
 
         .close-tab-button {
@@ -1434,12 +1461,10 @@ export class MainDashboard extends LitElement {
           left: 0;
           top: 0;
           bottom: 0;
-          background-color: var(--sl-color-primary-950);
-          width: 74px;
+          background: linear-gradient(270deg, #101c09 0%, #293c2c 100%);
         }
 
         .left-group-sidebar {
-          background-color: var(--sl-color-primary-950);
           width: var(--sidebar-width);
           display: flex;
           overflow-y: auto;
@@ -1453,7 +1478,7 @@ export class MainDashboard extends LitElement {
         }
 
         .top-bar {
-          background-color: var(--sl-color-primary-300);
+          background: #394333;
           min-height: var(--sidebar-width);
           align-items: center;
           overflow-x: auto;
@@ -1487,19 +1512,35 @@ export class MainDashboard extends LitElement {
           transform: translateX(102%);
         }
 
-        .search-button {
+        .moss-button-icon {
           font-size: 66px;
-          color: var(--sl-color-primary-300);
+          color: #fff;
           cursor: pointer;
         }
 
-        .search-button:hover {
+        .moss-button-icon:hover {
           color: var(--sl-color-primary-50);
         }
 
-        .search-button:focus {
+        .moss-button-icon:focus {
           color: var(--sl-color-primary-50);
         }
+
+        .moss-button {
+          width: 40px;
+          height: 40px;
+          outline: none;
+          border: none;
+          color: #fff;
+          background: linear-gradient(270deg, #394333 0%, #526c44 100%);
+          box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+          border-radius: 5px;
+        }
+
+        .moss-button:hover {
+          background: linear-gradient(270deg, #495542 0%, #67924f 100%);
+          cursor: pointer;
+        }
       `,
     ];
   }