Merge branch 'main' into handle_firewall_rules_on_windows

tari-project · Nov 21, 2024 · ed0f24c · ed0f24c
2 parents c0a88ca + 51a4c0f
commit ed0f24c
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 49 deletions.
diff --git a/src/containers/main/SideBar/components/Wallet/HistoryItem.styles.ts b/src/containers/main/SideBar/components/Wallet/HistoryItem.styles.ts
@@ -22,19 +22,18 @@ export const Wrapper = styled(m.div)`
     font-family:
         GTAmerica Standard,
         sans-serif;
-
-    &:hover {
-        .hover-target {
-            opacity: 0.2;
-        }
-    }
 `;
 
 export const LeftContent = styled.div`
     align-items: center;
     display: flex;
     gap: 10px;
     flex-shrink: 0;
+    transition: opacity 0.2s ease-in;
+
+    ${Wrapper}:hover & {
+        opacity: 0.2;
+    }
 `;
 
 export const SquadIconWrapper = styled.div<{ $colour: string; $colour1: string; $colour2: string }>`
@@ -77,6 +76,10 @@ export const EarningsWrapper = styled.div`
     flex-shrink: 0;
     font-weight: 600;
     font-size: 16px;
+    transition: opacity 0.2s ease-in;
+    ${Wrapper}:hover & {
+        opacity: 0.2;
+    }
 `;
 
 export const ListLabel = styled.div`
@@ -91,18 +94,12 @@ export const HoverWrapper = styled(m.div)`
     position: absolute;
     inset: 0;
     z-index: 4;
+    transition: background-color 2s ease;
     background-color: rgba(255, 255, 255, 0.1);
-    align-items: center;
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-end;
     height: 100%;
-    gap: 6px;
-    padding: 0 10px;
-    transition: background-color 2s ease;
 `;
 
-export const ReplayButton = styled(m.button)`
+export const ReplayButton = styled.button`
     display: flex;
     border-radius: 100%;
     position: relative;
@@ -113,22 +110,31 @@ export const ReplayButton = styled(m.button)`
     background-color: ${({ theme }) => theme.colors.grey[600]};
     color: #fff;
     box-sizing: border-box;
+    transition: opacity 0.2s ease;
+
     &:hover {
-        svg {
-            scale: 1.05;
-        }
+        opacity: 0.8;
     }
 
     svg {
         // flex centering wasn't working:(
         position: relative;
         top: 50%;
         transform: translateY(-50%);
-        transition: scale 0.1s ease;
     }
 `;
 
-export const FlexButton = styled(m.button)`
+export const ButtonWrapper = styled(m.div)`
+    position: relative;
+    align-items: center;
+    display: flex;
+    flex-direction: row;
+    padding: 0 10px;
+    justify-content: flex-end;
+    height: 100%;
+    gap: 6px;
+`;
+export const FlexButton = styled.button`
     display: flex;
     height: 31px;
     padding: 8px 5px 8px 18px;
@@ -143,10 +149,9 @@ export const FlexButton = styled(m.button)`
     color: #000;
     font-size: 12px;
     font-weight: 600;
-    line-height: normal;
+    line-height: 1;
     cursor: pointer;
-    right: 0;
-
+    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0);
     &:hover {
         box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.4);
     }
@@ -155,17 +160,20 @@ export const FlexButton = styled(m.button)`
 export const GemPill = styled.div`
     border-radius: 60px;
     background: #000;
-
+    justify-content: center;
     display: flex;
     height: 20px;
-    padding: 7px 5px 7px 8px;
+    padding: 0 5px 0 8px;
     align-items: center;
     gap: 4px;
 
-    color: #fff;
-    font-size: 10px;
-    font-weight: 600;
-    line-height: normal;
+    span {
+        color: #fff;
+        display: flex;
+        font-size: 10px;
+        font-weight: 600;
+        line-height: 1.1;
+    }
 `;
 
 export const GemImage = styled.img`

diff --git a/src/containers/main/SideBar/components/Wallet/HistoryItem.tsx b/src/containers/main/SideBar/components/Wallet/HistoryItem.tsx
@@ -1,5 +1,6 @@
 import { useBlockchainVisualisationStore } from '@app/store/useBlockchainVisualisationStore';
 import {
+    ButtonWrapper,
     EarningsWrapper,
     FlexButton,
     GemImage,
@@ -88,31 +89,32 @@ export default function HistoryItem({ item }: HistoryItemProps) {
     const showShareButton = sharingEnabled && isLoggedIn;
     return (
         <Wrapper onMouseEnter={() => setHovering(true)} onMouseLeave={() => setHovering(false)}>
-            {showShareButton && (
-                <AnimatePresence>
-                    {hovering && (
-                        <HoverWrapper initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }}>
-                            <FlexButton
-                                initial={{ x: 20 }}
-                                animate={{ x: 0 }}
-                                transition={{ delay: 0.1 }}
-                                exit={{ x: 20 }}
-                                onClick={handleShareClick}
-                            >
-                                {t('share.history-item-button')}
-                                <GemPill>
-                                    {gemsValue} <GemImage src={gemImage} alt="" />
-                                </GemPill>
-                            </FlexButton>
+            <AnimatePresence>
+                {hovering && (
+                    <HoverWrapper initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }}>
+                        <ButtonWrapper
+                            initial={{ opacity: 0, y: 5 }}
+                            animate={{ opacity: 1, y: 0 }}
+                            exit={{ opacity: 0, y: 5 }}
+                        >
+                            {showShareButton && (
+                                <FlexButton onClick={handleShareClick}>
+                                    {t('share.history-item-button')}
+                                    <GemPill>
+                                        <span>{gemsValue}</span>
+                                        <GemImage src={gemImage} alt="" />
+                                    </GemPill>
+                                </FlexButton>
+                            )}
                             <ReplayButton onClick={handleReplay}>
                                 <ReplaySVG />
                             </ReplayButton>
-                        </HoverWrapper>
-                    )}
-                </AnimatePresence>
-            )}
+                        </ButtonWrapper>
+                    </HoverWrapper>
+                )}
+            </AnimatePresence>
 
-            <LeftContent className={showShareButton ? 'hover-target' : ''}>
+            <LeftContent>
                 <SquadIconWrapper $colour={colour} $colour1={colour1} $colour2={colour2}>
                     <TariSvg />
                 </SquadIconWrapper>