Skip to content

[tweaks] Improve button contrast #89

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
t3dotgg merged 1 commit into from
Mar 9, 2023
Merged

[tweaks] Improve button contrast #89

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions apps/cli/cli-web/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,11 +104,11 @@ export default function AppCore() {

<main className="-mt-32 h-[calc(100vh-5rem)]">
<div className="mx-auto flex h-full w-full max-w-6xl flex-col gap-2 px-2 lg:h-full lg:flex-row">
<div className="flex h-3/5 w-full flex-col divide-y divide-gray-200 overflow-y-auto rounded-lg bg-white p-4 shadow lg:h-full lg:w-3/5 ">
<div className="flex h-3/5 w-full flex-col divide-y divide-gray-200 overflow-y-auto rounded-lg bg-gray-100 p-4 shadow lg:h-full lg:w-3/5 ">
{/* File browser / Hook Editor / 404 */}
<PageContent />
</div>
<div className="flex h-2/5 w-full rounded-lg bg-white p-4 shadow lg:h-full lg:w-2/5">
<div className="flex h-2/5 w-full rounded-lg bg-gray-100 p-4 shadow lg:h-full lg:w-2/5">
{/* Logs */}
<ResponseViewer />
</div>
Expand Down
26 changes: 13 additions & 13 deletions apps/cli/cli-web/src/components/filebrowser.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -144,7 +144,7 @@ export const FileBrowser = (input: { path: string; data: FolderDataType }) => {
</ol>
<div className="flex flex-row gap-1">
<button
className="flex items-center justify-center rounded-md border border-transparent border-gray-50 px-2 py-1 text-sm font-medium leading-4 text-gray-600 shadow-sm hover:bg-indigo-100/10 hover:text-indigo-600 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
className="flex items-center justify-center rounded-md bg-white px-2 py-1 text-sm font-medium leading-4 text-gray-600 shadow-sm hover:text-indigo-600 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
onClick={() => openFolder({ path })}
>
{`Open Folder`}
Expand All @@ -154,7 +154,7 @@ export const FileBrowser = (input: { path: string; data: FolderDataType }) => {
<FileFormModal openState={addHookModalState} path={pathArr} />
<Menu as="div" className="relative inline-block text-left">
<div>
<Menu.Button className="flex items-center justify-center rounded-md border border-transparent border-gray-50 px-2 py-1 text-sm font-medium leading-4 text-gray-600 shadow-sm hover:bg-indigo-100/10 hover:text-indigo-600 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
<Menu.Button className="flex items-center justify-center rounded-md bg-white px-2 py-1 text-sm font-medium leading-4 text-gray-600 shadow-sm hover:text-indigo-600 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
<span className="sr-only">{`Open create menu`}</span>
<PlusIcon
className="h-5 w-5 flex-shrink-0"
Expand All @@ -180,7 +180,7 @@ export const FileBrowser = (input: { path: string; data: FolderDataType }) => {
<button
className={classNames(
active
? "bg-gray-100 text-indigo-700"
? "bg-gray-200 text-indigo-700"
: "text-gray-700",
"flex w-full flex-row items-center justify-start gap-2 px-4 py-2 text-sm"
)}
Expand All @@ -200,7 +200,7 @@ export const FileBrowser = (input: { path: string; data: FolderDataType }) => {
<button
className={classNames(
active
? "bg-gray-100 text-indigo-700"
? "bg-gray-200 text-indigo-700"
: "text-gray-700",
"flex w-full flex-row items-center justify-start gap-2 px-4 py-2 text-sm"
)}
Expand Down Expand Up @@ -228,27 +228,27 @@ export const FileBrowser = (input: { path: string; data: FolderDataType }) => {
<h3 className="text-lg font-medium leading-6 text-gray-900">
{`Folders`}
</h3>
<div className="flex h-28 flex-row space-x-3 overflow-x-auto py-2">
<div className="flex h-28 flex-row space-x-3 overflow-x-auto px-1 py-2">
{data.folders.map((folder) => (
<div key={folder} className="w-1/5 min-w-[8rem]">
<Tooltip content={folder} placement="bottom">
<Link href={pathArrToUrl(pathArr, folder)}>
<div className="flex w-full flex-col items-center justify-center space-y-1 truncate rounded-md border border-gray-50 px-6 py-4 text-sm font-medium text-gray-600 shadow-sm hover:bg-indigo-100/10 hover:text-indigo-600 hover:shadow-md">
<button className="flex w-full flex-col items-center justify-center space-y-1 truncate rounded-md bg-white px-6 py-4 text-sm font-medium text-gray-600 shadow-sm hover:text-indigo-600 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
<FolderIcon
className="h-5 w-5 flex-shrink-0"
aria-hidden="true"
/>
<span className="w-full truncate text-center">
{folder}
</span>
</div>
</button>
</Link>
</Tooltip>
</div>
))}
<div className="w-1/5 min-w-[8rem]">
<button
className="flex w-full flex-col items-center justify-center space-y-1 truncate rounded-md border border-gray-50 px-6 py-4 text-sm font-medium text-gray-600 shadow-sm hover:bg-indigo-100/10 hover:text-indigo-600 hover:shadow-md"
className="flex w-full flex-col items-center justify-center space-y-1 truncate rounded-md bg-white px-6 py-4 text-sm font-medium text-gray-600 shadow-sm hover:text-indigo-600 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
onClick={() => addFolderModalState[1](true)}
>
<FolderPlusOutline
Expand All @@ -267,7 +267,7 @@ export const FileBrowser = (input: { path: string; data: FolderDataType }) => {
<h3 className="text-lg font-medium leading-6 text-gray-900">
{`Files`}
</h3>
<div className="w-full overflow-y-auto">
<div className="w-full overflow-y-auto px-1">
{data.files.length === 0 ? (
<div className="text-center">
<DocumentDuplicateIcon className="mx-auto h-12 w-12 text-gray-400" />
Expand Down Expand Up @@ -307,7 +307,7 @@ export const FileBrowser = (input: { path: string; data: FolderDataType }) => {
{data.files.map((file) => (
<li key={file.name} className="flex w-full flex-row gap-2">
<Link href={pathArrToUrl(pathArr, file.name)}>
<div className="group flex grow flex-row items-start justify-between gap-2 overflow-hidden rounded-md border border-gray-50 px-6 py-2 font-medium text-gray-600 shadow-sm hover:bg-indigo-100/10 hover:text-indigo-600 hover:shadow-md">
<button className="group flex grow flex-row items-start justify-between gap-2 overflow-hidden rounded-md bg-white px-6 py-2 font-medium text-gray-600 shadow-sm hover:text-indigo-600 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
{file.name}
<div className="flex flex-row gap-2">
{!file.config?.url ? (
Expand All @@ -325,11 +325,11 @@ export const FileBrowser = (input: { path: string; data: FolderDataType }) => {
)
)}
</div>
</div>
</button>
</Link>
<button
className="flex items-center justify-center rounded-md border border-transparent border-gray-50 px-3 text-sm font-medium leading-4 text-gray-600 shadow-sm hover:bg-indigo-100/10 hover:text-indigo-600 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2
disabled:cursor-not-allowed disabled:text-gray-400 disabled:hover:text-gray-400 disabled:hover:shadow-sm"
className="flex items-center justify-center rounded-md border border-transparent bg-white px-3 text-sm font-medium leading-4 text-gray-600 shadow-sm hover:text-indigo-600 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2
disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-400 disabled:hover:text-gray-400 disabled:hover:shadow-sm"
onClick={() => {
runFile({
file: `${path}/${file.name}`,
Expand Down
19 changes: 10 additions & 9 deletions apps/cli/cli-web/src/components/filerunner.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -147,9 +147,10 @@ export const FileRunner = (input: { path: string; data: FileDataType }) => {
</p>
</div>
</div>
<div className="flex h-full flex-col items-start justify-start">
<div className="flex h-full flex-col items-start justify-start p-1">
<button
className="flex items-center justify-center gap-2 rounded-md border border-transparent border-gray-50 px-3 py-2 text-sm font-medium leading-4 text-gray-600 shadow-sm hover:bg-indigo-100/10 hover:text-indigo-600 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
className="flex items-center justify-center gap-1 rounded-md border border-transparent bg-white px-3 py-2 text-sm font-medium leading-4 text-gray-600 shadow-sm hover:text-indigo-600 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2
disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-400 disabled:hover:text-gray-400 disabled:hover:shadow-sm"
onClick={() => {
void trigger();
if (JSON.stringify(prefill) !== JSON.stringify(getValues())) {
Expand Down Expand Up @@ -192,7 +193,7 @@ export const FileRunner = (input: { path: string; data: FileDataType }) => {
</p>
<input
id="url"
className="block w-full rounded-md border border-gray-300 p-1 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
className="block w-full rounded-md border border-gray-300 px-3 py-1.5 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
{...register("config.url", {
onBlur: (e: React.FormEvent<HTMLInputElement>) => {
void trigger();
Expand Down Expand Up @@ -249,7 +250,7 @@ export const FileRunner = (input: { path: string; data: FileDataType }) => {
<input
id={`config.headers.${index}.key`}
className={classNames(
"relative block w-full min-w-0 flex-1 rounded-none border border-gray-300 bg-transparent p-1 focus:z-10 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm",
"relative block w-full min-w-0 flex-1 rounded-none border border-gray-300 bg-transparent px-3 py-1.5 focus:z-10 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm",
index === 0 ? "rounded-tl-md" : ""
)}
{...register(
Expand All @@ -268,7 +269,7 @@ export const FileRunner = (input: { path: string; data: FileDataType }) => {
</label>
<input
id={`config.headers.${index}.value`}
className="relative block w-full min-w-0 flex-1 rounded-none border border-gray-300 bg-transparent p-1 focus:z-10 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
className="relative block w-full min-w-0 flex-1 rounded-none border border-gray-300 bg-transparent px-3 py-1.5 focus:z-10 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
{...register(
`config.headers.${index}.value` as const
)}
Expand All @@ -294,7 +295,7 @@ export const FileRunner = (input: { path: string; data: FileDataType }) => {
</div>
<button
className={classNames(
"-mt-[1px] flex w-full flex-row items-center gap-1 border border-gray-300 bg-white px-4 py-1 text-start text-sm font-medium text-gray-700 hover:bg-gray-50 focus:z-10 ",
"-mt-[1px] flex w-full flex-row items-center gap-1 border border-gray-300 bg-white px-4 py-1.5 text-start text-sm font-medium text-gray-700 hover:bg-gray-50 focus:z-10 ",
headerFields.length !== 0 ? "rounded-b-md" : "rounded-md"
)}
type="button"
Expand Down Expand Up @@ -327,7 +328,7 @@ export const FileRunner = (input: { path: string; data: FileDataType }) => {
<input
id={`config.query.${index}.key`}
className={classNames(
"relative block w-full min-w-0 flex-1 rounded-none border border-gray-300 bg-transparent p-1 focus:z-10 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm",
"relative block w-full min-w-0 flex-1 rounded-none border border-gray-300 bg-transparent px-3 py-1.5 focus:z-10 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm",
index === 0 ? "rounded-tl-md" : ""
)}
{...(register(
Expand Down Expand Up @@ -355,7 +356,7 @@ export const FileRunner = (input: { path: string; data: FileDataType }) => {
</label>
<input
id={`config.query.${index}.value`}
className="relative block w-full min-w-0 flex-1 rounded-none border border-gray-300 bg-transparent p-1 focus:z-10 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
className="relative block w-full min-w-0 flex-1 rounded-none border border-gray-300 bg-transparent px-3 py-1.5 focus:z-10 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
{...register(
`config.query.${index}.value` as const,
{
Expand Down Expand Up @@ -395,7 +396,7 @@ export const FileRunner = (input: { path: string; data: FileDataType }) => {
</div>
<button
className={classNames(
"-mt-[1px] flex w-full flex-row items-center gap-1 border border-gray-300 bg-white px-4 py-1 text-start text-sm font-medium text-gray-700 hover:bg-gray-50 focus:z-10 ",
"-mt-[1px] flex w-full flex-row items-center gap-1 border border-gray-300 bg-white px-4 py-1.5 text-start text-sm font-medium text-gray-700 hover:bg-gray-50 focus:z-10 ",
queryFields.length !== 0 ? "rounded-b-md" : "rounded-md"
)}
type="button"
Expand Down
12 changes: 6 additions & 6 deletions apps/cli/cli-web/src/components/response-viewer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,11 @@ import { classNames } from "../utils/classnames";
import { Tooltip } from "./common/tooltip";

const colorMap = {
trace: { label: "text-gray-600", body: "text-gray-700" }, // gray
debug: { label: "text-cyan-600", body: "text-cyan-700" }, // cyan
info: { label: "text-white", body: "text-gray-100" }, // white
warn: { label: "text-yellow-600", body: "text-yellow-700" }, // yellow
error: { label: "text-red-600", body: "text-red-700" }, // red
trace: { label: "text-gray-500", body: "text-gray-500" }, // gray
debug: { label: "text-cyan-500", body: "text-cyan-500" }, // cyan
info: { label: "text-white", body: "text-gray-50" }, // white
warn: { label: "text-yellow-500", body: "text-yellow-500" }, // yellow
error: { label: "text-red-400", body: "text-red-400" }, // red
} as const;

export const ResponseViewer = () => {
Expand Down Expand Up @@ -39,7 +39,7 @@ export const ResponseViewer = () => {
<h3 className="text-lg font-medium leading-6 text-gray-900">{`Log`}</h3>
</div>

<div className="h-full w-full overflow-auto rounded-md !bg-gray-900 px-1 py-4">
<div className="h-full w-full overflow-auto rounded-md !bg-gray-800 px-1 py-4">
<table>
<tbody>
{messages.map((message, index) => (
Expand Down
3 changes: 2 additions & 1 deletion apps/marketing/src/pages/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,8 @@ const Home: NextPage = () => {
<div className="container flex h-full w-full flex-col items-center justify-center gap-12 px-4 py-16">
{!open ? (
<button
className="flex items-center justify-center gap-2 rounded-md border border-transparent border-gray-50 px-3 py-2 text-sm font-medium leading-4 text-gray-600 shadow-sm hover:bg-indigo-100/10 hover:text-indigo-600 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
className="flex items-center justify-center gap-1 rounded-md border border-transparent bg-white px-3 py-2 text-sm font-medium leading-4 text-gray-600 shadow-sm hover:text-indigo-600 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2
disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-400 disabled:hover:text-gray-400 disabled:hover:shadow-sm"
onClick={() => {
setOpen(true);
window.localStorage.setItem("hasClickedRun", "true");
Expand Down