chore: lean into chakra UI

Signed-off-by: Brooks Townsend <[email protected]>
cosmonic · Oct 31, 2023 · 4a1112b · 4a1112b
1 parent 09a8e40
commit 4a1112b
Show file tree

Hide file tree

Showing 10 changed files with 24 additions and 206 deletions.
diff --git a/xkcdgenerator/ui/build/asset-manifest.json b/xkcdgenerator/ui/build/asset-manifest.json
@@ -1,10 +1,9 @@
 {
   "files": {
-    "main.js": "/static/js/main.49004617.js",
-    "static/js/27.2a45638c.chunk.js": "/static/js/27.2a45638c.chunk.js",
+    "main.js": "/static/js/main.882e2eaf.js",
     "index.html": "/index.html"
   },
   "entrypoints": [
-    "static/js/main.49004617.js"
+    "static/js/main.882e2eaf.js"
   ]
 }
diff --git a/xkcdgenerator/ui/build/index.html b/xkcdgenerator/ui/build/index.html
@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/apple-touch-icon.png"/><link rel="manifest" href="/manifest.json"/><title>Cosmonic XKCD</title><script defer="defer" src="/static/js/main.49004617.js"></script></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/apple-touch-icon.png"/><link rel="manifest" href="/manifest.json"/><title>Cosmonic XKCD</title><script defer="defer" src="/static/js/main.882e2eaf.js"></script></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
diff --git a/xkcdgenerator/ui/build/static/js/27.2a45638c.chunk.js b/xkcdgenerator/ui/build/static/js/27.2a45638c.chunk.js
diff --git a/xkcdgenerator/ui/build/static/js/main.49004617.js b/xkcdgenerator/ui/build/static/js/main.49004617.js
diff --git a/xkcdgenerator/ui/build/static/js/main.882e2eaf.js b/xkcdgenerator/ui/build/static/js/main.882e2eaf.js
diff --git a/...ld/static/js/main.49004617.js.LICENSE.txt → ...ld/static/js/main.882e2eaf.js.LICENSE.txt b/...ld/static/js/main.49004617.js.LICENSE.txt → ...ld/static/js/main.882e2eaf.js.LICENSE.txt
diff --git a/xkcdgenerator/ui/src/App.js b/xkcdgenerator/ui/src/App.js
@@ -4,6 +4,7 @@ import {
   Box,
   Button,
   VStack,
+  Flex,
   Grid,
   Text,
   theme,
@@ -52,39 +53,25 @@ function App() {
           <Image
             src="Cosmonic.Logo-Hrztl_Color.svg"  // Update with the correct path
             alt="Cosmonic Logo"
-            style={{
-              position: 'absolute',
-              bottom: 0,
-              right: 0,
-              padding: '8px',
-              width: '18rem'
-            }}
+            pos="absolute"
+            bottom="0"
+            right="0"
+            p={2}
+            w="18rem"
           />
         </a>
-        <div style={{
-          position: 'absolute',
-          bottom: 0,
-          left: 0,
-          display: 'flex',
-          flexDirection: 'column',
-        }}>
-          <b><h1>Keep going!</h1></b>
-          <a href="https://new.cosmonic.app/?yaml=https://raw.githubusercontent.com/cosmonic/awesome-cosmonic/main/xkcdgenerator/xkcd-generator-cosmonic.wadm.yaml" target="_blank" rel="noreferrer">
-            <Button margin="4px" width="100%" textAlign="left" textColor="#685BC7">
-              Step 1: Deploy on Cosmonic
-            </Button>
-          </a>
-          <a href="https://new.cosmonic.app/?yaml=https://raw.githubusercontent.com/cosmonic/awesome-cosmonic/main/xkcdgenerator/xkcd-generator-stargate.wadm.yaml" target="_blank" rel="noreferrer">
-            <Button margin="4px" width="100%" textAlign="left" textColor="#685BC7">
-              Step 2. Distribute to your Edge
-            </Button>
-          </a>
-          <a href="https://cosmonic.com/docs/getting-started/makeityourown" target="_blank" rel="noreferrer">
-            <Button margin="4px" width="100%" textAlign="left" textColor="#685BC7">
-              Step 3. Make it Your Own
-            </Button>
-          </a>
-        </div>
+        <Flex align="center" justify="center" pos="absolute" direction="column" bottom="20" left="5">
+          <Text as="h3" fontSize="xl">Keep going!</Text>
+          <Button as="a" href="https://new.cosmonic.app/?yaml=https://raw.githubusercontent.com/cosmonic/awesome-cosmonic/main/xkcdgenerator/xkcd-generator-cosmonic.wadm.yaml" target="_blank" rel="noreferrer" margin="4px" width="100%" textAlign="left" textColor="#685BC7">
+            Step 1: Deploy on Cosmonic
+          </Button>
+          <Button as="a" href="https://new.cosmonic.app/?yaml=https://raw.githubusercontent.com/cosmonic/awesome-cosmonic/main/xkcdgenerator/xkcd-generator-stargate.wadm.yaml" target="_blank" rel="noreferrer" margin="4px" width="100%" textAlign="left" textColor="#685BC7">
+            Step 2. Distribute to your Edge
+          </Button>
+          <Button as="a" href="https://cosmonic.com/docs/getting-started/makeityourown" target="_blank" rel="noreferrer" margin="4px" width="100%" textAlign="left" textColor="#685BC7">
+            Step 3. Make it Your Own
+          </Button>
+        </Flex>
       </Box>
     </ChakraProvider >
   );

diff --git a/xkcdgenerator/ui/src/index.js b/xkcdgenerator/ui/src/index.js
@@ -2,9 +2,6 @@ import { ColorModeScript } from '@chakra-ui/react';
 import React, { StrictMode } from 'react';
 import * as ReactDOM from 'react-dom/client';
 import App from './App';
-import reportWebVitals from './reportWebVitals';
-import * as serviceWorker from './serviceWorker';
-
 const container = document.getElementById('root');
 const root = ReactDOM.createRoot(container);
 
@@ -13,14 +10,4 @@ root.render(
     <ColorModeScript />
     <App />
   </StrictMode>
-);
-
-// If you want your app to work offline and load faster, you can change
-// unregister() to register() below. Note this comes with some pitfalls.
-// Learn more about service workers: https://cra.link/PWA
-serviceWorker.unregister();
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();
+);
diff --git a/xkcdgenerator/ui/src/reportWebVitals.js b/xkcdgenerator/ui/src/reportWebVitals.js
diff --git a/xkcdgenerator/ui/src/serviceWorker.js b/xkcdgenerator/ui/src/serviceWorker.js