From d2349ff575ba18e7ccebf268991c56bb7d5831cf Mon Sep 17 00:00:00 2001
From: Thomas Hintz <t@thintz.com>
Date: Fri, 7 Feb 2020 11:30:16 -0800
Subject: [PATCH] Improving styling of Die.

---
 src/components/farm/Board.jsx |  6 ++++--
 src/style.scss                | 28 +++++++++++++++++++++++++++-
 2 files changed, 31 insertions(+), 3 deletions(-)

diff --git a/src/components/farm/Board.jsx b/src/components/farm/Board.jsx
index 963178b..f89deef 100644
--- a/src/components/farm/Board.jsx
+++ b/src/components/farm/Board.jsx
@@ -719,8 +719,10 @@ class Die extends React.Component {
         }
         return (
             <Fragment>
-              <div className={'die' + (this.state.finalFace ? ' die-selected' : '')}>
-                {face}
+              <div className='die-container'>
+                <div className={'die' + (this.state.finalFace ? ' die-selected' : '')}>
+                  {face}
+                </div>
               </div>
               {this.props.skip && !this.state.finalFace ?
                   (<div className='center'>
diff --git a/src/style.scss b/src/style.scss
index 661d619..f822e11 100644
--- a/src/style.scss
+++ b/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;