From c95da7dbb6089ec250f318239e2d69614b91fc0a Mon Sep 17 00:00:00 2001
From: George Marshall <george.marshall@consensys.net>
Date: Tue, 4 Jan 2022 16:41:10 -0800
Subject: [PATCH] Updating storybook webpack config and changing font paths
 (#13028)

---
 .storybook/main.js                   |  1 -
 ui/css/design-system/typography.scss | 20 ++++++++++----------
 2 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/.storybook/main.js b/.storybook/main.js
index 5255babda..bcab57971 100644
--- a/.storybook/main.js
+++ b/.storybook/main.js
@@ -30,7 +30,6 @@ module.exports = {
             url: false,
           },
         },
-        'resolve-url-loader',
         {
           loader: 'sass-loader',
           options: {
diff --git a/ui/css/design-system/typography.scss b/ui/css/design-system/typography.scss
index 36544cd19..8bdc20f96 100644
--- a/ui/css/design-system/typography.scss
+++ b/ui/css/design-system/typography.scss
@@ -1,4 +1,4 @@
-$fa-font-path: '/fonts/fontawesome';
+$fa-font-path: 'fonts/fontawesome';
 
 @import '../../../node_modules/@fortawesome/fontawesome-free/scss/fontawesome';
 @import '../../../node_modules/@fortawesome/fontawesome-free/scss/brands';
@@ -9,63 +9,63 @@ $fa-font-path: '/fonts/fontawesome';
   font-family: 'Roboto';
   font-style: normal;
   font-weight: 100;
-  src: local('Roboto Thin'), local('Roboto-Thin'), url('/fonts/Roboto/Roboto-Thin.ttf') format('truetype');
+  src: local('Roboto Thin'), local('Roboto-Thin'), url('fonts/Roboto/Roboto-Thin.ttf') format('truetype');
 }
 
 @font-face {
   font-family: 'Roboto';
   font-style: normal;
   font-weight: 300;
-  src: local('Roboto Light'), local('Roboto-Light'), url('/fonts/Roboto/Roboto-Light.ttf') format('truetype');
+  src: local('Roboto Light'), local('Roboto-Light'), url('fonts/Roboto/Roboto-Light.ttf') format('truetype');
 }
 
 @font-face {
   font-family: 'Roboto';
   font-style: normal;
   font-weight: 400;
-  src: local('Roboto'), local('Roboto-Regular'), url('/fonts/Roboto/Roboto-Regular.ttf') format('truetype');
+  src: local('Roboto'), local('Roboto-Regular'), url('fonts/Roboto/Roboto-Regular.ttf') format('truetype');
 }
 
 @font-face {
   font-family: 'Roboto';
   font-style: normal;
   font-weight: 500;
-  src: local('Roboto Medium'), local('Roboto-Medium'), url('/fonts/Roboto/Roboto-Medium.ttf') format('truetype');
+  src: local('Roboto Medium'), local('Roboto-Medium'), url('fonts/Roboto/Roboto-Medium.ttf') format('truetype');
 }
 
 @font-face {
   font-family: 'Roboto';
   font-style: normal;
   font-weight: 700;
-  src: local('Roboto Bold'), local('Roboto-Bold'), url('/fonts/Roboto/Roboto-Bold.ttf') format('truetype');
+  src: local('Roboto Bold'), local('Roboto-Bold'), url('fonts/Roboto/Roboto-Bold.ttf') format('truetype');
 }
 
 @font-face {
   font-family: 'Roboto';
   font-style: normal;
   font-weight: 900;
-  src: local('Roboto Black'), local('Roboto-Black'), url('/fonts/Roboto/Roboto-Black.ttf') format('truetype');
+  src: local('Roboto Black'), local('Roboto-Black'), url('fonts/Roboto/Roboto-Black.ttf') format('truetype');
 }
 
 @font-face {
   font-family: 'Euclid';
   font-style: normal;
   font-weight: 400;
-  src: url('/fonts/Euclid/EuclidCircularB-Regular-WebXL.ttf') format('truetype');
+  src: url('fonts/Euclid/EuclidCircularB-Regular-WebXL.ttf') format('truetype');
 }
 
 @font-face {
   font-family: 'Euclid';
   font-style: italic;
   font-weight: 400;
-  src: url('/fonts/Euclid/EuclidCircularB-RegularItalic-WebXL.ttf') format('truetype');
+  src: url('fonts/Euclid/EuclidCircularB-RegularItalic-WebXL.ttf') format('truetype');
 }
 
 @font-face {
   font-family: 'Euclid';
   font-style: normal;
   font-weight: 700;
-  src: url('/fonts/Euclid/EuclidCircularB-Bold-WebXL.ttf') format('truetype');
+  src: url('fonts/Euclid/EuclidCircularB-Bold-WebXL.ttf') format('truetype');
 }
 
 $font-family: Euclid, Roboto, Helvetica, Arial, sans-serif;