update font!

porters-xyz · May 22, 2024 · 9c139c5 · 9c139c5
1 parent ecee808
commit 9c139c5
Show file tree

Hide file tree

Showing 5 changed files with 78 additions and 36 deletions.
diff --git a/web-portal/frontend/components/billing/invoicePreview.tsx b/web-portal/frontend/components/billing/invoicePreview.tsx
@@ -8,16 +8,31 @@ import {
   Page,
   Text,
   Image,
+  Font,
   View,
   StyleSheet,
   PDFViewer,
   Link,
 } from "@react-pdf/renderer";
 import logo from "@frontend/public/porter-footer-logo.png";
+import karlaMedium from "@frontend/public/assets/Karla-Medium.ttf";
+import karlaRegular from "@frontend/public/assets/Karla-Regular.ttf";
+
+Font.register({
+  family: "Karla-Medium",
+  src: karlaMedium,
+});
+
+Font.register({
+  family: "Karla-Regular",
+  src: karlaRegular,
+});
+
 // Create styles
 const styles = StyleSheet.create({
   page: {
     flexDirection: "row",
+    fontFamily: "Karla-Regular",
   },
   section: {
     flexGrow: 1,
@@ -66,6 +81,7 @@ export default function InvoicePreview() {
                     fontSize: 22,
                     color: "#3C2B27",
                     marginTop: 32,
+                    fontFamily: "Karla-Medium",
                   }}
                 >
                   Invoice
@@ -95,7 +111,8 @@ export default function InvoicePreview() {
                     flexDirection: "column",
                     gap: 5,
                     fontWeight: 500,
-                    fontSize: 12,
+                    fontSize: 14,
+                    fontFamily: "Karla-Medium",
                   }}
                 >
                   <Text>Invoice Number</Text>
@@ -109,7 +126,7 @@ export default function InvoicePreview() {
                     flexDirection: "column",
                     gap: 5,
                     fontWeight: 500,
-                    fontSize: 12,
+                    fontSize: 14,
                     marginLeft: 24,
                   }}
                 >
@@ -134,7 +151,7 @@ export default function InvoicePreview() {
               <View
                 style={{
                   marginHorizontal: 32,
-                  fontSize: 10,
+                  fontSize: 12,
                   fontWeight: 400,
                   gap: 3,
                 }}
@@ -157,19 +174,25 @@ export default function InvoicePreview() {
               >
                 <View style={{ gap: 10 }}>
                   <Text>Description</Text>
-                  <Text>RPC Relays</Text>
+                  <Text style={{ fontFamily: "Karla-Medium" }}>RPC Relays</Text>
                 </View>
                 <View style={{ gap: 10 }}>
                   <Text>Qty</Text>
-                  <Text>{Number(currentInvoice?.amount) / 1000}</Text>
+                  <Text style={{ fontFamily: "Karla-Medium" }}>
+                    {Number(currentInvoice?.amount) / 1000}
+                  </Text>
                 </View>
                 <View style={{ gap: 10 }}>
                   <Text>Amount (Token spent)</Text>
-                  <Text>PORTR {Number(currentInvoice?.amount) * 10 ** -6}</Text>
+                  <Text style={{ fontFamily: "Karla-Medium" }}>
+                    PORTR {Number(currentInvoice?.amount) * 10 ** -6}
+                  </Text>
                 </View>
                 <View style={{ gap: 10 }}>
                   <Text>Amount (USD)</Text>
-                  <Text>{`$` + Number(currentInvoice?.amount) / 10 ** 9}</Text>
+                  <Text style={{ fontFamily: "Karla-Medium" }}>
+                    {`$` + Number(currentInvoice?.amount) / 10 ** 9}
+                  </Text>
                 </View>
               </View>
               <View
@@ -193,15 +216,17 @@ export default function InvoicePreview() {
               >
                 <View
                   style={{
+                    borderTop: 0.5,
                     justifyContent: "space-between",
                     flexDirection: "row",
-                    borderTop: 0.5,
                     paddingTop: 10,
                     paddingRight: 8,
                   }}
                 >
                   <Text>Subtotal</Text>
-                  <Text>{`$` + Number(currentInvoice?.amount) / 10 ** 9}</Text>
+                  <Text style={{ fontFamily: "Karla-Medium" }}>
+                    {`$` + Number(currentInvoice?.amount) / 10 ** 9}
+                  </Text>
                 </View>
 
                 <View
@@ -214,7 +239,9 @@ export default function InvoicePreview() {
                   }}
                 >
                   <Text>Total</Text>
-                  <Text>{`$` + Number(currentInvoice?.amount) / 10 ** 9}</Text>
+                  <Text style={{ fontFamily: "Karla-Medium" }}>
+                    {`$` + Number(currentInvoice?.amount) / 10 ** 9}
+                  </Text>
                 </View>
 
                 <View
@@ -224,6 +251,7 @@ export default function InvoicePreview() {
                     borderTop: 0.5,
                     paddingTop: 10,
                     paddingRight: 8,
+                    fontFamily: "Karla-Medium",
                   }}
                 >
                   <Text style={{ fontWeight: "bold" }}>Amount Paid</Text>

diff --git a/web-portal/frontend/next.config.js b/web-portal/frontend/next.config.js
@@ -1,31 +1,44 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-    output: "standalone",
-    webpack: (config) => {
-        config.externals.push("pino-pretty", "lokijs", "encoding");
-        return config;
-    },
-    images: {
-        remotePatterns: [
-            {
-                protocol: "https",
-                hostname: "api.web3modal.com",
-                port: "",
-            },
-            {
-                protocol: "https",
-                hostname: "*.1inch.io",
-            },
-        ],
-    },
-    async rewrites() {
-        return [
-            {
-                source: "/api/:path*",
-                destination: `${process.env.API_ENDPOINT}:path*`,
-            },
-        ];
-    },
+  output: "standalone",
+  webpack: (config) => {
+    config.externals.push("pino-pretty", "lokijs", "encoding");
+    config.module.rules.push({
+      test: /\.(woff|woff2|eot|ttf|otf)$/,
+      use: [
+        {
+          loader: "file-loader",
+          options: {
+            outputPath: "static/fonts/",
+            publicPath: "/_next/static/fonts/",
+            name: "[name].[ext]",
+          },
+        },
+      ],
+    });
+    return config;
+  },
+  images: {
+    remotePatterns: [
+      {
+        protocol: "https",
+        hostname: "api.web3modal.com",
+        port: "",
+      },
+      {
+        protocol: "https",
+        hostname: "*.1inch.io",
+      },
+    ],
+  },
+  async rewrites() {
+    return [
+      {
+        source: "/api/:path*",
+        destination: `${process.env.API_ENDPOINT}:path*`,
+      },
+    ];
+  },
 };
 
 module.exports = nextConfig;
diff --git a/web-portal/frontend/package.json b/web-portal/frontend/package.json
@@ -49,6 +49,7 @@
         "@types/react-dom": "^18",
         "eslint": "^8",
         "eslint-config-next": "14.0.4",
+        "file-loader": "^6.2.0",
         "postcss": "^8.4.33",
         "postcss-preset-mantine": "^1.12.3",
         "postcss-simple-vars": "^7.0.1",

diff --git a/web-portal/frontend/public/assets/Karla-Medium.ttf b/web-portal/frontend/public/assets/Karla-Medium.ttf
diff --git a/web-portal/frontend/public/assets/Karla-Regular.ttf b/web-portal/frontend/public/assets/Karla-Regular.ttf