From a823913b8c3337611a25c6f4aae7ad49f669c928 Mon Sep 17 00:00:00 2001
From: Tyler Brown Cifu Shuster <tyler@fivepaths.com>
Date: Tue, 27 Oct 2020 17:02:22 -0700
Subject: [PATCH] clock: add background to moon

---
 .../src/views/apps/launch/components/tiles/clock.js      | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/pkg/interface/src/views/apps/launch/components/tiles/clock.js b/pkg/interface/src/views/apps/launch/components/tiles/clock.js
index d939cdaab..0aa636c94 100644
--- a/pkg/interface/src/views/apps/launch/components/tiles/clock.js
+++ b/pkg/interface/src/views/apps/launch/components/tiles/clock.js
@@ -72,10 +72,19 @@ const Moon = ({ angle, ...props }) => {
         <rect x="-50" y="-50" height="200" width="200" fill="black" />
         <path d={dFromPhase(phase)} fill="white"/>
       </mask>
+      <circle
+        id="moonbg"
+        cx={CX + (RADIUS - 12) * Math.cos(degToRad(angle))}
+        cy={CY + (RADIUS - 12) * Math.sin(degToRad(angle))}
+        fill="rgba(255,255,255,0.6)"
+        r={CELESTIAL_BODY_SIZE / 2}
+        {...props}
+      ></circle>
       <use
       width={CELESTIAL_BODY_SIZE}
       height={CELESTIAL_BODY_SIZE}
       xlinkHref="#Moon-symbol" 
+      id="moon"
       x={cx}
       y={cy}
       transform={`rotate(${angle} ${cx + (CELESTIAL_BODY_SIZE / 2)} ${cy + (CELESTIAL_BODY_SIZE / 2)})`}