Merge pull request #175 from jordythevulder/improve-frontend

Improve frontend
rapidez · Dec 13, 2022 · 8549e95 · 8549e95
2 parents 0016f38 + a2d85db
commit 8549e95
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 30 deletions.
diff --git a/resources/css/theme-variables.css b/resources/css/theme-variables.css
@@ -1,4 +1,8 @@
 :root {
-    --primary: #15803d;
-    --secondary: #9ca3af;
+    --primary: #334155;
+    --secondary: #64748b;
+    --accent: #0ea5e9;
+    --enhanced: #f97316;
+    --highlight: #e2e8f0;
+    --border: #f1f5f9;
 }
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
@@ -15,10 +15,10 @@
 
     @stack('head')
 </head>
-<body class="bg-white antialiased">
+<body class="text-primary antialiased">
     <div id="app">
         @include('rapidez::layouts.partials.header')
-        <main class="mx-5">
+        <main>
             @yield('content')
         </main>
         @include('rapidez::layouts.partials.footer')

diff --git a/resources/views/layouts/partials/header.blade.php b/resources/views/layouts/partials/header.blade.php
@@ -1,29 +1,31 @@
-<header class="flex flex-wrap items-center mb-5 border-b shadow {{ Route::currentRouteName() == 'checkout' ? 'justify-between' : '' }}">
-    <div class="w-1/6 sm:w-3/12">
-        <div class="text-xl sm:text-3xl ml-3">
-            <a href="/" aria-label="@lang('Go to home')">
-                <span class="hidden sm:inline">
-                    <img src="https://raw.githubusercontent.com/rapidez/art/master/logo.svg" height="48" width="152" alt="">
-                </span>
-                <span class="inline sm:hidden">🚀</span>
-            </a>
+<header class="mb-5 border-b shadow {{ Route::currentRouteName() == 'checkout' ? 'justify-between' : '' }}">
+    <div class="container flex flex-wrap items-center">
+        <div class="w-1/6 sm:w-3/12">
+            <div class="text-xl sm:text-3xl ml-3">
+                <a href="/" aria-label="@lang('Go to home')">
+                    <span class="hidden sm:inline">
+                        <img src="https://raw.githubusercontent.com/rapidez/art/master/logo.svg" height="48" width="152" alt="">
+                    </span>
+                    <span class="inline sm:hidden">🚀</span>
+                </a>
+            </div>
         </div>
-    </div>
-    @if(Route::currentRouteName() !== 'checkout')
-        <div class="w-6/12 h-12 flex items-center">
-            @include('rapidez::layouts.partials.header.autocomplete')
+        @if(Route::currentRouteName() !== 'checkout')
+            <div class="w-6/12 h-12 flex items-center">
+                @include('rapidez::layouts.partials.header.autocomplete')
+            </div>
+        @endif
+        <div class="w-1/3 sm:w-1/4 flex justify-end pr-3">
+            @include('rapidez::layouts.partials.header.account')
+            @if(Route::currentRouteName() !== 'checkout')
+                @include('rapidez::layouts.partials.header.minicart')
+            @endif
         </div>
-    @endif
-    <div class="w-1/3 sm:w-1/4 flex justify-end pr-3">
-        @include('rapidez::layouts.partials.header.account')
         @if(Route::currentRouteName() !== 'checkout')
-            @include('rapidez::layouts.partials.header.minicart')
+            <nav class="w-full">
+                {{-- Because the lack of an @includeIf or @includeWhen equivalent for Blade components we're using a placeholder --}}
+                <x-dynamic-component :component="App::providerIsLoaded('Rapidez\Menu\MenuServiceProvider') ? 'menu' : 'placeholder'" />
+            </nav>
         @endif
     </div>
-    @if(Route::currentRouteName() !== 'checkout')
-        <nav class="w-full">
-            {{-- Because the lack of an @includeIf or @includeWhen equivalent for Blade components we're using a placeholder --}}
-            <x-dynamic-component :component="App::providerIsLoaded('Rapidez\Menu\MenuServiceProvider') ? 'menu' : 'placeholder'" />
-        </nav>
-    @endif
 </header>
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -16,9 +16,22 @@ module.exports = {
     theme: {
         extend: {
             colors: {
-                primary: 'var(--primary)',
-                secondary: 'var(--secondary)',
-            }
+                primary: 'var(--primary)', // Text color
+                secondary: 'var(--secondary)', // Text inactive color
+                accent: 'var(--accent)', // Theme color
+                enhanced: 'var(--enhanced)', // Checkout conversion color
+                highlight: 'var(--highlight)' // Background highlight color
+            },
+            borderColor: {
+                DEFAULT: 'var(--border)'
+            },
+        },
+        fontFamily: {
+            sans: ['Arial', 'sans-serif']
+        },
+        container: {
+            center: true,
+            padding: '1.25rem',
         }
     },
     plugins: [