[no-merge] style changes with current font

.eslintrc.json

@@ -103,6 +103,7 @@
     "es-x/no-promise-all-settled": "off",
     "es-x/no-promise-withresolvers": "off",
     "es-x/no-array-prototype-findlast-findlastindex": "off",
+    "es-x/no-array-prototype-toreversed": "off",
 
     "no-restricted-imports": [
       "error",

.gitignore

@@ -39,3 +39,5 @@ package-lock.json
 !.yarn/sdks
 !.yarn/versions
 /.idea/
+
+CLAUDE.md

package.json

@@ -7,10 +7,10 @@
     "start": "VITE_APP_VERSION=$(git rev-parse HEAD) vite --port 3010 --host",
     "start-home": "yarn lingui:prepare && VITE_APP_VERSION=$(git rev-parse HEAD) env-cmd -e development-home vite --port 3010",
     "start-app": "yarn lingui:prepare && VITE_APP_VERSION=$(git rev-parse HEAD) env-cmd -e development-app vite --port 3011",
-    "build": "VITE_APP_VERSION=$(git rev-parse HEAD) vite build",
-    "build:analyze": "VITE_APP_VERSION=$(git rev-parse HEAD) vite build --mode analyze",
-    "build-home": "VITE_APP_VERSION=$(git rev-parse HEAD) env-cmd -e production-home vite build",
-    "build-app": "VITE_APP_VERSION=$(git rev-parse HEAD) env-cmd -e production-app vite build",
+    "build": "NODE_OPTIONS='--max-old-space-size=8192' VITE_APP_VERSION=$(git rev-parse HEAD) vite build",
+    "build:analyze": "NODE_OPTIONS='--max-old-space-size=8192' VITE_APP_VERSION=$(git rev-parse HEAD) vite build --mode analyze",
+    "build-home": "NODE_OPTIONS='--max-old-space-size=8192' VITE_APP_VERSION=$(git rev-parse HEAD) env-cmd -e production-home vite build",
+    "build-app": "NODE_OPTIONS='--max-old-space-size=8192' VITE_APP_VERSION=$(git rev-parse HEAD) env-cmd -e production-app vite build",
     "test": "vitest",
     "test:ci": "vitest run",
     "lint": "node node_modules/.bin/eslint src",
@@ -82,7 +82,7 @@
     "react-dom": "18.2.0",
     "react-helmet": "6.1.0",
     "react-hot-toast": "2.2.0",
-    "react-icons": "4.3.1",
+    "react-icons": "5.5.0",
     "react-jazzicon": "1.0.4",
     "react-loading-skeleton": "3.3.1",
     "react-remove-scroll": "2.5.5",

public/tradingview-chart.css

@@ -1,15 +1,15 @@
 .theme-dark:root {
-  --dark-blue-bg: #16182e;
+  --dark-blue-bg: #121421;
   --color-blue-600: #2d42fc;
   --tv-color-pane-background: var(--dark-blue-bg);
   --tv-color-platform-background: var(--dark-blue-bg);
   --tv-color-pane-background-secondary: var(--dark-blue-bg);
   --tv-color-toolbar-button-text-hover: #b2b5be;
   --tv-color-toolbar-button-background-hover: #272942;
   --tv-color-toolbar-button-text-active: #ffffff;
-  --tv-color-toolbar-toggle-button-background-active: #3a3e5e;
-  --tv-color-toolbar-toggle-button-background-active-hover: #3a3e5e;
-  --tv-color-toolbar-button-background-expanded: var(--dark-blue-bg);
+  --tv-color-toolbar-toggle-button-background-active: var(--color-blue-600);
+  --tv-color-toolbar-toggle-button-background-active-hover: var(--color-blue-600);
+  --tv-color-toolbar-button-background-expanded: var(--color-blue-600);
 
   --tv-color-popup-background: #20243f;
   --themed-color-bg-primary: #20243f;
@@ -41,6 +41,7 @@ html.theme-dark [data-role="menuitem"] {
 
 html.theme-dark .chart-page {
   font-family: "Relative", sans-serif;
+  font-variant-numeric: tabular-nums lining-nums;
 }
 
 html.theme-dark .chart-controls-bar {
@@ -71,14 +72,6 @@ html.theme-dark .chart-controls-bar {
   --tv-color-pane-background: var(--tv-color-toolbar-toggle-button-background-active);
   --themed-color-arrow-stroke: var(--dark-blue-bg);
 }
-
-[data-name="toolbar-drawing-toggle-button"][data-value="collapsed"]:hover,
-[data-name="toolbar-drawing-toggle-button"][data-value="visible"]:hover {
-  --tv-color-toolbar-toggle-button-background-active-hover: #464a6e;
-  --tv-color-platform-background: #464a6e;
-  --tv-color-pane-background: #464a6e;
-}
-
 /* Hide tooltip tail */
 html.theme-dark .common-tooltip__ear-holder-EJBD96zX:after {
   display: none;

sdk/src/prebuilt/hashedKinkModelMarketRatesKeys.json

@@ -1031,4 +1031,4 @@
       "aboveOptimalUsageBorrowingFactorShort": "0x1ecf10a4f1f28b4e3c1f1fae6af7ea5a7e93d90844720b89b38509945c507896"
     }
   }
-}
+}

sdk/src/prebuilt/hashedMarketConfigKeys.json

@@ -6535,4 +6535,4 @@
       "virtualShortTokenId": "0xb315f0a55a09b93c77ef9d370a2278b19027c88ccc7afd8b899b98bb033ffed6"
     }
   }
