spectrocloud · caroldelwing · Jun 5, 2025 · May 27, 2025 · May 27, 2025 · May 28, 2025
diff --git a/README.md b/README.md
@@ -16,8 +16,8 @@ Hello Universe is available as a Docker image.
 To run Hello Universe issue the following commands:
 
 ```shell
-docker pull ghcr.io/spectrocloud/hello-universe:1.1.0
-docker run -p 8080:8080 ghcr.io/spectrocloud/hello-universe:1.1.0
+docker pull ghcr.io/spectrocloud/hello-universe:1.3.0
+docker run -p 8080:8080 ghcr.io/spectrocloud/hello-universe:1.3.0
 ```
 
 ### Non-Docker
@@ -54,16 +54,16 @@ API_URI=http://localhost:3000
 If you are using the Docker image then use the `-e` flag parameter.
 
 ```shell
-docker run -p 8080:8080 -e API_URI=http://localhost:3000 ghcr.io/spectrocloud/hello-universe:1.2.0
+docker run -p 8080:8080 -e API_URI=http://localhost:3000 ghcr.io/spectrocloud/hello-universe:1.3.0
 ```
 
 ### Reverse Proxy
 
-A Docker container with a reverse proxy is available. The reverse proxy is usefull for scenarios when you need to deploy the
+A Docker container with a reverse proxy is available. The reverse proxy is useful for scenarios when you need to deploy the
 hello universe application into a Kubernetes cluster or similar architectures and need the UI to route requests internal to the hosting platform. An example of such behavior is needing to to reach a private API inside the Kubernetes cluster. **The reverse proxy expects the API to be listening on port `3000`.**
 
 ```shell
-docker run -p 8080:8080 -p 3000:3000  -e SVC_URI="http://myprivate.api.address.example:3000" -e API_URI="http://myloadbalancer.example:3000"  ghcr.io/spectrocloud/hello-universe:1.2.0-proxy
+docker run -p 8080:8080 -p 3000:3000  -e SVC_URI="http://myprivate.api.address.example:3000" -e API_URI="http://myloadbalancer.example:3000"  ghcr.io/spectrocloud/hello-universe:1.3.0-proxy
 ```
 
 #### Reverse Proxy Environment Variables
