Update color palette.

Closes: aptos-labs#940
IDxtc · May 12, 2022 · ff3ead7 · ff3ead7
1 parent ff64cb5
commit ff3ead7
Show file tree

Hide file tree

Showing 9 changed files with 44 additions and 37 deletions.
diff --git a/ecosystem/platform/server/app/views/it1_profiles/_form.html.erb b/ecosystem/platform/server/app/views/it1_profiles/_form.html.erb
@@ -19,66 +19,66 @@
 
       <div>
         <div class="mb-16">
-          <h3 class="text-[#1dd7a5] font-mono uppercase text-2xl mb-2">Public Keys</h3>
+          <h3 class="text-teal-400 font-mono uppercase text-2xl mb-2">Public Keys</h3>
           <div class="mb-8"><%= render 'shared/bump' %></div>
 
           <p class="mb-4">
           <%= f.label :consensus_key, class: "font-mono uppercase block mb-2 text-lg" %>
-          <%= f.text_field :consensus_key, autofocus: true, required: true, pattern: '0x[a-f0-9]{64}', class: "font-mono placeholder:text-white text-lg bg-transparent appearance-none border border-white rounded w-full py-2 px-4 focus:ring-0 focus:border-[#1dd7a5]" %>
+          <%= f.text_field :consensus_key, autofocus: true, required: true, pattern: '0x[a-f0-9]{64}', class: "font-mono placeholder:text-white text-lg bg-transparent appearance-none border border-white rounded w-full py-2 px-4 focus:ring-0 focus:border-teal-400" %>
           </p>
           <p class="mb-4">
           <%= f.label :account_key, class: "font-mono uppercase block mb-2 text-lg" %>
-          <%= f.text_field :account_key, required: true, pattern: '0x[a-f0-9]{64}', class: "font-mono placeholder:text-white text-lg bg-transparent appearance-none border border-white rounded w-full py-2 px-4 focus:ring-0 focus:border-[#1dd7a5]" %>
+          <%= f.text_field :account_key, required: true, pattern: '0x[a-f0-9]{64}', class: "font-mono placeholder:text-white text-lg bg-transparent appearance-none border border-white rounded w-full py-2 px-4 focus:ring-0 focus:border-teal-400" %>
           </p>
           <p class="mb-4">
           <%= f.label :network_key, class: "font-mono uppercase block mb-2 text-lg" %>
-          <%= f.text_field :network_key, required: true, pattern: '0x[a-f0-9]{64}', class: "font-mono placeholder:text-white text-lg bg-transparent appearance-none border border-white rounded w-full py-2 px-4 focus:ring-0 focus:border-[#1dd7a5]" %>
+          <%= f.text_field :network_key, required: true, pattern: '0x[a-f0-9]{64}', class: "font-mono placeholder:text-white text-lg bg-transparent appearance-none border border-white rounded w-full py-2 px-4 focus:ring-0 focus:border-teal-400" %>
           </p>
         </div>
 
         <div class="mb-16">
-          <h3 class="text-[#1dd7a5] font-mono uppercase text-2xl mb-2">Validator Node</h3>
+          <h3 class="text-teal-400 font-mono uppercase text-2xl mb-2">Validator Node</h3>
           <div class="mb-8"><%= render 'shared/bump' %></div>
 
           <p class="mb-4">
           <%= f.label :validator_address, "Address (IP or hostname)", class: "font-mono uppercase block mb-2 text-lg" %>
-          <%= f.text_field :validator_address, required: true, class: "font-mono placeholder:text-white text-lg bg-transparent appearance-none border border-white rounded w-full py-2 px-4 focus:ring-0 focus:border-[#1dd7a5]" %>
+          <%= f.text_field :validator_address, required: true, class: "font-mono placeholder:text-white text-lg bg-transparent appearance-none border border-white rounded w-full py-2 px-4 focus:ring-0 focus:border-teal-400" %>
           </p>
 
           <div class="flex gap-8 md:gap-16 mb-4 items-end">
             <div class="flex-1">
               <%= f.label :validator_port, "Validator (noise) port", class: "font-mono uppercase block mb-2 text-lg" %>
