Add more design elements.

talk2nil · May 12, 2022 · ff64cb5 · ff64cb5
1 parent 5a4e035
commit ff64cb5
Show file tree

Hide file tree

Showing 13 changed files with 70 additions and 39 deletions.
diff --git a/ecosystem/platform/server/.env.example b/ecosystem/platform/server/.env.example
@@ -42,3 +42,6 @@ SENTRY_DSN=
 # Persona
 PERSONA_API_KEY=
 PERSONA_URL_PREFIX=
+
+# Typekit
+TYPEKIT_CSS_ID=
diff --git a/ecosystem/platform/server/app/controllers/overview_controller.rb b/ecosystem/platform/server/app/controllers/overview_controller.rb
@@ -1,10 +1,13 @@
+# frozen_string_literal: true
+
 # Copyright (c) Aptos
 # SPDX-License-Identifier: Apache-2.0
-# frozen_string_literal: true
 
 class OverviewController < ApplicationController
   before_action :authenticate_user!
   before_action :ensure_confirmed!
 
-  def index; end
+  def index
+    redirect_to root_path
+  end
 end
diff --git a/ecosystem/platform/server/app/views/it1_profiles/_form.html.erb b/ecosystem/platform/server/app/views/it1_profiles/_form.html.erb
@@ -20,7 +20,7 @@
       <div>
         <div class="mb-16">
           <h3 class="text-[#1dd7a5] font-mono uppercase text-2xl mb-2">Public Keys</h3>
-          <hr class="border-[#1dd7a5] mb-8">
+          <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" %>
@@ -38,7 +38,7 @@
 
         <div class="mb-16">
           <h3 class="text-[#1dd7a5] font-mono uppercase text-2xl mb-2">Validator Node</h3>
-          <hr class="border-[#1dd7a5] mb-8">
+          <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" %>
@@ -68,7 +68,7 @@
 
         <div class="mb-16">
           <h3 class="text-[#1dd7a5] font-mono uppercase text-2xl mb-2">Full Node</h3>
-          <hr class="border-[#1dd7a5] mb-8">
+          <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" %>

diff --git a/ecosystem/platform/server/app/views/it1_profiles/edit.html.erb b/ecosystem/platform/server/app/views/it1_profiles/edit.html.erb
@@ -1,5 +1,5 @@
 <div class="bg-neutral-900 text-white h-full p-6 sm:p-24 2xl:px-48">
-  <h2 class="text-6xl mb-4">Incentivized Testnet</h2>
+  <h2 class="text-6xl mb-4 font-display font-light">Incentivized Testnet</h2>
   <div class="mb-8">
     <%= render 'shared/bump_hero' %>
   </div>

diff --git a/ecosystem/platform/server/app/views/layouts/_application.html.erb b/ecosystem/platform/server/app/views/layouts/_application.html.erb
@@ -8,6 +8,7 @@
 
     <%= favicon_link_tag asset_path('favicon.ico') %>
 
+    <link rel="stylesheet" href="https://use.typekit.net/<%= ENV.fetch('TYPEKIT_CSS_ID') %>.css" />
     <%= stylesheet_link_tag "tailwind", "data-turbo-track": "reload" %>
     <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
     <%= render 'layouts/google_analytics' %>

