Skip to content

Commit

Permalink
Merge pull request #25 from cmgriffing/fix/styling
Browse files Browse the repository at this point in the history 
fix: light/dark styling tweaks
  • Loading branch information
@cmgriffing
cmgriffing authored Oct 23, 2024
2 parents e07a3a0 + 435e090 commit 05d956f
Show file tree
Hide file tree
Showing 3 changed files with 68 additions and 56 deletions.
21 changes: 13 additions & 8 deletions playgrounds/app/src/components/Editor.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -264,9 +264,9 @@ export default function Editor(props: EditorProps) {
<TabsTrigger value="output">Step 2: Output</TabsTrigger>
</TabsList>
<TabsContent value="snippets">
<div class="flex flex-row p-2 gap-2 bg-slate-500 rounded-t justify-between">
<div class="flex flex-row p-2 gap-2 dark:bg-[#27272a] bg-gray-100 rounded-t justify-between">
<div class="flex flex-row gap-2 items-center">
<div class="rounded bg-white p-2">Enter the code snippets you would like to diff</div>
<div class="">Enter the code snippets you would like to diff</div>
</div>
<div class="flex flex-row gap-2">
<Button
Expand All @@ -280,20 +280,23 @@ export default function Editor(props: EditorProps) {
</div>
</div>

<div class="bg-slate-400 p-2 rounded-b flex flex-row gap-2">
<TextField class="w-1/2" value={startCode} onChange={setStartCode}>
<div class="dark:bg-[#27272a] dark:bg-background bg-gray-100 p-2 rounded-b flex flex-row flex-wrap md:flex-nowrap gap-2">
<TextField class="w-full md:w-1/2" value={startCode} onChange={setStartCode}>
<TextFieldLabel>Start Code</TextFieldLabel>
<TextFieldTextArea class="h-[400px]" placeholder="Type your message here." />
</TextField>

<TextField class="w-1/2" value={endCode} onChange={setEndCode}>
<TextField class="md:w-1/2" value={endCode} onChange={setEndCode}>
<TextFieldLabel>End Code</TextFieldLabel>
<TextFieldTextArea class="h-[400px]" placeholder="Type your message here." />
</TextField>
</div>
</TabsContent>
<TabsContent value="output">
<div class="flex flex-row p-2 gap-2 bg-slate-500 rounded-t justify-between" id="toolbar">
<div
class="flex flex-row p-2 gap-2 dark:bg-[#27272a] bg-gray-100 rounded-t justify-between"
id="toolbar"
>
<div class="flex flex-row gap-2" id="toolbar-left">
<Combobox
value={theme}
Expand All @@ -302,7 +305,9 @@ export default function Editor(props: EditorProps) {
placeholder="Search a theme..."
itemComponent={props => (
<ComboboxItem item={props.item}>
<ComboboxItemLabel>{props.item.rawValue}</ComboboxItemLabel>
<ComboboxItemLabel class="dark:text-black">
{props.item.rawValue}
</ComboboxItemLabel>
<ComboboxItemIndicator />
</ComboboxItem>
)}
Expand Down Expand Up @@ -530,7 +535,7 @@ export default function Editor(props: EditorProps) {

<div
id="preview-wrapper"
class="bg-slate-400 p-2 rounded-b"
class="dark:bg-[#27272a] bg-gray-100 p-2 rounded-b"
style={{
'min-height': `${(maxContainerDimensions()?.height || 100) + 40}px`,
}}
Expand Down
11 changes: 9 additions & 2 deletions playgrounds/app/src/components/Header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,9 @@ import {
} from '~/components/ui/dropdown-menu'
import { user } from '~/lib/store'
import { TbCode, TbDoorExit } from 'solid-icons/tb'
import { linkStyles } from '~/lib/styles'

export default function Nav() {
export default function Header() {
const [isDarkMode, toggleDarkMode] = createThemeSwitcher()

const handleToggle = () => {
Expand All @@ -27,7 +28,7 @@ export default function Nav() {
<div class="flex flex-row items-center gap-2">
<button
onClick={handleToggle}
class="flex items-center justify-center cursor-pointer w-8 h-8 bg-neutral-100 hover:bg-neutral-200 dark:bg-neutral-600 dark:hover:bg-neutral-600/80 rounded-full transition"
class="flex items-center justify-center cursor-pointer w-10 h-10 bg-neutral-100 hover:bg-neutral-200 dark:bg-neutral-600 dark:hover:bg-neutral-600/80 rounded transition"
aria-label="Toggle dark mode"
>
{isDarkMode() ? (
Expand Down Expand Up @@ -80,6 +81,12 @@ export default function Nav() {
<a href="/">
<h1 class="text-6xl font-title text-sky-500">Giffium</h1>
</a>
<p class="text-left mt-[-10px]">
by{' '}
<a href="https://cmgriffing.com" rel="dofollow" target="_blank" class={linkStyles}>
cmgriffing
</a>
</p>
</div>
</header>
)
Expand Down
92 changes: 46 additions & 46 deletions playgrounds/app/src/components/ui/combobox.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,43 +1,43 @@
import type { JSX, ValidComponent } from "solid-js"
import { splitProps } from "solid-js"
import type { JSX, ValidComponent } from 'solid-js'
import { splitProps } from 'solid-js'

import * as ComboboxPrimitive from "@kobalte/core/combobox"
import type { PolymorphicProps } from "@kobalte/core/polymorphic"
import * as ComboboxPrimitive from '@kobalte/core/combobox'
import type { PolymorphicProps } from '@kobalte/core/polymorphic'

import { cn } from "~/lib/utils"
import { cn } from '~/lib/utils'

const Combobox = ComboboxPrimitive.Root
const ComboboxItemLabel = ComboboxPrimitive.ItemLabel
const ComboboxHiddenSelect = ComboboxPrimitive.HiddenSelect

type ComboboxItemProps<T extends ValidComponent = "li"> = ComboboxPrimitive.ComboboxItemProps<T> & {
type ComboboxItemProps<T extends ValidComponent = 'li'> = ComboboxPrimitive.ComboboxItemProps<T> & {
class?: string | undefined
}

const ComboboxItem = <T extends ValidComponent = "li">(
props: PolymorphicProps<T, ComboboxItemProps<T>>
const ComboboxItem = <T extends ValidComponent = 'li'>(
props: PolymorphicProps<T, ComboboxItemProps<T>>,
) => {
const [local, others] = splitProps(props as ComboboxItemProps, ["class"])
const [local, others] = splitProps(props as ComboboxItemProps, ['class'])
return (
<ComboboxPrimitive.Item
class={cn(
"relative flex cursor-default select-none items-center justify-between rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50",
local.class
'relative flex cursor-default select-none items-center justify-between rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50',
local.class,
)}
{...others}
/>
)
}

type ComboboxItemIndicatorProps<T extends ValidComponent = "div"> =
type ComboboxItemIndicatorProps<T extends ValidComponent = 'div'> =
ComboboxPrimitive.ComboboxItemIndicatorProps<T> & {
children?: JSX.Element
}

const ComboboxItemIndicator = <T extends ValidComponent = "div">(
props: PolymorphicProps<T, ComboboxItemIndicatorProps<T>>
const ComboboxItemIndicator = <T extends ValidComponent = 'div'>(
props: PolymorphicProps<T, ComboboxItemIndicatorProps<T>>,
) => {
const [local, others] = splitProps(props as ComboboxItemIndicatorProps, ["children"])
const [local, others] = splitProps(props as ComboboxItemIndicatorProps, ['children'])
return (
<ComboboxPrimitive.ItemIndicator {...others}>
{local.children ?? (
Expand All @@ -49,7 +49,7 @@ const ComboboxItemIndicator = <T extends ValidComponent = "div">(
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="size-4"
class="size-4 dark:text-black"
>
<path d="M5 12l5 5l10 -10" />
</svg>
Expand All @@ -58,18 +58,18 @@ const ComboboxItemIndicator = <T extends ValidComponent = "div">(
)
}

type ComboboxSectionProps<T extends ValidComponent = "li"> =
type ComboboxSectionProps<T extends ValidComponent = 'li'> =
ComboboxPrimitive.ComboboxSectionProps<T> & { class?: string | undefined }

const ComboboxSection = <T extends ValidComponent = "li">(
props: PolymorphicProps<T, ComboboxSectionProps<T>>
const ComboboxSection = <T extends ValidComponent = 'li'>(
props: PolymorphicProps<T, ComboboxSectionProps<T>>,
) => {
const [local, others] = splitProps(props as ComboboxSectionProps, ["class"])
const [local, others] = splitProps(props as ComboboxSectionProps, ['class'])
return (
<ComboboxPrimitive.Section
class={cn(
"overflow-hidden p-1 px-2 py-1.5 text-xs font-medium text-muted-foreground ",
local.class
'overflow-hidden p-1 px-2 py-1.5 text-xs font-medium text-muted-foreground ',
local.class,
)}
{...others}
/>
Expand All @@ -78,53 +78,53 @@ const ComboboxSection = <T extends ValidComponent = "li">(

type ComboboxControlProps<
U,
T extends ValidComponent = "div"
T extends ValidComponent = 'div',
> = ComboboxPrimitive.ComboboxControlProps<U, T> & {
class?: string | undefined
}

const ComboboxControl = <T, U extends ValidComponent = "div">(
props: PolymorphicProps<U, ComboboxControlProps<T>>
const ComboboxControl = <T, U extends ValidComponent = 'div'>(
props: PolymorphicProps<U, ComboboxControlProps<T>>,
) => {
const [local, others] = splitProps(props as ComboboxControlProps<T>, ["class"])
const [local, others] = splitProps(props as ComboboxControlProps<T>, ['class'])
return (
<ComboboxPrimitive.Control
class={cn("flex items-center rounded-md border px-3", local.class)}
class={cn('flex items-center rounded-md border px-3', local.class)}
{...others}
/>
)
}

type ComboboxInputProps<T extends ValidComponent = "input"> =
type ComboboxInputProps<T extends ValidComponent = 'input'> =
ComboboxPrimitive.ComboboxInputProps<T> & { class?: string | undefined }

const ComboboxInput = <T extends ValidComponent = "input">(
props: PolymorphicProps<T, ComboboxInputProps<T>>
const ComboboxInput = <T extends ValidComponent = 'input'>(
props: PolymorphicProps<T, ComboboxInputProps<T>>,
) => {
const [local, others] = splitProps(props as ComboboxInputProps, ["class"])
const [local, others] = splitProps(props as ComboboxInputProps, ['class'])
return (
<ComboboxPrimitive.Input
class={cn(
"flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
local.class
'flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 dark:text-black',
local.class,
)}
{...others}
/>
)
}

type ComboboxTriggerProps<T extends ValidComponent = "button"> =
type ComboboxTriggerProps<T extends ValidComponent = 'button'> =
ComboboxPrimitive.ComboboxTriggerProps<T> & {
class?: string | undefined
children?: JSX.Element
}

const ComboboxTrigger = <T extends ValidComponent = "button">(
props: PolymorphicProps<T, ComboboxTriggerProps<T>>
const ComboboxTrigger = <T extends ValidComponent = 'button'>(
props: PolymorphicProps<T, ComboboxTriggerProps<T>>,
) => {
const [local, others] = splitProps(props as ComboboxTriggerProps, ["class", "children"])
const [local, others] = splitProps(props as ComboboxTriggerProps, ['class', 'children'])
return (
<ComboboxPrimitive.Trigger class={cn("size-4 opacity-50", local.class)} {...others}>
<ComboboxPrimitive.Trigger class={cn('size-4 opacity-50', local.class)} {...others}>
<ComboboxPrimitive.Icon>
{local.children ?? (
<svg
Expand All @@ -135,7 +135,7 @@ const ComboboxTrigger = <T extends ValidComponent = "button">(
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="size-4"
class="size-4 dark:text-black"
>
<path d="M8 9l4 -4l4 4" />
<path d="M16 15l-4 4l-4 -4" />
Expand All @@ -146,19 +146,19 @@ const ComboboxTrigger = <T extends ValidComponent = "button">(
)
}

type ComboboxContentProps<T extends ValidComponent = "div"> =
type ComboboxContentProps<T extends ValidComponent = 'div'> =
ComboboxPrimitive.ComboboxContentProps<T> & { class?: string | undefined }

const ComboboxContent = <T extends ValidComponent = "div">(
props: PolymorphicProps<T, ComboboxContentProps<T>>
const ComboboxContent = <T extends ValidComponent = 'div'>(
props: PolymorphicProps<T, ComboboxContentProps<T>>,
) => {
const [local, others] = splitProps(props as ComboboxContentProps, ["class"])
const [local, others] = splitProps(props as ComboboxContentProps, ['class'])
return (
<ComboboxPrimitive.Portal>
<ComboboxPrimitive.Content
class={cn(
"relative z-50 min-w-32 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md animate-in fade-in-80",
local.class
'relative z-50 min-w-32 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md animate-in fade-in-80',
local.class,
)}
{...others}
>
Expand All @@ -178,5 +178,5 @@ export {
ComboboxTrigger,
ComboboxInput,
ComboboxHiddenSelect,
ComboboxContent
ComboboxContent,
}

0 comments on commit 05d956f

Please sign in to comment.