-              <%= f.text_field :validator_port, required: true, pattern: '[0-9]+', class: "font-mono placeholder:text-white text-lg bg-transparent appearance-none border border-white rounded w-full py-2 px-4 focus:ring-0 focus:border-[#1dd7a5]" %>
+              <%= f.text_field :validator_port, required: true, pattern: '[0-9]+', class: "font-mono placeholder:text-white text-lg bg-transparent appearance-none border border-white rounded w-full py-2 px-4 focus:ring-0 focus:border-teal-400" %>
             </div>
             <div class="flex-1">
               <%= f.label :validator_metrics_port, "Metrics port", class: "font-mono uppercase block mb-2 text-lg" %>
-              <%= f.text_field :validator_metrics_port, required: true, pattern: '[0-9]+', class: "font-mono placeholder:text-white text-lg bg-transparent appearance-none border border-white rounded w-full py-2 px-4 focus:ring-0 focus:border-[#1dd7a5]" %>
+              <%= f.text_field :validator_metrics_port, required: true, pattern: '[0-9]+', class: "font-mono placeholder:text-white text-lg bg-transparent appearance-none border border-white rounded w-full py-2 px-4 focus:ring-0 focus:border-teal-400" %>
             </div>
           </div>
 
           <div class="flex gap-8 md:gap-16 mb-4 items-end">
             <div class="flex-1">
               <%= f.label :validator_api_port, "API port", class: "font-mono uppercase block mb-2 text-lg" %>
-              <%= f.text_field :validator_api_port, required: true, pattern: '[0-9]+', class: "font-mono placeholder:text-white text-lg bg-transparent appearance-none border border-white rounded w-full py-2 px-4 focus:ring-0 focus:border-[#1dd7a5]" %>
+              <%= f.text_field :validator_api_port, required: true, pattern: '[0-9]+', class: "font-mono placeholder:text-white text-lg bg-transparent appearance-none border border-white rounded w-full py-2 px-4 focus:ring-0 focus:border-teal-400" %>
             </div>
             <div class="flex-1"></div>
           </div>
 
         </div>
 
         <div class="mb-16">
-          <h3 class="text-[#1dd7a5] font-mono uppercase text-2xl mb-2">Full Node</h3>
+          <h3 class="text-teal-400 font-mono uppercase text-2xl mb-2">Full Node</h3>
           <div class="mb-8"><%= render 'shared/bump' %></div>
 
           <p class="mb-4">
           <%= f.label :fullnode_address, "Address (IP or hostname)", class: "font-mono uppercase block mb-2 text-lg" %>
-          <%= f.text_field :fullnode_address, class: "font-mono placeholder:text-white text-lg bg-transparent appearance-none border border-white rounded w-full py-2 px-4 focus:ring-0 focus:border-[#1dd7a5]" %>
+          <%= f.text_field :fullnode_address, class: "font-mono placeholder:text-white text-lg bg-transparent appearance-none border border-white rounded w-full py-2 px-4 focus:ring-0 focus:border-teal-400" %>
           </p>
 
           <div class="flex gap-8 md:gap-16 mb-4 items-end">
             <div class="flex-1">
               <%= f.label :fullnode_port, class: "font-mono uppercase block mb-2 text-lg" %>
-              <%= f.text_field :fullnode_port, pattern: '[0-9]+', class: "font-mono placeholder:text-white text-lg bg-transparent appearance-none border border-white rounded w-full py-2 px-4 focus:ring-0 focus:border-[#1dd7a5]" %>
+              <%= f.text_field :fullnode_port, pattern: '[0-9]+', class: "font-mono placeholder:text-white text-lg bg-transparent appearance-none border border-white rounded w-full py-2 px-4 focus:ring-0 focus:border-teal-400" %>
             </div>
             <div class="flex-1"></div>
           </div>
@@ -87,14 +87,14 @@
     </div>
 
     <div class="bg-neutral-800 rounded-md p-4 md:px-8 md:py-16 2xl:px-16 2xl:py-24 self-start">
