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.

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

Feature/v3 colors and tweaks #31

Open
wants to merge 13 commits into
base: master
Choose a base branch
from
Open

Feature/v3 colors and tweaks #31

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
45c841f
Implemented primer and various tweaks
jordythevulder Dec 17, 2024
77391bd
V3 colors implementation and various tweaks
jordythevulder Dec 17, 2024
84064af
Fix item removal
Jade-GG Jan 3, 2025
29ae511
Carry attributes over to select input
Jade-GG Jan 6, 2025
bb96447
Only show slide-in when cart exists to avoid errors
Jade-GG Jan 6, 2025
0498648
Remove pickup address
Jade-GG Jan 6, 2025
c1a63cd
Show configured variant image in the cart (#33)
Jade-GG Jan 7, 2025
ccfd41f
Resolved feedback
jordythevulder Jan 9, 2025
71be9bd
Merge branch 'feature/v3-colors-and-tweaks' of github.com:rapidez/con…
jordythevulder Jan 9, 2025
245635f
Restructured inputs
jordythevulder Jan 10, 2025
a46a173
removed commented code
jordythevulder Jan 10, 2025
59c5191
resolved merge conflict
jordythevulder Jan 13, 2025
0b02065
Tweaked classes
jordythevulder Jan 29, 2025
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 resources/views/cart/cart.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
</x-rapidez-ct::sections>

<x-rapidez-ct::toolbar>
<x-rapidez-ct::button.outline href="/" class="max-lg:hidden">
<x-rapidez::button.outline href="/" class="max-lg:hidden !flex-none">
jordythevulder marked this conversation as resolved.
Show resolved Hide resolved
@lang('Continue shopping')
</x-rapidez-ct::button.outline>
</x-rapidez::button.outline>
</x-rapidez-ct::toolbar>
6 changes: 3 additions & 3 deletions resources/views/cart/coupon.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
:error-callback="checkResponseForExpiredCart"
v-slot="{ mutate }"
>
<form v-on:submit.prevent="mutate" class="text-ct-inactive mt-1 flex items-center gap-x-2">
<form v-on:submit.prevent="mutate" class="text-muted mt-1 flex items-center gap-x-2">
<button type="submit">
<x-heroicon-s-x-mark class="size-4 text-black-400"/>
</button>
Expand All @@ -19,8 +19,8 @@
</graphql-mutation>
</template>
</div>
<x-rapidez-ct::button.outline class="w-full" v-show="!isOpen" @click="toggle">
<x-rapidez::button.outline class="w-full" v-show="!isOpen" @click="toggle">
@lang('Coupon code')
</x-rapidez-ct::button.outline>
</x-rapidez::button.outline>
</div>
</toggler>
4 changes: 2 additions & 2 deletions resources/views/cart/partials/product/remove-button.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
:error-callback="checkResponseForExpiredCart"
v-slot="{ mutate }"
>
<button v-on:click="mutate" class="text-ct-inactive mt-1 text-xs hover:underline" :dusk="'item-delete-' + index" title="{{ __('Remove') }}">
<x-heroicon-o-trash class="text-inactive w-5"/>
<button v-on:click="mutate" class="text-muted mt-1 text-xs hover:underline" :dusk="'item-delete-' + index" title="{{ __('Remove') }}">
<x-heroicon-o-trash class="text-muted w-5"/>
</button>
</graphql-mutation>
8 changes: 4 additions & 4 deletions resources/views/cart/partials/sidebar/summary.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,15 @@

<x-rapidez-ct::summary />

<x-rapidez-ct::button.enhanced :href="route('checkout')" class="flex w-full items-center justify-center gap-1 !mt-0" dusk="checkout">
<x-rapidez::button.conversion :href="route('checkout')" class="flex w-full items-center justify-center gap-1 !mt-0" dusk="checkout">
@lang('To checkout')
</x-rapidez-ct::button.enhanced>
</x-rapidez::button.conversion>

@include('rapidez-ct::cart.coupon')

<x-rapidez-ct::button.outline href="/" class="lg:hidden w-full">
<x-rapidez::button.outline href="/" class="lg:hidden w-full">
@lang('Continue shopping')
</x-rapidez-ct::button.outline>
</x-rapidez::button.outline>

@include('rapidez-ct::cart.partials.sidebar.payment')
@include('rapidez-ct::cart.partials.sidebar.usps')
2 changes: 1 addition & 1 deletion resources/views/cart/partials/sidebar/usps.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<ul class="mt-4 flex flex-col gap-1 text-sm [&>li]:flex [&>li]:gap-x-2">
@foreach (['Ordered before 7:00 PM, delivered tomorrow', 'Free shipping from €65', 'Free and easy returns', 'Rated 8.7/10'] as $usp)
<li>
<x-heroicon-o-check stroke-width="3.2" class="mt-0.5 h-4 shrink-0 text-ct-primary" />
<x-heroicon-o-check stroke-width="3.2" class="mt-0.5 h-4 shrink-0 text-primary" />
<span>@lang($usp)</span>
</li>
@endforeach
Expand Down
10 changes: 5 additions & 5 deletions resources/views/checkout/pages/credentials.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@

@section('content')
<div class="overflow-clip">
<div class="container">
<div class="lg:container xl:max-w-screen-xl">
<x-rapidez-ct::layout.checkout>
<x-slot:header>
@include('rapidez-ct::checkout.partials.header', ['href' => route('cart')])
Expand All @@ -27,13 +27,13 @@ class="contents"
>
@include('rapidez-ct::checkout.steps.credentials')
<x-rapidez-ct::toolbar>
<x-rapidez-ct::button.outline :href="route('cart')">
<x-rapidez::button.outline :href="route('cart')">
@lang('Back to cart')
</x-rapidez-ct::button.outline>
</x-rapidez::button.outline>

<x-rapidez-ct::button.enhanced loader>
<x-rapidez::button.conversion loader>
@lang('Next')
</x-rapidez-ct::button.enhanced>
</x-rapidez::button.conversion>
</x-rapidez-ct::toolbar>
</form>
<x-slot:sidebar>
Expand Down
10 changes: 5 additions & 5 deletions resources/views/checkout/pages/login.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@

@section('content')
<div class="overflow-clip">
<div class="container">
<div class="lg:container xl:max-w-screen-xl">
<x-rapidez-ct::layout.checkout>
<x-slot:header>
@include('rapidez-ct::checkout.partials.header', ['href' => route('cart')])
Expand All @@ -29,13 +29,13 @@ class="max-w-md mx-auto"
>
@include('rapidez-ct::checkout.steps.login')
<x-rapidez-ct::toolbar>
<x-rapidez-ct::button.outline :href="route('cart')">
<x-rapidez::button.outline :href="route('cart')">
@lang('Back to cart')
</x-rapidez-ct::button.outline>
</x-rapidez::button.outline>

<x-rapidez-ct::button.enhanced loader type="submit" dusk="continue" >
<x-rapidez::button.conversion loader type="submit" dusk="continue" >
@lang('Next')
</x-rapidez-ct::button.enhanced>
</x-rapidez::button.conversion>
</x-rapidez-ct::toolbar>
</form>
</x-rapidez-ct::layout.checkout>
Expand Down
14 changes: 6 additions & 8 deletions resources/views/checkout/pages/payment.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@

@section('content')
<div class="overflow-clip">
<div class="container">
<div class="lg:container xl:max-w-screen-xl">
<x-rapidez-ct::layout.checkout>
<x-slot:header>
@include('rapidez-ct::checkout.partials.header', ['href' => route('cart')])
Expand All @@ -28,9 +28,9 @@ class="contents"
>
@include('rapidez::checkout.steps.payment_method')
<x-rapidez-ct::toolbar>
<x-rapidez-ct::button.outline :href="route('checkout', ['step' => 'credentials'])">
<x-rapidez::button.outline :href="route('checkout', ['step' => 'credentials'])">
@lang('Back to credentials')
</x-rapidez-ct::button.outline>
</x-rapidez::button.outline>
<graphql-mutation
:query="config.queries.placeOrder"
:variables="{ cart_id: mask }"
Expand All @@ -40,11 +40,9 @@ class="contents"
redirect="{{ route('checkout.success') }}"
v-slot="{ mutate, variables }"
>
<fieldset>
<x-rapidez-ct::button.enhanced class="relative" type="submit" dusk="continue" loader>
@lang('Place order')
</x-rapidez-ct::button.enhanced>
</fieldset>
<x-rapidez::button.conversion class="relative" type="submit" dusk="continue" loader>
@lang('Place order')
</x-rapidez::button.conversion>
</graphql-mutation>
</x-rapidez-ct::toolbar>
</form>
Expand Down
2 changes: 1 addition & 1 deletion resources/views/checkout/partials/address-cards-popup.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,5 +9,5 @@
@include('rapidez-ct::checkout.partials.address-card')
</x-rapidez-ct::card.inactive>
</x-rapidez-ct::sections>
<label class="absolute cursor-pointer inset-0 bg-ct-neutral/60" for="popup"></label>
<label class="absolute cursor-pointer inset-0 bg-black/60" for="popup"></label>
</div>
8 changes: 4 additions & 4 deletions resources/views/checkout/partials/buttons/address.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
<div class="flex flex-wrap items-center gap-3 mt-5">
<x-rapidez-ct::button.inactive v-on:click.prevent="toggleEdit">
<x-rapidez::button v-on:click.prevent="toggleEdit">
@lang('Use a new address')
</x-rapidez-ct::button.inactive>
<x-rapidez-ct::button.inactive tag="label" for="popup" class="cursor-pointer" v-if="$root.user.addresses.length">
</x-rapidez::button>
<x-rapidez::button tag="label" for="popup" class="cursor-pointer" v-if="$root.user.addresses.length">
jordythevulder marked this conversation as resolved.
Show resolved Hide resolved
@lang('My addresses')
</x-rapidez-ct::button.inactive>
</x-rapidez::button>
</div>
2 changes: 1 addition & 1 deletion resources/views/checkout/partials/buttons/new-address.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<button v-on:click.prevent="toggleEdit" class="flex flex-col items-center justify-center gap-y-2 text-inactive font-medium bg-ct-inactive-100 rounded-xl max-md:hidden">
<button v-on:click.prevent="toggleEdit" class="flex flex-col items-center justify-center gap-y-2 text-muted font-medium bg rounded-xl max-md:hidden">
<span>+</span>
<span>@lang('Add new address')</span>
</button>
14 changes: 7 additions & 7 deletions resources/views/checkout/partials/header.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,27 +1,27 @@
<div class="lg:hidden">
@include('rapidez-ct::components.slide-in.receipt')
</div>
<div class="flex flex-wrap gap-y-3 max-xl:-mt-5 xl:mr-20">
<div class="flex flex-wrap gap-y-3 xl:mr-20 max-xl:justify-center">
@isset($href)
<x-rapidez-ct::button.outline class="flex items-center justify-center !p-0 size-12 lg:hidden" :$href>
<x-rapidez::button.outline class="flex items-center justify-center !p-0 size-12 lg:hidden" :$href>
<x-heroicon-o-arrow-long-left class="size-6"/>
</x-rapidez-ct::button.outline>
</x-rapidez::button.outline>
@endif

<div class="flex lg:w-24 *:w-auto *:h-auto max-lg:flex-1 max-lg:h-12">
<div class="flex lg:w-16 xl:w-24 *:w-auto *:h-auto max-lg:flex-1 max-lg:h-12">
<a href="{{ url('/') }}" class="sticky top-0 max-lg:mx-5 flex items-center lg:self-start max-lg:flex-1 lg:pt-4 max-w-full">
<div class="w-inherit flex-1 *:w-auto *:h-auto *:max-w-full max-w-full h-full *:max-h-full">
<x-rapidez-ct::logo />
</div>
</a>
</div>
<x-rapidez-ct::button.inactive for="slide-in" class="lg:hidden">
<x-rapidez::button for="slide-in" class="gap-x-2.5 lg:hidden cursor-pointer">
<span class="relative">
<span class="absolute flex items-center font-semibold justify-center size-4 -right-2 -top-1.5 rounded-full bg-ct-primary text-white text-xs">
<span class="absolute flex items-center font-bold justify-center size-4 -right-2 -top-1.5 rounded-full bg-primary text-white text-xs">
@{{ Math.round(cart.total_quantity) }}
</span>
<x-heroicon-o-shopping-cart class="size-6"/>
</span>
@lang('My order')
</x-rapidez-ct::button.inactive>
</x-rapidez::button>
</div>
26 changes: 14 additions & 12 deletions resources/views/checkout/partials/sections/login/logged-out.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<checkout-login v-slot="checkoutLogin">
<fieldset partial-submit="go" class="contents">
<fieldset partial-submit="go" class="grid gap-4 sm:gap-5 md:items-end md:grid-cols-2">
<x-rapidez-ct::input
label="Email"
name="email"
Expand All @@ -11,19 +11,19 @@ class="justify-center"
:placeholder="__('Enter your e-mail address')"
/>

<p v-if="checkoutLogin.isEmailAvailable" class="self-end text-ct-inactive">
@lang('We will send your order confirmation to this e-mail address. We will also check if you already have an account so you can checkout more efficiently.')
<p v-if="checkoutLogin.isEmailAvailable" class="self-end text-muted md:min-h-14 flex items-center">
@lang('We\'ll email your order confirmation and check if you have an account for faster checkout.')
Roene-JustBetter marked this conversation as resolved.
Show resolved Hide resolved
</p>

<template v-if="!loggedIn && (!checkoutLogin.isEmailAvailable || checkoutLogin.createAccount)">
<x-rapidez-ct::input.password
label="Password"
placeholder="password"
name="password"
v-model="checkoutLogin.password"
required
/>
</template>
<p v-if="!loggedIn && !checkoutLogin.isEmailAvailable" class="self-end text-ct-inactive">
<p v-if="!loggedIn && !checkoutLogin.isEmailAvailable" class="self-end text-muted">
@lang('You already have an account with this e-mail address. Please log in to continue.')
<a href="{{ route('account.forgotpassword') }}" class="underline hover:no-underline">@lang('Forgot your password?')</a>
</p>
Expand All @@ -34,19 +34,21 @@ class="justify-center"
@endif
<template v-if="!loggedIn && checkoutLogin.createAccount">
<x-rapidez-ct::input.password
label="Repeat password"
placeholder="password repeat"
name="password_repeat"
v-model="checkoutLogin.password_repeat"
required
/>
<x-rapidez-ct::input
placeholder="Firstname"
label="Firstname"
name="firstname"
type="text"
v-model="checkoutLogin.firstname"
required
/>
<x-rapidez-ct::input
placeholder="lastname"
label="Lastname"
name="lastname"
type="text"
Expand All @@ -57,17 +59,17 @@ class="justify-center"

<template v-if="!loggedIn && checkoutLogin.isEmailAvailable">
<div class="col-span-full">
<x-rapidez-ct::input.checkbox v-model="checkoutLogin.createAccount" dusk="create_account">
<x-rapidez::input.checkbox v-model="checkoutLogin.createAccount" dusk="create_account">
@lang('Create an account')
</x-rapidez-ct::input.checkbox>
</x-rapidez::input.checkbox>
</div>
</template>

<x-rapidez-ct::button.accent type="button" v-on:click="checkoutLogin.go" v-if="checkoutLogin.isEmailAvailable && checkoutLogin.createAccount" dusk="register">
<x-rapidez::button.primary type="button" v-on:click="checkoutLogin.go" v-if="checkoutLogin.isEmailAvailable && checkoutLogin.createAccount" dusk="register">
@lang('Register')
</x-rapidez-ct::button.accent>
<x-rapidez-ct::button.accent type="button" v-on:click="checkoutLogin.go" v-if="!checkoutLogin.isEmailAvailable" dusk="register">
</x-rapidez::button.primary>
<x-rapidez::button.primary type="button" v-on:click="checkoutLogin.go" v-if="!checkoutLogin.isEmailAvailable" dusk="register">
@lang('Login')
</x-rapidez-ct::button.accent>
</x-rapidez::button.primary>
</fieldset>
</checkout-login>
2 changes: 1 addition & 1 deletion resources/views/checkout/partials/sections/payment/agreement-checkbox.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
dusk="agreements"
required
>
<label class="text-ct-neutral cursor-pointer text-sm underline" v-bind:for="agreement.checkbox_text">
<label class="cursor-pointer text-sm underline" v-bind:for="agreement.checkbox_text">
@{{ agreement.checkbox_text }}
</label>
</x-rapidez-ct::input.checkbox>
4 changes: 2 additions & 2 deletions resources/views/checkout/partials/sections/success/create-account-button.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
<x-rapidez-ct::button.primary class="self-end justify-self-start" loader>
<x-rapidez::button.primary class="self-end justify-self-start" loader>
@lang('Create account')
</x-rapidez-ct::button.primary>
</x-rapidez::button.primary>
2 changes: 1 addition & 1 deletion resources/views/checkout/partials/sections/success/create-account-title.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
<p class="text-base text-ct-inactive font-medium">
<p class="text-base text-muted font-medium">
@lang('Register account')
</p>
4 changes: 2 additions & 2 deletions resources/views/checkout/partials/sections/success/logged-in.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<x-rapidez-ct::title.lg>
@lang('Already logged in')
</x-rapidez-ct::title.lg>
<x-rapidez-ct::button.primary class="mt-5" href="{{ route('account.overview') }}">
<x-rapidez::button.primary class="mt-5" href="{{ route('account.overview') }}">
@lang('Go to your account')
</x-rapidez-ct::button.primary>
</x-rapidez::button.primary>
2 changes: 1 addition & 1 deletion resources/views/checkout/partials/sections/success/order-completed-note.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<p class="text-base text-ct-neutral font-medium">
<p class="text-base font-medium">
@lang('We will get to work for you right away')
</p>
<p class="mt-2 text-sm">
Expand Down
4 changes: 2 additions & 2 deletions resources/views/checkout/partials/sections/success/order-info.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
</checkout-success-addresses>
<div class="flex flex-1 border-t border-dashed justify-between pt-5 mt-6">
<div class="flex-1">
<p class="text-ct-neutral text-base font-medium mb-2.5 pr-8">
<p class="text-base font-medium mb-2.5 pr-8">
@lang('Payment method')
</p>
<div class="flex flex-1 flex-wrap justify-between">
Expand All @@ -28,7 +28,7 @@
</div>
</div>
<div class="flex-1">
<p class="text-ct-neutral text-base font-medium mb-2.5 pr-8">
<p class="text-base font-medium mb-2.5 pr-8">
@lang('Delivery method')
</p>
<div class="flex flex-1 flex-wrap justify-between">
Expand Down
2 changes: 1 addition & 1 deletion resources/views/checkout/partials/sections/success/product-quantity.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<div class="flex items-center justify-between gap-10 font-medium max-md:flex-1 md:ml-auto">
<div class="h-12 w-16 border flex items-center rounded-md justify-center text-ct-neutral ring ring-ct-inactive-100 text-base">
<div class="h-12 w-16 border flex items-center rounded-md justify-center ring ring-background text-base">
jordythevulder marked this conversation as resolved.
Show resolved Hide resolved
@{{ Math.round(item.quantity_ordered) }}
</div>
</div>
6 changes: 3 additions & 3 deletions resources/views/checkout/partials/sections/success/products.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<div class="!pt-0">
<p class="text-base font-medium text-inactive mb-4">@lang('You ordered this'):</p>
<p class="text-base font-medium text-muted mb-4">@lang('You ordered this'):</p>
<ul class="flex flex-col divide-y divide-dashed first:*:pt-0 last:*:pb-0">
<li v-for="(item, productId, index) in order.items" class="flex py-5">
<div class="flex w-full flex-wrap gap-y-3 gap-x-3 text-sm md:gap-x-6 lg:items-start">
Expand All @@ -16,10 +16,10 @@ class="max-h-24"
<div class="flex flex-1 flex-wrap justify-between gap-x-6 items-start">
<div class="flex-1">
<a class="font-medium" :href="item.url" dusk="cart-item-name">@{{ item.product_name }}</a>
<div v-for="option in item.selected_options" class="text-inactive">
<div v-for="option in item.selected_options" class="text-muted">
@{{ option.label }}: @{{ option.value }}
</div>
<div v-for="option in item.entered_options" class="text-inactive">
<div v-for="option in item.entered_options" class="text-muted">
@{{ option.label }}: @{{ option.value }}
</div>
</div>
Expand Down
Loading
Loading