Add UI Builder link (#617)

ericglau · web-flow · commit 374d3253c97d · 2025-08-11T11:19:37.000-04:00
diff --git a/packages/ui/public/cairo.html b/packages/ui/public/cairo.html
@@ -62,18 +62,20 @@
       >.
     </div>
   </div>
-  <div class="nav">
-    <a class="switch switch-solidity" href="/"><img src="/icons/solidity.svg" alt="solidity">Solidity</a>
-    <div class="switch switch-cairo active with-version" id="cairo-switch">
-      <img src="/icons/cairo.svg" alt="cairo">
-      Cairo
-      <select class="switch switch-cairo active version" id="version-dropdown">
-        <option value="stable" />
-        <option value="alpha" />
-      </select>
+  <div class="nav-row flex flex-row items-center justify-between">
+    <div class="nav">
+      <a class="switch switch-solidity" href="/"><img src="/icons/solidity.svg" alt="solidity">Solidity</a>
+      <div class="switch switch-cairo active with-version" id="cairo-switch">
+        <img src="/icons/cairo.svg" alt="cairo">
+        Cairo
+        <select class="switch switch-cairo active version" id="version-dropdown">
+          <option value="stable" />
+          <option value="alpha" />
+        </select>
+      </div>
+      <a class="switch switch-stellar" href="/stellar"><img src="/icons/stellar.svg" alt="stellar">Stellar</a>
+      <a class="switch switch-stylus" href="/stylus"><img src="/icons/stylus.svg" alt="stylus">Stylus</a>
     </div>
-    <a class="switch switch-stellar" href="/stellar"><img src="/icons/stellar.svg" alt="stellar">Stellar</a>
-    <a class="switch switch-stylus" href="/stylus"><img src="/icons/stylus.svg" alt="stylus">Stylus</a>
   </div>
   <div class="wizard-container">
     <oz-wizard class="wizard" data-sync-url="fragment" data-lang="cairo"></oz-wizard>
diff --git a/packages/ui/public/icons/arrow-right.svg b/packages/ui/public/icons/arrow-right.svg
@@ -0,0 +1,4 @@
+<svg fill="currentColor" width="16" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640">
+<!--!Font Awesome Pro v7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2025 Fonticons, Inc.-->
+<path d="M566.6 342.6C579.1 330.1 579.1 309.8 566.6 297.3L406.6 137.3C394.1 124.8 373.8 124.8 361.3 137.3C348.8 149.8 348.8 170.1 361.3 182.6L466.7 288L96 288C78.3 288 64 302.3 64 320C64 337.7 78.3 352 96 352L466.7 352L361.3 457.4C348.8 469.9 348.8 490.2 361.3 502.7C373.8 515.2 394.1 515.2 406.6 502.7L566.6 342.7z"/>
+</svg>
diff --git a/packages/ui/public/icons/up-right-from-square.svg b/packages/ui/public/icons/up-right-from-square.svg
@@ -0,0 +1,4 @@
+<svg fill="currentColor" width="16" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640">
+<!--!Font Awesome Free v7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.-->
+<path d="M384 64C366.3 64 352 78.3 352 96C352 113.7 366.3 128 384 128L466.7 128L265.3 329.4C252.8 341.9 252.8 362.2 265.3 374.7C277.8 387.2 298.1 387.2 310.6 374.7L512 173.3L512 256C512 273.7 526.3 288 544 288C561.7 288 576 273.7 576 256L576 96C576 78.3 561.7 64 544 64L384 64zM144 160C99.8 160 64 195.8 64 240L64 496C64 540.2 99.8 576 144 576L400 576C444.2 576 480 540.2 480 496L480 416C480 398.3 465.7 384 448 384C430.3 384 416 398.3 416 416L416 496C416 504.8 408.8 512 400 512L144 512C135.2 512 128 504.8 128 496L128 240C128 231.2 135.2 224 144 224L224 224C241.7 224 256 209.7 256 192C256 174.3 241.7 160 224 160L144 160z"/>
+</svg>
diff --git a/packages/ui/public/index.html b/packages/ui/public/index.html
@@ -93,11 +93,31 @@
       >.
     </div>
   </div>
-  <div class="nav">
-    <a class="switch switch-solidity active" href="/"><img src="/icons/solidity.svg" alt="solidity">Solidity</a>
-    <a class="switch switch-cairo" href="/cairo"><img src="/icons/cairo.svg" alt="cairo">Cairo</a>
-    <a class="switch switch-stellar" href="/stellar"><img src="/icons/stellar.svg" alt="stellar">Stellar</a>
-    <a class="switch switch-stylus" href="/stylus"><img src="/icons/stylus.svg" alt="stylus">Stylus</a>
+  <div class="nav-row flex flex-row items-center justify-between">
+    <div class="nav nav-switches flex flex-row">
+      <a class="switch switch-solidity active" href="/"><img src="/icons/solidity.svg" alt="solidity">Solidity</a>
+      <a class="switch switch-cairo" href="/cairo"><img src="/icons/cairo.svg" alt="cairo">Cairo</a>
+      <a class="switch switch-stellar" href="/stellar"><img src="/icons/stellar.svg" alt="stellar">Stellar</a>
+      <a class="switch switch-stylus" href="/stylus"><img src="/icons/stylus.svg" alt="stylus">Stylus</a>
+    </div>
+
+    <div class="flex flex-row gap-2">
+      <div class="text-sm text-gray-600 leading-tight text-right">
+        <div>After deploying a contract, use the new</div>
+        <div>Contracts UI Builder to spin up a quick UI</div>
+      </div>
+
+      <div class="flex items-center">
+        <img src="/icons/arrow-right.svg" alt="arrow-right" class="arrow-gray">
+      </div>
+
+      <div class="flex items-center">
+        <a href="http://builder.openzeppelin.com" target="_blank" rel="noopener noreferrer" class="bg-[#3d3b5d] text-white px-4 py-2 rounded-full text-sm font-medium flex items-center gap-2 hover:bg-[#4a4872] transition-colors no-underline whitespace-nowrap">
+          <span>Try the UI Builder</span>
+          <img src="/icons/up-right-from-square.svg" alt="up-right-from-square" class="arrow-white">
+        </a>
+      </div>
+    </div>
   </div>
   <div class="wizard-container">
     <oz-wizard class="wizard" data-sync-url="fragment"></oz-wizard>
diff --git a/packages/ui/public/stellar.html b/packages/ui/public/stellar.html
@@ -61,11 +61,13 @@
       >.
     </div>
   </div>
-  <div class="nav">
-    <a class="switch switch-solidity" href="/"><img src="/icons/solidity.svg" alt="solidity">Solidity</a>
-    <a class="switch switch-cairo" href="/cairo"><img src="/icons/cairo.svg" alt="cairo">Cairo</a>
-    <a class="switch switch-stellar active" href="#"><img src="/icons/stellar.svg" alt="stellar">Stellar</a>
-    <a class="switch switch-stylus" href="/stylus"><img src="/icons/stylus.svg" alt="stylus">Stylus</a>
+  <div class="nav-row flex flex-row items-center justify-between">
+    <div class="nav">
+      <a class="switch switch-solidity" href="/"><img src="/icons/solidity.svg" alt="solidity">Solidity</a>
+      <a class="switch switch-cairo" href="/cairo"><img src="/icons/cairo.svg" alt="cairo">Cairo</a>
+      <a class="switch switch-stellar active" href="#"><img src="/icons/stellar.svg" alt="stellar">Stellar</a>
+      <a class="switch switch-stylus" href="/stylus"><img src="/icons/stylus.svg" alt="stylus">Stylus</a>
+    </div>
   </div>
   <div class="wizard-container">
     <oz-wizard class="wizard" data-sync-url="fragment" data-lang="stellar"></oz-wizard>
diff --git a/packages/ui/public/stylus.html b/packages/ui/public/stylus.html
@@ -61,11 +61,13 @@
       >.
     </div>
   </div>
-  <div class="nav">
-    <a class="switch switch-solidity" href="/"><img src="/icons/solidity.svg" alt="solidity">Solidity</a>
-    <a class="switch switch-cairo" href="/cairo"><img src="/icons/cairo.svg" alt="cairo">Cairo</a>
-    <a class="switch switch-stellar" href="/stellar"><img src="/icons/stellar.svg" alt="stellar">Stellar</a>
-    <a class="switch switch-stylus active" href="#"><img src="/icons/stylus_active.svg" alt="stylus">Stylus</a>
+  <div class="nav-row flex flex-row items-center justify-between">
+    <div class="nav">
+      <a class="switch switch-solidity" href="/"><img src="/icons/solidity.svg" alt="solidity">Solidity</a>
+      <a class="switch switch-cairo" href="/cairo"><img src="/icons/cairo.svg" alt="cairo">Cairo</a>
+      <a class="switch switch-stellar" href="/stellar"><img src="/icons/stellar.svg" alt="stellar">Stellar</a>
+      <a class="switch switch-stylus active" href="#"><img src="/icons/stylus_active.svg" alt="stylus">Stylus</a>
+    </div>
   </div>
   <div class="wizard-container">
     <oz-wizard class="wizard" data-sync-url="fragment" data-lang="stylus"></oz-wizard>
diff --git a/packages/ui/src/standalone.css b/packages/ui/src/standalone.css
@@ -59,7 +59,7 @@ body {
 /* Navigation */
 .nav {
   text-align: left;
-  margin: 1rem auto;
+  margin: 1rem 0;
   font-family: 'silka', Arial, Helvetica, sans-serif;
   background: var(--gray-1);
   display: flex;
@@ -143,6 +143,24 @@ body {
     contrast(100%);
 }
 
+.nav-row {
+  padding: 0 1rem 0;
+  max-width: 100%;
+  margin: 0 auto 0;
+  min-width: 800px;
+  max-width: 1500px;
+  margin: auto;
+}
+
+.arrow-gray {
+  filter: brightness(0) saturate(100%) invert(40%) sepia(8%) saturate(872%) hue-rotate(169deg) brightness(80%)
+    contrast(90%);
+}
+.arrow-white {
+  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(180deg) brightness(100%)
+    contrast(100%);
+}
+
 /* Wizard */
 .wizard-container {
   padding: 0 1rem 0;
