From 9309d9995a7e6ef9869070abbc13d319197b58ec Mon Sep 17 00:00:00 2001
From: Andrew Davis <1709934+Savid@users.noreply.github.com>
Date: Fri, 2 Sep 2022 13:09:27 +1000
Subject: [PATCH] feat: update get started logs

---
 web/src/parts/Header.tsx                      | 48 +++++++++++++++----
 web/src/parts/PrimarySection.tsx              | 29 ++---------
 .../parts/checkpoints/CheckpointsTable.tsx    | 24 +++++-----
 web/src/parts/get-started/GetStarted.tsx      | 17 ++++++-
 .../parts/get-started/GetStartedSelection.tsx | 19 ++++----
 .../parts/get-started/GetStartedSlideout.tsx  |  2 +-
 web/src/parts/upstream/UpstreamTable.tsx      | 28 +++++------
 web/tailwind.config.js                        | 14 ------
 8 files changed, 97 insertions(+), 84 deletions(-)

diff --git a/web/src/parts/Header.tsx b/web/src/parts/Header.tsx
index 8e60dea..893b928 100644
--- a/web/src/parts/Header.tsx
+++ b/web/src/parts/Header.tsx
@@ -19,6 +19,24 @@ export default function Header() {
   };
   return (
     <header className="relative z-50 pb-5 pt-2 sm:pb-7 lg:pt-7">
+      <div className="hidden sm:block absolute top-0 left-1/2 transform -translate-x-1/2 bg-gradient-to-r from-rose-400 via-fuchsia-500 to-indigo-500 p-2 rounded-b-lg border-x-2 border-b-2 border-white/10 shadow-lg">
+        <div className="flex items-center justify-center">
+          <dt className="truncate text-sm tracking-tighter font-semibold text-gray-100">
+            Network:
+          </dt>
+          <dd className="pl-1 underline capitalize text-sm font-bold tracking-tighter text-gray-100 hover:text-gray-200 hover:animate-pulse cursor-default">
+            {majorityNetwork}
+          </dd>
+        </div>
+        <div className="flex items-center justify-center">
+          <dt className="truncate text-sm tracking-tighter font-semibold text-gray-100">
+            Operation Mode:
+          </dt>
+          <dd className="pl-1 underline capitalize text-sm font-bold tracking-tighter text-gray-100 hover:text-gray-200 hover:animate-pulse cursor-default">
+            {data?.data?.operating_mode ?? 'unknown'}
+          </dd>
+        </div>
+      </div>
       <nav>
         <Container className="relative z-50 grid grid-cols-2 content-end py-2">
           <div className="relative z-10 flex items-center justify-self-start">
@@ -42,14 +60,7 @@ export default function Header() {
               )}
             </a>
           </div>
-          <div className="flex items-center justify-self-end">
-            {majorityNetwork && (
-              <div className="flex-col items-center hidden sm:flex mr-5">
-                <span className="text-gray-500 opacity-70 font-bold">
-                  {majorityNetwork} network
-                </span>
-              </div>
-            )}
+          <div className="hidden sm:flex items-center justify-self-end">
             <span
               className="cursor-pointer text-gray-600 font-bold hover:text-gray-700 flex items-center"
               onClick={onClick}
