Skip to content
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.

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

style: improve design #310

Merged
merged 1 commit into from
Dec 6, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
10,696 changes: 10,695 additions & 1 deletion packages/admin/public/shopper.css

Large diffs are not rendered by default.

66,597 changes: 66,584 additions & 13 deletions packages/admin/public/shopper.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion packages/admin/resources/css/components/sidebar.css
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
}

.sh-sidebar-item-active {
@apply bg-white text-primary-600 shadow-sm ring-1 ring-inset ring-gray-200 dark:bg-gray-800 dark:text-primary-500 dark:ring-gray-700;
@apply bg-white text-primary-600 shadow-sm ring-1 ring-inset ring-gray-200 dark:bg-gray-800 dark:text-primary-500 dark:ring-white/10;
}

.sh-sidebar-item-inactive {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
'heading',
])

<x-shopper::card {{ $attributes->twMerge(['class' => 'bg-gray-50 p-2']) }}>
<x-shopper::card {{ $attributes->twMerge(['class' => 'bg-white p-2']) }}>
<header class="flex items-start justify-between gap-2 px-2 py-2.5">
{{ $heading }}
</header>
Expand Down
2 changes: 1 addition & 1 deletion packages/admin/resources/views/components/card.blade.php
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<div
{{ $attributes->twMerge(['class' => 'bg-white dark:bg-gray-800 rounded-xl ring-1 ring-gray-200 dark:ring-white/10']) }}
{{ $attributes->twMerge(['class' => 'bg-white dark:bg-gray-900 rounded-xl ring-1 ring-gray-200 dark:ring-white/10']) }}
>
{{ $slot }}
</div>
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<dl
{{ $attributes->twMerge(['class' => 'divide-y divide-gray-200 dark:divide-gray-700']) }}
{{ $attributes->twMerge(['class' => 'divide-y divide-gray-200 dark:divide-white/10']) }}
role="list"
>
{{ $slot }}
Expand Down
3 changes: 3 additions & 0 deletions packages/admin/resources/views/components/escape.blade.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
<span class="inline-flex items-center px-2 py-1 text-gray-500 rounded-md bg-gray-100 text-xs dark:bg-gray-800 dark:text-gray-500">
esc
</span>
Original file line number Diff line number Diff line change
Expand Up @@ -116,7 +116,7 @@

@if ($isStacked())
<div
class="-gap-y-px flex flex-col divide-y divide-gray-200 border-s border-gray-200 dark:divide-gray-700 dark:border-gray-700"
class="-gap-y-px flex flex-col divide-y divide-gray-200 border-s border-gray-200 dark:divide-white/10 dark:border-white/10"
>
<button
:disabled="!isIncrementAllowed"
Expand All @@ -141,15 +141,15 @@ class="inline-flex h-8 w-7 items-center justify-center gap-x-2 rounded-ee-lg bg-
:disabled="!isDecrementAllowed"
@click="decrement"
type="button"
class="inline-flex size-6 items-center justify-center gap-x-2 rounded-full border border-gray-200 bg-white text-sm font-medium text-gray-800 shadow-sm hover:bg-gray-50 disabled:pointer-events-none disabled:opacity-50 dark:border-gray-700 dark:bg-gray-900 dark:text-white dark:hover:bg-gray-800 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600"
class="inline-flex size-6 items-center justify-center gap-x-2 rounded-full border border-gray-200 bg-white text-sm font-medium text-gray-800 shadow-sm hover:bg-gray-50 disabled:pointer-events-none disabled:opacity-50 dark:border-white/10 dark:bg-gray-900 dark:text-white dark:hover:bg-gray-800 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600"
>
@svg('heroicon-o-minus', 'h-3.5 w-3.5 shrink-0')
</button>
<button
:disabled="!isIncrementAllowed"
@click="increment"
type="button"
class="inline-flex size-6 items-center justify-center gap-x-2 rounded-full border border-gray-200 bg-white text-sm font-medium text-gray-800 shadow-sm hover:bg-gray-50 disabled:pointer-events-none disabled:opacity-50 dark:border-gray-700 dark:bg-gray-900 dark:text-white dark:hover:bg-gray-800 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600"
class="inline-flex size-6 items-center justify-center gap-x-2 rounded-full border border-gray-200 bg-white text-sm font-medium text-gray-800 shadow-sm hover:bg-gray-50 disabled:pointer-events-none disabled:opacity-50 dark:border-white/10 dark:bg-gray-900 dark:text-white dark:hover:bg-gray-800 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600"
>
@svg('heroicon-o-plus', 'h-3.5 w-3.5 shrink-0')
</button>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,17 +4,18 @@
'description' => null,
])

