Merge branch 'master' into randyridge/our

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;