feat: add Circular font (#21)

Signed-off-by: Patrick Erichsen <[email protected]>
Patrick-Erichsen · Oct 30, 2021 · 52803a7 · 52803a7
1 parent 6f185cf
commit 52803a7
Show file tree

Hide file tree

Showing 7 changed files with 18 additions and 25 deletions.
diff --git a/src/content/App.css b/src/content/App.css
@@ -0,0 +1,4 @@
+@font-face {
+    font-family: CircularStd;
+    src: url("../fonts/CircularStd-Medium.otf") format("opentype");
+}
diff --git a/src/content/App.tsx b/src/content/App.tsx
@@ -2,6 +2,7 @@ import { useState } from 'react';
 import { useUrlChangeChrome } from './hooks/useUrlChangeChrome';
 import { OffiePortals } from './components/OffiePortals';
 import { hasWifiOrWorkspaceFilter, isHomesSearchPage } from './utils';
+import './App.css';
 
 export const App = (): JSX.Element | null => {
     const [isVisible, setIsVisible] = useState<boolean>(false);

diff --git a/src/content/components/OffieButton.tsx b/src/content/components/OffieButton.tsx
@@ -119,12 +119,18 @@ export const OffieButton = ({
                 color="inherit"
                 variant="outlined"
                 onClick={handleClick}
+                sx={{
+                    '& .MuiButton-startIcon': {
+                        marginLeft: 0,
+                    },
+                }}
                 style={{
                     // Custom Styles
                     textTransform: 'none',
-                    fontWeight: 'bolder',
-                    fontSize: 13,
+                    fontFamily: 'CircularStd, Montserrat',
+                    fontWeight: 'lighter',
                     // Airbnb styles
+                    fontSize: 14,
                     height: 24,
                     padding: '3px 8px',
                     borderRadius: 4,
@@ -134,7 +140,7 @@ export const OffieButton = ({
                     outline: 0,
                     color: 'rgb(34, 34, 34)',
                 }}
-                startIcon={<WifiIcon />}
+                startIcon={<WifiIcon style={{ fontSize: 16 }} />}
             >
                 {getButtonText(listingDetails.wifiSentiment)}
             </Button>

diff --git a/src/content/utils/dom.ts b/src/content/utils/dom.ts
@@ -221,7 +221,7 @@ export const waitForMapLoad = async (): Promise<void> => {
     let curWaitMs = 250;
 
     const waitIntervalMs = 250;
-    const maxWaitMs = 10000;
+    const maxWaitMs = 30000;
 
     return new Promise((resolve, reject) => {
         const interval = setInterval(async () => {

diff --git a/src/content/utils/theme.ts b/src/content/utils/theme.ts
@@ -16,6 +16,7 @@ declare module '@mui/material/styles' {
 export const theme = createTheme({
     typography: {
         fontFamily: [
+            'CircularStd',
             'Montserrat',
             'BlinkMacSystemFont',
             '"Segoe UI"',

diff --git a/src/fonts/CircularStd-Medium.otf b/src/fonts/CircularStd-Medium.otf
diff --git a/webpack.config.js b/webpack.config.js
@@ -18,16 +18,11 @@ module.exports = (env) => ({
     module: {
         rules: [
             {
-                test: /\.(png|woff|woff2|eot|ttf|svg)$/,
+                test: /\.(png|woff|woff2|eot|ttf|otf|svg)$/,
                 loader: 'url-loader',
             },
             {
-                test: /\.(js|jsx)$/,
-                use: 'babel-loader',
-                exclude: /node_modules/,
-            },
-            {
-                test: /\.css$/,
+                test: /\.(css|scss)$/,
                 use: ['style-loader', 'css-loader'],
                 exclude: /\.module\.css$/,
             },
@@ -36,20 +31,6 @@ module.exports = (env) => ({
                 loader: 'ts-loader',
                 exclude: /node_modules/,
             },
-            {
-                test: /\.css$/,
-                use: [
-                    'style-loader',
-                    {
-                        loader: 'css-loader',
-                        options: {
-                            importLoaders: 1,
-                            modules: true,
-                        },
-                    },
-                ],
-                include: /\.module\.css$/,
-            },
             {
                 test: /\.svg$/,
                 use: 'file-loader',