Update borders color branding

src/components/common/combobox/index.tsx

@@ -191,7 +191,7 @@ export const Combobox: FC<ComboboxProps> = (props) => {
           'text-12 flex items-center gap-8 rounded-full border-2 px-12 py-8',
           'hover:bg-background-800',
           selected.length
-            ? 'border-primary active:border-primary-light'
+            ? 'active:border-white-80 border-white/60'
             : 'border-background-800 hover:border-background-700 active:border-background-600'
         )}
         aria-controls={rootId}

src/components/common/datePicker/DateRangePicker.tsx

@@ -67,7 +67,7 @@ export const DateRangePicker = memo(function DateRangePicker(
         'text-12 flex items-center gap-8 rounded-full border-2 px-12 py-8',
         'hover:bg-background-800',
         hasDates
-          ? 'border-primary active:border-primary-light'
+          ? 'border-white/60 active:border-white/80'
           : 'border-background-800 hover:border-background-700 active:border-background-600',
         props.disabled &&
           'border-background-800 hover:border-background-800 active:border-background-800 cursor-not-allowed hover:bg-transparent'

src/components/strategies/common/InputLimit.tsx

@@ -123,7 +123,7 @@ export const InputLimit: FC<InputLimitProps> = (props) => {
           />
           {!!marketPrice && (
             <button
-              className="text-12 font-weight-500 text-primary hover:text-primary-light focus:text-primary-light active:text-primary"
+              className="text-12 font-weight-500 text-primaryGradient-first hover:text-primary focus:text-primary active:text-primaryGradient-first"
               type="button"
               onClick={setMarket}
             >

src/components/strategies/common/InputRange.tsx

@@ -159,7 +159,7 @@ export const InputRange: FC<InputRangeProps> = ({
             </Tooltip>
             {!!marketPrice && (
               <button
-                className="text-12 font-weight-500 text-primary hover:text-primary-light focus:text-primary-light active:text-primary"
+                className="text-12 font-weight-500 text-primaryGradient-first hover:text-primary focus:text-primary active:text-primaryGradient-first"
                 type="button"
                 onClick={setMinMarket}
                 data-testid="market-price-min"
@@ -212,7 +212,7 @@ export const InputRange: FC<InputRangeProps> = ({
             </Tooltip>
             {!!marketPrice && (
               <button
-                className="text-12 font-weight-500 text-primary hover:text-primary-light focus:text-primary-light active:text-primary"
+                className="text-12 font-weight-500 text-primaryGradient-first hover:text-primary focus:text-primary active:text-primaryGradient-first"
                 type="button"
                 onClick={setMaxMarket}
                 data-testid="market-price-max"

src/components/strategies/create/BuySellBlock/InputLimit.tsx

@@ -97,7 +97,7 @@ export const InputLimit: FC<InputLimitProps> = ({
           />
           {!!marketPrice && (
             <button
-              className="text-12 font-weight-500 text-primary hover:text-primary-light focus:text-primary-light active:text-primary"
+              className="text-12 font-weight-500 text-primaryGradient-first hover:text-primary focus:text-primary active:text-primaryGradient-first"
               type="button"
               onClick={() => setPrice(formatNumber(marketPrice.toString()))}
             >

src/components/strategies/create/BuySellBlock/InputRange.tsx

@@ -109,7 +109,7 @@ export const InputRange: FC<InputRangeProps> = ({
             </Tooltip>
             {!!marketPrice && (
               <button
-                className="text-12 font-weight-500 text-primary hover:text-primary-light focus:text-primary-light active:text-primary"
+                className="text-12 font-weight-500 text-primaryGradient-first hover:text-primary focus:text-primary active:text-primaryGradient-first"
                 type="button"
                 onClick={() => setMin(formatNumber(marketPrice.toString()))}
                 data-testid="market-price-min"
@@ -160,7 +160,7 @@ export const InputRange: FC<InputRangeProps> = ({
             </Tooltip>
             {!!marketPrice && (
               <button
-                className="text-12 font-weight-500 text-primary hover:text-primary-light focus:text-primary-light active:text-primary"
+                className="text-12 font-weight-500 text-primaryGradient-first hover:text-primary focus:text-primary active:text-primaryGradient-first"
                 type="button"
                 onClick={() => setMax(formatNumber(marketPrice.toString()))}
                 data-testid="market-price-max"

src/components/strategies/overlapping/OverlappingSpread.module.css

@@ -8,10 +8,6 @@
   opacity: 0;
 }
 .spread-option input:checked + label {
-  outline: 1px solid rgba(255, 255, 255, 0.6);
-  color: white;
-}
-.spread-option input:focus + label {
   outline: 2px solid rgba(255, 255, 255, 0.6);
   color: white;
 }
@@ -21,4 +17,4 @@
 }
 .spread-custom input:placeholder-shown + .suffix {
   display: none;
-}
+}

src/components/strategies/overlapping/OverlappingSpread.tsx

@@ -34,6 +34,7 @@ export const OverlappingSpread: FC<Props> = (props) => {
   const inOptions = options.includes(spread);
   const hasError = spread <= 0 || spread > 100;
   const [warning, setWarning] = useState('');
+  const isCustomSpread = spread && !inOptions;
 
   const selectSpread = (value: number) => {
     const input = document.getElementById('spread-custom') as HTMLInputElement;
@@ -133,9 +134,9 @@ export const OverlappingSpread: FC<Props> = (props) => {
           className={cn(
             styles.spreadCustom,
             'rounded-8 flex min-w-0 flex-1 justify-center bg-black p-16 text-center',
-            'hover:outline hover:outline-1',
             'focus-within:outline focus-within:outline-2',
-            spread && !inOptions && 'outline outline-1 outline-white/60',
+            !isCustomSpread && 'hover:outline hover:outline-1',
+            isCustomSpread && 'outline outline-2 outline-white/60',
             hasError && 'text-error outline-error',
             spread && inOptions && 'text-white/40'
           )}