Merge pull request #1405 from bancorprotocol/issue-#1189

Add mouse hover effects
bancorprotocol · Aug 13, 2024 · 7f8bef0 · 7f8bef0
2 parents b9a4195 + d18801d
commit 7f8bef0
Show file tree

Hide file tree

Showing 13 changed files with 51 additions and 23 deletions.
diff --git a/src/components/common/selectToken/index.tsx b/src/components/common/selectToken/index.tsx
@@ -30,7 +30,7 @@ export const SelectTokenButton: FC<Props> = ({
       type="button"
       data-testid={testId}
       className={cn(
-        'rounded-12 flex items-center gap-8 p-10',
+        'rounded-12 hover:outline-background-400 flex items-center gap-8 p-10 hover:outline hover:outline-1',
         symbol ? 'bg-black text-white' : 'bg-primary text-black',
         className
       )}

diff --git a/src/components/simulator/input/BuySellBlockNew/Header.tsx b/src/components/simulator/input/BuySellBlockNew/Header.tsx
@@ -49,7 +49,9 @@ export const BuySellHeader: FC<Props> = (props) => {
             onClick={setLimit}
             className={cn(
               'rounded-40 font-weight-500',
-              !isRange ? 'bg-background-900' : 'text-white/60',
+              !isRange
+                ? 'bg-background-900'
+                : 'text-white/60 hover:text-white/80',
               'px-10 py-4'
             )}
             data-testid="tab-limit"
@@ -62,7 +64,9 @@ export const BuySellHeader: FC<Props> = (props) => {
             onClick={setRange}
             className={cn(
               'rounded-40 font-weight-500',
-              isRange ? 'bg-background-900' : 'text-white/60',
+              isRange
+                ? 'bg-background-900'
+                : 'text-white/60 hover:text-white/80',
               'px-10 py-4'
             )}
             data-testid="tab-range"

diff --git a/src/components/simulator/input/SimInputStrategyType.tsx b/src/components/simulator/input/SimInputStrategyType.tsx
@@ -54,10 +54,14 @@ export const SimInputStrategyType: FC<Props> = ({ baseToken, quoteToken }) => {
             to={`/simulate/${label}`}
             search={{ baseToken, quoteToken }}
             className={cn(
-              'rounded-10 text-14 font-weight-500 flex size-full flex-row items-center justify-center gap-8 bg-black px-8 py-16 outline-white/60',
+              'rounded-10 text-14 font-weight-500 group flex size-full flex-row items-center justify-center gap-8 bg-black px-8 py-16 outline-white',
               'md:px-12',
               'focus-visible:outline focus-visible:outline-1'
             )}
+            inactiveProps={{
+              className:
+                'hover:outline hover:outline-1 hover:outline-background-400',
+            }}
             activeProps={{ className: 'outline outline-1 outline-white' }}
             replace={true}
             resetScroll={false}
@@ -70,7 +74,9 @@ export const SimInputStrategyType: FC<Props> = ({ baseToken, quoteToken }) => {
                   {svg}
                   <span
                     className={`capitalize ${
-                      isActive ? 'text-white' : 'text-white/40'
+                      isActive
+                        ? 'text-white'
+                        : 'text-white/40 group-hover:text-white/80'
                     }`}
                   >
                     {title}

diff --git a/src/components/simulator/input/SimInputTokenSelection.tsx b/src/components/simulator/input/SimInputTokenSelection.tsx
@@ -81,7 +81,7 @@ export const SimInputTokenSelection: FC<Props> = ({
         />
         <button
           type="button"
-          className="border-background-900 relative z-10 grid h-40 w-40 flex-shrink-0 -rotate-90 place-items-center rounded-full border-[5px] bg-black"
+          className="border-background-900 hover:bg-background-800 relative z-10 grid h-40 w-40 flex-shrink-0 -rotate-90 place-items-center rounded-full border-[5px] bg-black"
           onClick={() => {
             navigate({
               search: { baseToken: quoteToken, quoteToken: baseToken },

diff --git a/src/components/strategies/StrategyPageTabs.tsx b/src/components/strategies/StrategyPageTabs.tsx
@@ -39,7 +39,9 @@ export const StrategyPageTabs = ({ currentPathname, tabs }: Props) => {
             key={href}
             className={cn(
               'flex w-full items-center justify-center gap-4 rounded-full py-5 md:px-10',
-              active ? 'bg-white/10' : 'bg-transparent text-white/60'
+              active
+                ? 'bg-white/10'
+                : 'bg-transparent text-white/60 hover:text-white/80'
             )}
             aria-current={active ? 'location' : 'false'}
           >

diff --git a/src/components/strategies/common/OrderHeader.tsx b/src/components/strategies/common/OrderHeader.tsx
@@ -35,7 +35,9 @@ export const OrderHeader: FC<Props> = (props) => {
             onClick={setLimit}
             className={cn(
               'rounded-40 font-weight-500',
-              !isRange ? 'bg-background-900' : 'text-white/60',
+              !isRange
+                ? 'bg-background-900'
+                : 'text-white/60 hover:text-white/80',
               'px-10 py-4'
             )}
             data-testid="tab-limit"
@@ -48,7 +50,9 @@ export const OrderHeader: FC<Props> = (props) => {
             onClick={setRange}
             className={cn(
               'rounded-40 font-weight-500',
-              isRange ? 'bg-background-900' : 'text-white/60',
+              isRange
+                ? 'bg-background-900'
+                : 'text-white/60 hover:text-white/80',
               'px-10 py-4'
             )}
             data-testid="tab-range"

diff --git a/src/components/strategies/create/CreateLayout.tsx b/src/components/strategies/create/CreateLayout.tsx
@@ -58,7 +58,7 @@ export const CreateLayout: FC<Props> = (props) => {
                 setShowGraph(true);
               }}
               data-testid="open-chart"
-              className="bg-background-800 grid size-40 place-items-center rounded-full"
+              className="bg-background-800 hover:border-background-700 border-background-800 grid size-40 place-items-center rounded-full border-2"
             >
               <IconCandles className="size-18" />
             </button>

diff --git a/src/components/strategies/create/CreateStrategyOption.tsx b/src/components/strategies/create/CreateStrategyOption.tsx
@@ -99,18 +99,21 @@ export const CreateStrategyOption: FC<Props> = ({ base, quote }) => {
                 aria-selected={id === selectedId}
                 onClick={() => setItem(id)}
                 className={cn(
-                  'rounded-10 text-14 flex size-full flex-col items-center justify-start gap-8 bg-black px-8 py-16 outline-white/60',
+                  'rounded-10 text-14 group flex size-full flex-col items-center justify-start gap-8 bg-black px-8 py-16 outline-white/60',
                   'md:px-12',
                   'focus-visible:outline focus-visible:outline-1',
-                  id === selectedId ? 'outline outline-1 outline-white' : ''
+                  'aria-selected:outline aria-selected:outline-1 aria-selected:outline-white',
+                  'hover:outline-background-400 hover:outline hover:outline-1'
                 )}
                 data-testid={id}
               >
                 {svg}
                 <span
-                  className={`text-12 md:text-14 ${
-                    id === selectedId ? 'text-white' : 'text-white/40'
-                  }`}
+                  className={cn(
+                    'text-12 md:text-14',
+                    'text-white/60 group-hover:text-white/80',
+                    'group-aria-selected:text-white'
+                  )}
                 >
                   {aboveBreakpoint('md') ? label : label.split(' ')[0]}
                 </span>

diff --git a/src/components/strategies/create/CreateStrategyTokenSelection.tsx b/src/components/strategies/create/CreateStrategyTokenSelection.tsx
@@ -114,7 +114,7 @@ export const CreateStrategyTokenSelection: FC<Props> = ({ base, quote }) => {
         {!!base && (
           <>
             <button
-              className="border-background-900 relative z-10 mx-auto grid size-40 place-items-center rounded-full border-[5px] bg-black"
+              className="border-background-900 hover:bg-background-800 relative z-10 mx-auto grid size-40 place-items-center rounded-full border-[5px] bg-black"
               onClick={swapTokens}
               disabled={!base || !quote}
             >

diff --git a/src/components/strategies/edit/EditPriceNav.tsx b/src/components/strategies/edit/EditPriceNav.tsx
@@ -24,7 +24,7 @@ export const EditPriceNav: FC<Props> = ({ editType }) => {
       aria-label="Switch between type of strategy"
     >
       <Link
-        className="aria-current-page:bg-white/10 aria-current-page:text-white flex-1 rounded-full bg-transparent py-4 text-center text-white/60"
+        className="aria-current-page:bg-white/10 aria-current-page:text-white flex-1 rounded-full bg-transparent py-4 text-center text-white/60 hover:text-white/80"
         to="/strategies/edit/$strategyId/prices/disposable"
         search={toDisposablePricesSearch(strategy, editType)}
         params={params}
@@ -34,7 +34,7 @@ export const EditPriceNav: FC<Props> = ({ editType }) => {
         Disposable
       </Link>
       <Link
-        className="aria-current-page:bg-white/10 aria-current-page:text-white flex-1 rounded-full bg-transparent py-4 text-center text-white/60"
+        className="aria-current-page:bg-white/10 aria-current-page:text-white flex-1 rounded-full bg-transparent py-4 text-center text-white/60 hover:text-white/80"
         to="/strategies/edit/$strategyId/prices/recurring"
         search={toRecurringPricesSearch(strategy, editType)}
         params={params}
@@ -44,7 +44,7 @@ export const EditPriceNav: FC<Props> = ({ editType }) => {
         Recurring
       </Link>
       <Link
-        className="aria-current-page:bg-white/10 aria-current-page:text-white flex-1 rounded-full bg-transparent py-4 text-center text-white/60"
+        className="aria-current-page:bg-white/10 aria-current-page:text-white flex-1 rounded-full bg-transparent py-4 text-center text-white/60 hover:text-white/80"
         to="/strategies/edit/$strategyId/prices/overlapping"
         search={toOverlappingPricesSearch(strategy, editType)}
         params={params}

diff --git a/src/components/strategies/edit/EditStrategyLayout.tsx b/src/components/strategies/edit/EditStrategyLayout.tsx
@@ -52,7 +52,7 @@ export const EditStrategyLayout: FC<Props> = (props) => {
               carbonEvents.strategy.strategyChartOpen(undefined);
               setShowGraph(true);
             }}
-            className="bg-background-800 grid size-40 place-items-center rounded-full"
+            className="hover:border-background-700 border-background-800 bg-background-800 grid size-40 place-items-center rounded-full border-2"
           >
             <IconCandles className="size-18" />
           </button>

diff --git a/src/components/strategies/overlapping/OverlappingBudget.module.css b/src/components/strategies/overlapping/OverlappingBudget.module.css
@@ -8,10 +8,19 @@
   opacity: 0.5;
   cursor: not-allowed;
 }
+.select-token:not(:checked):not(:disabled):hover + label {
+  outline: solid 1px rgba(164, 164, 164, 1);
+}
 .budget-mode:checked + label {
   color: white;
   background-color: #404040;
 }
 .budget-mode:focus-visible + label {
   outline: solid 1px white;
-}
+}
+.budget-mode:not(:checked) + label {
+  color: rgb(255 255 255 / 0.6);
+}
+.budget-mode:not(:checked):hover + label {
+  color: rgb(255 255 255 / 0.8);
+}
diff --git a/src/components/strategies/overview/strategyBlock/StrategyBlockCreate.tsx b/src/components/strategies/overview/strategyBlock/StrategyBlockCreate.tsx
@@ -17,11 +17,11 @@ export const StrategyBlockCreate: FC<Props> = ({
       onClick={() => carbonEvents.strategy.newStrategyCreateClick(undefined)}
       to="/strategies/create"
       className={cn(
-        'bg-content rounded-10 py-50 text-24 font-weight-500 flex flex-col items-center justify-center gap-24 md:text-[32px]',
+        'bg-content rounded-10 py-50 text-24 font-weight-500 group flex flex-col items-center justify-center gap-24 md:text-[32px]',
         className
       )}
     >
-      <div className="bg-primary/20 size-72 rounded-full md:size-80">
+      <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>
       <h1 className="w-[200px] text-center leading-9 md:w-[250px]">{title}</h1>