<form wire:submit="{{ $action }}" class="flex h-full flex-col divide-y divide-gray-200 dark:divide-gray-700">
<form wire:submit="{{ $action }}" class="flex h-full flex-col divide-y divide-gray-200 dark:divide-white/10">
<div class="h-0 flex-1 overflow-y-auto py-6">
<header class="px-4 sm:px-6">
<div class="flex items-start justify-between">
<h2 class="text-lg font-medium text-gray-900 dark:text-white">
{{ $title }}
</h2>
<div class="ml-3 flex h-7 items-center">
<div class="ml-3 flex h-7 items-center gap-2">
<x-shopper::escape />
<button
type="button"
class="rounded-md bg-white text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:bg-gray-900 dark:text-gray-500 dark:ring-offset-gray-900 dark:hover:text-gray-300"
class="rounded-md bg-white text-gray-400 hover:text-gray-500 outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:bg-gray-900 dark:text-gray-500 dark:ring-offset-gray-900 dark:hover:text-gray-300"
wire:click="$dispatch('closePanel')"
>
<span class="sr-only">Close panel</span>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
<input
{{ $attributes->twMerge(['class' => 'block w-full rounded-lg border-0 py-1.5 px-3 text-gray-900 ring-1 ring-gray-300 placeholder:text-gray-400 dark:bg-gray-700 dark:text-white dark:ring-gray-700 dark:placeholder-gray-400 focus:ring-2 focus:ring-primary-600 dark:bg-gray-800 dark:focus:ring-primary-500 sm:text-sm sm:leading-6']) }}
{{ $attributes->twMerge(['class' => 'block w-full rounded-lg border-0 py-1.5 px-3 text-gray-900 ring-1 ring-gray-300 placeholder:text-gray-400 dark:bg-gray-700 dark:text-white dark:ring-white/10 dark:placeholder-gray-400 focus:ring-2 focus:ring-primary-600 dark:bg-gray-800 dark:focus:ring-primary-500 sm:text-sm sm:leading-6']) }}
/>
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
])

<select
{!! $attributes->twMerge(['class' => 'block w-full py-1.5 px-3 border-0 ring-1 ring-gray-300 rounded-lg bg-white dark:bg-gray-800 dark:text-gray-300 dark:ring-gray-700 focus:ring-2 focus:outline-none focus:ring-primary-600 dark:focus:ring-primary-500 sm:text-sm sm:leading-6']) !!}
{!! $attributes->twMerge(['class' => 'block w-full py-1.5 px-3 border-0 ring-1 ring-gray-300 rounded-lg bg-white dark:bg-gray-800 dark:text-gray-300 dark:ring-white/10 focus:ring-2 focus:outline-none focus:ring-primary-600 dark:focus:ring-primary-500 sm:text-sm sm:leading-6']) !!}
>
@if ($items)
@foreach ($items as $item)
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
@props(['value' => null])

<textarea
{{ $attributes->twMerge(['class' => 'block w-full rounded-lg py-1.5 px-3 border-0 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 dark:ring-gray-700 dark:bg-gray-800 dark:text-white focus:ring-2 focus:ring-primary-600 dark:focus:ring-primary-500 sm:text-sm sm:leading-6']) }}
{{ $attributes->twMerge(['class' => 'block w-full rounded-lg py-1.5 px-3 border-0 text-gray-900 ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 dark:ring-white/10 dark:bg-gray-800 dark:text-white focus:ring-2 focus:ring-primary-600 dark:focus:ring-primary-500 sm:text-sm sm:leading-6']) }}
rows="3"
>
{{ $value }}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ class="flex h-screen overflow-hidden"
<x-shopper::layouts.app.sidebar.mobile />

