summaryrefslogtreecommitdiffstats
path: root/finished-application/frontend/components/CartCount.js
diff options
context:
space:
mode:
Diffstat (limited to 'finished-application/frontend/components/CartCount.js')
-rw-r--r--finished-application/frontend/components/CartCount.js42
1 files changed, 19 insertions, 23 deletions
diff --git a/finished-application/frontend/components/CartCount.js b/finished-application/frontend/components/CartCount.js
index ae51f20..c202d74 100644
--- a/finished-application/frontend/components/CartCount.js
+++ b/finished-application/frontend/components/CartCount.js
@@ -1,19 +1,7 @@
-import styled from 'styled-components';
-import { TransitionGroup, CSSTransition } from 'react-transition-group';
+import React from 'react';
import PropTypes from 'prop-types';
-
-const Dot = styled.div`
- background: ${props => props.theme.red};
- color: white;
- border-radius: 50%;
- padding: 0.5rem;
- line-height: 2rem;
- min-width: 3rem;
- margin-left: 1rem;
- font-weight: 100;
- font-feature-settings: 'tnum';
- font-variant-numeric: tabular-nums;
-`;
+import { TransitionGroup, CSSTransition } from 'react-transition-group';
+import styled from 'styled-components';
const AnimationStyles = styled.span`
position: relative;
@@ -23,25 +11,36 @@ const AnimationStyles = styled.span`
transition: all 0.4s;
backface-visibility: hidden;
}
+ /* Intial State of the entered Dot */
.count-enter {
- transform: rotateX(0.5turn);
+ transform: scale(4) rotateX(0.5turn);
}
-
.count-enter-active {
transform: rotateX(0);
}
-
.count-exit {
top: 0;
position: absolute;
transform: rotateX(0);
}
-
.count-exit-active {
- transform: rotateX(0.5turn);
+ transform: scale(4) rotateX(0.5turn);
}
`;
+const Dot = styled.div`
+ background: ${props => props.theme.red};
+ color: white;
+ border-radius: 50%;
+ padding: 0.5rem;
+ line-height: 2rem;
+ min-width: 3rem;
+ margin-left: 1rem;
+ font-weight: 100;
+ font-feature-settings: 'tnum';
+ font-variant-numeric: tabular-nums;
+`;
+
const CartCount = ({ count }) => (
<AnimationStyles>
<TransitionGroup>
@@ -58,7 +57,4 @@ const CartCount = ({ count }) => (
</AnimationStyles>
);
-CartCount.propTypes = {
- count: PropTypes.number.isRequired,
-};
export default CartCount;