Update buttons to new success button gradient

src/components/common/approval/ApproveToken.tsx

@@ -206,7 +206,7 @@ export const ApproveToken: FC<Props> = ({
 
               <Button
                 type="submit"
-                variant="white"
+                variant="success"
                 size="sm"
                 className="text-14 px-10"
                 data-testid={`approve-${token.symbol}`}

src/components/common/button/buttonStyles.ts

@@ -52,7 +52,7 @@ const variants = {
 
 if (config.ui.useGradientBranding) {
   variants.variant.success = [
-    'transition-all duration-500 bg-[length:200%] bg-gradient-to-r from-primaryGradient-first via-primaryGradient-middle to-primaryGradient-last text-black',
+    'transition-all duration-500! bg-[length:200%] bg-gradient-to-r from-primaryGradient-first via-primaryGradient-middle to-primaryGradient-last text-black',
     'hover:bg-right hover:disabled:bg-left',
   ];
 }

src/components/common/datePicker/DateRangePicker.tsx

@@ -226,6 +226,7 @@ const Content = (props: Props) => {
           type="button"
           disabled={props.required && !hasDates}
           size="sm"
+          variant="success"
           className="col-span-2 justify-self-end"
           data-testid="date-picker-confirm"
           onClick={onConfirm}

src/components/core/error/ErrorUnsupportedNetwork.tsx

@@ -16,7 +16,7 @@ export const ErrorUnsupportedNetwork = () => {
       text={`Please connect to ${networkName} using your wallet or the button below`}
       variant="error"
     >
-      <Button variant="white" fullWidth onClick={switchNetwork}>
+      <Button variant="success" fullWidth onClick={switchNetwork}>
         Change Network
       </Button>
       <Button variant="black" fullWidth onClick={disconnect}>

src/components/strategies/create/CreateForm.tsx

@@ -27,8 +27,6 @@ export const CreateForm: FC<FormProps> = (props) => {
   const { openModal } = useModal();
   const { user } = useWagmi();
   const search = useSearch({ strict: false }) as any;
-  const isSell =
-    type === 'disposable' && search.direction !== 'buy';
 
   const { isLoading, isProcessing, isAwaiting, createStrategy } =
     useCreateStrategy({ type, base, quote, order0, order1 });
@@ -91,7 +89,7 @@ export const CreateForm: FC<FormProps> = (props) => {
         <Button
           className="shrink-0"
           type="submit"
-          variant={isSell ? 'sell' : 'buy'}
+          variant="success"
           size="lg"
           fullWidth
           loading={loading}

src/components/strategies/edit/EditStrategyForm.tsx

@@ -248,7 +248,7 @@ export const EditStrategyForm: FC<Props> = (props) => {
         disabled={!hasChanged}
         loading={isLoading}
         loadingChildren={loadingChildren}
-        variant="white"
+        variant="success"
         size="lg"
         fullWidth
         data-testid="edit-submit"

src/components/strategies/overview/strategyBlock/StrategyBlockCreate.tsx

@@ -3,6 +3,7 @@ import { carbonEvents } from 'services/events';
 import { Link } from 'libs/routing';
 import { ReactComponent as IconPlus } from 'assets/icons/plus.svg';
 import { cn } from 'utils/helpers';
+import { buttonStyles } from 'components/common/button/buttonStyles';
 
 type Props = {
   title?: string;
@@ -12,6 +13,7 @@ export const StrategyBlockCreate: FC<Props> = ({
   title = 'Create Strategy',
   className = '',
 }) => {
+  console.log(`DEBUG: ${buttonStyles({ variant: 'success' })}`);
   return (
     <Link
       onClick={() => carbonEvents.strategy.newStrategyCreateClick(undefined)}
@@ -21,8 +23,13 @@ export const StrategyBlockCreate: FC<Props> = ({
         className
       )}
     >
-      <div className="bg-primary/15 group-hover:bg-primary/25 size-72 rounded-full md:size-80">
-        <IconPlus className="text-primary md:p-26 p-24" />
+      <div
+        className={cn(
+          buttonStyles({ variant: 'success' }),
+          'size-72 rounded-full px-0 md:size-80'
+        )}
+      >
+        <IconPlus className="md:p-26 p-24" />
       </div>
       <h1 className="w-[200px] text-center leading-9 md:w-[250px]">{title}</h1>
     </Link>

src/libs/modals/modals/ModalConfirm/ModalConfirm.tsx

@@ -67,7 +67,7 @@ export const ModalConfirm: ModalFC<ModalCreateConfirmData> = ({
       </ul>
       <Button
         size="lg"
-        variant="white"
+        variant="success"
         fullWidth
         disabled={approvalRequired}
         onClick={async () => {

src/libs/modals/modals/ModalConfirmStrategy/ModalConfirmDelete.tsx

@@ -59,7 +59,7 @@ export const ModalConfirmDelete: ModalFC<ModalConfirmDeleteData> = ({
       />
       {!isOverlapping && (
         <article className="bg-background-800 grid grid-cols-[1fr_auto] grid-rows-[auto_auto] gap-8 rounded p-16">
-          <h3 className="text-14 font-weight-500">Did you know ?</h3>
+          <h3 className="text-14 font-weight-500">Did you know?</h3>
           <Link
             onClick={editPrices}
             disabled={isAwaiting || isProcessing}
@@ -68,7 +68,7 @@ export const ModalConfirmDelete: ModalFC<ModalConfirmDeleteData> = ({
             search={{ editType: 'editPrices' }}
             className={cn(
               'row-span-2 self-center',
-              buttonStyles({ variant: 'white' })
+              buttonStyles({ variant: 'success' })
             )}
           >
             Edit Prices
@@ -80,7 +80,7 @@ export const ModalConfirmDelete: ModalFC<ModalConfirmDeleteData> = ({
       )}
 
       <Button
-        variant="white"
+        variant="success"
         onClick={onClick}
         loading={isPending}
         loadingChildren={loadingChildren}

src/libs/modals/modals/ModalConfirmStrategy/ModalConfirmPause.tsx

@@ -47,7 +47,7 @@ export const ModalConfirmPause: ModalFC<ModalConfirmPauseData> = ({
         onClick={handleOnActionClick}
         loading={isLoading}
         loadingChildren={loadingChildren}
-        variant="white"
+        variant="success"
         size="lg"
         fullWidth
         data-testid="pause-strategy-btn"

src/libs/modals/modals/ModalConfirmStrategy/ModalConfirmWithdraw.tsx

@@ -43,15 +43,15 @@ export const ModalConfirmWithdraw: ModalFC<ModalConfirmWithdrawData> = ({
         title="Are you sure you would like to withdraw your funds?"
       />
       <article className="grid grid-cols-[1fr_auto] grid-rows-[auto_auto] gap-8 rounded bg-white/10 p-16">
-        <h3 className="text-14 font-weight-500">Did you know ?</h3>
+        <h3 className="text-14 font-weight-500">Did you know?</h3>
         <Link
           onClick={edit}
           to={editPrices.to}
           search={editPrices.search}
           params={{ strategyId: strategy.id }}
           className={cn(
             'row-span-2 self-center',
-            buttonStyles({ variant: 'white' })
+            buttonStyles({ variant: 'success' })
           )}
         >
           Edit Prices
@@ -65,7 +65,7 @@ export const ModalConfirmWithdraw: ModalFC<ModalConfirmWithdrawData> = ({
         to={withdraw.to}
         search={withdraw.search}
         params={{ strategyId: strategy.id }}
-        className={buttonStyles({ variant: 'white' })}
+        className={buttonStyles({ variant: 'success' })}
         data-testid="withdraw-strategy-btn"
       >
         Withdraw Funds

src/libs/modals/modals/ModalDuplicateStrategy/ModalDuplicateStrategy.tsx

@@ -95,7 +95,7 @@ export const ModalDuplicateStrategy: ModalFC<ModalDuplicateStrategyData> = ({
             </div>
             <h3 className="text-14 font-weight-500">{title}</h3>
             <Button
-              variant="white"
+              variant="success"
               onClick={onClick}
               className="row-span-2 self-center"
               data-testid={testId}

src/libs/modals/modals/ModalSimulatorDisclaimer.tsx

@@ -43,7 +43,7 @@ export const ModalSimulatorDisclaimer: ModalFC<
       </p>
 
       <Button
-        variant="white"
+        variant="success"
         fullWidth
         onClick={() => {
           onConfirm();

src/libs/modals/modals/ModalWithdrawOrDelete.tsx

@@ -27,7 +27,7 @@ export const ModalWithdrawOrDelete: ModalFC<ModalWithdrawOrDeleteData> = ({
         />
       </div>
       <Button
-        variant="white"
+        variant="success"
         fullWidth
         onClick={() => {
           closeModal(id);

src/libs/modals/modals/WalletModal/ModalWalletError.tsx

@@ -22,7 +22,7 @@ export const ModalWalletError: FC<Props> = ({
       <output className="rounded-10 bg-error/20 font-weight-500 text-error px-20 py-10">
         {error}
       </output>
-      <Button variant="white" onClick={onClick} fullWidth>
+      <Button variant="success" onClick={onClick} fullWidth>
         Back
       </Button>
     </>

src/pages/simulator/overlapping/index.tsx

@@ -109,6 +109,7 @@ export const SimulatorInputOverlappingPage = () => {
         <Button
           type="submit"
           data-testid="start-simulation-btn"
+          variant="success"
           fullWidth
           size="lg"
           disabled={btnDisabled}

src/pages/simulator/recurring/index.tsx

@@ -160,6 +160,7 @@ export const SimulatorInputRecurringPage = () => {
         <Button
           type="submit"
           data-testid="start-simulation-btn"
+          variant="success"
           fullWidth
           size="lg"
           disabled={btnDisabled}