-      <%= f.submit "Validate node", class: "w-full bg-[#1dd7a5] text-neutral-800 block p-2 text-center font-mono uppercase text-lg rounded font-bold mb-8" %>
+      <%= f.submit "Validate node", class: "w-full bg-teal-400 text-neutral-800 block p-2 text-center font-mono uppercase text-lg rounded font-bold mb-8" %>
       <div class="mb-8">
       <%= recaptcha_tags theme: :dark %>
       </div>
       <div class="text-sm">
         <label class="flex mb-4 gap-2 items-center cursor-pointer">
-          <%= f.check_box :terms_accepted, required: true, class: "bg-transparent border-[#1dd7a5] checked:bg-[#1dd7a5] hover:checked:bg-[#1dd7a5] focus:checked:bg-[#1dd7a5] focus:ring-0 outline-none" %>
-          <span>I agree to the Aptos <a href="#" class="font-bold text-[#1dd7a5]">Terms of Use</a> and <a href="#" class="font-bold text-[#1dd7a5]">Privacy Policy</a>.</span>
+          <%= f.check_box :terms_accepted, required: true, class: "bg-transparent border-teal-400 checked:bg-teal-400 hover:checked:bg-teal-400 focus:checked:bg-teal-400 focus:ring-0 outline-none" %>
+          <span>I agree to the Aptos <a href="#" class="font-bold text-teal-400">Terms of Use</a> and <a href="#" class="font-bold text-teal-400">Privacy Policy</a>.</span>
         </label>
       </div>
     </div>

diff --git a/ecosystem/platform/server/app/views/layouts/_header.html.erb b/ecosystem/platform/server/app/views/layouts/_header.html.erb
@@ -3,7 +3,7 @@
     <svg fill="#fff" height="30" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 258.21 60.7"><title>Aptos</title><path d="M197.83 20.31h-5.35a2.17 2.17 0 0 1-1.63-.74l-2.17-2.45a1.71 1.71 0 0 0-2.55 0l-1.86 2.1a3.2 3.2 0 0 1-2.4 1.09h-29.28A30.34 30.34 0 0 0 151 27.8h27.64a1.77 1.77 0 0 0 1.28-.55l2.58-2.69a1.71 1.71 0 0 1 1.23-.52h.1a1.74 1.74 0 0 1 1.28.57l2.17 2.45a2.16 2.16 0 0 0 1.63.74h22.55a29.9 29.9 0 0 0-1.59-7.49h-12ZM167.72 43.55A1.79 1.79 0 0 0 169 43l2.57-2.69a1.74 1.74 0 0 1 1.23-.52h.11a1.74 1.74 0 0 1 1.28.57l2.16 2.45a2.19 2.19 0 0 0 1.63.74h30.57a30 30 0 0 0 2.5-7.55H181.7a2.18 2.18 0 0 1-1.62-.73l-2.17-2.45a1.71 1.71 0 0 0-1.28-.58 1.67 1.67 0 0 0-1.27.58l-1.86 2.1a3.22 3.22 0 0 1-2.41 1.08h-19.68a30 30 0 0 0 2.49 7.57ZM189.41 12.12a1.79 1.79 0 0 0 1.29-.55l2.57-2.68a1.7 1.7 0 0 1 1.23-.53h.11a1.67 1.67 0 0 1 1.27.58l2.17 2.45a2.21 2.21 0 0 0 1.63.73h5.81a30.34 30.34 0 0 0-48.52 0ZM177.73 51.05h-7.95a2.15 2.15 0 0 1-1.62-.74L166 47.86a1.72 1.72 0 0 0-2.56 0L161.57 50a3.19 3.19 0 0 1-2.4 1.09h-.12a30.33 30.33 0 0 0 44.37 0ZM47.07 58.74l-6.17-15H13.31l-6.17 15H0L27.06 2l27.15 56.74ZM15.64 38.05h22.85L27 13.86ZM64.07 58.74V2h15.8c12.35 0 18.84 5.65 18.84 16.32 0 10.26-6.89 16.2-18.92 16.2h-9.06v24.22Zm6.66-30.16h7.54c9.54 0 13.73-3.12 13.73-10.26 0-7.38-4.25-10.43-13.71-10.43h-7.56ZM122.89 8.05h-19.57V1.96h45.79v6.09h-19.57v50.69h-6.65V8.05zM220.84 48.39l5.73-3.89.44.92c3.53 6.42 7.38 9 13.23 9 6.5 0 11.07-4.49 11.07-9.95 0-5.13-2.57-8.58-12.83-12.83-11.79-4.89-15.8-9.94-15.8-17.16 0-7.86 6.18-14 16.84-14 7.86 0 13.23 3.36 16.28 8.82l-4.65 3.21-1.36-.33c-2.41-3.76-5.38-5.93-10.43-5.93-6.17 0-9.78 3.45-9.78 8.1 0 4.33 2.32 6.82 12.35 11.39 13.07 5.93 16.28 10.82 16.28 18.68 0 8.58-7.38 15.88-17.89 15.88-8.82 0-14.91-3.37-19.48-11.87"/></svg>
   </a>
   <div class="flex gap-8">
