💄 portal content visual refinements

components/TonePortalContent.tsx

@@ -5,15 +5,20 @@ import { APP_CONFIG } from '#lib/constants'
 const TonePortalContent = ({ handleClick }: { handleClick: () => void }) => (
   <div className="flex justify-center">
     <div className="mt-16 p-3">
-      <div className="text-5xl text-center mb-6">🚂🚃</div>
+      <div className="text-5xl text-center mb-5">🚂🚃</div>
       <H2Headline className="text-4xl text-center font-black mb-6">STATETRAIN</H2Headline>
-      <p className="text-xl md:w-3/4 mx-auto mb-5 text-center">{APP_CONFIG.description}</p>
-      <Button className="bg-successDark text-white w-full justify-center" onClick={handleClick}>
-        Initialize Tone.js *
+      <p className="text-xl md:w-3/4 mx-auto mb-10 text-center text-light">
+        {APP_CONFIG.description}
+      </p>
+      <Button
+        className="bg-successDark text-white w-full mb-3 max-w-60 justify-center mx-auto"
+        onClick={handleClick}
+      >
+        Initialize Tone.js
       </Button>
-      <div className="text-sm mt-3 text-gray text-center">
-        * unlocks tone.js context for all following pages / components
-      </div>
+      <p className="text-center md:w-1/2 mx-auto text-gray">
+        This button unlocks tone.js context for all following pages / components
+      </p>
     </div>
   </div>
 )

lib/constants.ts

@@ -6,7 +6,7 @@ export const APP_CONFIG = {
     import.meta.env.PROD ? 'https://richard-unterberg.github.io' : 'http://localhost:5247'
   }${import.meta.env.BASE_URL.slice(0, -1)}`,
   description:
-    'Gain control of the tone.js transport in a modern routable typescript-react environment. 🚂🚃',
+    'Gain control of the tone.js transport in a modern routable typescript-react environment.',
 }
 
 export const TRANSPORT_CONFIG: TransportConfigType = {