From 35e6fecc6406ac1b120dadd96313e599616b7104 Mon Sep 17 00:00:00 2001 From: Kaosiso Ezealigo Date: Fri, 23 Aug 2024 13:36:57 +0100 Subject: [PATCH] fix(frontend): Migrate Inter font to use @next/font --- agenta-web/src/pages/_app.tsx | 31 ++-- .../src/styles/tokens/antd-themeConfig.json | 152 ++++++------------ 2 files changed, 67 insertions(+), 116 deletions(-) diff --git a/agenta-web/src/pages/_app.tsx b/agenta-web/src/pages/_app.tsx index 760acc966..e7eed71ea 100644 --- a/agenta-web/src/pages/_app.tsx +++ b/agenta-web/src/pages/_app.tsx @@ -13,6 +13,9 @@ import AppContextProvider from "@/contexts/app.context" import ProfileContextProvider from "@/contexts/profile.context" import "ag-grid-community/styles/ag-grid.css" import "ag-grid-community/styles/ag-theme-alpine.css" +import {Inter} from "next/font/google" + +const inter = Inter({subsets: ["latin"]}) // Initialize the Posthog client if (typeof window !== "undefined") { @@ -44,22 +47,20 @@ export default function App({Component, pageProps}: AppProps) { Agenta: The LLMOps platform. - - - - - - - - - - - - +
+ + + + + + + + + + + +
) } diff --git a/agenta-web/src/styles/tokens/antd-themeConfig.json b/agenta-web/src/styles/tokens/antd-themeConfig.json index 4975d2287..ca186750a 100644 --- a/agenta-web/src/styles/tokens/antd-themeConfig.json +++ b/agenta-web/src/styles/tokens/antd-themeConfig.json @@ -281,8 +281,7 @@ "paddingContentVerticalSM": 8, "controlPaddingHorizontal": 12, "controlPaddingHorizontalSM": 8, - "fontFamily": "Inter", - "fontFamilyCode": "Inter", + "fontSize": 12, "fontSizeLG": 14, "fontSizeSM": 10, @@ -378,8 +377,7 @@ "hoverBg": "#ffffff", "inputFontSize": 12, "inputFontSizeLG": 14, - "inputFontSizeSM": 10, - "fontFamily": "Inter" + "inputFontSizeSM": 10 }, "Transfer": { "listWidthLG": 250, @@ -411,8 +409,7 @@ "colorBgContainerDisabled": "rgba(5, 23, 41, 0.04)", "colorBgContainer": "#ffffff", "itemHeight": 28, - "headerHeight": 34, - "fontFamily": "Inter" + "headerHeight": 34 }, "Segmented": { "segmentedBgColorSelected": "#ffffff", @@ -447,8 +444,7 @@ "itemColor": "#586673", "itemActiveBg": "rgba(5, 23, 41, 0.15)", "trackPadding": 2, - "trackBg": "#ffffff", - "fontFamily": "Inter" + "trackBg": "#ffffff" }, "Switch": { "trackPadding": 2, @@ -473,8 +469,7 @@ "colorPrimaryHover": "#394857", "colorPrimaryBorder": "#d6dee6", "colorPrimary": "#1c2c3d", - "handleBg": "#ffffff", - "fontFamily": "Inter" + "handleBg": "#ffffff" }, "TimePicker": { "timeColumnWidth": 56, @@ -563,8 +558,7 @@ "withoutTimeCellHeight": 66, "inputFontSize": 12, "inputFontSizeLG": 14, - "inputFontSizeSM": 10, - "fontFamily": "Inter" + "inputFontSizeSM": 10 }, "Timeline": { "itemPaddingBottom": 20, @@ -587,8 +581,7 @@ "colorError": "#d61010", "colorBgContainer": "#ffffff", "tailColor": "rgba(5, 23, 41, 0.06)", - "dotBg": "#ffffff", - "fontFamily": "Inter" + "dotBg": "#ffffff" }, "Tabs": { "horizontalItemGutter": 24, @@ -635,8 +628,7 @@ "cardBg": "rgba(5, 23, 41, 0.02)", "titleFontSize": 12, "titleFontSizeLG": 14, - "titleFontSizeSM": 12, - "fontFamily": "Inter" + "titleFontSizeSM": 12 }, "Table": { "stickyScrollBarBorderRadius": 100, @@ -699,8 +691,7 @@ "headerSortHoverBg": "#f0f0f0", "cellFontSize": 12, "cellFontSizeMD": 12, - "cellFontSizeSM": 12, - "fontFamily": "Inter" + "cellFontSizeSM": 12 }, "Steps": { "dotSize": 8, @@ -750,8 +741,7 @@ "iconSize": 28, "finishIconBorderColor": "#1677ff", "customIconFontSize": 24, - "iconFontSize": 12, - "fontFamily": "Inter" + "iconFontSize": 12 }, "Spin": { "dotSizeSM": 14, @@ -766,8 +756,7 @@ "colorText": "#1c2c3d", "colorPrimary": "#1c2c3d", "colorBgContainer": "#ffffff", - "dotSizeLG": 28, - "fontFamily": "Inter" + "dotSizeLG": 28 }, "Slider": { "railSize": 4, @@ -804,8 +793,7 @@ "handleActiveColor": "#1c2c3d", "dotBorderColor": "#eaeff5", "dotActiveBorderColor": "#d6dee6", - "handleColorDisabled": "#bfbfbf", - "fontFamily": "Inter" + "handleColorDisabled": "#bfbfbf" }, "Rate": { "rateStarSize": 20, @@ -815,8 +803,7 @@ "fontSize": 12, "controlHeightLG": 34, "colorText": "#1c2c3d", - "colorFillContent": "rgba(5, 23, 41, 0.06)", - "fontFamily": "Inter" + "colorFillContent": "rgba(5, 23, 41, 0.06)" }, "Radio": { "radioSize": 16, @@ -860,8 +847,7 @@ "buttonCheckedColorDisabled": "#bdc7d1", "buttonCheckedBgDisabled": "rgba(5, 23, 41, 0.15)", "buttonCheckedBg": "#ffffff", - "buttonBg": "#ffffff", - "fontFamily": "Inter" + "buttonBg": "#ffffff" }, "Popover": { "titleMinWidth": 177, @@ -879,8 +865,7 @@ "colorTextHeading": "#1c2c3d", "colorText": "#1c2c3d", "colorSplit": "rgba(5, 23, 41, 0.06)", - "colorBgElevated": "#ffffff", - "fontFamily": "Inter" + "colorBgElevated": "#ffffff" }, "Notification": { "width": 384, @@ -907,8 +892,7 @@ "colorError": "#d61010", "colorBgElevated": "#ffffff", "lineHeightLG": 1.5714285714285714, - "lineWidthFocus": 4, - "fontFamily": "Inter" + "lineWidthFocus": 4 }, "Tooltip": { "paddingSM": 12, @@ -921,8 +905,7 @@ "borderRadius": 8, "colorTextLightSolid": "#ffffff", "colorText": "#1c2c3d", - "colorBgSpotlight": "rgba(5, 23, 41, 0.9)", - "fontFamily": "Inter" + "colorBgSpotlight": "rgba(5, 23, 41, 0.9)" }, "Menu": { "subMenuItemBg": "rgba(0, 0, 0, 0)", @@ -986,8 +969,7 @@ "itemMarginInline": 4, "iconMarginInlineEnd": 10, "groupTitleFontSize": 12, - "groupTitleLineHeight": 1.6666666666666667, - "fontFamily": "Inter" + "groupTitleLineHeight": 1.6666666666666667 }, "InputNumber": { "paddingInlineSM": 7, @@ -1039,8 +1021,7 @@ "hoverBg": "#ffffff", "inputFontSize": 12, "inputFontSizeLG": 14, - "inputFontSizeSM": 10, - "fontFamily": "Inter" + "inputFontSizeSM": 10 }, "Image": { "previewOperationSize": 18, @@ -1086,8 +1067,7 @@ "headerFontSize": 14, "headerFontSizeSM": 12, "fontHeight": 22, - "fontSizeLG": 14, - "fontFamily": "Inter" + "fontSizeLG": 14 }, "Carousel": { "dotWidth": 16, @@ -1099,8 +1079,7 @@ "controlHeightSM": 24, "controlHeightLG": 34, "colorText": "#1c2c3d", - "colorBgContainer": "#ffffff", - "fontFamily": "Inter" + "colorBgContainer": "#ffffff" }, "Cascader": { "dropdownHeight": 180, @@ -1136,8 +1115,7 @@ "colorBgContainer": "#ffffff", "optionSelectedBg": "#f5f7fa", "menuPadding": 4, - "optionSelectedFontWeight": 600, - "fontFamily": "Inter" + "optionSelectedFontWeight": 600 }, "Calendar": { "yearControlWidth": 80, @@ -1179,8 +1157,7 @@ "itemActiveBg": "#f5f7fa", "fullPanelBg": "#ffffff", "fullBg": "#ffffff", - "fontHeightSM": 20, - "fontFamily": "Inter" + "fontHeightSM": 20 }, "Button": { "paddingInlineSM": 7, @@ -1272,8 +1249,7 @@ "textFontSize": 10, "textFontSizeSM": 10, "fontHeight": 22, - "lineHeight": 1.6666666666666667, - "fontFamily": "Inter" + "lineHeight": 1.6666666666666667 }, "Form": { "screenXSMax": 575, @@ -1309,8 +1285,7 @@ "labelColonMarginInlineEnd": 8, "labelColonMarginInlineStart": 2, "labelHeight": 28, - "labelFontSize": 12, - "fontFamily": "Inter" + "labelFontSize": 12 }, "Avatar": { "marginXXS": 4, @@ -1333,8 +1308,7 @@ "containerSize": 28, "textFontSize": 18, "textFontSizeLG": 20, - "textFontSizeSM": 12, - "fontFamily": "Inter" + "textFontSizeSM": 12 }, "Tour": { "sizePopupArrow": 16, @@ -1360,7 +1334,7 @@ "closeBtnSize": 22, "primaryNextBtnHoverBg": "#f0f0f0", "primaryPrevBtnBg": "rgba(255, 255, 255, 0.15)", - "fontFamily": "Inter", + "lineWidthFocus": 4 }, "QRCode": { @@ -1373,8 +1347,7 @@ "borderRadiusLG": 10, "colorWhite": "#ffffff", "colorText": "#1c2c3d", - "colorSplit": "rgba(5, 23, 41, 0.06)", - "fontFamily": "Inter" + "colorSplit": "rgba(5, 23, 41, 0.06)" }, "Upload": { "paddingXS": 8, @@ -1407,8 +1380,7 @@ "colorBgMask": "rgba(5, 23, 41, 0.45)", "fontHeight": 22, "fontHeightSM": 20, - "lineWidthFocus": 4, - "fontFamily": "Inter" + "lineWidthFocus": 4 }, "Typography": { "paddingSM": 12, @@ -1439,8 +1411,7 @@ "colorLink": "#1c2c3d", "colorErrorHover": "#de4040", "colorErrorActive": "#ab0d0d", - "colorError": "#d61010", - "fontFamilyCode": "Inter" + "colorError": "#d61010" }, "TreeSelect": { "paddingXS": 8, @@ -1470,8 +1441,7 @@ "colorBgContainer": "#ffffff", "titleHeight": 24, "nodeSelectedBg": "#f5f7fa", - "nodeHoverBg": "rgba(5, 23, 41, 0.04)", - "fontFamily": "Inter" + "nodeHoverBg": "rgba(5, 23, 41, 0.04)" }, "Tree": { "paddingSM": 12, @@ -1505,8 +1475,7 @@ "nodeSelectedBg": "#f5f7fa", "nodeHoverBg": "rgba(5, 23, 41, 0.04)", "directoryNodeSelectedColor": "#ffffff", - "directoryNodeSelectedBg": "#1c2c3d", - "fontFamily": "Inter" + "directoryNodeSelectedBg": "#1c2c3d" }, "Tag": { "paddingXXS": 4, @@ -1538,8 +1507,7 @@ "colorErrorBorder": "#ef9f9f", "colorErrorBg": "#fbe7e7", "defaultColor": "#1c2c3d", - "defaultBg": "rgba(5, 23, 41, 0.02)", - "fontFamily": "Inter" + "defaultBg": "rgba(5, 23, 41, 0.02)" }, "Statistic": { "padding": 16, @@ -1551,8 +1519,7 @@ "colorTextDescription": "#758391", "colorText": "#1c2c3d", "contentFontSize": 20, - "titleFontSize": 12, - "fontFamily": "Inter" + "titleFontSize": 12 }, "Skeleton": { "padding": 16, @@ -1626,8 +1593,7 @@ "multipleItemBg": "rgba(5, 23, 41, 0.06)", "clearBg": "#ffffff", "optionFontSize": 12, - "optionSelectedFontWeight": 600, - "fontFamily": "Inter" + "optionSelectedFontWeight": 600 }, "Result": { "paddingXS": 8, @@ -1664,8 +1630,7 @@ "colorBgContainer": "#ffffff", "remainingColor": "rgba(5, 23, 41, 0.06)", "defaultColor": "#1c2c3d", - "circleTextColor": "#1c2c3d", - "fontFamily": "Inter" + "circleTextColor": "#1c2c3d" }, "Popconfirm": { "marginXXS": 4, @@ -1725,8 +1690,7 @@ "itemBg": "#ffffff", "itemActiveColorDisabled": "#bdc7d1", "itemActiveBgDisabled": "rgba(5, 23, 41, 0.15)", - "itemActiveBg": "#ffffff", - "fontFamily": "Inter" + "itemActiveBg": "#ffffff" }, "Modal": { "screenSMMax": 767, @@ -1763,8 +1727,7 @@ "contentBg": "#ffffff", "titleFontSize": 16, "titleLineHeight": 1.25, - "fontHeight": 22, - "fontFamily": "Inter" + "fontHeight": 22 }, "Message": { "paddingXS": 8, @@ -1780,8 +1743,7 @@ "colorSuccess": "#389e0d", "colorInfo": "#1c2c3d", "colorError": "#d61010", - "contentBg": "#ffffff", - "fontFamily": "Inter" + "contentBg": "#ffffff" }, "List": { "screenSM": 576, @@ -1818,8 +1780,7 @@ "headerBg": "rgba(0, 0, 0, 0)", "footerBg": "rgba(0, 0, 0, 0)", "avatarMarginRight": 16, - "descriptionFontSize": 12, - "fontFamily": "Inter" + "descriptionFontSize": 12 }, "FloatButton": { "paddingXXS": 4, @@ -1842,8 +1803,7 @@ "colorPrimaryHover": "#394857", "colorPrimary": "#1c2c3d", "colorFillContent": "rgba(5, 23, 41, 0.06)", - "colorBgElevated": "#ffffff", - "fontFamily": "Inter" + "colorBgElevated": "#ffffff" }, "Empty": { "colorTextDisabled": "#bdc7d1", @@ -1879,8 +1839,7 @@ "colorPrimary": "#1c2c3d", "colorError": "#d61010", "colorBgElevated": "#ffffff", - "paddingBlock": 5, - "fontFamily": "Inter" + "paddingBlock": 5 }, "Drawer": { "paddingXS": 8, @@ -1909,8 +1868,7 @@ "colorTextHeading": "#1c2c3d", "colorText": "#1c2c3d", "colorSplit": "rgba(5, 23, 41, 0.06)", - "lineHeight": 1.6666666666666667, - "fontFamily": "Inter" + "lineHeight": 1.6666666666666667 }, "Descriptions": { "paddingXS": 8, @@ -1935,8 +1893,7 @@ "colorFillAlter": "rgba(5, 23, 41, 0.02)", "titleColor": "#1c2c3d", "labelBg": "rgba(5, 23, 41, 0.02)", - "contentColor": "#1c2c3d", - "fontFamily": "Inter" + "contentColor": "#1c2c3d" }, "DatePicker": { "sizePopupArrow": 16, @@ -2036,8 +1993,7 @@ "inputFontSizeLG": 14, "inputFontSizeSM": 10, "fontHeight": 22, - "fontHeightLG": 24, - "fontFamily": "Inter" + "fontHeightLG": 24 }, "Collapse": { "paddingXXS": 4, @@ -2062,8 +2018,7 @@ "contentBg": "#ffffff", "fontHeight": 22, "fontHeightLG": 24, - "lineHeightLG": 1.5714285714285714, - "fontFamily": "Inter" + "lineHeightLG": 1.5714285714285714 }, "Checkbox": { "paddingXS": 8, @@ -2084,8 +2039,7 @@ "colorPrimary": "#1c2c3d", "colorBorder": "#bdc7d1", "colorBgContainerDisabled": "rgba(5, 23, 41, 0.04)", - "colorBgContainer": "#ffffff", - "fontFamily": "Inter" + "colorBgContainer": "#ffffff" }, "Breadcrumb": { "paddingXXS": 4, @@ -2105,8 +2059,7 @@ "itemColor": "#758391", "separatorMargin": 8, "iconFontSize": 12, - "fontHeight": 22, - "fontFamily": "Inter" + "fontHeight": 22 }, "Anchor": { "paddingXXS": 4, @@ -2118,8 +2071,7 @@ "colorSplit": "rgba(5, 23, 41, 0.06)", "colorPrimary": "#1c2c3d", "linkPaddingInlineStart": 16, - "linkPaddingBlock": 4, - "fontFamily": "Inter" + "linkPaddingBlock": 4 }, "Alert": { "paddingMD": 20, @@ -2150,8 +2102,7 @@ "colorErrorBorder": "#ef9f9f", "colorErrorBg": "#fbe7e7", "colorError": "#d61010", - "withDescriptionIconSize": 20, - "fontFamily": "Inter" + "withDescriptionIconSize": 20 }, "Space": { "paddingXS": 8, @@ -2202,7 +2153,7 @@ "optionActiveBg": "rgba(0, 0, 0, 0.04)", "optionHeight": 32, "optionFontSize": 12, - "fontFamily": "Inter", + "fontSize": 12, "fontSizeIcon": 12, "fontSizeLG": 14, @@ -2229,7 +2180,6 @@ "fontSizeXL": 18 }, "Mentions": { - "fontFamily": "Inter", "fontSize": 12, "lineHeight": 1.6666666666666667 }