Reverse frequent user order positioning (#167)

amundsen_application/static/css/_avatars.scss

+.sb-avatar > div {
+  border: 1px solid white;
+}
+
+.sb-avatar > img {
+  margin: 0px;
+}

amundsen_application/static/css/styles.scss

 @import 'bootstrap-custom';
 
+@import 'avatars';
 @import 'buttons';
 @import 'fonts';
 @import 'icons';

amundsen_application/static/js/components/NavBar/styles.scss

@@ -48,10 +48,6 @@
   box-shadow: 0px 0px 10px -1px rgba(0, 0, 0, .76);
 }
 
-.sb-avatar > div {
-  border: 1px solid white;
-}
-
 .logo-icon {
   max-height: 32px;
   max-width: 144px;

amundsen_application/static/js/components/TableDetail/index.tsx

@@ -124,12 +124,11 @@ export class TableDetail extends React.Component<TableDetailProps & RouteCompone
     })
   };
 
-  getAvatarForUser(fullName, profileUrl) {
+  getAvatarForUser(fullName, profileUrl, zIndex) {
     const popoverHoverFocus = (
       <Popover id="popover-trigger-hover-focus">
         {fullName}
       </Popover>);
-
     if (profileUrl.length !== 0) {
       return (
         <OverlayTrigger key={fullName} trigger={['hover', 'focus']} placement="top" overlay={popoverHoverFocus}>
@@ -137,7 +136,7 @@ export class TableDetail extends React.Component<TableDetailProps & RouteCompone
              style={{ display: 'inline-block', marginLeft: '-5px', backgroundColor: 'white', borderRadius: '90%'}}
              onClick={this.frequentUserOnClick}
           >
-            <Avatar name={fullName} size={25} round={true} style={{ border: '1px solid white' }} />
+            <Avatar name={fullName} size={25} round={true} style={{zIndex, position: 'relative'}} />
           </a>
         </OverlayTrigger>
       );
@@ -146,7 +145,7 @@ export class TableDetail extends React.Component<TableDetailProps & RouteCompone
       <OverlayTrigger key={fullName} trigger={['hover', 'focus']} placement="top" overlay={popoverHoverFocus}>
         <div style={{display: 'inline-block', marginLeft: '-5px',
           backgroundColor: 'white', borderRadius: '90%'}}>
-          <Avatar name={fullName} size={25} round={true} style={{border: '1px solid white'}}/>
+          <Avatar name={fullName} size={25} round={true} style={{zIndex, position: 'relative'}}/>
         </div>
       </OverlayTrigger>
     );
@@ -223,12 +222,12 @@ export class TableDetail extends React.Component<TableDetailProps & RouteCompone
     // "Frequent Users" section
     const readerSectionRenderer = () => {
       return (data.table_readers && data.table_readers.length > 0) ?
-        data.table_readers.map((entry) => {
+        data.table_readers.map((entry, index) => {
           const fullName = entry.reader.display_name;
           const profileUrl = entry.reader.profile_url;
 
           return (
-              this.getAvatarForUser(fullName, profileUrl)
+              this.getAvatarForUser(fullName, profileUrl, data.table_readers.length - index)
           );
         }) :
         (<label className="m-auto">No frequent users exist</label>);

amundsen_application/static/js/components/common/AvatarLabel/styles.scss

@@ -19,7 +19,3 @@
   font-weight: normal;
   min-width: 0;
 }
-
-.sb-avatar > img {
-  margin: 0px;
-}