-    <%= link_to "Docs", "https://aptos.dev/", class: "font-mono border-[#1dd7a5] border rounded w-36 text-center py-1 uppercase text-sm" %>
-    <%= link_to "Explorer", "https://explorer.devnet.aptos.dev/", class: "hidden sm:block font-mono border-[#1dd7a5] border rounded w-36 text-center py-1 uppercase text-sm" %>
+    <%= link_to "Docs", "https://aptos.dev/", class: "font-mono border-teal-400 border rounded w-36 text-center py-1 uppercase text-sm" %>
+    <%= link_to "Explorer", "https://explorer.devnet.aptos.dev/", class: "hidden sm:block font-mono border-teal-400 border rounded w-36 text-center py-1 uppercase text-sm" %>
   </div>
 </header>
diff --git a/ecosystem/platform/server/app/views/layouts/it1.html.erb b/ecosystem/platform/server/app/views/layouts/it1.html.erb
@@ -12,13 +12,13 @@
           <h3 class="font-mono uppercase text-xl mb-4 mt-4">Schedule</h3>
           <div class="mb-8"><%= render 'shared/bump' %></div>
           <p class="mb-4 font-light"><em>All dates and times shown are for Pacific Time.</em></p>
-          <h4 class="font-mono uppercase text-[#1dd7a5] text-lg">May 13</h4>
+          <h4 class="font-mono uppercase text-teal-400 text-lg">May 13</h4>
           <p class="mb-4 font-light">Registration starts. Node and identity verification begins.</p>
-          <h4 class="font-mono uppercase text-[#1dd7a5] text-lg">May 20</h4>
+          <h4 class="font-mono uppercase text-teal-400 text-lg">May 20</h4>
           <p class="mb-4 font-light">Node registration locked. Only 48 hours left to complete identity verification.</p>
-          <h4 class="font-mono uppercase text-[#1dd7a5] text-lg">May 23</h4>
+          <h4 class="font-mono uppercase text-teal-400 text-lg">May 23</h4>
           <p class="mb-4 font-light">Selection process concludes. Email notifications are sent.</p>
-          <h4 class="font-mono uppercase text-[#1dd7a5] text-lg">May 24</h4>
+          <h4 class="font-mono uppercase text-teal-400 text-lg">May 24</h4>
           <p class="mb-4 font-light">Aptos Incentivized Testnet 1 goes live at noon. Validator score tracking begins.</p>
         <% end %>
       </div>

diff --git a/ecosystem/platform/server/app/views/onboarding/email.html.erb b/ecosystem/platform/server/app/views/onboarding/email.html.erb
@@ -1,5 +1,5 @@
 <div>
-  <h2 class="text-4xl text-[#1dd7a5] font-mono mb-16 mt-8">Welcome, <%= @oauth_username %>!</h2>
+  <h2 class="text-4xl text-teal-400 font-mono mb-16 mt-8">Welcome, <%= @oauth_username %>!</h2>
 
   <%= render "layouts/flash" %>
 
@@ -21,21 +21,21 @@
 
   <%= form_with(model: current_user, url: onboarding_email_path, method: :post, data: {turbo: false}, html: {onsubmit: "return validateRecaptcha();"}) do |f| %>
     <div class="mb-8">