diff --git a/ecosystem/platform/server/app/views/layouts/_footer.html.erb b/ecosystem/platform/server/app/views/layouts/_footer.html.erb
@@ -1,4 +1,4 @@
-<footer class="sm:h-32 min-h-max bg-black text-white flex p-6 items-center flex-col sm:flex-row gap-6">
+<footer class="bg-black text-white flex p-6 sm:px-12 sm:py-8 items-center flex-col sm:flex-row gap-6">
   <a href="/">
     <svg version="1.2" baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" height="40" viewBox="0 0 112 112" overflow="visible" xml:space="preserve"><path fill="#FFF" d="M86.6 37.4h-9.9c-1.1 0-2.2-.5-3-1.3l-4-4.5c-1.2-1.3-3.1-1.4-4.5-.3l-.3.3-3.4 3.9c-1.1 1.3-2.8 2-4.5 2H2.9C1.4 41.9.4 46.6 0 51.3h51.2c.9 0 1.8-.4 2.4-1l4.8-5c.6-.6 1.4-1 2.3-1h.2c.9 0 1.8.4 2.4 1.1l4 4.5c.8.9 1.9 1.4 3 1.4H112c-.4-4.7-1.4-9.4-2.9-13.8H86.6zM53.8 65l-4-4.5c-1.2-1.3-3.1-1.4-4.5-.3l-.3.3-3.5 3.9c-1.1 1.3-2.7 2-4.4 2H.8c.9 4.8 2.5 9.5 4.6 14h25.5c.9 0 1.7-.4 2.4-1l4.8-5c.6-.6 1.4-1 2.3-1h.2c.9 0 1.8.4 2.4 1.1l4 4.5c.8.9 1.9 1.4 3 1.4h56.6c2.1-4.4 3.7-9.1 4.6-14H56.8c-1.2 0-2.3-.5-3-1.4zM73.4 21.4l4.8-5c.6-.6 1.4-1 2.3-1h.2c.9 0 1.8.4 2.4 1l4 4.5c.8.9 1.9 1.3 3 1.3h10.8c-18.8-24.8-54.1-29.7-79-11-4.1 3.1-7.8 6.8-11 11H71c1 .2 1.8-.2 2.4-.8zM34.7 94.2c-1.2 0-2.3-.5-3-1.3l-4-4.5c-1.2-1.3-3.2-1.4-4.5-.2l-.2.2-3.5 3.9c-1.1 1.3-2.7 2-4.4 2h-.2C36 116.9 71.7 118 94.4 96.7c.9-.8 1.7-1.7 2.6-2.6H34.7z"/></svg>
   </a>
@@ -13,7 +13,7 @@
   </div>
 
   <div class="flex gap-4">
-    <a href="https://github.com/aptoslabs" title="Git">
+    <a href="https://github.com/aptos-labs" title="Git">
       <svg width="26" height="26" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M15.938 15.939a8.375 8.375 0 0 1-3.443 2.083v-1.498c0-.788-.27-1.368-.81-1.739a8.9 8.9 0 0 0 .932-.136c.283-.059.582-.143.898-.254.316-.111.6-.243.85-.396.25-.153.492-.351.723-.596.23-.243.424-.52.58-.83.157-.308.28-.68.372-1.113.09-.433.137-.91.137-1.43 0-1.01-.33-1.87-.987-2.579.3-.78.267-1.63-.098-2.548l-.244-.03c-.17-.02-.473.052-.913.215-.44.163-.932.43-1.48.8a8.984 8.984 0 0 0-2.412-.322 8.8 8.8 0 0 0-2.401.323 8.475 8.475 0 0 0-.982-.581 5.141 5.141 0 0 0-.742-.313 2.579 2.579 0 0 0-.826-.112.62.62 0 0 0-.097.02c-.365.924-.398 1.773-.098 2.548-.658.71-.986 1.57-.986 2.579 0 .52.045.997.137 1.43.09.433.214.805.37 1.113.157.31.35.587.582.83.23.245.472.443.722.596.25.153.534.285.85.396.316.11.615.195.898.254.283.058.594.104.933.136-.534.365-.8.945-.8 1.739v1.527a8.364 8.364 0 0 1-3.541-2.113A8.356 8.356 0 0 1 1.6 10 8.351 8.351 0 0 1 4.06 4.062 8.363 8.363 0 0 1 10 1.602a8.358 8.358 0 0 1 5.938 2.46A8.381 8.381 0 0 1 18.398 10a8.358 8.358 0 0 1-2.46 5.939ZM10 0C4.478 0 0 4.478 0 10c0 5.523 4.478 10 10 10 5.523 0 10-4.477 10-10 0-5.522-4.477-10-10-10Z" fill="#FBFBFB"/></svg>
     </a>
 

diff --git a/ecosystem/platform/server/app/views/layouts/_header.html.erb b/ecosystem/platform/server/app/views/layouts/_header.html.erb
@@ -1,5 +1,9 @@
-<header class="h-16 bg-black flex p-6 items-center">
+<header class="bg-black text-white flex p-6 sm:px-12 sm:py-8 items-center justify-between">
   <a href="/" title="Aptos - Building the safest and most scalable Layer 1 blockchain">
     <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" %>
+  </div>
 </header>
diff --git a/ecosystem/platform/server/app/views/layouts/it1.html.erb b/ecosystem/platform/server/app/views/layouts/it1.html.erb
@@ -1,13 +1,27 @@
 <%= render 'layouts/application' do %>
   <div class="bg-neutral-900 text-white h-full p-6 sm:p-24 2xl:px-48">
