Improving styling of Die.

src/components/farm/Board.jsx

@@ -719,8 +719,10 @@ class Die extends React.Component {
         }
         return (
             <Fragment>
-              <div className={'die' + (this.state.finalFace ? ' die-selected' : '')}>
+              <div className='die-container'>
-                {face}
+                <div className={'die' + (this.state.finalFace ? ' die-selected' : '')}>
+                  {face}
+                </div>
               </div>
               {this.props.skip && !this.state.finalFace ?
                   (<div className='center'>

src/style.scss

@@ -437,6 +437,7 @@ $tab-margin: 0.3rem;
     background: #dae0ff; }
 
 .die {
+    margin-bottom: 1rem;
     width: 100px;
     height: 100px;
     background: lightyellow;
@@ -445,7 +446,32 @@ $tab-margin: 0.3rem;
     border: 1px solid black; }
 
 .die-selected {
-    border: 1px solid red; }
+    position: relative;
+    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
+    transition: all 0.3s ease-in-out; }
+
+.die-selected::after {
+  content: '';
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  border-radius: 5px;
+  box-shadow: 0 6px 15px $primary-color;
+  animation: die-pulse 2s ease-in-out infinite; }
+
+@keyframes die-pulse {
+    0% {
+        opacity: 0; }
+    50% {
+        opacity: 1; }
+   100% {
+        opacity: 0; }
+}
+
+.die-container {
+    display: flex;
+    justify-content: center; }
 
 .die-face {
     background: black;