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

Frontend colors suggestion change #651

Closed
Closed
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
4 changes: 2 additions & 2 deletions resources/css/app.css
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
@import 'components/vue-slider';
@import 'components/price-slider';
@import './theme-variables.css';
@import './components/pagination.css';
@import 'components/pagination';
Roene-JustBetter marked this conversation as resolved.
Show resolved Hide resolved
@import './theme-variables';

@tailwind base;
@tailwind components;
Expand Down
2 changes: 1 addition & 1 deletion resources/css/components/pagination.css
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
}

.pagination-button {
@apply !font-semibold !font-sans !border !border-border !rounded !bg-white !text-neutral !shadow;
@apply !font-semibold !font-sans !border !border-neutral-110 !rounded !bg-white !text-neutral !shadow;
}

.pagination-button.active {
Expand Down
6 changes: 3 additions & 3 deletions resources/css/components/price-slider.css
Original file line number Diff line number Diff line change
Expand Up @@ -8,15 +8,15 @@ div.vue-slider-rail {
}

div.vue-slider-rail {
@apply bg-highlight !important;
@apply bg-neutral-100 !important;
}

div.vue-slider .vue-slider-dot {
@apply size-6 !important;
}

div.vue-slider-dot-tooltip-inner {
@apply bg-white text-neutral border-border border px-1.5 !important;
@apply bg-white text-neutral border-neutral-110 border px-1.5 !important;
}

span.vue-slider-dot-tooltip-text {
Expand All @@ -28,7 +28,7 @@ div.vue-slider-dot-tooltip::before {
}

div.vue-slider-dot .vue-slider-dot-handle {
@apply border border-border shadow;
@apply border border-neutral-110 shadow;
}

div.vue-slider-tooltip-wrap.vue-slider-tooltip-top {
Expand Down
6 changes: 4 additions & 2 deletions resources/css/theme-variables.css
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,9 @@
--secondary: 249 115 22;
--secondary-text: 255 255 255;
--neutral: 51 65 85;
--neutral-100: 241 245 249;
--neutral-110: 231 235 239;
--enhanced: 54 180 34;
--enhanced-text: 255 255 255;
--inactive: 100 116 139;
--highlight: 241 245 249;
--border: 231 235 239;
}
2 changes: 1 addition & 1 deletion resources/views/cart/coupon.blade.php
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<div class="bg-white rounded-lg border p-3">
<h3 class="text-lg leading-6 font-medium text-gray-900 mb-5">
<h3 class="text-lg leading-6 font-medium mb-5">
@lang('Apply coupon code')
</h3>

Expand Down
4 changes: 2 additions & 2 deletions resources/views/cart/sidebar.blade.php
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,6 @@
</div>
</dl>

<x-rapidez::button href="{{ route('checkout') }}" dusk="checkout" class="w-full text-center">
<x-rapidez::button.enhanced href="{{ route('checkout') }}" dusk="checkout" class="w-full text-center">
@lang('Checkout')
</x-rapidez::button>
</x-rapidez::button.enhanced>
6 changes: 3 additions & 3 deletions resources/views/checkout/pages/credentials.blade.php
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
@include('rapidez::checkout.partials.progressbar')
<div v-if="hasCart" v-cloak>
<div class="flex gap-5 max-xl:flex-col">
<div class="w-full rounded bg-highlight p-4 xl:p-8 xl:w-3/4">
<div class="w-full rounded bg-neutral-100 p-4 xl:p-8 xl:w-3/4">
<form
v-on:submit.prevent="(e) => {
submitPartials(e.target?.form ?? e.target)
Expand All @@ -33,9 +33,9 @@ class="flex flex-col gap-5"
@include('rapidez::checkout.steps.shipping_method')
</template>

<x-rapidez::button type="submit" dusk="continue" class="self-start">
<x-rapidez::button.enhanced type="submit" dusk="continue" class="self-start">
@lang('Next')
</x-rapidez::button>
</x-rapidez::button.enhanced>
</form>
</div>
<div class="w-full xl:w-1/4">
Expand Down
4 changes: 2 additions & 2 deletions resources/views/checkout/pages/login.blade.php
Original file line number Diff line number Diff line change
Expand Up @@ -20,9 +20,9 @@ class="max-w-md mx-auto"
>
@include('rapidez::checkout.steps.login')

<x-rapidez::button type="submit" dusk="continue" class="mt-3">
<x-rapidez::button.enhanced type="submit" dusk="continue" class="mt-3">
@lang('Next')
</x-rapidez::button>
</x-rapidez::button.enhanced>
</form>
</div>
@endsection
2 changes: 1 addition & 1 deletion resources/views/checkout/pages/onestep.blade.php
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
@section('content')
<div class="container">
<div v-if="hasCart" class="flex gap-5 max-xl:flex-col" v-cloak>
<div class="w-full bg-highlight rounded p-4 xl:p-8 xl:w-3/4">
<div class="w-full bg-neutral-100 rounded p-4 xl:p-8 xl:w-3/4">
<form class="grid gap-5 lg:grid-cols-2" v-on:submit.prevent="(e) => {
submitPartials(e.target?.form ?? e.target)
.then((result) =>
Expand Down
2 changes: 1 addition & 1 deletion resources/views/checkout/pages/payment.blade.php
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
@include('rapidez::checkout.partials.progressbar')
<div v-if="hasCart" v-cloak>
<div class="flex gap-5 max-xl:flex-col">
<form class="w-full rounded bg-highlight h-fit p-4 xl:p-8 xl:w-3/4" v-on:submit.prevent="(e) => {
<form class="w-full rounded bg-neutral-100 h-fit p-4 xl:p-8 xl:w-3/4" v-on:submit.prevent="(e) => {
submitPartials(e.target?.form ?? e.target)
.then((result) =>
window.app.$emit('checkout-payment-saved')
Expand Down
4 changes: 2 additions & 2 deletions resources/views/checkout/steps/agreements.blade.php
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
</x-rapidez::slideover>

@if ($agreement->mode == 'AUTO')
<label class="text-gray-700 cursor-pointer underline hover:no-underline" for="{{ $agreement->agreement_id }}_agreement">
<label class="cursor-pointer underline hover:no-underline" for="{{ $agreement->agreement_id }}_agreement">
{{ $agreement->checkbox_text }}
</label>
@else
Expand All @@ -32,7 +32,7 @@
dusk="agreements"
required
>
<label class="text-gray-700 cursor-pointer underline hover:no-underline" for="{{ $agreement->agreement_id }}_agreement">
<label class="cursor-pointer underline hover:no-underline" for="{{ $agreement->agreement_id }}_agreement">
{{ $agreement->checkbox_text }}
</label>
</x-rapidez::checkbox>
Expand Down
6 changes: 3 additions & 3 deletions resources/views/checkout/steps/credentials.blade.php
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<h1 class="mb-5 text-4xl font-bold">@lang('Credentials')</h1>

<form v-on:submit.prevent="save(['credentials'], 3)" class="flex flex-col gap-5 rounded bg-highlight p-4 md:p-8">
<form v-on:submit.prevent="save(['credentials'], 3)" class="flex flex-col gap-5 rounded bg-neutral-100 p-4 md:p-8">
<div class="flex flex-col gap-2">
<div class="grid grid-cols-12 gap-4">
<p class="col-span-12 text-2xl font-bold">
Expand Down Expand Up @@ -31,7 +31,7 @@
</x-rapidez::radio>
</template>
</div>
<x-rapidez::button type="submit" dusk="continue" class="self-start">
<x-rapidez::button.enhanced type="submit" dusk="continue" class="self-start">
@lang('Continue')
</x-rapidez::button>
</x-rapidez::button.enhanced>
</form>
6 changes: 3 additions & 3 deletions resources/views/checkout/steps/payment.blade.php
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
@php($checkoutAgreements = \Rapidez\Core\Models\CheckoutAgreement::all())

<h1 class="font-bold text-4xl mb-5">@lang('Payment method')</h1>
<form class="bg-highlight p-8 rounded mt-6" v-on:submit.prevent="save(['payment_method'], 4)">
<form class="bg-neutral-100 p-8 rounded mt-6" v-on:submit.prevent="save(['payment_method'], 4)">
<div class="my-2 border bg-white p-4 rounded" v-for="(method, index) in checkout.payment_methods">
<x-rapidez::radio
v-bind:value="method.code"
Expand Down Expand Up @@ -62,7 +62,7 @@ class="ml-auto size-8"
</div>
@endif

<x-rapidez::button type="submit" class="mt-5" dusk="continue">
<x-rapidez::button.enhanced type="submit" class="mt-5" dusk="continue">
@lang('Place order')
</x-rapidez::button>
</x-rapidez::button.enhanced>
</form>
4 changes: 2 additions & 2 deletions resources/views/checkout/steps/place_order.blade.php
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,8 @@
v-slot="{ mutate, variables }"
>
<fieldset>
<x-rapidez::button type="submit" dusk="continue" class="mt-3">
<x-rapidez::button.enhanced type="submit" dusk="continue" class="mt-3">
@lang('Place order')
</x-rapidez::button>
</x-rapidez::button.enhanced>
</fieldset>
</graphql-mutation>
10 changes: 5 additions & 5 deletions resources/views/checkout/steps/success.blade.php
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<template slot-scope="{ order, refreshOrder, hideBilling, shipping, billing, items }">
<div v-if="order" dusk="checkout-success" class="container" v-cloak>
<h1 class="font-bold text-4xl mb-5">@lang('Order placed succesfully')</h1>
<div class="bg-highlight rounded p-8">
<div class="bg-neutral-100 rounded p-8">
<p>@lang('We will get to work for you right away')</p>
<p>@lang('We will send a confirmation of your order to') <span class="font-bold">@{{ order.email }}</span></p>
<p>@lang('Your order is currently:') <span class="font-bold">@{{ order.status }}</span> <a class="inline-block" href="#" v-on:click.prevent="(e) => {e.target.classList.add('animate-spin'); refreshOrder().finally(() => e.target.classList.remove('animate-spin'))}">&#8635;</a></p>
Expand Down Expand Up @@ -44,7 +44,7 @@ class="mx-auto"
</div>
</div>
<div class="flex flex-col mt-4 gap-x-4 md:flex-row">
<div class="w-full p-8 bg-highlight rounded border-l-2 border-neutral md:w-1/2" v-if="order.billing_address">
<div class="w-full p-8 bg-neutral-100 rounded border-l-2 border-neutral md:w-1/2" v-if="order.billing_address">
<p class="text-neutral font-lg font-bold mb-2">@lang('Billing address')</p>
<ul>
<li>@{{ order.billing_address.firstname }} @{{ order.billing_address.lastname }}</li>
Expand All @@ -53,7 +53,7 @@ class="mx-auto"
<li>@{{ order.billing_address.telephone }}</li>
</ul>
</div>
<div class="w-full p-8 bg-highlight rounded border-l-2 border-neutral mt-4 md:mt-0 md:w-1/2" v-if="order.shipping_address">
<div class="w-full p-8 bg-neutral-100 rounded border-l-2 border-neutral mt-4 md:mt-0 md:w-1/2" v-if="order.shipping_address">
<p class="text-neutral font-lg font-bold mb-2">@lang('Shipping address')</p>
<ul>
<li>@{{ order.shipping_address.firstname }} @{{ order.shipping_address.lastname }}</li>
Expand All @@ -65,11 +65,11 @@ class="mx-auto"
</div>

<div class="flex flex-col mt-4 gap-x-4 md:flex-row">
<div class="w-full p-8 bg-highlight rounded border-l-2 border-neutral md:w-1/2" v-if="order.shipping_method">
<div class="w-full p-8 bg-neutral-100 rounded border-l-2 border-neutral md:w-1/2" v-if="order.shipping_method">
<p class="text-neutral font-lg font-bold mb-2">@lang('Shipping method')</p>
<p>@{{ order.shipping_method }}</p>
</div>
<div class="w-full p-8 bg-highlight rounded border-l-2 border-neutral mt-4 md:mt-0 md:w-1/2">
<div class="w-full p-8 bg-neutral-100 rounded border-l-2 border-neutral mt-4 md:mt-0 md:w-1/2">
<p class="text-neutral font-lg font-bold mb-2">@lang('Payment method')</p>
<p v-for="method in order.payment_methods">@{{ method.name || method.type }}</p>
</div>
Expand Down
2 changes: 1 addition & 1 deletion resources/views/components/breadcrumb.blade.php
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
<span itemprop="name">{{ $slot }}</span>
<meta itemprop="position" content="{{ $position }}" />
</a>
<x-heroicon-s-chevron-right class="h-4 w-4 text-gray-400"/>
<x-heroicon-s-chevron-right class="h-4 w-4 text-inactive"/>
@else
<span class="text-sm" itemprop="name">{{ $slot }}</span>
<meta itemprop="position" content="{{ $position }}" />
Expand Down
4 changes: 2 additions & 2 deletions resources/views/components/button/cart.blade.php
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<x-rapidez::button {{ $attributes->merge([
<x-rapidez::button.enhanced {{ $attributes->merge([
'type' => 'submit',
'dusk' => 'add-to-cart',
])->class('flex items-center') }}>
Expand All @@ -8,4 +8,4 @@
<span v-if="!addToCart.adding && !addToCart.added">@lang('Add to cart')</span>
<span v-if="addToCart.adding" v-cloak>@lang('Adding')...</span>
<span v-if="addToCart.added" v-cloak>@lang('Added')</span>
</x-rapidez::button>
</x-rapidez::button.enhanced>
3 changes: 3 additions & 0 deletions resources/views/components/button/enhanced.blade.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
<x-rapidez::button.base {{ $attributes->class('bg-enhanced text-enhanced-text') }}>
{{ $slot }}
</x-rapidez::button.base>
2 changes: 1 addition & 1 deletion resources/views/components/checkbox.blade.php
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<label class="flex items-center">
<input type="checkbox" {{ $attributes->merge(['class' => 'focus:ring-neutral h-4 w-4 text-neutral border rounded']) }}>
<input type="checkbox" {{ $attributes->merge(['class' => 'focus:ring-neutral size-4 text-neutral border border-neutral-110 rounded']) }}>
<div class="ml-2 text-neutral">
{{ $slot }}
</div>
Expand Down
2 changes: 1 addition & 1 deletion resources/views/components/input.blade.php
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
'type' => 'text',
'placeholder' => __($placeholder ?? ''),
'dusk' => $attributes->get('v-bind:dusk') ? null : $name,
'class' => 'w-full py-2 px-3 border-border rounded !ring-0 focus:!border-inactive sm:text-sm text-neutral',
'class' => 'w-full py-2 px-3 border border-neutral-110 rounded !ring-0 focus:!border-inactive sm:text-sm',
]) }}
>
</div>
4 changes: 2 additions & 2 deletions resources/views/components/radio.blade.php
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<label class="flex items-center">
<input type="radio" {{ $attributes->merge(['class' => 'focus:ring-neutral h-4 w-4 text-neutral border']) }}>
<div class="ml-2 text-gray-700">
<input type="radio" {{ $attributes->merge(['class' => 'focus:ring-neutral text-neutral size-4 border border-neutral-110']) }}>
<div class="ml-2">
{{ $slot }}
</div>
</label>
2 changes: 1 addition & 1 deletion resources/views/components/select.blade.php
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
'id' => $name ?? null,
'name' => $name ?? null,
'dusk' => $attributes->get('v-bind:dusk') ? null : $name ?? null,
'class' => 'w-full py-2 pl-3 pr-8 border-gray-200 rounded focus:ring-neutral focus:border-neutral sm:text-sm'
'class' => 'w-full py-2 pl-3 pr-8 border border-neutral-110 rounded outline-0 ring-0 focus:ring-transparent focus:border-neutral sm:text-sm'
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

border-neutral-110 shouldn't be necessary since it's set by default on the "border" class

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It is necessary to set de border color here, we are using tailwindForms. This plugin sets a default border color on input components, so we need to add the border-neutral-110 here.

Scherm­afbeelding 2024-11-19 om 11 43 43

]) }}>
{{ $slot }}
</select>
Expand Down
2 changes: 1 addition & 1 deletion resources/views/components/textarea.blade.php
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,6 @@
'name' => $name,
'placeholder' => __($placeholder ?? ucfirst($name)),
'dusk' => $attributes->get('v-bind:dusk') ? null : $name,
'class' => 'w-full py-2 px-3 border-border rounded !ring-0 focus:!border-inactive sm:text-sm text-neutral',
'class' => 'w-full py-2 px-3 border border-neutral-110 rounded !ring-0 focus:!border-inactive sm:text-sm text-neutral',
]) }}></textarea>
</div>
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
<p class="text-base text-gray-400 md:order-1">
<p class="text-base text-inactive md:order-1">
&copy; {{ date('Y') }} {{ config('app.name') }}. @lang('All rights reserved.')
</p>
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
<lazy>
<graphql-mutation query="mutation visitor ($email: String!) { subscribeEmailToNewsletter(email: $email) { status } }" :alert="false" :clear="true">
<div slot-scope="{ mutate, variables, mutated, error }">
<p v-if="mutated" class="text-neutral text-xl font-bold" v-cloak>
<p v-if="mutated" class="text-xl font-bold" v-cloak>
@lang('Thank you for subscribing!')
</p>
<div v-else>
Expand All @@ -15,7 +15,7 @@
name="email"
type="email"
v-model="variables.email"
class="w-full min-w-0 appearance-none rounded-md border h-10 border-text-inactive bg-white py-2 px-4 text-base text-gray-900 placeholder-text-neutral shadow-sm focus:border-indigo-500 focus:placeholder-gray-400 focus:outline-none focus:ring-indigo-500"
class="w-full min-w-0 appearance-none rounded-md border h-10 bg-white py-2 px-4 text-base placeholder-text-neutral shadow-sm focus:placeholder-inactive focus:outline-none"
wrapperClass="flex-grow"
dusk="newsletter-email"
autocomplete="email"
Expand Down
6 changes: 3 additions & 3 deletions resources/views/layouts/partials/header/minicart.blade.php
Original file line number Diff line number Diff line change
Expand Up @@ -17,12 +17,12 @@
</tr>
</table>
<div class="flex justify-between items-center">
<x-rapidez::button.outline href="{{ route('cart') }}" class="mr-5">
<x-rapidez::button.outline href="{{ route('cart') }}" class="mr-5 whitespace-nowrap">
@lang('Show cart')
</x-rapidez::button.outline>
<x-rapidez::button href="{{ route('checkout') }}">
<x-rapidez::button.enhanced href="{{ route('checkout') }}">
@lang('Checkout')
</x-rapidez::button>
</x-rapidez::button.enhanced>
</div>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion resources/views/listing/partials/filter/swatch.blade.php
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
:component-id="filter.code"
:data-field="filter.super ? 'super_' + filter.code : (filter.visual_swatch ? 'visual_' + filter.code : filter.code)"
:inner-class="{
title: 'capitalize text-sm font-medium text-gray-900',
title: 'capitalize text-sm font-medium',
}"
:react="{and: filter.input == 'multiselect' ? reactiveFilters : reactiveFilters.filter(item => item != filter.code) }"
:query-format="filter.input == 'multiselect' ? 'and' : 'or'"
Expand Down
2 changes: 1 addition & 1 deletion resources/views/listing/partials/item.blade.php
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ class="mb-3 h-48 w-full rounded-t object-contain" :alt="item.name" :loading="con
/>
<x-rapidez::no-image v-else class="mb-3 h-48 rounded-t" />
<div class="px-2">
<div class="text-base font-medium text-gray-900">@{{ item.name }}</div>
<div class="text-base font-medium">@{{ item.name }}</div>
@if (!Rapidez::config('catalog/frontend/show_swatches_in_product_list', 1))
<div class="flex items-center space-x-2">
<div class="font-semibold">@{{ (item.special_price || item.price) | price }}</div>
Expand Down
2 changes: 1 addition & 1 deletion resources/views/listing/products.blade.php
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
@php $dropdownClasses = '!h-auto !border-solid !border !border-border !rounded !py-2 !ring-0 focus:!border-inactive !text-sm !text-neutral !outline-none ' @endphp
@php $dropdownClasses = '!h-auto !border-solid !border !border-neutral-110 !rounded !py-2 !ring-0 focus:!border-inactive !text-sm !text-neutral !outline-none ' @endphp
<reactive-list
id="products"
component-id="products"
Expand Down
4 changes: 2 additions & 2 deletions resources/views/product/overview.blade.php
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@
</div>
<div>
<div class="mb-2 border-t pt-5 text-lg font-bold">@lang('Specifications')</div>
<dl class="flex flex-col text-inactive [&>dd]:rounded [&>dd]:p-2 odd:[&>dd]:bg-highlight odd:[&>dd]:font-semibold odd:[&>dd]:text-neutral even:[&>dd]:pl-4">
<dl class="flex flex-col text-inactive [&>dd]:rounded [&>dd]:p-2 odd:[&>dd]:bg-neutral-100 odd:[&>dd]:font-semibold odd:[&>dd]:text-neutral even:[&>dd]:pl-4">
<dd>ID</dd>
<dd>{{ $product->entity_id }}</dd>
<dd>SKU</dd>
Expand All @@ -52,7 +52,7 @@
</div>
</div>
@if (App::providerIsLoaded('Rapidez\Reviews\ReviewsServiceProvider'))
<div class="my-5 py-8 bg-highlight min-h-[515px]">
<div class="my-5 py-8 bg-neutral-100 min-h-[515px]">
<div class="container grid w-full grid-cols-1 gap-5 p-5 md:grid-cols-3">
@include('rapidez-reviews::form', ['sku' => $product->sku])
<div class="md:col-span-2">
Expand Down
Loading
Loading