-      <%= f.email_field :email, autofocus: true, autocomplete: "email", required: true, placeholder: "ENTER YOUR EMAIL ADDRESS", class: "font-mono placeholder:text-white text-lg bg-transparent appearance-none border border-white rounded w-full py-2 px-4 focus:ring-0 focus:border-[#1dd7a5]" %>
+      <%= f.email_field :email, autofocus: true, autocomplete: "email", required: true, placeholder: "ENTER YOUR EMAIL ADDRESS", class: "font-mono placeholder:text-white text-lg bg-transparent appearance-none border border-white rounded w-full py-2 px-4 focus:ring-0 focus:border-teal-400" %>
     </div>
 
     <div class="mb-8">
       <%= recaptcha_tags theme: :dark %>
     </div>
 
     <div class="mb-12">
-      <%= f.submit "Verify email", class: "w-72 bg-[#1dd7a5] hover:bg-[#1de9b6] cursor-pointer text-neutral-800 block p-2 text-center font-mono uppercase text-lg rounded" %>
+      <%= f.submit "Verify email", class: "w-72 bg-teal-400 hover:bg-teal-300 cursor-pointer text-neutral-800 block p-2 text-center font-mono uppercase text-lg rounded" %>
     </div>
 
     <div class="text-sm">
       <label class="flex mb-4 gap-2 items-center cursor-pointer">
-        <%= f.check_box :terms_accepted, required: true, class: "bg-transparent border-[#1dd7a5] checked:bg-[#1dd7a5] hover:checked:bg-[#1dd7a5] focus:checked:bg-[#1dd7a5] focus:ring-0 outline-none" %>
-        <span>I agree to the Aptos <a href="#" class="font-bold text-[#1dd7a5]">Terms of Use</a> and <a href="#" class="font-bold text-[#1dd7a5]">Privacy Policy</a>.</span>
+        <%= f.check_box :terms_accepted, required: true, class: "bg-transparent border-teal-400 checked:bg-teal-400 hover:checked:bg-teal-400 focus:checked:bg-teal-400 focus:ring-0 outline-none" %>
+        <span>I agree to the Aptos <a href="#" class="font-bold text-teal-400">Terms of Use</a> and <a href="#" class="font-bold text-teal-400">Privacy Policy</a>.</span>
       </label>
     </div>
   <% end %>

diff --git a/ecosystem/platform/server/app/views/shared/_bump.html.erb b/ecosystem/platform/server/app/views/shared/_bump.html.erb
@@ -1,7 +1,7 @@
 <div class="w-full flex">
-  <div class="border-b border-[#1dd7a5] basis-1/12"></div>
+  <div class="border-b border-teal-400 basis-1/12"></div>
   <svg width="14" height="6" viewBox="0 0 14 6">
     <path d="M0,5.5a2.09,2.09,0,0,0,1.51-.64L4.66,1.53a3.36,3.36,0,0,1,4.69-.15,2.28,2.28,0,0,1,.22.22l2.88,3.21A2.08,2.08,0,0,0,14,5.5" fill="none" stroke="#1dd7a5"/>
   </svg>
-  <div class="flex-1 border-b border-[#1dd7a5]"></div>
+  <div class="flex-1 border-b border-teal-400"></div>
 </div>
diff --git a/ecosystem/platform/server/app/views/welcome/index.html.erb b/ecosystem/platform/server/app/views/welcome/index.html.erb
@@ -11,7 +11,7 @@
       Please review the <a href="#" class="underline">terms and conditions</a>.
       </p>
     </div>
-    <dialog id="login-dialog" class="rounded-xl border-2 border-[#1dd7a5]">
+    <dialog id="login-dialog" class="rounded-xl border-2 border-teal-400">
       <form type="dialog" class="text-right">
         <button type="submit">x</button>
       </form>
@@ -33,6 +33,6 @@
         </div>
       </div>
     </dialog>
-    <%= link_to "Sign up for Testnet", "javascript:document.getElementById('login-dialog').showModal()", class: "w-full bg-[#1dd7a5] text-neutral-800 block p-2 text-center font-mono uppercase text-lg rounded font-bold mt-auto" %>
+    <%= link_to "Sign up for Testnet", "javascript:document.getElementById('login-dialog').showModal()", class: "w-full bg-teal-400 text-neutral-800 block p-2 text-center font-mono uppercase text-lg rounded font-bold mt-auto" %>
   </div>
 </div>
