From 561906af98a491898a62e021fb9440d3630bc0c3 Mon Sep 17 00:00:00 2001
From: Christopher Nascone <cnasc@users.noreply.github.com>
Date: Sun, 18 Feb 2024 19:15:31 -0500
Subject: [PATCH] chore: smol tweaks to framegear (#145)

---
 framegear/components/Frame/Frame.tsx   | 17 +++++++++++++----
 framegear/components/Header/Header.tsx | 16 +++-------------
 framegear/package.json                 |  1 +
 framegear/tailwind.config.ts           |  4 +++-
 framegear/yarn.lock                    | 10 ++++++++++
 5 files changed, 30 insertions(+), 18 deletions(-)

diff --git a/framegear/components/Frame/Frame.tsx b/framegear/components/Frame/Frame.tsx
index 065d53a6ba..1fc44a03cd 100644
--- a/framegear/components/Frame/Frame.tsx
+++ b/framegear/components/Frame/Frame.tsx
@@ -41,10 +41,19 @@ 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="bg-button flex flex-wrap gap-2 rounded-b-xl px-4 py-2">
-        {buttons.map((button) =>
-          button ? <FrameButton key={button.key}>{button.value}</FrameButton> : null,
+      <div className="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"
+            type="text"
+            placeholder={input}
+          />
         )}
+        <div className="flex flex-wrap gap-4">
+          {buttons.map((button) =>
+            button ? <FrameButton key={button.key}>{button.value}</FrameButton> : null,
+          )}
+        </div>
       </div>
     </div>
   );
@@ -61,7 +70,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-button flex flex-wrap gap-2 rounded-b-xl px-4 py-2">
+      <div className="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/Header/Header.tsx b/framegear/components/Header/Header.tsx
index 893807bdea..6ce26fd406 100644
--- a/framegear/components/Header/Header.tsx
+++ b/framegear/components/Header/Header.tsx
@@ -1,4 +1,5 @@
 import { APP_NAME } from '@/utils/constants';
+import { ArrowTopRightIcon } from '@radix-ui/react-icons';
 import Link from 'next/link';
 
 export function Header() {
@@ -27,10 +28,10 @@ function Banner() {
         </section>
       </div>
       <Link
-        className="bg-link-button flex items-center gap-2 rounded-full px-4 py-2"
+        className="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> {LINK_OUT_ICON}
+        <span>Farcaster Frames specs</span> <ArrowTopRightIcon />
       </Link>
     </div>
   );
@@ -41,14 +42,3 @@ function AppName({ className: additionalClasses = '' }: { className?: string })
     <span className={`rounded-lg bg-slate-800 p-1 font-mono ${additionalClasses}`}>{APP_NAME}</span>
   );
 }
-
-const LINK_OUT_ICON = (
-  <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <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"
-      fillRule="evenodd"
-      clipRule="evenodd"
-    ></path>
-  </svg>
-);
diff --git a/framegear/package.json b/framegear/package.json
index 3a6851900b..c937b23473 100644
--- a/framegear/package.json
+++ b/framegear/package.json
@@ -10,6 +10,7 @@
     "test": "jest"
   },
   "dependencies": {
+    "@radix-ui/react-icons": "^1.3.0",
     "jotai": "^2.6.4",
     "next": "14.1.0",
     "react": "^18",
diff --git a/framegear/tailwind.config.ts b/framegear/tailwind.config.ts
index dc2d776a63..7ab921f5c1 100644
--- a/framegear/tailwind.config.ts
+++ b/framegear/tailwind.config.ts
@@ -7,14 +7,16 @@ const config: Config = {
       backgroundColor: {
         content: '#27282B',
         banner: '#141519',
-        button: '#f3f3f3',
+        'content-light': '#f3f3f3',
         farcaster: '#855DCD',
         input: '#191918',
+        'input-light': '#DBDBDB',
         'link-button': '#2E3137',
       },
       borderColor: {
         button: '#cfd0d2',
         'pallette-line': 'rgba(138, 145, 158, 0.20)',
+        light: '#CFD0D2',
       },
       maxWidth: {
         'layout-max': '1280px',
diff --git a/framegear/yarn.lock b/framegear/yarn.lock
index 1d9730bc17..0c2bd3b7e5 100644
--- a/framegear/yarn.lock
+++ b/framegear/yarn.lock
@@ -965,6 +965,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@radix-ui/react-icons@npm:^1.3.0":
+  version: 1.3.0
+  resolution: "@radix-ui/react-icons@npm:1.3.0"
+  peerDependencies:
+    react: ^16.x || ^17.x || ^18.x
+  checksum: 581657680e43fd13ff06e01f963e3afa94671d4ce6c3fb126e2c70c993ab8650faa55286974032dbccfecca4db57308fb66d53771d765887e03600cddee84ae5
+  languageName: node
+  linkType: hard
+
 "@rushstack/eslint-patch@npm:^1.3.3":
   version: 1.7.2
   resolution: "@rushstack/eslint-patch@npm:1.7.2"
@@ -3170,6 +3179,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "framegear@workspace:."
   dependencies:
+    "@radix-ui/react-icons": "npm:^1.3.0"
     "@testing-library/jest-dom": "npm:^6.4.2"
     "@testing-library/react": "npm:^14.2.1"
     "@types/node": "npm:^20"