Removed dependency on glyphicons and added feathericon replacements (#126)

amundsen_application/static/css/_bootstrap-custom.scss

@@ -9,7 +9,6 @@ $icon-font-path: '/static/fonts/bootstrap/';
 // Reset and dependencies
 @import '~bootstrap-sass/assets/stylesheets/bootstrap/normalize';
 @import '~bootstrap-sass/assets/stylesheets/bootstrap/print';
-@import '~bootstrap-sass/assets/stylesheets/bootstrap/glyphicons';
 
 // Core CSS
 @import '~bootstrap-sass/assets/stylesheets/bootstrap/scaffolding';

amundsen_application/static/css/_icons.scss

@@ -16,6 +16,12 @@ img.icon {
 
   // TODO - Add other icons here
 
+
+  &.icon-alert {
+    -webkit-mask-image: url('/static/images/icons/Alert-Triangle.svg');
+    mask-image: url('/static/images/icons/Alert-Triangle.svg');
+  }
+
   &.icon-delete {
     -webkit-mask-image: url('/static/images/icons/Trash.svg');
     mask-image: url('/static/images/icons/Trash.svg');
@@ -61,6 +67,11 @@ img.icon {
     mask-image: url('/static/images/icons/Preview.svg');
   }
 
+  &.icon-refresh {
+    -webkit-mask-image: url('/static/images/icons/Refresh-cw.svg');
+    mask-image: url('/static/images/icons/Refresh-cw.svg');
+  }
+
   &.icon-right {
     -webkit-mask-image: url('/static/images/icons/Right.svg');
     mask-image: url('/static/images/icons/Right.svg');

amundsen_application/static/css/_popovers.scss

@@ -54,13 +54,11 @@
 }
 
 .error-tooltip {
-    display: flex;
-    padding: 5px;
+  display: flex;
+  padding: 5px;
 }
 .error-tooltip button {
   height: 24px;
   width: 24px;
-  font-size: 16px;
   margin: auto;
-  font-family: 'Glyphicons Halflings';
 }

amundsen_application/static/images/icons/Alert-Triangle.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-alert-triangle"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12" y2="17"></line></svg>
\ No newline at end of file

amundsen_application/static/images/icons/Refresh-cw.svg

+<!--Edited viewbox because icon slightly bleeds out of bounds-->
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="-1 -1 26 26" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-refresh-cw"><polyline points="23 4 23 10 17 10"></polyline><polyline points="1 20 1 14 7 14"></polyline><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path></svg>

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

@@ -12,7 +12,7 @@ const NotFoundPage: React.SFC<any> = () => {
       <div className="container not-found-page">
         <Breadcrumb path='/' text='Home'/>
         <h1>404 Page Not Found</h1>
-        <span className="glyphicon glyphicon-exclamation-sign" />
+        <img className="icon icon-alert"/>
       </div>
     </DocumentTitle>
   );

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

@@ -11,7 +11,12 @@
   }
 }
 
-.glyphicon.glyphicon-exclamation-sign {
-  font-size: 75px;
-  color: $brand-primary;
+img.icon.icon-alert {
+  background-color: $brand-primary;
+  display: block;
+  height: 200px;
+  margin: auto;
+  -webkit-mask-size: 100%;
+  mask-size: 100%;
+  width: 200px;
 }

amundsen_application/static/js/components/NotFoundPage/tests/index.spec.tsx

@@ -27,9 +27,9 @@ describe('NotFoundPage', () => {
         expect(subject.find('h1').text()).toEqual('404 Page Not Found');
     });
 
-    it('renders span with glyphicon', () => {
-        expect(subject.find('span').props()).toMatchObject({
-          className: 'glyphicon glyphicon-exclamation-sign',
+    it('renders image icon', () => {
+        expect(subject.find('img').props()).toMatchObject({
+          className: 'icon icon-alert',
         });
     });
 });

amundsen_application/static/js/components/common/EditableText/index.tsx

@@ -128,7 +128,9 @@ class EditableText extends React.Component<EditableTextProps, EditableTextState>
             <Tooltip id='error-tooltip'>
               <div className="error-tooltip">
                 <text>This text is out of date, please refresh the component</text>
-                <button onClick={this.refreshText}>&#xe031;</button>
+                <button onClick={this.refreshText} className="btn btn-flat-icon">
+                  <img className='icon icon-refresh'/>
+                </button>
               </div>
             </Tooltip>
           </Overlay>