Changed breakpoints for smaller screens (#124)

resources/views/account/partials/address-cards.blade.php

@@ -1,7 +1,7 @@
 <x-rapidez-ct::title.lg>
     @lang('My addresses')
 </x-rapidez-ct::title.lg>
-<div class="grid gap-5 sm:grid-cols-2 my-5">
+<div class="grid gap-5 md:grid-cols-2 my-5">
     <template v-if="data.customer.shipping_address?.default_billing || !data.customer.shipping_address || !data.customer.billing_address">
         <template v-if="data.customer.shipping_address || data.customer.billing_address">
             <x-rapidez-ct::card.address v-bind:address="data.customer.shipping_address ?? data.customer.billing_address" shipping billing check>
@@ -10,7 +10,7 @@
                 </x-rapidez-ct::button.link>
             </x-rapidez-ct::card.address>
         </template>
-        <a href="/account/address/new" class="min-h-[180px] flex flex-col items-center justify-center gap-y-2 font-medium bg-ct-disabled rounded max-sm:hidden">
+        <a href="/account/address/new" class="min-h-[180px] flex flex-col items-center justify-center gap-y-2 font-medium bg-ct-disabled rounded max-md:hidden">
             <span>+</span>
             <span>@lang('Add new address')</span>
         </a>

resources/views/account/partials/register-account.blade.php

@@ -26,7 +26,7 @@
                 </x-rapidez-ct::title.lg>
                 <form 
                     id="register" 
-                    class="grid gap-5 sm:grid-cols-2"
+                    class="grid gap-5 md:grid-cols-2"
                     @if(config('rapidez.checkout-theme.register.create-address'))
                         v-on:submit.prevent="window.document.getElementById('register-address').reportValidity() && mutate()"
                     @else

resources/views/cart/partials/product/image.blade.php

@@ -1,4 +1,4 @@
-<td class="h-24 w-40 !pl-0 max-md:flex max-md:w-1/2">
+<td class="h-24 w-32 !pl-0 max-md:flex max-md:w-1/2">
     <img v-if="item.product.image" class="object-contain" :alt="item.product.name" :src="'/storage/{{ config('rapidez.store') }}/resizes/200/magento' + item.product.image.url.replace(config.media_url, '') + '.webp'">
     <x-rapidez::no-image v-else />
 </td>

resources/views/checkout/partials/address-cards.blade.php

@@ -1,4 +1,4 @@
-<div class="grid gap-5 sm:grid-cols-2">
+<div class="grid gap-5 md:grid-cols-2">
     <template v-if="billingAndShippingAreTheSame">
         <x-rapidez-ct::card.address v-bind:address="checkout.shipping_address" shipping billing check>
             <x-rapidez-ct::button.link v-on:click.prevent="toggleEdit">

resources/views/checkout/partials/buttons/address.blade.php

@@ -1,4 +1,4 @@
-<div class="mt-5">
+<div class="flex flex-wrap gap-3 mt-5">
     <x-rapidez-ct::button.accent v-on:click.prevent="toggleEdit">
         @lang('Use a new address')
     </x-rapidez-ct::button.accent>

resources/views/checkout/partials/buttons/new-address.blade.php

@@ -1,4 +1,4 @@
-<button v-on:click.prevent="toggleEdit" class="flex flex-col items-center justify-center gap-y-2 font-medium bg-ct-disabled rounded max-sm:hidden">
+<button v-on:click.prevent="toggleEdit" class="flex flex-col items-center justify-center gap-y-2 font-medium bg-ct-disabled rounded max-md:hidden">
     <span>+</span>
     <span>@lang('Add new address')</span>
 </button>

resources/views/checkout/partials/sidebar/summary.blade.php

@@ -1,5 +1,5 @@
 <x-rapidez-ct::card class="relative">
-    <a href="{{ url('/') }}" class="absolute inset-x-0 bottom-full -translate-y-6 max-md:hidden [&>*]:h-auto [&>*]:max-h-20 [&>*]:w-full [&>*]:object-contain">
+    <a href="{{ url('/') }}" class="absolute inset-x-0 bottom-full -translate-y-6 max-lg:hidden [&>*]:h-auto [&>*]:max-h-20 [&>*]:w-full [&>*]:object-contain">
         <x-rapidez-ct::logo />
     </a>
     <x-rapidez-ct::title.lg class="mb-4">

resources/views/components/card/index.blade.php

@@ -1,4 +1,4 @@
-<div {{ $attributes->class('flex bg-ct-inactive-100 p-3 rounded md:w-[370px]') }}>
+<div {{ $attributes->class('flex bg-ct-inactive-100 p-3 rounded lg:w-[340px] xl:w-[370px]') }}>
     <x-rapidez-ct::card.white>
         {{ $slot }}
     </x-rapidez-ct::card.white>

resources/views/components/layout/index.blade.php

@@ -1,4 +1,4 @@
-<div {{ $attributes->class('text-ct-primary flex flex-wrap gap-x-8 text-sm max-md:flex-col') }}>
+<div {{ $attributes->class('text-ct-primary flex flex-wrap gap-x-8 text-sm max-lg:flex-col') }}>
     <div class="flex-1">
         {{ $slot }}
     </div>

resources/views/components/layout/sidebar.blade.php

@@ -1,3 +1,3 @@
-<div {{ $attributes->class('mt-10 space-y-5 md:mt-[52px] md:w-[370px]') }}>
+<div {{ $attributes->class('mt-10 space-y-5 lg:mt-[52px] lg:w-[340px] xl:w-[370px]') }}>
     {{ $slot }}
 </div>

resources/views/components/layout/two-column.blade.php

@@ -1,6 +1,6 @@
 <div {{ $attributes->class('flex flex-col mx-auto max-w-4xl w-full') }}>
     {{ $slot }}
-    <div class="mt-5 grid content-center items-start gap-8 sm:grid-cols-2">
+    <div class="mt-5 grid content-center items-start gap-8 lg:grid-cols-2">
         {{ $columns }}
     </div>
 </div>

resources/views/components/title/base.blade.php

@@ -1,7 +1,7 @@
 @props(['tag' => ($isAnchor = $attributes->filter(null)->hasAny('href', ':href', 'v-bind:href')) ? 'a' : 'p'])
 <x-tag is="{{ $tag }}" {{ $attributes->class('font-medium relative group') }}>
     @if ($isAnchor)
-        <x-heroicon-o-arrow-left class="lg:absolute max-lg:mb-5 left-0 top-1/2 h-4 lg:-translate-x-full lg:-translate-y-1/2 lg:pr-6 text-ct-inactive group-hover:text-ct-primary transition" />
+        <x-heroicon-o-arrow-left class="xl:absolute max-xl:mb-5 left-0 top-1/2 h-4 xl:-translate-x-full xl:-translate-y-1/2 xl:pr-6 text-ct-inactive group-hover:text-ct-primary transition" />
     @endif
     {{ $slot }}
 </x-tag>