Curtain instant

src/App/App.scss

@@ -29,7 +29,7 @@ $app-card-padding: 1.5rem;
   padding-left: 3.2rem;
   padding-right: 3.2rem;
   background: transparent 0% 0% no-repeat padding-box;
-  border-bottom: 1px solid var(--color-gray-950);
+  border-bottom: 1px solid var(--color-slate-700);
   z-index: 1;
 }
 
@@ -220,7 +220,7 @@ $app-card-padding: 1.5rem;
   background: var(--dark-blue);
   height: 5.1rem;
   width: 26.35rem;
-  border: 1px solid var(--dark-blue-border);
+  border: 1px solid var(--color-stroke-primary);
   border-radius: 0.3rem;
   position: relative;
   color: var(--color-white);
@@ -285,7 +285,7 @@ button.App-connect-wallet:hover {
 }
 
 .App-header-user-address {
-  border: 1px solid var(--color-gray-800);
+  border: 1px solid var(--color-stroke-primary);
   height: 3.6rem;
   border-radius: 0.4rem;
   display: inline-flex;
@@ -408,7 +408,7 @@ button.App-connect-wallet:hover {
 }
 
 .Page-description {
-  color: var(--color-gray-300);
+  color: var(--color-slate-100);
   font-size: var(--font-size-body-medium);
   line-height: var(--line-height-body-medium);
 }
@@ -706,12 +706,6 @@ button.App-cta {
   color: var(--color-white);
   text-decoration: none;
   background: linear-gradient(90deg, rgba(45, 66, 252, 1) 0%, var(--color-blue-700) 100%);
-  &:hover:enabled {
-    background: var(--primary-btn-hover);
-  }
-  &:active:enabled {
-    background: var(--primary-btn-active);
-  }
 }
 
 .App-cta.small {
@@ -1026,7 +1020,7 @@ button.App-button {
 
 .App-slider .rc-slider-mark-text,
 .App-slider .rc-slider-mark-text-active {
-  color: var(--color-white);
+  color: var(--color-slate-100);
   opacity: 0.5;
 }
 
@@ -1042,11 +1036,13 @@ button.App-button {
 .rc-slider-tooltip-inner {
   box-shadow: none;
   padding: 0.465rem 0.8rem;
-  background: var(--color-slate-600);
+
+  background: rgb(49, 54, 85) !important;
+  box-shadow: 0px 4px 14px rgba(0, 0, 0, 0.25) !important;
 }
 
 .rc-slider-tooltip-placement-top .rc-slider-tooltip-arrow {
-  border-top-color: var(--color-slate-600);
+  border-top-color: rgb(49, 54, 85) !important;
 }
 
 .header-connect-btn {
@@ -1172,7 +1168,7 @@ button.App-button {
     padding-left: 1.6rem;
     padding-right: 1.6rem;
     background: transparent 0% 0% no-repeat padding-box;
-    border-bottom: 1px solid var(--color-gray-950);
+    border-bottom: 1px solid var(--color-slate-700);
   }
 
   .App-header.small::after {

src/components/AddressDropdown/AddressDropdown.scss

@@ -34,7 +34,7 @@
   border-radius: 0.4rem;
   overflow: hidden;
   background: var(--color-slate-800);
-  border: 1px solid var(--color-gray-800);
+  border: 1px solid var(--color-stroke-primary);
   list-style: none;
   cursor: pointer;
   outline: none;

src/components/AlertInfo/AlertInfo.tsx

@@ -14,17 +14,17 @@ interface Props {
   noMargin?: boolean;
   onClick?: () => void;
   /**
-   * @default "text-gray-300"
+   * @default "text-slate-100"
    */
-  textColor?: "text-gray-300" | "text-yellow-500";
+  textColor?: "text-slate-100" | "text-yellow-500";
 }
 
 export function AlertInfo({
   compact: smallMargin = false,
   noMargin = false,
   children,
   type,
-  textColor = "text-gray-300",
+  textColor = "text-slate-100",
   className,
   onClick,
 }: Props) {

src/components/Button/Button.scss

@@ -54,7 +54,7 @@
   }
 
   &.secondary {
-    background-color: color-mix(in srgb, var(--color-slate-600) 47%, transparent);
+    background-color: var(--color-slate-700);
     border-radius: var(--border-radius-sm);
     color: var(--color-white);
     padding: 1.1rem 1.25rem;
@@ -79,11 +79,11 @@
     }
 
     &:not([disabled], .disabled):hover {
-      background-color: #50577e99;
+      background-color: var(--color-cold-blue-700);
     }
 
     &:not([disabled], .disabled):active {
-      background: #50577eb3;
+      background: var(--color-cold-blue-500);
     }
   }
 
@@ -113,16 +113,16 @@
     }
 
     &:not([disabled], .disabled):hover {
-      background-color: #50577e99;
+      background-color: var(--color-cold-blue-700);
     }
 
     &:not([disabled], .disabled):active {
-      background: #50577eb3;
+      background: var(--color-cold-blue-500);
     }
   }
 
   &.link {
-    color: var(--color-gray-300);
+    color: var(--color-slate-100);
     text-decoration: underline;
     padding: 0;
 
@@ -139,7 +139,16 @@
   &:disabled {
     box-shadow: none;
     cursor: not-allowed;
-    opacity: 0.8;
+
+    &.primary-action,
+    &.primary {
+      background-color: #1d235f;
+    }
+
+    &.secondary {
+      background-color: #1b1e32;
+      color: var(--color-slate-500);
+    }
   }
 
   &.slim {

src/components/BuyInputSection/BuyInputSection.tsx

@@ -85,7 +85,7 @@ export default function BuyInputSection(props: Props) {
     <div data-qa={qa}>
       <div className="Exchange-swap-section buy-input" onClick={handleBoxClick}>
         <div className="buy-input-top-row">
-          <div data-label="left" className="text-gray-300">
+          <div data-label="left" className="text-slate-100">
             {topLeftLabel}
             {topLeftValue && `${INPUT_LABEL_SEPARATOR} ${topLeftValue}`}
           </div>
@@ -94,7 +94,7 @@ export default function BuyInputSection(props: Props) {
             className={cx("align-right", { clickable: onClickTopRightLabel })}
             onClick={onClickTopRightLabel}
           >
-            <span className="text-gray-300">{topRightLabel}</span>
+            <span className="text-slate-100">{topRightLabel}</span>
             {topRightValue && (
               <span className="Exchange-swap-label">
                 {topRightLabel ? INPUT_LABEL_SEPARATOR : ""}&nbsp;{topRightValue}

src/components/Common/ConnectWalletButton.scss

@@ -8,7 +8,7 @@
   font-size: var(--font-size-body-medium);
   white-space: nowrap;
   cursor: pointer;
-  border: 1px solid var(--dark-blue-border);
+  border: 1px solid var(--color-stroke-primary);
   border-radius: var(--border-radius-sm);
 
   .btn-icon {

src/components/Exchange/OrdersList.jsx

@@ -131,7 +131,7 @@ export default function OrdersList(props) {
 
     return (
       <tr>
-        <td colSpan="5">
+        <td colSpan="5" className="text-slate-100">
           <Trans>No open orders</Trans>
         </td>
       </tr>

src/components/Exchange/PositionSeller.jsx

@@ -1145,13 +1145,13 @@ export default function PositionSeller(props) {
             {hasPendingProfit && orderOption !== STOP && (
               <div className="PositionEditor-accept-profit-warning">
                 <Checkbox isChecked={isProfitWarningAccepted} setIsChecked={setIsProfitWarningAccepted}>
-                  <span className="text-gray-300">Forfeit profit</span>
+                  <span className="text-slate-100">Forfeit profit</span>
                 </Checkbox>
               </div>
             )}
             <div className="PositionEditor-keep-leverage-settings">
               <ToggleSwitch isChecked={keepLeverage} setIsChecked={setKeepLeverage}>
-                <span className="text-gray-300">
+                <span className="text-slate-100">
                   <Trans>Keep leverage at {formatAmount(position.leverage, 4, 2)}x</Trans>
                 </span>
               </ToggleSwitch>

src/components/Exchange/SwapBox.jsx

@@ -22,6 +22,7 @@ import {
   STOP,
   SWAP,
   SWAP_OPTIONS,
+  SWAP_OPTIONS_CLASSNAMES,
   SWAP_ORDER_OPTIONS,
   USDG_ADDRESS,
   USDG_DECIMALS,
@@ -2009,6 +2010,7 @@ export default function SwapBox(props) {
               icons={SWAP_ICONS}
               options={SWAP_OPTIONS}
               optionLabels={localizedSwapLabels}
+              optionClassnames={SWAP_OPTIONS_CLASSNAMES}
               option={swapOption}
               onChange={onSwapOptionChange}
               className="Exchange-swap-option-tabs"
@@ -2173,7 +2175,7 @@ export default function SwapBox(props) {
                             onClick={() => {
                               setShortCollateralAddress(existingCurrentIndexCollateralToken?.address);
                             }}
-                            className="cursor-pointer text-gray-300 underline"
+                            className="cursor-pointer text-slate-100 underline"
                           >
                             <Trans>Switch to {existingCurrentIndexCollateralToken?.symbol} collateral.</Trans>
                           </div>

src/components/ExternalLink/ExternalLink.scss

@@ -2,7 +2,7 @@
   text-decoration: underline;
   cursor: pointer;
   display: inline-flex;
-  color: var(--color-gray-300);
+  color: var(--color-slate-100);
   &:hover {
     color: var(--color-white);
   }

src/components/FavoriteStar/FavoriteStar.tsx

@@ -1,5 +1,5 @@
 import { FaRegStar, FaStar } from "react-icons/fa";
 
 export default function FavoriteStar({ isFavorite }: { isFavorite?: boolean }) {
-  return isFavorite ? <FaStar className="text-yellow-300" /> : <FaRegStar className="text-gray-400" />;
+  return isFavorite ? <FaStar className="text-yellow-300" /> : <FaRegStar className="text-slate-100" />;
 }

src/components/FavoriteTabs/FavoriteTabs.tsx

@@ -1,3 +1,5 @@
+import cx from "classnames";
+
 import {
   TokenFavoriteKey,
   tokensFavoritesTabOptionLabels,
@@ -19,8 +21,10 @@ export function FavoriteTabs({ favoritesKey }: { favoritesKey: TokenFavoriteKey
         <Button
           key={option}
           type="button"
-          variant={tab === option ? "secondary" : "ghost"}
-          className="!text-body-medium !py-7"
+          variant={"ghost"}
+          className={cx("!text-body-medium !py-7", {
+            "!bg-cold-blue-500": tab === option,
+          })}
           onClick={() => setTab(option)}
         >
           {localizedTabOptionLabels[option]}

src/components/Footer/Footer.css

@@ -7,7 +7,7 @@
   transform: translateX(-50%);
   left: 50%;
   bottom: 0;
-  border-top: 1px solid var(--color-gray-950);
+  border-top: 1px solid var(--color-slate-700);
 }
 
 .Footer-logo {

src/components/Footer/Footer.tsx

@@ -16,15 +16,19 @@ import { userAnalytics } from "lib/userAnalytics";
 import { LandingPageFooterMenuEvent } from "lib/userAnalytics/types";
 import "./Footer.css";
 
-type Props = { showRedirectModal?: (to: string) => void; redirectPopupTimestamp?: number };
+type Props = {
+  showRedirectModal?: (to: string) => void;
+  redirectPopupTimestamp?: number;
+  isMobileTradePage?: boolean;
+};
 
-export default function Footer({ showRedirectModal, redirectPopupTimestamp }: Props) {
+export default function Footer({ showRedirectModal, redirectPopupTimestamp, isMobileTradePage }: Props) {
   const isHome = isHomeSite();
   const [isUserFeedbackModalVisible, setIsUserFeedbackModalVisible] = useState(false);
 
   return (
     <>
-      <div className={cx("Footer-wrapper", { home: isHome })}>
+      <div className={cx("Footer-wrapper", { home: isHome, "pb-52": isMobileTradePage })}>
         <div className="Footer-logo">
           <img src={logoImg} alt="MetaMask" />
         </div>

src/components/Glp/GlpSwap.css

@@ -77,7 +77,7 @@
   font-size: 1.2rem;
   line-height: 1.5rem;
   letter-spacing: 0px;
-  color: var(--color-gray-400);
+  color: var(--color-slate-100);
 }
 
 .GlpSwap-token-list {

src/components/Header/Header.scss

@@ -16,7 +16,7 @@
   padding-left: 3.2rem;
   padding-right: 3.2rem;
   background: transparent 0% 0% no-repeat padding-box;
-  border-bottom: 1px solid var(--color-gray-950);
+  border-bottom: 1px solid var(--color-slate-700);
 }
 
 .App-header.large::after {
@@ -193,30 +193,12 @@
   align-items: center;
 }
 
-.App-header-user-settings {
-  display: inline-flex;
-  cursor: pointer;
-  border: none;
-  border-radius: 1.5rem;
-  font-size: var(--font-size-body-medium);
-  background: none;
-  color: var(--color-white);
-  padding: 0;
-  width: 2.4rem;
-  height: 2.4rem;
-  align-items: center;
-  border-radius: 0.4rem;
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-}
-
 .App-header-user-link {
   margin-right: 2.4rem;
 }
 
 .App-header-user-address {
-  border: 1px solid var(--color-gray-800);
+  border: 1px solid var(--color-stroke-primary);
   height: 3.6rem;
   border-radius: 0.4rem;
   display: inline-flex;
@@ -268,7 +250,7 @@
     padding-left: 1.6rem;
     padding-right: 1.6rem;
     background: transparent 0% 0% no-repeat padding-box;
-    border-bottom: 1px solid var(--color-gray-950);
+    border-bottom: 1px solid var(--color-slate-700);
   }
 
   .App-header.small::after {

src/components/InterviewModal/InterviewModal.tsx

@@ -29,7 +29,7 @@ export function InterviewModal({ isVisible, setIsVisible }: Props) {
           </div>
           <div className="flex items-center gap-12 text-14">
             <ArrowBulletIcon />
-            <div className="text-gray-300">
+            <div className="text-slate-100">
               <Trans>
                 Discord account:{" "}
                 <span

src/components/InterviewToast/InterviewToast.tsx

@@ -14,7 +14,7 @@ export function InterviewToast({ onButtonClick }: Props) {
       </Trans>
       <br />
       <br />
-      <div onClick={onButtonClick} className="text-xl cursor-pointer text-gray-300 underline">
+      <div onClick={onButtonClick} className="text-xl cursor-pointer text-slate-100 underline">
         <Trans>Give us your feedback on GMX.</Trans>
       </div>
       <br />