fix(limel-menu): decrease size of text and icons

re Lundalogik/crm-feature#704 fix #210
Lundalogik · Sep 10, 2019 · 962c765 · 962c765
1 parent 6f4a3ea
commit 962c765
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 3 deletions.
diff --git a/src/components/list/list-renderer.tsx b/src/components/list/list-renderer.tsx
@@ -76,7 +76,7 @@ export class ListRenderer {
                 aria-disabled={item.disabled ? 'true' : 'false'}
                 data-index={index}
             >
-                {item.icon ? this.renderIcon(item) : null}
+                {item.icon ? this.renderIcon(config, item) : null}
                 {this.renderText(item.text, item.secondaryText)}
             </li>
         );
@@ -108,11 +108,12 @@ export class ListRenderer {
     /**
      * Render an icon for a list item
      *
+     * @param {ListRendererConfig} config the config object, passed on from the `renderListItem` function
      * @param {ListItem} item the list item
      *
      * @returns {HTMLElement} the icon element
      */
-    private renderIcon(item: ListItem) {
+    private renderIcon(config: ListRendererConfig, item: ListItem) {
         const style = {};
         if (item.iconColor) {
             style['--icon-background-color'] = item.iconColor;
@@ -123,7 +124,7 @@ export class ListRenderer {
                 class="mdc-list-item__graphic"
                 name={item.icon}
                 style={style}
-                size="medium"
+                size={config.isMenu ? 'small' : 'medium'}
             />
         );
     }

diff --git a/src/components/menu/menu.scss b/src/components/menu/menu.scss
@@ -27,3 +27,11 @@ $menu-item-background-color: #ebebeb;
         }
     }
 }
+
+.mdc-list-item[role="menuitem"] {
+    font-size: 1.3rem;
+
+    .mdc-list-item__graphic {
+        margin-right: 1.4rem;
+    }
+}