fix: framegear css followups (#141)

coinbase · Feb 18, 2024 · 8410779 · 8410779
1 parent 26f6fd5
commit 8410779
Show file tree

Hide file tree

Showing 7 changed files with 33 additions and 38 deletions.
diff --git a/framegear/app/page.tsx b/framegear/app/page.tsx
@@ -3,13 +3,12 @@ import { Header } from '@/components/Header';
 import { Frame } from '@/components/Frame';
 import { FrameInput } from '@/components/FrameInput';
 import { ValidationResults } from '@/components/ValidationResults';
-import { MAX_WIDTH } from '@/utils/constants';
 
 export default function Home() {
   return (
     <div className="mx-auto flex flex-col items-center gap-8 pb-16">
       <Header />
-      <div className={`grid w-full grid-cols-[5fr,4fr] gap-16 ${MAX_WIDTH}`}>
+      <div className={`max-w-layout-max grid w-full grid-cols-[5fr,4fr] gap-16`}>
         <div className="flex flex-col gap-4">
           <FrameInput />
           <Frame />

diff --git a/framegear/components/Frame/Frame.tsx b/framegear/components/Frame/Frame.tsx
@@ -41,18 +41,9 @@ function ValidFrame({ tags }: { tags: Record<string, string> }) {
     <div>
       {/* eslint-disable-next-line @next/next/no-img-element */}
       <img className={`w-full rounded-t-xl aspect-[${imageAspectRatio}]`} src={image} alt="" />
-      <div className="flex flex-wrap gap-2 rounded-b-xl bg-[#f3f3f3] px-4 py-2">
+      <div className="bg-button flex flex-wrap gap-2 rounded-b-xl px-4 py-2">
         {buttons.map((button) =>
-          button ? (
-            <button
-              className="w-[45%] grow rounded-lg border border-[#cfd0d2] bg-white p-2 text-black"
-              type="button"
-              key={button.key}
-              disabled
-            >
-              <span>{button.value}</span>
-            </button>
-          ) : null,
+          button ? <FrameButton key={button.key}>{button.value}</FrameButton> : null,
         )}
       </div>
     </div>
@@ -69,8 +60,8 @@ function ErrorFrame() {
 function PlaceholderFrame() {
   return (
     <div className="flex flex-col">
-      <div className="flex aspect-[1.91/1] w-full rounded-t-xl bg-[#855DCD]"></div>
-      <div className="flex flex-wrap gap-2 rounded-b-xl bg-[#f3f3f3] px-4 py-2">
+      <div className="bg-farcaster flex aspect-[1.91/1] w-full rounded-t-xl"></div>
+      <div className="bg-button flex flex-wrap gap-2 rounded-b-xl px-4 py-2">
         <FrameButton>Get Started</FrameButton>
       </div>
     </div>
@@ -80,7 +71,7 @@ function PlaceholderFrame() {
 function FrameButton({ children }: PropsWithChildren<{}>) {
   return (
     <button
-      className="w-[45%] grow rounded-lg border border-[#cfd0d2] bg-white p-2 text-black"
+      className="border-button w-[45%] grow rounded-lg border bg-white p-2 text-black"
       type="button"
       disabled
     >

diff --git a/framegear/components/FrameInput/FrameInput.tsx b/framegear/components/FrameInput/FrameInput.tsx
@@ -1,4 +1,3 @@
-import { BORDER_COLOR } from '@/utils/constants';
 import { fetchFrame } from '@/utils/fetchFrame';
 import { frameResultsAtom } from '@/utils/store';
 import { useAtom } from 'jotai';
@@ -18,7 +17,7 @@ export function FrameInput() {
       <label className="flex flex-col">
         Enter your frame URL
         <input
-          className={`h-[40px] rounded-md border ${BORDER_COLOR} bg-[#191918] p-2`}
+          className={`border-pallette-line bg-input h-[40px] rounded-md border p-2`}
           type="url"
           placeholder="Enter URL"
           value={url}

diff --git a/framegear/components/Header/Header.tsx b/framegear/components/Header/Header.tsx
@@ -1,10 +1,10 @@
-import { APP_NAME, BORDER_COLOR, MAX_WIDTH } from '@/utils/constants';
+import { APP_NAME } from '@/utils/constants';
 import Link from 'next/link';
 
 export function Header() {
   return (
-    <div className={`flex w-full flex-col items-center gap-8 border-b ${BORDER_COLOR} py-8`}>
-      <h1 className={`w-full ${MAX_WIDTH}`}>
+    <div className={`border-pallette-line flex w-full flex-col items-center gap-8 border-b py-8`}>
+      <h1 className={`max-w-layout-max w-full`}>
         <AppName className="px-6 text-4xl" />
       </h1>
       <Banner />
@@ -15,7 +15,7 @@ export function Header() {
 function Banner() {
   return (
     <div
-      className={`flex w-full items-center justify-between rounded-lg border ${MAX_WIDTH} ${BORDER_COLOR} bg-[#141519] p-6`}
+      className={`max-w-layout-max border-pallette-line bg-banner flex w-full items-center justify-between rounded-lg border p-6`}
     >
       <div className="flex items-center gap-4">
         <div className="text-3xl">⚒️</div>
@@ -27,7 +27,7 @@ function Banner() {
         </section>
       </div>
       <Link
-        className="flex items-center gap-2 rounded-full bg-[#2E3137] px-4 py-2"
+        className="bg-link-button flex items-center gap-2 rounded-full px-4 py-2"
         href="https://docs.farcaster.xyz/reference/frames/spec"
       >
         <span>Farcaster Frames specs</span> {LINK_OUT_ICON}
@@ -47,8 +47,8 @@ const LINK_OUT_ICON = (
     <path
       d="M3 2C2.44772 2 2 2.44772 2 3V12C2 12.5523 2.44772 13 3 13H12C12.5523 13 13 12.5523 13 12V8.5C13 8.22386 12.7761 8 12.5 8C12.2239 8 12 8.22386 12 8.5V12H3V3L6.5 3C6.77614 3 7 2.77614 7 2.5C7 2.22386 6.77614 2 6.5 2H3ZM12.8536 2.14645C12.9015 2.19439 12.9377 2.24964 12.9621 2.30861C12.9861 2.36669 12.9996 2.4303 13 2.497L13 2.5V2.50049V5.5C13 5.77614 12.7761 6 12.5 6C12.2239 6 12 5.77614 12 5.5V3.70711L6.85355 8.85355C6.65829 9.04882 6.34171 9.04882 6.14645 8.85355C5.95118 8.65829 5.95118 8.34171 6.14645 8.14645L11.2929 3H9.5C9.22386 3 9 2.77614 9 2.5C9 2.22386 9.22386 2 9.5 2H12.4999H12.5C12.5678 2 12.6324 2.01349 12.6914 2.03794C12.7504 2.06234 12.8056 2.09851 12.8536 2.14645Z"
       fill="currentColor"
-      fill-rule="evenodd"
-      clip-rule="evenodd"
+      fillRule="evenodd"
+      clipRule="evenodd"
     ></path>
   </svg>
 );
diff --git a/framegear/components/ValidationResults/ValidationResults.tsx b/framegear/components/ValidationResults/ValidationResults.tsx
@@ -1,4 +1,3 @@
-import { BORDER_COLOR } from '@/utils/constants';
 import { frameResultsAtom } from '@/utils/store';
 import { useAtom } from 'jotai';
 
@@ -15,7 +14,7 @@ export function ValidationResults() {
           </span>
         )}
       </h2>
-      <div className="flex w-full flex-col gap-4 rounded-xl bg-[#27282B] p-6">
+      <div className="bg-content flex w-full flex-col gap-4 rounded-xl p-6">
         {latestResult && (
           <dl className="flex flex-col gap-4">
             {Object.entries(latestResult.tags).map(([key, value]) => (
@@ -35,7 +34,9 @@ export function ValidationResults() {
 
 function ValidationEntry({ name, value, error }: { name: string; value: string; error?: string }) {
   return (
-    <div className={`flex flex-col gap-2 border-b ${BORDER_COLOR} pb-4 last:border-b-0 last:pb-0`}>
+    <div
+      className={`border-pallette-line flex flex-col gap-2 border-b pb-4 last:border-b-0 last:pb-0`}
+    >
       <div className="flex justify-between">
         <span>{name}</span>
         <span>{error ? '🔴' : '🟢'}</span>

diff --git a/framegear/tailwind.config.ts b/framegear/tailwind.config.ts
@@ -1,16 +1,23 @@
 import type { Config } from 'tailwindcss';
 
 const config: Config = {
-  content: [
-    './pages/**/*.{js,ts,jsx,tsx,mdx}',
-    './components/**/*.{js,ts,jsx,tsx,mdx}',
-    './app/**/*.{js,ts,jsx,tsx,mdx}',
-  ],
+  content: ['./components/**/*.{js,ts,jsx,tsx,mdx}', './app/**/*.{js,ts,jsx,tsx,mdx}'],
   theme: {
     extend: {
-      backgroundImage: {
-        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
-        'gradient-conic': 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
+      backgroundColor: {
+        content: '#27282B',
+        banner: '#141519',
+        button: '#f3f3f3',
+        farcaster: '#855DCD',
+        input: '#191918',
+        'link-button': '#2E3137',
+      },
+      borderColor: {
+        button: '#cfd0d2',
+        'pallette-line': 'rgba(138, 145, 158, 0.20)',
+      },
+      maxWidth: {
+        'layout-max': '1280px',
       },
     },
   },

diff --git a/framegear/utils/constants.ts b/framegear/utils/constants.ts
@@ -1,3 +1 @@
 export const APP_NAME = 'framegear';
-export const BORDER_COLOR = 'border-[rgba(138,145,158)]/[.20]';
-export const MAX_WIDTH = 'max-w-[1280px]';