chore: fix menu and icon

restorecommerce · Sep 17, 2024 · 4076835 · 4076835
1 parent d7fc509
commit 4076835
Show file tree

Hide file tree

Showing 10 changed files with 52 additions and 116 deletions.
diff --git a/apps/restorecommerce/src/assets/images/restore_commerce_logo_square.svg b/apps/restorecommerce/src/assets/images/restore_commerce_logo_square.svg
diff --git a/packages/core/config/src/lib/constants/app.ts b/packages/core/config/src/lib/constants/app.ts
@@ -15,7 +15,7 @@ const supported: ILanguage[] = [
 
 export const APP: Readonly<IAppConstant> = {
   name,
-  logoUrl: '/assets/images/restore_commerce_logo_full.png',
+  logoUrl: '/assets/images/restore_commerce_logo_square.svg',
   languages: {
     default: {
       ...supported[0],

diff --git a/...ages/modules/ui/src/lib/components/organisms/drawer/drawer-navigation-item.component.html b/...ages/modules/ui/src/lib/components/organisms/drawer/drawer-navigation-item.component.html
@@ -4,11 +4,12 @@
   role="menuitem"
 >
   <div class="w-100p h-100p row">
-    <div class="offset-2 flex row justify-content-center align-items-center">
+    <div class="flex row align-items-center">
       <vcl-icon
         vclPrepend
         [icon]="icon"
-      />
+      ></vcl-icon>
+      <div class="pl-2"><ng-content></ng-content></div>
     </div>
 
     <div class="flex-2">

diff --git a/packages/modules/ui/src/lib/components/organisms/drawer/drawer-navigation-item.component.ts b/packages/modules/ui/src/lib/components/organisms/drawer/drawer-navigation-item.component.ts
@@ -32,7 +32,7 @@ import { RcDrawerNavigationComponent } from './drawer-navigation.component';
   styles: [
     `
       .navigation-item-label > div.row {
-        font-size: 2.5rem;
+        font-size: 1rem;
       }
     `,
   ],

diff --git a/packages/modules/ui/src/lib/components/organisms/header/banner.component.html b/packages/modules/ui/src/lib/components/organisms/header/banner.component.html
@@ -6,8 +6,8 @@
         [ngSrc]="logoUrl"
         class="responsive-image logo"
         role="presentation"
-        width="91"
-        height="30"
+        width="32"
+        height="32"
       />
     </a>
   </ng-container>

diff --git a/packages/modules/ui/src/lib/components/organisms/json-editor/json-editor.component.ts b/packages/modules/ui/src/lib/components/organisms/json-editor/json-editor.component.ts
@@ -18,6 +18,7 @@ export class JSONEditorComponent implements AfterViewInit, OnDestroy {
   @HostBinding('class') classNames = 'col w-100p';
 
   editor!: ace.Ace.Editor;
+  // TODO Make this private and provide an external data accessor value
 
   @Input() value = '';
 

diff --git a/packages/modules/ui/src/lib/components/templates/private/private-template.component.html b/packages/modules/ui/src/lib/components/templates/private/private-template.component.html
@@ -64,24 +64,26 @@
         icon="mdi:receipt-outline"
         [routerLink]="ROUTER.pages.main.children.orders.link"
         [routerLinkActive]="['selected']"
-      />
+        >Orders</rc-drawer-navigation-item
+      >
       <rc-drawer-navigation-item
         icon="mdi:tag-outline"
         [routerLink]="ROUTER.pages.main.children.products.link"
         [routerLinkActive]="['selected']"
-      />
-
+        >Products</rc-drawer-navigation-item
+      >
       <rc-drawer-navigation-item
         icon="mdi:invoice-outline"
         [routerLink]="ROUTER.pages.main.children.invoices.link"
         [routerLinkActive]="['selected']"
-      />
-
+        >Invoices</rc-drawer-navigation-item
+      >
       <rc-drawer-navigation-item
         icon="mdi:truck-outline"
         [routerLink]="ROUTER.pages.main.children.fulfillments.link"
         [routerLinkActive]="['selected']"
-      />
+        >Fulfillments</rc-drawer-navigation-item
+      >
     </ng-container>
     <!-- /Home -->
 

diff --git a/packages/modules/ui/src/lib/styles/drawer.scss b/packages/modules/ui/src/lib/styles/drawer.scss
@@ -1,77 +1,3 @@
-// // Sidebar stuff
-// .drawer-content {
-//   $color-alpha: 0.4;
-
-//   // Workaround to support drawer content margin left
-//   // margin-left: 0 !important;
-
-//   .drawer-open + main.rc-main {
-//     margin-left: 147px !important;
-//     transition: 0.3s;
-//   }
-
-//   .rc-drawer-navigation {
-//     height: 100%;
-
-//     & .navigation {
-//       /* height: 100% */
-//       overflow: hidden;
-
-//       &:hover {
-//         overflow-y: auto;
-//         overflow-y: overlay;
-//         -ms-overflow-style: -ms-autohiding-scrollbar;
-//       }
-
-//       margin-bottom: 0;
-
-//       & .navigation-item {
-//         text-align: center;
-
-//         & vcl-icogram,
-//         & vcl-icon,
-//         & .icogram,
-//         & .icon {
-//           display: block;
-
-//           .icon {
-//             font-size: 2.3em;
-//             margin: 0;
-//             display: block;
-//           }
-
-//           .text {
-//             font-size: 0.85em;
-//             width: 9em;
-//             display: inline-block;
-//             overflow: hidden;
-//             white-space: normal;
-//             margin-top: 0.6em;
-//           }
-//         }
-//       }
-
-//       // Workaround to support programmatic hovering
-//       // Removes the :hover effect of a nav label if the .hovered class is not present
-//       & .navigation-item:not(.selected) {
-//         & .navigation-item-label:hover:not(.hovered) {
-//           color: inherit;
-//           background-color: transparent;
-//         }
-//       }
-//     }
-
-//     & .level2 {
-//       background-color: rgba(250, 250, 250, $color-alpha);
-//       z-index: 1;
-//       box-shadow: 3px 0 3px 0 rgba(0, 0, 0, $color-alpha);
-//     }
-
-//     & .rc-drawer-navigation-submenu-arrow {
-//       text-align: right;
-//       position: absolute;
-//       top: 0;
-//       right: 0;
-//     }
-//   }
-// }
+.drawer.drawer-open {
+  width: 15rem;
+}
diff --git a/packages/modules/ui/src/lib/styles/index.scss b/packages/modules/ui/src/lib/styles/index.scss
@@ -1,6 +1,7 @@
 @use './console.scss';
 @use './app.scss';
 @use './badge.scss';
+@use './drawer.scss';
 @use './forms.scss';
 @use './orders.scss';
 @use './page.scss';

diff --git a/packages/modules/ui/src/lib/styles/sidebar.scss b/packages/modules/ui/src/lib/styles/sidebar.scss
@@ -85,5 +85,7 @@ rc-header.application-header .logo {
 .cdk-overlay-pane {
   & > .rc-drawer-navigation {
     background-color: transparent;
+    width: 15em;
+    font-size: 1rem;
   }
 }