From ec8b09d3771468847fc81123046b36796fc7086e Mon Sep 17 00:00:00 2001
From: Cameron Morris <ctmorris@gmail.com>
Date: Sat, 24 Feb 2024 12:05:23 -0800
Subject: [PATCH 1/2] add styels for lightmode

---
 framegear/components/Frame/Frame.tsx                        | 4 ++--
 framegear/components/FrameInput/FrameInput.tsx              | 2 +-
 framegear/components/Header/Header.tsx                      | 6 +++---
 .../components/ValidationResults/ValidationResults.tsx      | 4 ++--
 framegear/tailwind.config.ts                                | 1 +
 5 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/framegear/components/Frame/Frame.tsx b/framegear/components/Frame/Frame.tsx
index 5ad8c5d78a..fb38149699 100644
--- a/framegear/components/Frame/Frame.tsx
+++ b/framegear/components/Frame/Frame.tsx
@@ -53,7 +53,7 @@ function ValidFrame({ tags }: { tags: Record<string, string> }) {
         src={image}
         alt=""
       />
-      <div className="bg-content-light flex flex-col gap-2 rounded-b-xl px-4 py-2">
+      <div className="bg-button-gutter-light dark:bg-content-light flex flex-col gap-2 rounded-b-xl px-4 py-2">
         {!!input && (
           <input
             className="bg-input-light border-light rounded-lg border p-2 text-black"
@@ -86,7 +86,7 @@ function PlaceholderFrame() {
   return (
     <div className="flex flex-col">
       <div className="bg-farcaster flex aspect-[1.91/1] w-full rounded-t-xl"></div>
-      <div className="bg-content-light flex flex-wrap gap-2 rounded-b-xl px-4 py-2">
+      <div className="bg-button-gutter-light dark:bg-content-light flex flex-wrap gap-2 rounded-b-xl px-4 py-2">
         <FrameButton>Get Started</FrameButton>
       </div>
     </div>
diff --git a/framegear/components/FrameInput/FrameInput.tsx b/framegear/components/FrameInput/FrameInput.tsx
index 542459337b..252a674982 100644
--- a/framegear/components/FrameInput/FrameInput.tsx
+++ b/framegear/components/FrameInput/FrameInput.tsx
@@ -17,7 +17,7 @@ export function FrameInput() {
       <label className="flex flex-col">
         Enter your frame URL
         <input
-          className={`border-pallette-line bg-input h-[40px] rounded-md border p-2`}
+          className={`border-pallette-line bg-content-light dark: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
index 6ce26fd406..0e694e41b3 100644
--- a/framegear/components/Header/Header.tsx
+++ b/framegear/components/Header/Header.tsx
@@ -16,7 +16,7 @@ export function Header() {
 function Banner() {
   return (
     <div
-      className={`max-w-layout-max border-pallette-line bg-banner flex w-full items-center justify-between rounded-lg border p-6`}
+    className={`max-w-layout-max border-pallette-line bg-content-light dark: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>
@@ -28,7 +28,7 @@ function Banner() {
         </section>
       </div>
       <Link
-        className="bg-link-button flex items-center gap-1 rounded-full px-4 py-2"
+        className="bg-content-light dark:bg-link-button flex items-center gap-1 rounded-full px-4 py-2"
         href="https://docs.farcaster.xyz/reference/frames/spec"
       >
         <span>Farcaster Frames specs</span> <ArrowTopRightIcon />
@@ -39,6 +39,6 @@ function Banner() {
 
 function AppName({ className: additionalClasses = '' }: { className?: string }) {
   return (
-    <span className={`rounded-lg bg-slate-800 p-1 font-mono ${additionalClasses}`}>{APP_NAME}</span>
+    <span className={`rounded-lg bg-content-light dark:bg-slate-800 p-1 font-mono ${additionalClasses}`}>{APP_NAME}</span>
   );
 }
diff --git a/framegear/components/ValidationResults/ValidationResults.tsx b/framegear/components/ValidationResults/ValidationResults.tsx
index 967b4bf095..1a6b32f37e 100644
--- a/framegear/components/ValidationResults/ValidationResults.tsx
+++ b/framegear/components/ValidationResults/ValidationResults.tsx
@@ -24,7 +24,7 @@ function ValidationResultsPlaceholder() {
   return (
     <div className="flex flex-col gap-4">
       <h2>Frame validations</h2>
-      <div className="bg-content flex w-full flex-col gap-4 rounded-xl p-6">
+      <div className="bg-content-light dark:bg-content flex w-full flex-col gap-4 rounded-xl p-6">
         <p>No data yet.</p>
       </div>
     </div>
@@ -50,7 +50,7 @@ function ValidationResultsContent() {
           </span>
         )}
       </h2>
-      <div className="bg-content flex w-full flex-col gap-4 rounded-xl p-6">
+      <div className="bg-content-light dark:bg-content flex w-full flex-col gap-4 rounded-xl p-6">
         <ul className="flex list-none flex-col gap-4 p-0">
           {REQUIRED_FIELD_NAMES.map((name) => {
             const value = latestResult.tags[name];
diff --git a/framegear/tailwind.config.ts b/framegear/tailwind.config.ts
index 7ab921f5c1..f19c293e01 100644
--- a/framegear/tailwind.config.ts
+++ b/framegear/tailwind.config.ts
@@ -12,6 +12,7 @@ const config: Config = {
         input: '#191918',
         'input-light': '#DBDBDB',
         'link-button': '#2E3137',
+        'button-gutter-light': '#CBC8C7',
       },
       borderColor: {
         button: '#cfd0d2',

From dd2035a0b3e5312dfd7d57c4df38b067a63e5805 Mon Sep 17 00:00:00 2001
From: Cameron Morris <ctmorris@gmail.com>
Date: Sat, 24 Feb 2024 12:23:01 -0800
Subject: [PATCH 2/2] fix prettier issue

---
 framegear/components/Header/Header.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/framegear/components/Header/Header.tsx b/framegear/components/Header/Header.tsx
index 0e694e41b3..567df496fc 100644
--- a/framegear/components/Header/Header.tsx
+++ b/framegear/components/Header/Header.tsx
@@ -16,7 +16,7 @@ export function Header() {
 function Banner() {
   return (
     <div
-    className={`max-w-layout-max border-pallette-line bg-content-light dark:bg-banner flex w-full items-center justify-between rounded-lg border p-6`}
+      className={`max-w-layout-max border-pallette-line bg-content-light dark: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>
@@ -39,6 +39,10 @@ function Banner() {
 
 function AppName({ className: additionalClasses = '' }: { className?: string }) {
   return (
-    <span className={`rounded-lg bg-content-light dark:bg-slate-800 p-1 font-mono ${additionalClasses}`}>{APP_NAME}</span>
+    <span
+      className={`bg-content-light rounded-lg p-1 font-mono dark:bg-slate-800 ${additionalClasses}`}
+    >
+      {APP_NAME}
+    </span>
   );
 }