<div
class="flex w-0 flex-1 flex-col overflow-hidden bg-white ring-1 ring-gray-200 dark:bg-gray-900 dark:ring-gray-800 lg:my-2 lg:rounded-bl-2xl lg:rounded-tl-2xl lg:pb-1.5"
class="flex w-0 flex-1 flex-col overflow-hidden ring-1 ring-gray-200 dark:ring-gray-800 lg:my-2 lg:rounded-bl-2xl lg:rounded-tl-2xl lg:pb-1.5"
>
<div class="flex flex-1 flex-col justify-between overflow-hidden overflow-y-auto">
<x-shopper::layouts.app.header />
Expand All @@ -18,7 +18,7 @@ class="flex w-0 flex-1 flex-col overflow-hidden bg-white ring-1 ring-gray-200 da
{{ $subHeading }}
@endisset

<main class="sh-main z-0 flex-1 pt-4 lg:pt-10">
<main class="sh-main z-0 flex-1">
<div {{ $attributes->twMerge(['class' => 'flex-1 min-h-full']) }}>
{{ $slot }}
</div>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
<div
class="sh-header sticky top-0 z-20 flex h-16 shrink-0 border-b border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900 lg:h-auto lg:py-4"
class="sh-header sticky top-0 z-20 flex h-16 shrink-0 border-b border-gray-200 bg-white dark:border-white/10 dark:bg-gray-900 lg:h-auto lg:py-4"
>
<button
@click.stop="sidebarOpen = true"
class="border-r border-gray-200 px-4 text-gray-500 focus:bg-gray-100 focus:text-gray-600 focus:outline-none dark:border-gray-700 dark:focus:bg-gray-800 dark:focus:text-gray-500 lg:hidden"
class="border-r border-gray-200 px-4 text-gray-500 focus:bg-gray-100 focus:text-gray-600 focus:outline-none dark:border-white/10 dark:focus:bg-gray-800 dark:focus:text-gray-500 lg:hidden"
aria-label="Open sidebar"
>
<x-untitledui-menu-03 class="size-6" aria-hidden="true" />
Expand All @@ -18,7 +18,7 @@ class="border-r border-gray-200 px-4 text-gray-500 focus:bg-gray-100 focus:text-
<a
href="{{ url('/') }}"
target="_blank"
class="hidden items-center rounded-lg p-1 text-gray-500 ring-1 ring-gray-200 hover:bg-gray-50 hover:text-gray-700 dark:text-gray-400 dark:ring-gray-700 dark:hover:bg-gray-800 dark:hover:text-white lg:inline-flex"
class="hidden items-center rounded-lg p-1 text-gray-500 ring-1 ring-gray-200 hover:bg-gray-50 hover:text-gray-700 dark:text-gray-400 dark:ring-white/10 dark:hover:bg-gray-800 dark:hover:text-white lg:inline-flex"
>
<x-untitledui-google-chrome class="size-6" stroke-width="1.5" aria-hidden="true" />
</a>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ class="relative flex items-start rounded-lg bg-white px-3 py-2.5 shadow-sm ring-
<x-shopper::layouts.app.sidebar.secondary />
</div>

<div class="space-y-2 border-t border-gray-200 p-4 dark:border-gray-700">
<div class="space-y-2 border-t border-gray-200 p-4 dark:border-white/10">
@can('access_setting')
<x-shopper::link
href="{{ route('shopper.settings.index') }}"
Expand Down
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
<aside class="sh-sidebar hidden lg:flex lg:shrink-0">
<x-shopper::layouts.app.sidebar.content class="sh-sidebar-content w-[17.5rem]" />
<x-shopper::layouts.app.sidebar.content class="sh-sidebar-content w-[16.5rem]" />
</aside>
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<x-shopper::layouts.app :title="$title ?? null">
<x-slot name="subHeading">
<div
class="sticky top-16 z-10 border-b border-t border-gray-200 bg-white/80 backdrop-blur-md backdrop-filter dark:border-gray-700 dark:bg-gray-800/80 lg:top-[3.8rem] lg:border-t-0"
class="sticky top-16 z-10 border-b border-t border-gray-200 bg-white/80 backdrop-blur-md backdrop-filter dark:border-white/10 dark:bg-gray-800/80 lg:top-[3.8rem] lg:border-t-0"
>
<div
x-data="{
Expand Down Expand Up @@ -86,5 +86,7 @@ class="flex size-8 items-center justify-center rounded-full text-gray-400 transi
</div>
</x-slot>

