Merge pull request #485 from scaffold-eth/challenge-dice-game-new-ui

Dice Game New UI

Author: rin-st

README.md

@@ -26,7 +26,7 @@ Before you begin, you need to install the following tools:
 Then download the challenge to your computer and install dependencies by running:
 
 ```sh
-npx create-eth@2.0.20 -e challenge-dice-game challenge-dice-game
+npx create-eth@2.0.22 -e challenge-dice-game challenge-dice-game
 ```
 
 > When prompted, choose your preferred Solidity framework: **Hardhat** or **Foundry**.
@@ -57,6 +57,8 @@ yarn start
 
 📱 Open http://localhost:3000 to see the app.
 
+> _Note: the UI in screenshots may differ slightly from the current version._
+
 > 👩‍💻 Rerun `yarn deploy` whenever you want to deploy contract changes to the frontend. Run `yarn deploy --reset` for a completely fresh deploy, even when contracts are unchanged.
 
 ---

extension/README.md.args.mjs

@@ -38,6 +38,8 @@ yarn start
 
 📱 Open http://localhost:3000 to see the app.
 
+> _Note: the UI in screenshots may differ slightly from the current version._
+
 > 👩‍💻 Rerun \`yarn deploy\` whenever you want to deploy contract changes to the frontend. Run \`yarn deploy --reset\` for a completely fresh deploy, even when contracts are unchanged.
 
 ---

extension/packages/nextjs/app/dice/_components/Amount.tsx

@@ -31,9 +31,9 @@ export const Amount = ({
   if (isLoading) {
     return (
       <div className="animate-pulse flex space-x-4">
-        <div className="rounded-md bg-slate-300 h-6 w-6"></div>
+        <div className="bg-slate-300 h-6 w-6"></div>
         <div className="flex items-center space-y-6">
-          <div className="h-2 w-28 bg-slate-300 rounded"></div>
+          <div className="h-2 w-28 bg-slate-300"></div>
         </div>
       </div>
     );

extension/packages/nextjs/app/page.tsx.args.mjs

@@ -13,7 +13,7 @@ export const description = `
             width="727"
             height="231"
             alt="challenge banner"
-            className="rounded-xl border-4 border-primary"
+            className="border-4 border-primary"
           />
           <div className="max-w-3xl">
             <p className="text-lg mt-10">

extension/packages/nextjs/package.json

@@ -19,9 +19,9 @@ export const postContent = `
   --color-warning: #ffcf72;
   --color-error: #ff8863;
 
-  /* radius / button rounding */
-  --radius-field: 9999rem;
-  --radius-box: 1rem;
+  --radius-field: 0rem;
+  --radius-box: 0rem;
+  --radius-selector: 0rem;
 
   /* tooltip tail width */
   --tt-tailw: 6px;
@@ -48,8 +48,9 @@ export const postContent = `
   --color-warning: #ffcf72;
   --color-error: #ff8863;
 
-  --radius-field: 9999rem;
-  --radius-box: 1rem;
+  --radius-field: 0rem;
+  --radius-box: 0rem;
+  --radius-selector: 0rem;
 
   --tt-tailw: 6px;
   --tt-bg: var(--color-primary); /* if you need a tooltip bg override */