UI real time chat

resources/sass/app.scss

@@ -4,88 +4,109 @@
 
 @tailwind utilities;
 
+
 button:focus, input:focus {
     @apply outline-none;
 }
 
-.btn{
+.chat-window {
+    @apply h-auto rounded-t-xl bg-cultured-100 shadow w-80 absolute bottom-0 right-0;
+}
+
+.chat-header {
+    @apply bg-viridiant-600 h-8 w-full flex rounded-t-xl shadow-md mb-4;
+}
+
+.chat-container {
+    @apply h-100 flex w-full bg-cultured-100;
+}
+
+.chat-footer {
+    @apply bg-viridiant-600 flex-row justify-center p-1 rounded-t-3xl w-full;
+}
+
+.chat-input {
+    @apply px-2 py-1 box-border text-sm bg-cultured-100 border border-cultured-700 rounded-full w-full;
+}
+
+.btn {
     @apply py-1 px-3 m-2 rounded-full appearance-none;
 }
 
-.btn-viridiant{
+.btn-viridiant {
     @apply text-cultured-100 bg-viridiant-600 border border-transparent;
 }
 
-.btn-viridiant:hover{
+.btn-viridiant:hover {
     @apply border border-viridiant-600 bg-cultured-100 text-viridiant-600;
 }
 
-.btn-viridiant-outline{
+.btn-viridiant-outline {
     @apply text-viridiant-600 border border-viridiant-600 bg-cultured-100;
 }
 
-.btn-viridiant-outline:hover{
+.btn-viridiant-outline:hover {
     @apply bg-viridiant-600 text-cultured-100;
 }
 
-.btn-orange-peel{
+.btn-orange-peel {
     @apply text-cultured-100 bg-orange-peel-600 border border-transparent;
 }
 
-.btn-orange-peel:hover{
+.btn-orange-peel:hover {
     @apply border border-orange-peel-600 bg-cultured-100 text-orange-peel-600;
 }
 
-.btn-orange-peel-outline{
+.btn-orange-peel-outline {
     @apply text-orange-peel-600 border border-orange-peel-600 bg-cultured-100;
 }
 
-.btn-orange-peel-outline:hover{
+.btn-orange-peel-outline:hover {
     @apply bg-orange-peel-600 text-cultured-100;
 }
 
-.btn-onyx{
+.btn-onyx {
     @apply text-cultured-100 bg-onyx-600 border border-transparent;
 }
 
-.btn-onyx:hover{
+.btn-onyx:hover {
     @apply border border-onyx-600 bg-cultured-100 text-onyx-600;
 }
 
-.btn-onyx-outline{
+.btn-onyx-outline {
     @apply text-onyx-600 border border-onyx-600 bg-cultured-100;
 }
 
-.btn-onyx-outline:hover{
+.btn-onyx-outline:hover {
     @apply bg-onyx-600 text-cultured-100;
 }
 
-.nav-bar-li{
+.nav-bar-li {
     @apply inline-flex;
 }
 
-.nav-bar-li a{
+.nav-bar-li a {
     @apply text-onyx-600 py-1 relative my-0 mx-1.5625;
 }
 
-.nav-bar-li a:hover{
+.nav-bar-li a:hover {
     @apply transition duration-900;
 }
 
-.nav-bar-li a:after{
+.nav-bar-li a:after {
     content : '';
     @apply origin-1/2 transform -translate-x-1/2 scale-x-0 bg-viridiant-600 w-full h-0.1875 left-1/2 transition duration-250 bottom-0 absolute;
 }
 
-.nav-bar-li a:hover:after{
+.nav-bar-li a:hover:after {
     @apply transform -translate-x-1/2 scale-x-100;
 }
 
-.search-bar{
+.search-bar {
     @apply bg-cultured-400 text-onyx-700 border border-onyx-200 rounded-full py-2 pl-10 pr-2 leading-tight;
 }
 
-.search-bar:focus{
+.search-bar:focus {
     @apply bg-cultured-100 border-onyx-500 w-full;
 }
 
@@ -102,6 +123,22 @@ button:focus, input:focus {
     @apply bg-onyx-200 border border-onyx-200 rounded-r-full p-1 pr-3;
 }
 
+.smiley {
+    @apply px-1 w-8;
+}
+
+.send {
+    @apply bg-onyx-600 rounded-full h-8 w-10 flex justify-center items-center;
+}
+
+.user-picture {
+    @apply px-4;
+}
+
+.user-name {
+    @apply my-auto flex text-cultured-100 ;
+}
+
 .icon {
     @apply w-8 h-1.75 mx-auto my-auto relative;
 }
@@ -132,10 +169,10 @@ button:focus, input:focus {
     @apply text-center list-none;
 }
 
-.bg-blur-3{
+.bg-blur-3 {
     filter: blur(3px);
 }
 
-.bg-blur-5{
+.bg-blur-5 {
     filter: blur(5px);
 }

resources/views/layouts/app.blade.php

@@ -35,7 +35,7 @@
                 <form role="search" class="w-full justify-center">
                   <div class="flex justify-center">
                     <input class="search-input w-56" autocomplete="off" id="search-submit" type="text" placeholder="Search ...">
-                    <button class="search-glass"><a><img src="{{asset('vendor/courier/icons/search.svg')}}" width="24px" height="24px"></a></button>
+                    <button class="search-glass"><a><img src="{{asset('vendor/courier/icons/search-cultured-100.svg')}}" width="24px" height="24px"></a></button>
                 	</div>
                 </form>
               </div>
@@ -52,7 +52,7 @@
                 <form role="search" class="w-full justify-center">
                   <div class="flex justify-center">
                     <input class="search-input w-32" autocomplete="off" id="search-submit" type="text" placeholder="Search ...">
-                    <button class="search-glass"><a><img src="{{asset('vendor/courier/icons/search.svg')}}" width="24px" height="24px"></a></button>
+                    <button class="search-glass"><a><img src="{{asset('vendor/courier/icons/search-cultured-100.svg')}}" width="24px" height="24px"></a></button>
                 	</div>
                 </form>
               </div>
@@ -81,6 +81,23 @@
         <main>
             @yield('content')
         </main>
+        {{-- Real-Time Chat --}}
+        <div class="chat-window">
+            <div class="chat-header">
+                <button class="user-picture"><a><img src="{{asset('vendor/courier/icons/user-cultured-100.svg')}}" width="20px" height="20px"></a></button>
+                <div class="user-name" for="">Unknow person</div>
+                <button class="minus my-auto ml-auto mr-2"><a><img src="{{asset('vendor/courier/icons/minus-cultured-100.svg')}}" width="20px" height="20px"></a></button>
+                <button class="close my-auto mr-2"><a><img src="{{asset('vendor/courier/icons/close-cultured-100.svg')}}" width="20px" height="20px"></a></button>
+            </div>
+            <div class="chat-container"></div>
+            <div class="chat-footer">
+                <div class="w-full flex">
+                    <input class="chat-input" autocomplete="off" id="message-submit" type="text" placeholder="Type your message...">
+                    <button class="smiley"><a><img src="{{asset('vendor/courier/icons/smiley-cultured-100.svg')}}" width="24px" height="24px"></a></button>
+                    <button class="send"><a><img src="{{asset('vendor/courier/icons/send-cultured-100.svg')}}" width="18px" height="18px"></a></button>
+                </div>
+            </div>
+        </div>
     </div>
 </body>
 <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs=" crossorigin="anonymous"></script>

tailwind.config.js

@@ -36,6 +36,11 @@ module.exports = {
                 '0.1875': '0.1875rem',
                 '1.875': '1.875rem',
                 '1.75': '1.75rem',
+                '8.5': '2.625rem',
+                '9': '2.75rem',
+                '80': '20rem',
+                '100': '25rem',
+                '120': '30rem',
             },
             width: {
                 '1/8': '12.5%',
@@ -46,6 +51,10 @@ module.exports = {
                 '3/4': '75%',
                 '7/8': '87.5%',
                 '1.875': '1.875rem',
+                '9': '2.75rem',
+                '80': '20rem',
+                '100': '25rem',
+                '120': '30rem',
             },
             minWidth: {
               '1': '1rem',