{{ $slot }}
<div class="py-5">
{{ $slot }}
</div>
</x-shopper::layouts.app>
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
<div class="my-10 flex justify-center text-center">
<div
class="flex items-center overflow-hidden rounded-lg bg-gray-50 shadow ring-1 ring-gray-200 dark:bg-gray-800 dark:ring-gray-700"
class="flex items-center overflow-hidden rounded-lg bg-gray-50 shadow ring-1 ring-gray-200 dark:bg-gray-900 dark:ring-white/10"
>
<div class="flex shrink-0 items-center justify-center border-r border-gray-200 p-3 dark:border-gray-700">
<div class="flex shrink-0 items-center justify-center border-r border-gray-200 p-3 dark:border-white/10">
<x-untitledui-info-circle class="size-5 text-gray-400 dark:text-gray-500" aria-hidden="true" />
</div>
<div class="bg-white px-4 py-3 text-sm leading-5 text-gray-500 dark:bg-gray-800 dark:text-gray-400">
<div class="bg-white px-4 py-3 text-sm leading-5 text-gray-500 dark:bg-transparent dark:text-gray-400">
{{ __('shopper::words.learn_more') }}
<a
href="https://laravelshopper.dev/docs/2.x/{{ $link }}"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
<a
href="{{ $menu["route"] ? route($menu["route"]) : "#" }}"
@class([
"select-none whitespace-nowrap border-b-2 px-1 py-4 text-sm font-medium",
"select-none whitespace-nowrap border-b-[3px] px-1 py-4 text-sm font-medium",
"current border-primary-500 text-primary-600" =>
$menu["route"] && request()->routeIs($menu["route"] . "*"),
"border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 dark:text-gray-400 dark:hover:border-gray-700 dark:hover:text-gray-300" =>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@

<x-shopper::link
:href="$menu['route'] ? route($menu['route']) : '#'"
class="flex items-start space-x-4 rounded-lg p-3 transition duration-200 ease-in-out hover:bg-gray-50 dark:hover:bg-gray-900/20"
class="flex items-start space-x-4 rounded-lg p-3 transition duration-200 ease-in-out hover:bg-gray-50 dark:hover:bg-white/5"
>
<div class="flex size-12 shrink-0 items-center justify-center rounded-lg bg-primary-600 text-white">
{{ svg($menu['icon'], 'size-6') }}
Expand Down
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
<div class="py-8 lg:py-10">
<div class="border-t border-gray-200 dark:border-gray-700"></div>
<div class="border-t border-gray-200 dark:border-white/10"></div>
</div>
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<tr
{{ $attributes->twMerge(['class' => 'border-b border-gray-200 bg-gray-50 dark:border-gray-700 dark:bg-white/5']) }}
{{ $attributes->twMerge(['class' => 'border-b border-gray-200 bg-gray-50 dark:border-white/10 dark:bg-white/5']) }}
>
{{ $slot }}
</tr>
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
<p class="text-sm leading-5 text-gray-500 dark:text-gray-400">
{{ __('shopper::pages/auth.account.empty_device') }}
</p>
<div class="mt-2 divide-y divide-gray-200 dark:divide-gray-700">
<div class="mt-2 divide-y divide-gray-200 dark:divide-white/10">
@foreach ($this->sessions as $session)
<div class="flex items-center justify-between py-4">
<div class="flex items-center space-x-3">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ class="relative inline-flex w-full items-center rounded-full text-sm leading-5 f
<img class="size-8 rounded-full" src="{{ $user->picture }}" alt="{{ $user->email }}" />
<span class="sr-only">{{ $user->full_name }}</span>
<span
class="absolute bottom-0 right-0 block h-2.5 w-2.5 rounded-full bg-green-400 ring-2 ring-white dark:ring-gray-700"
class="absolute bottom-0 right-0 block h-2.5 w-2.5 rounded-full bg-green-400 ring-2 ring-white dark:ring-white/10"
></span>
</button>
<div
Expand All @@ -28,7 +28,7 @@ class="absolute right-2.5 top-10 z-50 w-56 origin-top-right rounded-lg bg-white
aria-labelledby="options-menu-button"
tabindex="-1"
>
<div class="divide-y divide-gray-100 dark:divide-gray-700">
<div class="divide-y divide-gray-100 dark:divide-white/10">
<p class="truncate px-3.5 py-3">
<span class="block text-xs text-gray-500 dark:text-gray-400" role="none">
{{ __('shopper::words.sign_in_as') }}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ class="lg:col-span-1"
/>
<div class="mt-5 lg:col-span-2 lg:mt-0 lg:max-w-3xl">
<x-shopper::card>
<div class="border-b border-gray-200 p-4 dark:border-gray-700 sm:px-6">
<div class="border-b border-gray-200 p-4 dark:border-white/10 sm:px-6">
<div class="flex items-center space-x-3">
<div
@class([
Expand Down Expand Up @@ -69,7 +69,7 @@ class="whitespace-no-wrap font-medium text-primary-500 transition duration-150 e
</div>
@if ($this->enabled)
@if ($showingQrCode)
<div class="border-t border-gray-200 pt-5 dark:border-gray-700">
<div class="border-t border-gray-200 pt-5 dark:border-white/10">
<p class="max-w-2xl text-sm font-medium text-gray-600 dark:text-gray-400">
{{ __('shopper::pages/auth.account.two_factor_is_enabled') }}
</p>
Expand All @@ -81,7 +81,7 @@ class="whitespace-no-wrap font-medium text-primary-500 transition duration-150 e
@endif

@if ($showingRecoveryCodes)
<div class="border-t border-gray-200 pt-5 dark:border-gray-700">
<div class="border-t border-gray-200 pt-5 dark:border-white/10">
<p class="max-w-2xl text-sm font-medium text-gray-600 dark:text-gray-400">
{{ __('shopper::pages/auth.account.two_factor_store_recovery_codes') }}
</p>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -21,15 +21,15 @@
<p class="text-gray-500 dark:text-gray-400">
{{ $address->street_address }}
</p>
<div class="flex flex-col space-y-0.5 truncate text-sm text-gray-500 dark:text-gray-400">
<div class="mt-1 flex flex-col space-y-0.5 truncate text-sm text-gray-500 dark:text-gray-400">
<span>{{ $address->postal_code }}, {{ $address->city }}</span>
<span class="inline-flex shrink-0 items-center gap-2">
<span>{{ $address->country->name }}</span>
<img
src="{{ $address->country->svg_flag }}"
class="size-5 rounded-full object-cover object-center"
class="size-4 rounded-full object-cover object-center"
alt="Country flag"
/>
{{ $address->country->name }}
</span>
@if ($address->phone_number)
<span>{{ $address->phone_number }}</span>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,9 @@
@endphp

<div
class="divide-y divide-gray-200 overflow-hidden rounded-md border border-gray-200 bg-white shadow-sm dark:divide-gray-700 dark:border-gray-700 dark:bg-gray-800"
class="divide-y divide-gray-200 overflow-hidden rounded-lg border border-gray-200 bg-white shadow-sm dark:divide-white/10 dark:border-white/10 dark:bg-gray-900"
>
<div class="bg-gray-50 px-4 py-3 dark:bg-gray-700 sm:flex sm:items-center sm:justify-between">
<div class="bg-gray-50 px-4 py-3 dark:bg-gray-800 sm:flex sm:items-center sm:justify-between">
<div class="flex-1 grow sm:grid sm:grid-cols-4 sm:gap-5">
<div>
<dt
Expand Down
Loading
Loading