@@ -131,7 +131,7 @@ For the UI service, change the image to the default Hello Universe image.
 ```yaml
 containers:
   - name: ui
-    image: ghcr.io/spectrocloud/hello-universe:1.1.2
+    image: ghcr.io/spectrocloud/hello-universe:1.3.0
     imagePullPolicy: Always
     ports:
       - containerPort: 8080

diff --git a/deployment/k8s.yaml b/deployment/k8s.yaml
@@ -132,7 +132,7 @@ spec:
       serviceAccountName: hello-universe-role
       containers:
         - name: api
-          image: ghcr.io/spectrocloud/hello-universe-api:1.1.0
+          image: ghcr.io/spectrocloud/hello-universe-api:1.1.1
           ports:
             - containerPort: 3000
               name: api
@@ -214,7 +214,7 @@ spec:
             ["/bin/sh", "-c", "echo 'sleeping for 30 seconds' && sleep 30"]
       containers:
         - name: ui
-          image: ghcr.io/spectrocloud/hello-universe:1.1.2-proxy
+          image: ghcr.io/spectrocloud/hello-universe:1.3.0-proxy
           imagePullPolicy: Always
           ports:
             - containerPort: 8080

diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/favicon.png b/public/favicon.png
diff --git a/public/index.html b/public/index.html
@@ -2,8 +2,13 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
+    <link rel="icon" href="%PUBLIC_URL%/favicon.png" />
+    <link
+      rel="preload"
+      href="styles.css"
+      as="style"
+      onload="this.onload=null;this.rel='stylesheet'"
+    />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta
@@ -21,11 +26,11 @@
       It will be replaced with the URL of the `public` folder during the build.
       Only files inside the `public` folder can be referenced from the HTML.
 
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      Unlike "/favicon.png" or "favicon.png", "%PUBLIC_URL%/favicon.png" will
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <script src='/env.js'></script>
+    <script src="/env.js"></script>
     <title>Spacetastic</title>
   </head>
   <body>

diff --git a/public/manifest.json b/public/manifest.json
@@ -1,9 +1,9 @@
 {
-  "short_name": "React App",
-  "name": "Create React App Sample",
+  "short_name": "Hello Universe",
+  "name": "Create Hello Universe App Sample",
   "icons": [
     {
-      "src": "favicon.ico",
+      "src": "favicon.png",
       "sizes": "64x64 32x32 24x24 16x16",
       "type": "image/x-icon"
     },

diff --git a/src/App.css b/src/App.css
@@ -1,19 +1,19 @@
 html {
-  --background-dark-grey: #0b0f1b;
-  --border-primary-grey: #2b323c;
-  --text-color-off-white: #e8ebee;
-  --text-primary-blue: #72a8f5;
-  --text-secondary-blue: #9cc2f8;
-  --box-shadow-primary-grey: #192c47;
-  --box-shadow-secondary-grey: #213e67;
+  --background-dark-grey: #000f0f;
+  --border-primary-grey: #0b3433;
+  --text-color-off-white: #ddf4f3;
+  --text-primary-green: #44b2af;
+  --text-secondary-green: #7fd2d0;
+  --box-shadow-primary-green: #1f7a78;
+  --box-shadow-secondary-green: #2d8685;
   background-color: var(--background-dark-grey);
 }
 
 .App {
-  font-family: Poppins,Arial,Helvetica,sans-serif,Russo One;
+  font-family: Poppins, Arial, Helvetica, sans-serif, Russo One;
   text-align: center;
   max-width: 1200px;
-  margin: auto; 
+  margin: auto;
 }
 
 .App-logo {
@@ -47,9 +47,9 @@ html {
 }
 
 .App-link {
-  color: var(--text-primary-blue);
+  color: var(--text-primary-green);
 }
 
 .App-link:hover {
-  color: var(--text-secondary-blue);
-}
+  color: var(--text-secondary-green);
+}
diff --git a/src/components/Data/EarthToMoon.jsx b/src/components/Data/EarthToMoon.jsx
@@ -1,57 +1,69 @@
-
 import GetStyledChart from "./ChartHelper";
 
-const monthName = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+const monthName = [
+  "Jan",
+  "Feb",
+  "Mar",
+  "Apr",
+  "May",
+  "Jun",
+  "Jul",
+  "Aug",
+  "Sep",
+  "Oct",
+  "Nov",
+  "Dec",
+];
 const distances = new Map([
-    ["Jan", [405, 362, 406]],
-    ["Feb", [358, 406]],
-    ["Mar", [357, 406]],
-    ["Apr", [359, 405]],
-    ["May", [363, 404]],
-    ["Jun", [368, 404, 369]],
-    ["Jul", [404, 365]],
-    ["Aug", [405, 360]],
-    ["Sep", [406, 357]],
-    ["Oct", [406, 357, 406]],
-    ["Nov", [360, 405]],
-    ["Dec", [365, 404]],
+  ["Jan", [405, 362, 406]],
+  ["Feb", [358, 406]],
+  ["Mar", [357, 406]],
+  ["Apr", [359, 405]],
+  ["May", [363, 404]],
+  ["Jun", [368, 404, 369]],
+  ["Jul", [404, 365]],
+  ["Aug", [405, 360]],
+  ["Sep", [406, 357]],
+  ["Oct", [406, 357, 406]],
+  ["Nov", [360, 405]],
+  ["Dec", [365, 404]],
 ]);
 
 function getLastTwelveMonths() {
-    let labels = [];
-    let data = [];
-    let d = new Date();
-    d.setDate(1);
-    for (let i=0; i<=11; i++) {
-        const month = monthName[d.getMonth()];
-        const monthlyDist = distances.get(month);
-        monthlyDist.forEach(element => {
-            labels.push(month + ' ' + d.getFullYear());
-            data.push(element);
-        });
-        d.setMonth(d.getMonth() - 1);
-    }
+  let labels = [];
+  let data = [];
+  let d = new Date();
+  d.setDate(1);
+  for (let i = 0; i <= 11; i++) {
+    const month = monthName[d.getMonth()];
+    const monthlyDist = distances.get(month);
+    monthlyDist.forEach((element) => {
+      labels.push(month + " " + d.getFullYear());
+      data.push(element);
+    });
+    d.setMonth(d.getMonth() - 1);
+  }
 
-    // reverse to bring data back to chronologically increasing order
-    return [labels.reverse(), data.reverse()];
+  // reverse to bring data back to chronologically increasing order
+  return [labels.reverse(), data.reverse()];
 }
 
 function EarthToMoon() {
-    const [labels, moonData] = getLastTwelveMonths();
-    const data = [
-        {
-            values: moonData,
-            color: "#72a8f5",
-            label: "Distance",
-        }, 
-    ]
+  const [labels, moonData] = getLastTwelveMonths();
+  const data = [
+    {
+      values: moonData,
+      color: "#44b2af",
+      label: "Distance",
+    },
+  ];
 
-    return GetStyledChart({
-        labels: labels, 
-        inputData: data,
-        chartTitle: 'Distance to the Moon',
-        yLabel: '1000s Kilometers',
-    })
+  return GetStyledChart({
+    labels: labels,
+    inputData: data,
+    chartTitle: "Distance to the Moon",
+    yLabel: "1000s Kilometers",
+  });
 }
 
-export default EarthToMoon;
+export default EarthToMoon;
diff --git a/src/components/Data/SiteStats.jsx b/src/components/Data/SiteStats.jsx
@@ -1,22 +1,22 @@
 import GetStyledChart from "./ChartHelper";
 
 function SiteStats(visitors) {
-    const labels = ["Earth's Moon", "Mars"]
-    const values = [visitors.moonVisitors, visitors.marsVisitors]
-    const data = [
-        {
-            values: values,
-            color: "#72a8f5",
-            label: "# Earth Visitors",
-        }, 
-    ]
+  const labels = ["Earth's Moon", "Mars"];
+  const values = [visitors.moonVisitors, visitors.marsVisitors];
+  const data = [
+    {
+      values: values,
+      color: "#44b2af",
+      label: "# Earth Visitors",
+    },
+  ];
 
-    return GetStyledChart({
-        labels: labels, 
-        inputData: data,
-        chartTitle: '',
-        yLabel: 'Visitors',
-    })
+  return GetStyledChart({
+    labels: labels,
+    inputData: data,
+    chartTitle: "",
+    yLabel: "Visitors",
+  });
 }
 
-export default SiteStats;
+export default SiteStats;