#2 - ui fixes to login page

readme.md

@@ -62,7 +62,7 @@ If xDebug is installed, set environment variable **XDEBUG_MODE=off** to improve
       dcr php php vendor/bin/ecs check --fix
       dcr php composer ecsf
       dcr node npm run lint
-      dcr node rpm run lintf
+      dcr node npm run lintf
 
 ### xDebug
 

resources/js/Pages/Login.vue

@@ -1,17 +1,53 @@
 <template>
+    <transition
+        enter-active-class="transform ease-out duration-300 transition"
+        enter-from-class="translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2"
+        enter-to-class="translate-y-0 opacity-100 sm:translate-x-0"
+        leave-active-class="transition ease-in duration-100"
+        leave-from-class="opacity-100"
+        leave-to-class="opacity-0"
+    >
+        <div
+            v-if="errors.oauth"
+            class="absolute inset-x-2 top-2 sm:mx-auto sm:w-full sm:max-w-md bg-red-500 shadow-lg rounded-lg pointer-events-auto ring-1 ring-black ring-opacity-5 overflow-hidden"
+        >
+            <div class="p-4">
+                <div class="flex items-center">
+                    <div class="w-0 flex-1 flex justify-between">
+                        <ExclamationIcon class="h-5 w-5 text-white" />
+                        <p class="w-0 flex-1 text-sm font-medium text-white">
+                            {{ errors.oauth }}
+                        </p>
+                    </div>
+                    <div class="ml-4 flex-shrink-0 flex">
+                        <button
+                            class="bg-red-500 rounded-md inline-flex text-red-100 hover:text-red-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blumilk-500"
+                            @click="errors.oauth = false"
+                        >
+                            <span class="sr-only">Close</span>
+                            <XIcon
+                                class="h-5 w-5"
+                                aria-hidden="true"
+                            />
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </transition>
     <div
         class="sm:mx-auto sm:w-full sm:max-w-md text-white space-y-4 flex flex-col items-center rounded-lg px-4 py-8"
     >
         <img
-            class="mx-auto h-12 w-auto"
+            class="mx-auto h-50 w-auto"
             src="img/logo.png"
             alt="Blumilk"
         >
         <a
             href="/login/google/start"
-            class="inline-flex justify-center py-2 px-4 border border-gray-300 rounded-md shadow-sm bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"
+            class="inline-flex justify-center py-2 px-6 rounded-md shadow-sm bg-blumilk-500 text-md font-medium text-white hover:bg-blumilk-700"
         >
-            Zaloguj się poprzez konto Google
+            Zaloguj się za pomocą Google
             <svg
                 class="w-5 h-5 ml-2"
                 fill="currentColor"
@@ -23,32 +59,19 @@
                 />
             </svg>
         </a>
-        <div
-            v-if="errors.oauth"
-            class="w-full rounded-md bg-red-100 border border-red-400 p-4"
-        >
-            <div class="flex">
-                <div class="flex-shrink-0">
-                    <XCircleIcon class="h-5 w-5 text-red-400" />
-                </div>
-                <div class="ml-3">
-                    <h3 class="text-sm font-medium text-red-800">
-                        {{ errors.oauth }}
-                    </h3>
-                </div>
-            </div>
-        </div>
     </div>
 </template>
 
 <script>
-import {XCircleIcon} from '@heroicons/vue/solid';
 import GuestLayout from '@/Shared/Layout/GuestLayout';
+import {XIcon} from '@heroicons/vue/solid';
+import {ExclamationIcon} from '@heroicons/vue/solid';
 
 export default {
     name: 'Login',
     components: {
-        XCircleIcon,
+        XIcon,
+        ExclamationIcon,
     },
     layout: GuestLayout,
     props: {

resources/js/Shared/Layout/GuestLayout.vue

@@ -1,5 +1,6 @@
+
 <template>
-    <div class="min-h-screen flex flex-col justify-center py-12 sm:px-6 lg:px-8">
+    <div class="min-h-screen flex flex-col justify-center py-12 sm:px-6 lg:px-8 bg-blumilk-25">
         <slot />
     </div>
 </template>

tailwind.config.js

@@ -11,6 +11,7 @@ module.exports = {
             },
             colors: {
                 'blumilk': {
+                    '25': '#F4F8FD',
                     '50': '#D5DFEE',
                     '100': '#C7D4E9',
                     '200': '#AABDDD',