chore: update frontend templates

src/dfx/assets/project_templates/react/src/__frontend_name__/package.json

@@ -22,7 +22,7 @@
     "@types/react-dom": "^18.2.6",
     "@vitejs/plugin-react": "^4.0.1",
     "dotenv": "^16.3.1",
-    "sass": "^1.63.6",
+    "sass": "^1.81.0",
     "typescript": "^5.1.3",
     "vite": "^4.3.9",
     "vite-plugin-environment": "^1.1.3"

src/dfx/assets/project_templates/react/src/__frontend_name__/src/App.jsx

@@ -4,26 +4,25 @@ import { __backend_name_ident__ } from 'declarations/__backend_name__';
 function App() {
   const [greeting, setGreeting] = useState('');
 
-  function handleSubmit(event) {
+  async function handleSubmit(event) {
     event.preventDefault();
     const name = event.target.elements.name.value;
-    __backend_name_ident__.greet(name).then((greeting) => {
-      setGreeting(greeting);
-    });
+    const greeting = await __backend_name_ident__.greet(name);
+    setGreeting(greeting);
     return false;
   }
 
   return (
-    <main>
-      <img src="/logo2.svg" alt="DFINITY logo" />
-      <br />
-      <br />
-      <form action="#" onSubmit={handleSubmit}>
-        <label htmlFor="name">Enter your name: &nbsp;</label>
-        <input id="name" alt="Name" type="text" />
-        <button type="submit">Click Me!</button>
-      </form>
-      <section id="greeting">{greeting}</section>
+    <main className="container">
+      <div className="card">
+        <h1 id="greeting">{greeting}</h1>
+        <form action="#" onSubmit={handleSubmit}>
+          <label htmlFor="name">Enter your name:</label>
+          <input type="text" id="name" required />
+          <button type="submit">Click Me!</button>
+        </form>
+        <img src="/logo.svg" alt="DFINITY logo" width="256" />
+      </div>
     </main>
   );
 }

src/dfx/assets/project_templates/react/src/__frontend_name__/src/index.scss

@@ -1,39 +1,100 @@
-body {
-  font-family: sans-serif;
-  font-size: 1.5rem;
+:root {
+  --vc-brand-gradient: radial-gradient(at 100% 100%, hsla(265, 80%, 75%, 1) 0px, transparent 50%), radial-gradient(at 100% 0%, hsla(272, 86%, 55%, 1) 0px, transparent 50%), radial-gradient(at 0% 18%, hsla(223, 79%, 66%, 1) 0px, transparent 50%);
+  --vc-brand-purple: #4b19d6;
+
+  --rc-background-image--highlight: var(--vc-brand-gradient);
+  --rc-background--highlight: var(--vc-brand-purple);
+
+  --rc-interaction-color: #4b19d6;
+  --rc-interaction-color-hover: #3c14aa;
 }
 
-img {
-  max-width: 50vw;
-  max-height: 25vw;
-  display: block;
-  margin: auto;
+body, html {
+  margin: 0;
+  padding: 0;
+  font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  height: 100%;
 }
 
-form {
+#root {
+  height: 100%;
+}
+
+.container {
+  min-height: 100%;
   display: flex;
   justify-content: center;
-  gap: 0.5em;
-  flex-flow: row wrap;
-  max-width: 40vw;
-  margin: auto;
-  align-items: baseline;
+  align-items: center;
+  background-image: var(--rc-background-image--highlight);
+  background-color: var(--rc-background--highlight);
 }
 
-button[type="submit"] {
-  padding: 5px 20px;
-  margin: 10px auto;
-  float: right;
+.card {
+  background: white;
+  padding: 2rem;
+  border-radius: 8px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  width: 100%;
+  max-width: 320px;
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+  align-items: center;
 }
 
-#greeting {
-  margin: 10px auto;
-  padding: 10px 60px;
-  border: 1px solid #222;
+.logo {
+  text-align: center;
+  margin-bottom: 1rem;
 }
 
-#greeting:empty {
-  display: none;
+.logo svg {
+  width: 100px;
+  height: auto;
+}
+
+h1 {
+  color: #333;
+  text-align: center;
+  margin: 0 0 1rem;
+  word-wrap: break-word;
+  white-space: pre-wrap;
+  width: 100%;
+
+  &:empty {
+    display: none;
+  }
+}
+
+form {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+label {
+  margin-bottom: 0.5rem;
+  color: #333;
+}
+
+input {
+  padding: 0.5rem;
+  margin-bottom: 1rem;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}
+
+button {
+  padding: 0.5rem;
+  background-color: var(--rc-interaction-color);
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background-color 0.3s;
+}
+
+button:hover {
+  background-color: var(--rc-interaction-color-hover);
 }
 
 .browser-warning {

src/dfx/assets/project_templates/react/src/__frontend_name__/vite.config.js

@@ -13,29 +13,37 @@ export default defineConfig({
   optimizeDeps: {
     esbuildOptions: {
       define: {
-        global: "globalThis",
+        global: 'globalThis',
       },
     },
   },
   server: {
     proxy: {
-      "/api": {
-        target: "http://127.0.0.1:4943",
+      '/api': {
+        target: 'http://127.0.0.1:4943',
         changeOrigin: true,
       },
     },
   },
   plugins: [
     react(),
-    environment("all", { prefix: "CANISTER_" }),
-    environment("all", { prefix: "DFX_" }),
+    environment('all', { prefix: 'CANISTER_' }),
+    environment('all', { prefix: 'DFX_' }),
   ],
+  css: {
+    preprocessorOptions: {
+      scss: {
+        api: 'modern-compiler',
+        silenceDeprecations: ['legacy-js-api'],
+      },
+    },
+  },
   resolve: {
     alias: [
       {
-        find: "declarations",
+        find: 'declarations',
         replacement: fileURLToPath(
-          new URL("../declarations", import.meta.url)
+          new URL('../declarations', import.meta.url),
         ),
       },
     ],

src/dfx/assets/project_templates/react_tests/src/__frontend_name__/src/tests/App.test.jsx

@@ -10,7 +10,7 @@ describe('App', () => {
         <App />
       </StrictMode>,
     );
-    expect(document.body.innerHTML).toMatchInlineSnapshot('"<div><main><img src="/logo2.svg" alt="DFINITY logo"><br><br><form action="#"><label for="name">Enter your name: &nbsp;</label><input id="name" alt="Name" type="text"><button type="submit">Click Me!</button></form><section id="greeting"></section></main></div>"');
+    expect(document.body.innerHTML).toMatchInlineSnapshot('"<div><main class="container"><div class="card"><h1 id="greeting"></h1><form action="#"><label for="name">Enter your name:</label><input type="text" id="name" required=""><button type="submit">Click Me!</button></form><img src="/logo.svg" alt="DFINITY logo" width="256"></div></main></div>"');
     expect(1).toEqual(1);
   });
 });

src/dfx/assets/project_templates/react_tests/src/__frontend_name__/vite.config.js.patch

@@ -3,7 +3,7 @@
 @@ -1,1 +1,2 @@
 +/// <reference types="vitest" />
  import { fileURLToPath, URL } from 'url';
-@@ -33,1 +33,5 @@
+@@ -41,1 +41,5 @@
 +  test: {
 +    environment: 'jsdom',
 +    setupFiles: 'src/setupTests.js',

src/dfx/assets/project_templates/svelte/src/__frontend_name__/package.json

@@ -20,7 +20,7 @@
     "@sveltejs/kit": "^2.5.26",
     "@sveltejs/vite-plugin-svelte": "^3.1.2",
     "dotenv": "^16.3.1",
-    "sass": "^1.63.6",
+    "sass": "^1.81.0",
     "svelte": "^4.2.19",
     "svelte-check": "^4.0.1",
     "typescript": "^5.6.2",

src/dfx/assets/project_templates/svelte/src/__frontend_name__/src/index.scss

@@ -1,39 +1,100 @@
-body {
-  font-family: sans-serif;
-  font-size: 1.5rem;
+:root {
+  --vc-brand-gradient: radial-gradient(at 100% 100%, hsla(265, 80%, 75%, 1) 0px, transparent 50%), radial-gradient(at 100% 0%, hsla(272, 86%, 55%, 1) 0px, transparent 50%), radial-gradient(at 0% 18%, hsla(223, 79%, 66%, 1) 0px, transparent 50%);
+  --vc-brand-purple: #4b19d6;
+
+  --rc-background-image--highlight: var(--vc-brand-gradient);
+  --rc-background--highlight: var(--vc-brand-purple);
+
+  --rc-interaction-color: #4b19d6;
+  --rc-interaction-color-hover: #3c14aa;
 }
 
-img {
-  max-width: 50vw;
-  max-height: 25vw;
-  display: block;
-  margin: auto;
+body, html {
+  margin: 0;
+  padding: 0;
+  font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  height: 100%;
 }
 
-form {
+#root {
+  height: 100%;
+}
+
+.container {
+  min-height: 100%;
   display: flex;
   justify-content: center;
-  gap: 0.5em;
-  flex-flow: row wrap;
-  max-width: 40vw;
-  margin: auto;
-  align-items: baseline;
+  align-items: center;
+  background-image: var(--rc-background-image--highlight);
+  background-color: var(--rc-background--highlight);
 }
 
-button[type="submit"] {
-  padding: 5px 20px;
-  margin: 10px auto;
-  float: right;
+.card {
+  background: white;
+  padding: 2rem;
+  border-radius: 8px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  width: 100%;
+  max-width: 320px;
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+  align-items: center;
 }
 
-#greeting {
-  margin: 10px auto;
-  padding: 10px 60px;
-  border: 1px solid #222;
+.logo {
+  text-align: center;
+  margin-bottom: 1rem;
 }
 
-#greeting:empty {
-  display: none;
+.logo svg {
+  width: 100px;
+  height: auto;
+}
+
+h1 {
+  color: #333;
+  text-align: center;
+  margin: 0 0 1rem;
+  word-wrap: break-word;
+  white-space: pre-wrap;
+  width: 100%;
+
+  &:empty {
+    display: none;
+  }
+}
+
+form {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+label {
+  margin-bottom: 0.5rem;
+  color: #333;
+}
+
+input {
+  padding: 0.5rem;
+  margin-bottom: 1rem;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}
+
+button {
+  padding: 0.5rem;
+  background-color: var(--rc-interaction-color);
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background-color 0.3s;
+}
+
+button:hover {
+  background-color: var(--rc-interaction-color-hover);
 }
 
 .browser-warning {