style(core): tweak navigation icon sizes/placement (#5065)

spinnaker · Mar 26, 2018 · faebfb2 · faebfb2
1 parent 1289e4c
commit faebfb2
Show file tree

Hide file tree

Showing 11 changed files with 11 additions and 13 deletions.
diff --git a/app/scripts/modules/core/src/application/index.ts b/app/scripts/modules/core/src/application/index.ts
@@ -1,6 +1,7 @@
 export * from './ApplicationIcon';
 export * from './application.model';
 export * from './applicationModel.builder';
+export * from './nav/defaultCategories';
 export * from './modal/validation/applicationName.validator';
 export * from './listExtractor/listExtractor.service';
 export * from './service/application.read.service';

diff --git a/app/scripts/modules/core/src/application/nav/CategoryDropdown.tsx b/app/scripts/modules/core/src/application/nav/CategoryDropdown.tsx
@@ -88,7 +88,7 @@ export class CategoryDropdown extends React.Component<ICategoryDropdownProps, IC
     return (
       <UISrefActive class="active" key={category.key}>
         <UISref to={dataSource.sref}>
-          <a className="nav-item top-level">
+          <a className="nav-item top-level horizontal middle">
             <NavIcon icon={dataSource.icon}/>
             {' ' + dataSource.label}
             <DataSourceNotifications tags={dataSource.alerts} application={application} tabName={category.label}/>

diff --git a/app/scripts/modules/core/src/application/nav/NavIcon.tsx b/app/scripts/modules/core/src/application/nav/NavIcon.tsx
@@ -5,5 +5,5 @@ export interface INavIconProps {
 }
 
 export const NavIcon = ({ icon }: INavIconProps) => {
-  return icon ? <i className={`nav-item-icon fa fa-xs fa-fixed fa-${icon}`}/> : null;
+  return icon ? <i className={`nav-item-icon ${icon}`}/> : null;
 };
diff --git a/app/scripts/modules/core/src/application/nav/applicationNav.component.less b/app/scripts/modules/core/src/application/nav/applicationNav.component.less
@@ -127,7 +127,7 @@
     }
   }
   .nav-item-icon {
-    margin-right: 4px;
+    margin: 1px 4px 0 0;
   }
   .notification {
     margin: 0 5px;

diff --git a/app/scripts/modules/core/src/application/nav/defaultCategories.ts b/app/scripts/modules/core/src/application/nav/defaultCategories.ts
@@ -6,15 +6,15 @@ export const DELIVERY_KEY = 'delivery';
 navigationCategoryRegistry.register({
   key: DELIVERY_KEY,
   label: 'Delivery',
-  icon: 'fa fa-tasks',
+  icon: 'fa fa-fw fa-xs fa-tasks',
   primary: true,
   order: 100,
 });
 
 navigationCategoryRegistry.register({
   key: INFRASTRUCTURE_KEY,
   label: 'Infrastructure',
-  icon: 'fa fa-cloud',
+  icon: 'fa fa-fw fa-xs fa-cloud',
   primary: true,
   order: 200,
 });
diff --git a/app/scripts/modules/core/src/loadBalancer/loadBalancer.dataSource.ts b/app/scripts/modules/core/src/loadBalancer/loadBalancer.dataSource.ts
@@ -29,7 +29,7 @@ module(LOAD_BALANCER_DATA_SOURCE, [
     key: 'loadBalancers',
     category: INFRASTRUCTURE_KEY,
     optional: true,
-    icon: 'fa fa-xs fa-fixed fa-sitemap',
+    icon: 'fa fa-xs fa-fw fa-sitemap',
     loader: loadLoadBalancers,
     onLoad: addLoadBalancers,
     afterLoad: addTags,

diff --git a/app/scripts/modules/core/src/pipeline/pipeline.dataSource.js b/app/scripts/modules/core/src/pipeline/pipeline.dataSource.js
@@ -59,7 +59,7 @@ module.exports = angular
       applicationDataSourceRegistry.registerDataSource({
         optional: true,
         primary: true,
-        icon: 'fa fa-xs fa-fixed fa-list',
+        icon: 'fa fa-xs fa-fw fa-list',
         key: 'executions',
         label: 'Pipelines',
         category: DELIVERY_KEY,

diff --git a/app/scripts/modules/core/src/presentation/main.less b/app/scripts/modules/core/src/presentation/main.less
@@ -1469,11 +1469,8 @@ div.modal-header.has-sticky-headers {
   border-radius: 3px;
   background-color: var(--color-accent);
   padding: 3px 6px;
-  margin-bottom: 3px;
   @media (max-width: 1400px) {
     font-size: 10px;
-    margin-top: -2px;
-    margin-bottom: 2px;
   }
 }
 

diff --git a/app/scripts/modules/core/src/securityGroup/securityGroup.dataSource.ts b/app/scripts/modules/core/src/securityGroup/securityGroup.dataSource.ts
@@ -33,7 +33,7 @@ module(SECURITY_GROUP_DATA_SOURCE, [
       key: 'securityGroups',
       category: INFRASTRUCTURE_KEY,
       optional: true,
-      icon: 'fa fa-xs fa-fixed fa-lock',
+      icon: 'fa fa-xs fa-fw fa-lock',
       loader: loadSecurityGroups,
       onLoad: addSecurityGroups,
       afterLoad: addTags,

diff --git a/app/scripts/modules/core/src/serverGroup/serverGroup.dataSource.ts b/app/scripts/modules/core/src/serverGroup/serverGroup.dataSource.ts
@@ -46,7 +46,7 @@ module(SERVER_GROUP_DATA_SOURCE, [
       sref: '.insight.clusters',
       optional: true,
       primary: true,
-      icon: 'fas fa-xs fa-fixed fa-th-large',
+      icon: 'fas fa-xs fa-fw fa-th-large',
       loader: loadServerGroups,
       onLoad: addServerGroups,
       afterLoad: addTags,

diff --git a/app/scripts/modules/core/src/task/task.dataSource.js b/app/scripts/modules/core/src/task/task.dataSource.js
@@ -43,7 +43,7 @@ module.exports = angular
       afterLoad: runningTasksLoaded,
       lazy: true,
       primary: true,
-      icon: 'fa fa-xs fa-fixed fa-check-square',
+      icon: 'fa fa-sm fa-fw fa-check-square',
     });
 
     applicationDataSourceRegistry.registerDataSource({