@@ -58,6 +69,27 @@ export default function Header() {
               <InformationCircleIcon className="w-8 text-fuchsia-500 hover:text-fuchsia-600" />
             </span>
           </div>
+          <div
+            onClick={onClick}
+            className="sm:hidden cursor-pointer absolute top-0 right-0 transform -translate-y-2 bg-gradient-to-r from-rose-400 via-fuchsia-500 to-indigo-500 p-2 rounded-bl-lg border-l-2 border-b-2 border-white/10 shadow-lg"
+          >
+            <div className="flex items-center justify-center">
+              <dt className="truncate text-sm tracking-tighter font-semibold text-gray-100">
+                Network:
+              </dt>
+              <dd className="pl-1 underline capitalize text-sm font-bold tracking-tighter text-gray-100 hover:text-gray-200 hover:animate-pulse cursor-default">
+                {majorityNetwork}
+              </dd>
+            </div>
+            <div className="flex items-center justify-center">
+              <dt className="truncate text-sm tracking-tighter font-semibold text-gray-100">
+                Operation Mode:
+              </dt>
+              <dd className="pl-1 underline capitalize text-sm font-bold tracking-tighter text-gray-100 hover:text-gray-200 hover:animate-pulse cursor-default">
+                {data?.data?.operating_mode ?? 'unknown'}
+              </dd>
+            </div>
+          </div>
         </Container>
       </nav>
       <Transition.Root show={open} as={Fragment}>
diff --git a/web/src/parts/PrimarySection.tsx b/web/src/parts/PrimarySection.tsx
index 6a50263..e2f937c 100644
--- a/web/src/parts/PrimarySection.tsx
+++ b/web/src/parts/PrimarySection.tsx
@@ -3,7 +3,6 @@ import { useEffect, useState } from 'react';
 import { Tab } from '@headlessui/react';
 import clsx from 'clsx';
 
-import useStatus from '@hooks/status';
 import Checkpoints from '@parts/checkpoints/Checkpoints';
 import Upstream from '@parts/upstream/Upstream';
 
@@ -19,7 +18,6 @@ const Sections = [
 ];
 
 export default function Section() {
-  const { data } = useStatus();
   const [tabOrientation, setTabOrientation] = useState('horizontal');
 
   useEffect(() => {
@@ -40,30 +38,9 @@ export default function Section() {
   return (
     <section
       id="sections"
-      className="relative overflow-hidden shadow-inner bg-scooter-200 bg-gradient-to-r from-rose-400 via-fuchsia-500 to-indigo-500"
+      className="relative overflow-hidden shadow-inner bg-gradient-to-r from-rose-400 via-fuchsia-500 to-indigo-500"
     >
-      {data?.data?.operating_mode === 'light' && (
-        <div className="absolute w-full">
-          <div className="overflow-hidden h-screen">
-            <div
-              className="bg-gradient-to-r from-pink-500 via-red-500 to-yellow-500 origin-top float-right mt-3 mr-3 w-32 text-center"
-              style={{ transform: 'translateX(50%) rotate(45deg)' }}
-            >
-              <div
-                className="text-sm text-gray-100 font-bold"
-                title="Checkpointz instance is running in light operation mode"
-              >
-                Light
-              </div>
-            </div>
-          </div>
-        </div>
-      )}
-      <Tab.Group
-        as="div"
-        className="grid grid-cols-1 items-center gap-y-6 py-10"
-        vertical={tabOrientation === 'vertical'}
-      >
+      <Tab.Group as="div" className="gap-y-6 py-10" vertical={tabOrientation === 'vertical'}>
         {({ selectedIndex }) => (
           <>
             <div className="-mx-4 px-1 flex overflow-x-auto sm:overflow-visible pb-0">
@@ -93,7 +70,7 @@ export default function Section() {
                 ))}
               </Tab.List>
             </div>
-            <Tab.Panels className="lg:col-span-7">
+            <Tab.Panels className="block sm:flex justify-center">
               {Sections.map((section) => (
                 <Tab.Panel key={section.title} unmount={false}>
                   <div className="relative">
diff --git a/web/src/parts/checkpoints/CheckpointsTable.tsx b/web/src/parts/checkpoints/CheckpointsTable.tsx
index 9b09bae..4b2bf90 100644
--- a/web/src/parts/checkpoints/CheckpointsTable.tsx
+++ b/web/src/parts/checkpoints/CheckpointsTable.tsx
@@ -68,35 +68,35 @@ export default function CheckpointsTable(props: {
                   <tr>
                     <th
                       scope="col"
-                      className="hidden sm:table-cell drop-shadow-lg whitespace-nowrap sm:pl-6 py-3.5 text-left text-sm sm:text-base font-bold text-gray-100"
+                      className="hidden sm:table-cell drop-shadow-lg whitespace-nowrap sm:pl-6 sm:px-2 py-3.5 text-left text-sm sm:text-base font-bold text-gray-100"
                     >
                       Epoch
                     </th>
                     <th
                       scope="col"
-                      className="whitespace-nowrap drop-shadow-lg pl-2 sm:pl-0 py-3.5 text-left text-sm sm:text-base font-bold text-gray-100"
+                      className="whitespace-nowrap drop-shadow-lg pl-2 sm:pl-0 sm:px-2 py-3.5 text-left text-sm sm:text-base font-bold text-gray-100"
                     >
                       Slot
                     </th>
                     <th
                       scope="col"
-                      className="whitespace-nowrap drop-shadow-lg py-3.5 text-left text-sm sm:text-base font-bold text-gray-100"
+                      className="whitespace-nowrap drop-shadow-lg sm:px-2 py-3.5 text-left text-sm sm:text-base font-bold text-gray-100"
                     >
                       Time
                     </th>
                     <th
                       scope="col"
-                      className="whitespace-nowrap drop-shadow-lg py-3.5 text-left text-sm sm:text-base font-bold text-gray-100"
+                      className="whitespace-nowrap drop-shadow-lg sm:px-2 py-3.5 text-left text-sm sm:text-base font-bold text-gray-100"
                     >
                       State Root
                     </th>
                     <th
                       scope="col"
-                      className="hidden sm:table-cell drop-shadow-lg whitespace-nowrap py-3.5 text-left text-sm sm:text-base font-bold text-gray-100"
+                      className="hidden sm:table-cell drop-shadow-lg whitespace-nowrap sm:px-2 py-3.5 text-left text-sm sm:text-base font-bold text-gray-100"
                     >
                       Block Root
                     </th>
-                    <th scope="col" className="">
+                    <th scope="col" className="sm:px-2">
                       <span className="sr-only">View</span>
                     </th>
                   </tr>
@@ -104,7 +104,7 @@ export default function CheckpointsTable(props: {
                 <tbody className="divide-y divide-gray-200 bg-white/10">
                   {filteredSlots.map((slot) => (
                     <tr key={slot.slot}>
-                      <td className="hidden sm:table-cell sm:pl-6 drop-shadow-lg whitespace-nowrap py-2 font-semibold text-sm sm:text-base text-gray-100">
+                      <td className="hidden sm:table-cell sm:pl-6 sm:px-2 drop-shadow-lg whitespace-nowrap py-2 font-semibold text-sm sm:text-base text-gray-100">
                         {slot.epoch}
                         {props.latestEpoch && slot.epoch && slot.epoch === props.latestEpoch && (
                           <img
@@ -114,7 +114,7 @@ export default function CheckpointsTable(props: {
                           />
                         )}
                       </td>
-                      <td className="whitespace-nowrap pl-2 drop-shadow-lg sm:pl-0 py-2 font-semibold text-sm sm:text-base text-gray-100">
+                      <td className="whitespace-nowrap pl-2 sm:px-2 drop-shadow-lg sm:pl-0 py-2 font-semibold text-sm sm:text-base text-gray-100">
                         {slot.slot}
                         {props.latestEpoch && slot.epoch && slot.epoch === props.latestEpoch && (
                           <img
@@ -124,7 +124,7 @@ export default function CheckpointsTable(props: {
                           />
                         )}
                       </td>
-                      <td className="whitespace-nowrap py-2 drop-shadow-lg text-sm sm:text-base font-semibold text-gray-100">
+                      <td className="whitespace-nowrap py-2 sm:px-2 drop-shadow-lg text-sm sm:text-base font-semibold text-gray-100">
                         {slot.time?.start_time && (
                           <>
                             <ReactTimeAgo
@@ -139,7 +139,7 @@ export default function CheckpointsTable(props: {
                           </>
                         )}
                       </td>
-                      <td className="whitespace-nowrap py-2 drop-shadow-lg text-sm sm:text-base font-semibold text-gray-100">
+                      <td className="whitespace-nowrap py-2 sm:px-2 drop-shadow-lg text-sm sm:text-base font-semibold text-gray-100">
                         {slot.state_root ? (
                           <>
                             <span className="xl:hidden font-mono cursor-pointer flex">
@@ -160,7 +160,7 @@ export default function CheckpointsTable(props: {
                           ''
                         )}
                       </td>
-                      <td className="hidden sm:table-cell whitespace-nowrap py-2 drop-shadow-lg text-sm sm:text-base font-semibold text-gray-100">
+                      <td className="hidden sm:table-cell whitespace-nowrap py-2 sm:px-2 drop-shadow-lg text-sm sm:text-base font-semibold text-gray-100">
                         {slot.block_root ? (
                           <>
                             <span className="2xl:hidden font-mono cursor-pointer flex">
@@ -181,7 +181,7 @@ export default function CheckpointsTable(props: {
                           ''
                         )}
                       </td>
-                      <td className="relative whitespace-nowrap text-right text-sm sm:text-base pr-2 sm:pr-6 font-semibold">
+                      <td className="relative whitespace-nowrap text-right text-sm sm:text-base pr-2 lg:px-6 font-semibold">
                         {slot.block_root && (
                           <button className="align-top" onClick={() => onClick(slot)}>
                             <MagnifyingGlassCircleIcon className="h-7 w-7 stroke-gray-50 hover:stroke-gray-100" />
diff --git a/web/src/parts/get-started/GetStarted.tsx b/web/src/parts/get-started/GetStarted.tsx
index c66e6b3..9065dab 100644
--- a/web/src/parts/get-started/GetStarted.tsx
+++ b/web/src/parts/get-started/GetStarted.tsx
@@ -233,6 +233,21 @@ export default function GetStarted() {
           <div className="mt-5 text-xl font-semibold">Obtaining slot and state root</div>
           <div className="mt-2 font-semibold">
             Option A
+            <ol className="list-decimal font-normal">
+              <li className="ml-10">
+                Check your consensus client logs
+                {client.name !== 'Not applicable' && client.logCheck?.(publicURL)}
+              </li>
+              <li className="ml-10">
+                Find the <span className="font-mono bg-gray-100 p-1">slot</span> number.
+              </li>
+              <li className="ml-10">
+                Find the <span className="font-mono bg-gray-100 p-1">state_root</span> value.
+              </li>
+            </ol>
+          </div>
+          <div className="mt-2 font-semibold">
+            Option B
             <ol className="list-decimal font-normal">
               <li className="ml-10">
                 Open{' '}
@@ -250,7 +265,7 @@ export default function GetStarted() {
             </ol>
           </div>
           <div className="mt-2 font-semibold">
-            Option B
+            Option C
             <ol className="list-decimal font-normal">
               <li className="ml-10">
                 Install <span className="font-mono bg-gray-100 p-1">curl</span> and{' '}
diff --git a/web/src/parts/get-started/GetStartedSelection.tsx b/web/src/parts/get-started/GetStartedSelection.tsx
index f5aa3ae..a72d783 100644
--- a/web/src/parts/get-started/GetStartedSelection.tsx
+++ b/web/src/parts/get-started/GetStartedSelection.tsx
@@ -78,7 +78,7 @@ const clients: ConsensusClient[] = [
       <div className="bg-gray-100 rounded-lg grid">
         <pre className="overflow-x-auto p-5">
           {`INFO Starting checkpoint sync                remote_url: ${publicURL}, service: beacon
-INFO Loaded checkpoint block and state       state_root: 0xb6e8c25393411f252775f82b4907298572003ac37acf9422dd2500b5c368a08d, block_root: 0xefe19ea0d99bf45d50d4302f6bbc3feb2c1ec46f8d6e112594ec86b9581596ae, slot: 3480832, service: beacon
+INFO Loaded checkpoint block and state       state_root: 0x854ca984298e6a0d9fc098b4e37f1b28727e545a8e4d3106188fda3587d14cdb, block_root: 0x91e4f5129bc54f7284f1690e00803db360aeb63d34610d6995e1145bd01c0d92, slot: 529024, service: beacon
 `}
         </pre>
       </div>
@@ -99,7 +99,8 @@ INFO Loaded checkpoint block and state       state_root: 0xb6e8c25393411f252775f
       <div className="bg-gray-100 rounded-lg grid">
         <pre className="overflow-x-auto p-5">
           {`info: Fetching weak subjectivity state weakSubjectivityServerUrl=${publicURL}
-info: Download completed`}
+info: Download completed
+info: Initializing beacon state from anchor state slot=529024, epoch=16532, stateRoot=0x854ca984298e6a0d9fc098b4e37f1b28727e545a8e4d3106188fda3587d14cdb`}
         </pre>
       </div>
     ),
@@ -125,10 +126,9 @@ info: Download completed`}
         <pre className="overflow-x-auto p-5">
           {`Starting trusted node sync                 databaseDir=/data/consensus/db restUrl=${publicURL} blockId=finalized backfill=false reindex=false
 Downloading checkpoint block               restUrl=${publicURL} blockId=finalized
-Downloading checkpoint state               restUrl=${publicURL} checkpointSlot=370528
-Writing checkpoint state
-Writing checkpoint block
-Database initialized, historical blocks will be backfilled when starting the node`}
+Downloading checkpoint state               restUrl=${publicURL} checkpointSlot=529024
+Writing checkpoint state                   stateRoot=91e4f512
+Writing checkpoint block                   blockRoot=13b4cc5f blck="(slot: 529024, proposer_index: 1466, parent_root: \\"0b019674\\", state_root: \\"854ca984\\")"`}
         </pre>
       </div>
     ),
@@ -152,7 +152,10 @@ Database initialized, historical blocks will be backfilled when starting the nod
       <div className="bg-gray-100 rounded-lg grid">
         <pre className="overflow-x-auto p-5">
           {`level=info msg="requesting ${publicURL}/eth/v2/debug/beacon/states/genesis"
-level=info msg="requesting ${publicURL}/eth/v2/debug/beacon/states/finalized"`}
+level=info msg="requesting ${publicURL}/eth/v2/debug/beacon/states/finalized"
+level=info msg="requesting ${publicURL}/eth/v2/beacon/blocks/0x91e4f5129bc54f7284f1690e00803db360aeb63d34610d6995e1145bd01c0d92"
+level=info msg="BeaconState slot=529024, Block slot=529024"
+level=info msg="BeaconState htr=0x854ca984298e6a0d9fc098b4e37f1b28727e545a8e4d3106188fda3587d14cdbd, Block state_root=0x854ca984298e6a0d9fc098b4e37f1b28727e545a8e4d3106188fda3587d14cdb"`}
         </pre>
       </div>
     ),
@@ -173,7 +176,7 @@ level=info msg="requesting ${publicURL}/eth/v2/debug/beacon/states/finalized"`}
       <div className="bg-gray-100 rounded-lg grid">
         <pre className="overflow-x-auto p-5">
           {`INFO  - Loading initial state from ${publicURL}
-INFO  - Loaded initial state at epoch 11348 (state root = 0x08dab651bd667b166a0c99b7a21ee455f4f9fadfce0e37dbcee490f5ec841477, block root = 0xa5bd8b3eaadd81f892f120219f3bcee6565a37d045bf0cee4c4023a51def430c, block slot = 363136).  Please ensure that the supplied initial state corresponds to the latest finalized block as of the start of epoch 11348 (slot 363136)."`}
+INFO  - Loaded initial state at epoch 16532 (state root = 0x854ca984298e6a0d9fc098b4e37f1b28727e545a8e4d3106188fda3587d14cdb, block root = 0x91e4f5129bc54f7284f1690e00803db360aeb63d34610d6995e1145bd01c0d92, block slot = 529024).  Please ensure that the supplied initial state corresponds to the latest finalized block as of the start of epoch 16532 (slot 529024)."`}
         </pre>
       </div>
     ),
diff --git a/web/src/parts/get-started/GetStartedSlideout.tsx b/web/src/parts/get-started/GetStartedSlideout.tsx
index 38fe7b4..d6abe34 100644
--- a/web/src/parts/get-started/GetStartedSlideout.tsx
+++ b/web/src/parts/get-started/GetStartedSlideout.tsx
@@ -12,7 +12,7 @@ export default function GetStartedSlideout() {
     <>
       <button
         type="button"
-        className="z-50 inline-flex items-center rounded-md border border-transparent bg-fuchsia-500 px-6 py-3 text-base font-medium text-white shadow-sm hover:bg-fuchsia-600 focus:outline-none focus:ring-2 focus:ring-fuchsia-500 focus:ring-offset-2"
+        className="z-50 inline-flex items-center rounded-md border border-transparent bg-gradient-to-r from-fuchsia-600 via-fuchsia-500 to-fuchsia-600 px-6 py-3 text-base font-medium text-white shadow-sm  outline-none ring-2 hover:ring-4 ring-fuchsia-300 ring-offset-2 hover:animate-pulse"
         onClick={() => setOpen(true)}
       >
         <span className="font-bold text-lg">Get started!</span>
diff --git a/web/src/parts/upstream/UpstreamTable.tsx b/web/src/parts/upstream/UpstreamTable.tsx
index 968f2f9..cf545c2 100644
--- a/web/src/parts/upstream/UpstreamTable.tsx
+++ b/web/src/parts/upstream/UpstreamTable.tsx
@@ -63,43 +63,43 @@ export default function UpstreamTable(props: { upstreams: APIUpstream[] }) {
                   <tr>
                     <th
                       scope="col"
-                      className="whitespace-nowrap drop-shadow-lg pl-2 py-3.5 text-sm sm:text-base text-left font-bold text-gray-100 sm:pl-6"
+                      className="whitespace-nowrap drop-shadow-lg pl-2 sm:px-2 py-3.5 text-sm sm:text-base text-left font-bold text-gray-100 sm:pl-6"
                     >
                       Name
                     </th>
                     <th
                       scope="col"
-                      className="whitespace-nowrap drop-shadow-lg py-3.5 text-left text-sm sm:text-base font-bold text-gray-100"
+                      className="whitespace-nowrap drop-shadow-lg sm:px-2 py-3.5 text-left text-sm sm:text-base font-bold text-gray-100"
                     >
                       Status
                     </th>
                     <th
                       scope="col"
-                      className="drop-shadow-lg whitespace-nowrap py-3.5 text-left text-sm sm:text-base font-bold text-gray-100"
+                      className="drop-shadow-lg whitespace-nowrap sm:px-2 py-3.5 text-left text-sm sm:text-base font-bold text-gray-100"
                     >
                       Network
                     </th>
                     <th
                       scope="col"
-                      className="whitespace-nowrap drop-shadow-lg py-3.5 text-left text-sm sm:text-base font-bold text-gray-100"
+                      className="whitespace-nowrap drop-shadow-lg sm:px-2 py-3.5 text-left text-sm sm:text-base font-bold text-gray-100"
                     >
                       Finalized Epoch
                     </th>
                     <th
                       scope="col"
-                      className="hidden sm:table-cell drop-shadow-lg whitespace-nowrap py-3.5 text-left text-sm sm:text-base font-bold text-gray-100"
+                      className="hidden sm:table-cell drop-shadow-lg whitespace-nowrap sm:px-2 py-3.5 text-left text-sm sm:text-base font-bold text-gray-100"
                     >
                       Finalized Block Root
                     </th>
                     <th
                       scope="col"
-                      className="hidden lg:table-cell drop-shadow-lg whitespace-nowrap py-3.5 text-left text-sm sm:text-base font-bold text-gray-100"
+                      className="hidden lg:table-cell drop-shadow-lg whitespace-nowrap sm:px-2 py-3.5 text-left text-sm sm:text-base font-bold text-gray-100"
                     >
                       Justified Epoch
                     </th>
                     <th
                       scope="col"
-                      className="hidden lg:table-cell drop-shadow-lg whitespace-nowrap py-3.5 text-left text-sm sm:text-base font-bold text-gray-100"
+                      className="hidden lg:table-cell drop-shadow-lg whitespace-nowrap sm:px-2 py-3.5 text-left text-sm sm:text-base font-bold text-gray-100"
                     >
                       Justified Block Root
                     </th>
@@ -108,10 +108,10 @@ export default function UpstreamTable(props: { upstreams: APIUpstream[] }) {
                 <tbody className="divide-y divide-gray-200 bg-white/10">
                   {filteredUpstreams.map((upstream) => (
                     <tr key={upstream.name}>
-                      <td className="whitespace-nowrap drop-shadow-lg pl-2 py-2 font-semibold text-sm sm:text-base text-gray-100 sm:pl-6">
+                      <td className="whitespace-nowrap drop-shadow-lg pl-2 sm:px-2 py-2 font-semibold text-sm sm:text-base text-gray-100 sm:pl-6">
                         {upstream.name}
                       </td>
-                      <td className="whitespace-nowrap drop-shadow-lg py-2 text-sm sm:text-base font-semibold text-gray-100">
+                      <td className="whitespace-nowrap drop-shadow-lg py-2 sm:px-2 text-sm sm:text-base font-semibold text-gray-100">
                         <span
                           className={clsx(
                             upstream.healthy
@@ -123,16 +123,16 @@ export default function UpstreamTable(props: { upstreams: APIUpstream[] }) {
                           {upstream.healthy ? 'Healthy' : 'Unhealthy'}
                         </span>
                       </td>
-                      <td className="drop-shadow-lg capitalize whitespace-nowrap py-2 text-sm sm:text-base font-semibold text-gray-100">
+                      <td className="drop-shadow-lg capitalize whitespace-nowrap sm:px-2 py-2 text-sm sm:text-base font-semibold text-gray-100">
                         {upstream.network_name ?? 'unknown'}
                         {upstream.network_name !== majorityNetwork && (
                           <ExclamationTriangleIcon className="h-4 w-4 text-yellow-400 inline ml-1" />
                         )}
                       </td>
-                      <td className="whitespace-nowrap drop-shadow-lg py-2 text-sm sm:text-base font-semibold text-gray-100">
+                      <td className="whitespace-nowrap drop-shadow-lg sm:px-2 py-2 text-sm sm:text-base font-semibold text-gray-100">
                         {upstream.finality?.finalized?.epoch ?? ''}
                       </td>
-                      <td className="hidden sm:table-cell whitespace-nowrap py-2 text-sm sm:text-base font-semibold text-gray-100 font-mono">
+                      <td className="hidden sm:table-cell whitespace-nowrap sm:px-2 py-2 text-sm sm:text-base font-semibold text-gray-100 font-mono">
                         {upstream.finality?.finalized?.root ? (
                           <span className="flex items-center">
                             <span
@@ -157,10 +157,10 @@ export default function UpstreamTable(props: { upstreams: APIUpstream[] }) {
                           ''
                         )}
                       </td>
-                      <td className="hidden lg:table-cell drop-shadow-lg whitespace-nowrap py-2 text-sm sm:text-base font-semibold text-gray-100">
+                      <td className="hidden lg:table-cell drop-shadow-lg whitespace-nowrap sm:px-2 py-2 text-sm sm:text-base font-semibold text-gray-100">
                         {upstream.finality?.current_justified?.epoch ?? ''}
                       </td>
-                      <td className="hidden lg:table-cell drop-shadow-lg whitespace-nowrap py-2 text-sm sm:text-base font-semibold text-gray-100 font-mono">
+                      <td className="hidden lg:table-cell drop-shadow-lg whitespace-nowrap sm:px-2 py-2 text-sm sm:text-base font-semibold text-gray-100 font-mono">
                         {upstream.finality?.current_justified?.root ? (
                           <span className="flex items-center">
                             <span
diff --git a/web/tailwind.config.js b/web/tailwind.config.js
index 89d7870..192e7c2 100644
--- a/web/tailwind.config.js
+++ b/web/tailwind.config.js
@@ -24,20 +24,6 @@ module.exports = {
         'spin-slow': 'spin 4s linear infinite',
         'spin-slower': 'spin 6s linear infinite',
       },
-      colors: {
-        scooter: {
-          50: '#f2fdff',
-          100: '#e6fbfe',
-          200: '#c0f6fe',
-          300: '#9bf0fd',
-          400: '#4fe5fb',
-          500: '#04daf9',
-          600: '#04c4e0',
-          700: '#03a4bb',
-          800: '#028395',
-          900: '#026b7a',
-        },
-      },
     },
   },
   plugins: [require('@tailwindcss/typography')],