-}
+}

sdk/src/prebuilt/hashedMarketValuesKeys.json

@@ -1927,4 +1927,4 @@
       "shortInterestInTokensUsingShortToken": "0x459afc07ae83faa216fe9bcbbb75a032a0557d866842476547540f230077ab76"
     }
   }
-}
+}

src/App/App.scss

@@ -4,6 +4,12 @@ $app-card-padding: 1.5rem;
   position: relative;
   min-height: 100%;
   font-size: var(--font-size-body-medium);
+  height: 100%;
+  font-variant-numeric: tabular-nums lining-nums;
+}
+
+.App-content {
+  height: 100%;
 }
 
 .App-content header {
@@ -99,8 +105,8 @@ $app-card-padding: 1.5rem;
 .App-box-highlight,
 .App-box-solid {
   position: relative;
-  border-radius: 0.4rem;
-  background: var(--color-slate-800);
+  border-radius: 8px;
+  background: var(--color-slate-900);
   font-size: var(--font-size-body-medium);
 }
 
@@ -129,9 +135,9 @@ $app-card-padding: 1.5rem;
 }
 
 .App-card-divider-vertical {
-  width: 1px;
+  width: 0.5px;
   height: 8.8rem;
-  background: var(--color-slate-100);
+  background: var(--color-slate-600);
 }
 
 .App-card-title-block {
@@ -183,7 +189,7 @@ $app-card-padding: 1.5rem;
   background: var(--dark-blue);
   height: 5.1rem;
   width: 26.35rem;
-  border: 1px solid var(--color-stroke-primary);
+  border: 0.5px solid var(--color-slate-600);
   border-radius: 0.3rem;
   position: relative;
   color: var(--color-white);
@@ -248,7 +254,7 @@ button.App-connect-wallet:hover {
 }
 
 .App-header-user-address {
-  border: 1px solid var(--color-stroke-primary);
+  border: 0.5px solid var(--color-slate-600);
   height: 3.6rem;
   border-radius: 0.4rem;
   display: inline-flex;
@@ -259,12 +265,12 @@ button.App-connect-wallet:hover {
 
 .mobile-menu-divider {
   height: 1px;
-  background: var(--color-slate-500);
+  background: var(--color-slate-100);
 }
 
 .App-card-divider {
-  height: 1px;
-  background: var(--color-slate-700);
+  height: 0.5px;
+  background: var(--color-slate-600);
   margin: 1.05rem -1.5rem;
 
   &:last-child {
@@ -422,8 +428,8 @@ button.App-connect-wallet:hover {
 
 .App-card-title {
   font-size: var(--font-size-body-large);
-  font-weight: normal;
-  letter-spacing: 0px;
+  font-weight: 500;
+  letter-spacing: -0.012em;
   color: var(--color-white);
   margin-bottom: $app-card-padding;
   display: flex;
@@ -435,15 +441,6 @@ button.App-connect-wallet:hover {
   justify-content: start;
 }
 
-.Position-card-title::after {
-  content: "";
-  position: absolute;
-  left: -$app-card-padding;
-  top: -$app-card-padding;
-  bottom: -$app-card-padding;
-  right: -$app-card-padding;
-}
-
 .App-card-title-small {
   font-size: var(--font-size-body-medium);
   display: inline-flex;
@@ -827,39 +824,45 @@ button.App-button {
   max-width: 46.5rem;
 }
 
+.Toastify__toast {
+  border-radius: 8px;
+  box-shadow: 0px 8px 40px -8px #090a1466;
+}
+
 .Toastify__toast--error {
-  background: #333957;
-  color: var(--color-white);
-  border-radius: 0.6rem;
+  background: var(--color-red-900);
+  color: var(--color-red-100);
+  border-bottom: 2px solid var(--color-red-500);
 
   .link-underline {
     color: var(--color-white) !important;
   }
+
+  & .Toastify__close-button {
+    color: var(--color-red-500);
+  }
 }
 
 .Toastify__toast--success {
-  background: transparent linear-gradient(90deg, #19836c 0%, #177c66 100%) 0% 0% no-repeat padding-box;
-  color: var(--color-white);
-  box-shadow: 0px 0.3rem 0.6rem #0000005c;
-  border-radius: 0.4rem;
+  background: var(--color-green-900);
+  color: var(--color-green-100);
+  border-bottom: 2px solid var(--color-green-500);
 
-  .link-underline {
-    color: var(--color-white) !important;
+  & .Toastify__close-button {
+    color: var(--color-green-500);
   }
 }
 
 .Toastify__toast--default {
-  background: linear-gradient(90deg, #0b0b0f 0%, rgba(10, 13, 28, 1) 100%);
-  color: var(--color-white);
-  border-radius: 0.6rem;
-}
+  background: var(--color-cold-blue-900);
+  color: var(--color-blue-100);
 
-.Toastify__toast--default .Toastify__close-button {
-  color: var(--color-white);
+  & .Toastify__close-button {
+    color: var(--color-blue-300);
+  }
 }
 
-.Toastify__toast--default .Toastify__close-button:hover {
-  color: var(--color-white);
+.Toastify__toast .Toastify__close-button:hover {
   background: transparent;
 }
 
@@ -1166,12 +1169,6 @@ button.App-button {
   }
 }
 
-@media (max-width: 600px) {
-  .page-layout {
-    padding-top: 2.5rem;
-  }
-}
-
 @media (max-width: 600px) {
   .App-header-link-main img.big {
     display: none;

src/App/AppRoutes.tsx

@@ -139,16 +139,19 @@ export function AppRoutes() {
 
   return (
     <>
-      <div className="App">
-        <div className="App-content">
-          <Header
-            disconnectAccountAndCloseSettings={disconnectAccountAndCloseSettings}
-            openSettings={openSettings}
-            showRedirectModal={showRedirectModal}
-          />
-          {isHome && <HomeRoutes showRedirectModal={showRedirectModal} />}
-          {!isHome && <MainRoutes openSettings={openSettings} />}
-        </div>
+      <div className="App w-full font-relative">
+        {isHome ? (
+          <div className="App-content">
+            <Header
+              disconnectAccountAndCloseSettings={disconnectAccountAndCloseSettings}
+              openSettings={openSettings}
+              showRedirectModal={showRedirectModal}
+            />
+            <HomeRoutes showRedirectModal={showRedirectModal} />
+          </div>
+        ) : (
+          <MainRoutes openSettings={openSettings} />
+        )}
       </div>
       <ToastContainer
         limit={1}

src/components/AddressDropdown/AddressDropdown.scss

@@ -31,10 +31,10 @@
   min-width: 17rem;
   width: 100%;
   transform-origin: top right;
-  border-radius: 0.4rem;
+  border-radius: 8px;
   overflow: hidden;
-  background: var(--color-slate-800);
-  border: 1px solid var(--color-stroke-primary);
+  background: var(--color-slate-900);
+  border: 0.5px solid var(--color-slate-600);
   list-style: none;
   cursor: pointer;
   outline: none;
@@ -45,15 +45,16 @@
     align-items: center;
     color: var(--color-slate-100);
     padding-bottom: 1.5rem;
-    font-size: var(--font-size-body-medium);
+    font-size: 13px;
     padding: 0.85rem 0.8rem;
     border-radius: 0.4rem;
+    font-weight: 500;
 
     &:hover {
       background: #808aff14 !important;
       border-radius: 0.4rem;
       opacity: 1;
-      color: var(--color-gray-50);
+      color: var(--color-white);
     }
 
     > p {