-    <h2 class="text-6xl mb-4">Incentivized Testnet</h2>
-    <div class="mb-8">
+    <h2 class="text-6xl mb-4 font-display font-light">Incentivized Testnet</h2>
+    <div class="mb-10">
       <%= render 'shared/bump_hero' %>
     </div>
 
-    <div class="flex flex-col lg:flex-row gap-8 sm:gap-24 xl:gap-48 justify-between">
+    <div class="flex flex-col lg:flex-row gap-8 sm:gap-24 2xl:gap-48 justify-between">
       <%= yield %>
-      <%= render 'shared/it1_schedule' %>
+      <div class="w-full lg:w-96 flex-1">
+        <%= render 'shared/outline_card' do %>
+          <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>
+          <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>
+          <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>
+          <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>
+          <p class="mb-4 font-light">Aptos Incentivized Testnet 1 goes live at noon. Validator score tracking begins.</p>
+        <% end %>
+      </div>
     </div>
   </div>
 <% end %>
diff --git a/ecosystem/platform/server/app/views/shared/_bump.html.erb b/ecosystem/platform/server/app/views/shared/_bump.html.erb
@@ -0,0 +1,7 @@
+<div class="w-full flex">
+  <div class="border-b border-[#1dd7a5] 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>
diff --git a/ecosystem/platform/server/app/views/shared/_it1_schedule.html.erb b/ecosystem/platform/server/app/views/shared/_it1_schedule.html.erb
diff --git a/ecosystem/platform/server/app/views/welcome/index.html.erb b/ecosystem/platform/server/app/views/welcome/index.html.erb
@@ -1,6 +1,6 @@
-<div class="flex flex-col lg:flex-row gap-8 sm:gap-24 xl:gap-48 justify-between">
+<div class="flex flex-col lg:flex-row gap-8 sm:gap-24 xl:gap-48 justify-between flex-[2]">
   <div>
-    <div class="sm:w-[30rem] mb-8 sm:mb-12">
+    <div class="sm:w-[36rem] mb-8 sm:mb-12 font-light sm:text-lg">
       <p class="mb-4">
       Ensuring a production-grade Aptos mainnet.
       <br>

diff --git a/ecosystem/platform/server/app/views/welcome/it1.html.erb b/ecosystem/platform/server/app/views/welcome/it1.html.erb
@@ -1,6 +1,6 @@
-<div class="flex flex-col lg:flex-row gap-8 sm:gap-24 xl:gap-48 justify-between">
+<div class="flex flex-col lg:flex-row gap-8 sm:gap-24 xl:gap-48 justify-between flex-[2]">
   <div>
-    <div class="sm:w-[30rem] mb-8 sm:mb-12">
+    <div class="sm:w-[36rem] mb-8 sm:mb-12 font-light sm:text-lg">
       <p class="mb-4">
       Ensuring a production-grade Aptos mainnet.
       <br>
@@ -14,24 +14,24 @@
 
     <%= render "layouts/flash" %>
 
-    <div class="flex flex-col lg:flex-row gap-8 lg:gap-24">
-      <div class="bg-neutral-800 rounded-md flex flex-col">
+    <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>
         <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>
-          <hr class="border-[#1dd7a5] mb-4">
-          <p class="mb-8">
+          <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" %>
         </div>
       </div>
-      <div class="bg-neutral-800 rounded-md flex flex-col">
+      <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>
         <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>
-          <hr class="border-[#1dd7a5] mb-4">
-          <p class="mb-8">
+          <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? %>
@@ -43,3 +43,4 @@
       </div>
     </div>
   </div>
+</div>
diff --git a/ecosystem/platform/server/config/tailwind.config.js b/ecosystem/platform/server/config/tailwind.config.js
@@ -8,6 +8,19 @@ module.exports = {
   ],
   theme: {
     extend: {
+      colors: {
+        'neutral': {
+          ...defaultTheme.colors.neutral,
+          '700': '#393939',
+          '800': '#212121',
+          '900': '#171717',
+        },
+      },
+      fontFamily: {
+        'sans': ['apparat', ...defaultTheme.fontFamily.sans],
+        'mono': ['lft-etica-mono', ...defaultTheme.fontFamily.mono],
+        'display': ['apparat-semicond', ...defaultTheme.fontFamily.sans],
+      },
     },
   },
   plugins: [