diff --git a/ecosystem/platform/server/app/views/welcome/it1.html.erb b/ecosystem/platform/server/app/views/welcome/it1.html.erb
@@ -16,28 +16,28 @@
 
     <div class="flex flex-col lg:flex-row gap-8 sm:gap-16 2xl:gap-24">
       <div class="bg-neutral-800 rounded-md flex flex-col flex-1">
-        <h3 class="font-mono uppercase mb-2 bg-neutral-700 text-[#1dd7a5] px-4 py-2 rounded-t-md">Step 1</h3>
+        <h3 class="font-mono uppercase mb-2 bg-neutral-700 text-teal-400 px-4 py-2 rounded-t-md text-sm">Step 1</h3>
         <div class="px-8 py-4 flex flex-col flex-1">
-          <h4 class="text-[#1dd7a5] font-mono uppercase text-2xl mb-4">Node Verification</h4>
+          <h4 class="text-teal-400 font-mono uppercase text-2xl mb-4">Node Verification</h4>
           <div class="mb-4"><%= render 'shared/bump' %></div>
           <p class="mb-8 font-light">
           Register your node, and automatically verify that it is set up correctly.
           </p>
-          <%= link_to "Register", new_it1_profile_path, class: "w-full bg-[#1dd7a5] text-neutral-800 block p-2 text-center font-mono uppercase text-lg rounded font-bold mt-auto" %>
+          <%= link_to "Register", new_it1_profile_path, class: "w-full bg-teal-400 text-neutral-800 block p-2 text-center font-mono uppercase text-lg rounded font-bold mt-auto" %>
         </div>
       </div>
       <div class="bg-neutral-800 rounded-md flex flex-col flex-1">
-        <h3 class="font-mono uppercase mb-2 bg-neutral-700 text-[#1dd7a5] px-4 py-2 rounded-t-md">Step 2</h3>
+        <h3 class="font-mono uppercase mb-2 bg-neutral-700 text-teal-400 px-4 py-2 rounded-t-md text-sm">Step 2</h3>
         <div class="px-8 py-4 flex flex-col flex-1">
-          <h4 class="text-[#1dd7a5] font-mono uppercase text-2xl mb-4">Identity Verification</h4>
+          <h4 class="text-teal-400 font-mono uppercase text-2xl mb-4">Identity Verification</h4>
           <div class="mb-4"><%= render 'shared/bump' %></div>
           <p class="mb-8 font-light">
           Identity must be verified by noon (PST) May 23 to get into the selection process.
           </p>
           <% if current_user&.it1_profile&.validator_verified? %>
-            <%= link_to "Verify", onboarding_kyc_redirect_path, class: "w-full bg-[#1dd7a5] text-neutral-800 block p-2 text-center font-mono uppercase text-lg rounded font-bold mt-auto" %>
+            <%= link_to "Verify", onboarding_kyc_redirect_path, class: "w-full bg-teal-400 text-neutral-800 block p-2 text-center font-mono uppercase text-lg rounded font-bold mt-auto" %>
           <% else %>
-            <%= link_to "Verify", "#", class: "w-full bg-[#1dd7a5] text-neutral-800 block p-2 text-center font-mono uppercase text-lg rounded font-bold mt-auto" %>
+            <%= link_to "Verify", "#", class: "w-full bg-teal-400 text-neutral-800 block p-2 text-center font-mono uppercase text-lg rounded font-bold mt-auto" %>
           <% end %>
         </div>
       </div>

diff --git a/ecosystem/platform/server/config/tailwind.config.js b/ecosystem/platform/server/config/tailwind.config.js
@@ -15,6 +15,12 @@ module.exports = {
           '800': '#212121',
           '900': '#171717',
         },
+        'teal': {
+          ...defaultTheme.colors.teal,
+          '300': '#1de9b6',
+          '400': '#1bd7a4',
+          '500': '#187e65',
+        },
       },
       fontFamily: {
         'sans': ['apparat', ...defaultTheme.fontFamily.sans],

diff --git a/ecosystem/platform/server/db/schema.rb b/ecosystem/platform/server/db/schema.rb