Fix loose ends in UI

TunNandaAung · TunNandaAung · commit 43b1b7a27027 · 2021-01-03T22:43:34.000+06:30
diff --git a/resources/js/components/Dropdown.vue b/resources/js/components/Dropdown.vue
@@ -13,7 +13,7 @@
       <transition name="pop-out-quick">
         <ul
           v-show="isOpen"
-          class="bg-gray-200 absolute mt-2 -m-6 rounded-xlshadow-lg z-50"
+          class="bg-gray-200 absolute mt-2 -m-6 rounded-xl shadow-lg z-50"
         >
           <slot></slot>
         </ul>
diff --git a/resources/js/components/LikeButtons.vue b/resources/js/components/LikeButtons.vue
@@ -33,10 +33,10 @@
     <form @submit.prevent="dislike">
       <button
         type="submit"
-        class="flex items-center focus:outline-none hover:text-blue-500 hover:bg-blue-200 p-2 rounded-xl"
+        class="flex items-center focus:outline-none hover:text-blue-500 hover:bg-blue-200 p-2 rounded-full"
         :class="
           isDisliked
-            ? 'text-blue-500 bg-blue-200 rounded-xl p-2'
+            ? 'text-blue-500 bg-blue-200 rounded-full p-2'
             : 'text-gray-600'
         "
       >
diff --git a/resources/js/components/Reply.vue b/resources/js/components/Reply.vue
@@ -88,7 +88,7 @@
 
           <button
             type="submit"
-            class="px-2 py-2 w-full text-left class text-red-500 rounded-xlhover:bg-red-600 hover:text-white"
+            class="px-2 py-2 w-full text-left class text-red-500 rounded-xl hover:bg-red-600 hover:text-white"
             @click.prevent="
               $modal.show(`confirm-delete-reply-${reply.id}`, deletePayload)
             "
diff --git a/resources/views/_logout.blade.php b/resources/views/_logout.blade.php
@@ -1,7 +1,7 @@
 <footer>
     <dropdown align="right" width="400px" v-cloak>
         <template v-slot:trigger>
-            <li class="flex items-center rounded-full bg-transparent px-1 py-1 hover:bg-gray-200 hover:text-black cursor-pointer -ml-4">
+            <li class="flex items-center rounded-full bg-transparent px-1 py-1 hover:bg-gray-200 hover:text-black cursor-pointer">
                 <img
                     src="{{ current_user()->avatar }}"
                     alt=""
@@ -46,20 +46,18 @@ class="rounded-full mr-2"
 
             </div>
 
-            <div class="px-3 py-3 flex items-center hover:bg-gray-300">
-                <form method="POST" action="/logout">
-                    @csrf
+            <form method="POST" action="/logout">
+                @csrf
+                <button 
+                    class="px-3 w-full py-3 flex items-center hover:bg-gray-300 text-sm text-red-600" 
+                    type="submit"
+                >
                     
-                    <button
-                        class="text-sm text-red-600"
-                        type="Submit"
-                    >
                         Log out {{ '@'. current_user()->username }}
-                    </button>
-                    
-                </form>
-            </div>
-
+                        
+                </button>
+            </form>
+            
         </div>
         
     </dropdown>
diff --git a/resources/views/_sidebar-links.blade.php b/resources/views/_sidebar-links.blade.php
@@ -1,5 +1,4 @@
-<ul class="flex flex-col items-start">
-
+<ul class="flex flex-col items-start mb-6">
     <li>
         <a class="font-bold text-lg mb-4 block rounded-full bg-transparent px-2 py-1 hover:bg-blue-500 hover:text-white text-center" href="{{ route('home') }}">
             Home
diff --git a/resources/views/_tweet.blade.php b/resources/views/_tweet.blade.php
@@ -11,13 +11,15 @@ class="rounded-full mr-2"
     </div>
 
     <div class="flex-1">
-        <div class="flex items-baseline mb-2">
+        <div class="flex items-baseline lg:items-center mb-2">
+          <div class="lg:flex flex-1">
             <a href="{{ route('profile',$tweet->user) }}" class="mr-3">
-                <h5 class="font-bold">{{ $tweet->user->name }}</h5>
+                <h5 class="text-sm md:text-base font-bold">{{ $tweet->user->name }}</h5>
             </a>
-            <span class="font-bold text-sm text-gray-600 mr-3">{{ '@'. $tweet->user->username }}</span>
+            <span class="font-bold text-xs md:text-sm text-gray-600 mr-3">{{ '@'. $tweet->user->username }}</span>
+          </div>
            
-            <span class="text-sm text-gray-600">{{ '. '.$tweet->created_at->diffForHumans() }}</span>
+            <span class="text-xs md:text-sm text-gray-600 ">{{ '. '.$tweet->created_at->diffForHumans() }}</span>
         </div>
         
         <h3 class="mb-2">
@@ -59,7 +61,7 @@ class="focus:outline-none text-center hover:text-green-600 hover:bg-green-200 p-
         </div>
     </div>
     <div>
-        
+
        @can('edit',$tweet->user)
             <dropdown align="right" width="200px" v-cloak>
                 <template v-slot:trigger>
diff --git a/resources/views/auth/login.blade.php b/resources/views/auth/login.blade.php
@@ -3,7 +3,7 @@
     <div class="w-full max-w-sm mx-auto">
 
         <form
-            class="bg-gray-200 shadow-md rounded-xlpx-8 pt-6 pb-8 mb-4"
+            class="bg-gray-200 shadow-md rounded-xl px-8 pt-6 pb-8 mb-4"
             method="POST" action="{{ route('login') }}"
         >
             @csrf
@@ -16,7 +16,7 @@ class="bg-gray-200 shadow-md rounded-xlpx-8 pt-6 pb-8 mb-4"
                 </label>
 
                 <input
-                    class="shadow appearance-none @error('email') border border-red-500  @enderror border rounded-xlw-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:ring"
+                    class="shadow appearance-none @error('email') border border-red-500  @enderror border rounded-xl w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:ring"
                     id="email"
                     type="email"
                     name="email"
@@ -35,7 +35,7 @@ class="shadow appearance-none @error('email') border border-red-500  @enderror b
                 </label>
 
                 <input
-                    class="shadow appearance-none @error('password') border border-red-500  @enderror rounded-xlw-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:ring"
+                    class="shadow appearance-none @error('password') border border-red-500  @enderror rounded-xl w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:ring"
                     id="password"
                     type="password"
                     placeholder="******************"
diff --git a/resources/views/auth/passwords/confirm.blade.php b/resources/views/auth/passwords/confirm.blade.php
@@ -5,15 +5,15 @@
 
                 {{ __('Please confirm your password before continuing.') }}
 
-                <form method="POST" class="bg-gray-200 shadow-md rounded-xlpx-8 pt-6 pb-8 mb-4 mt-6" action="{{ route('password.confirm') }}">
+                <form method="POST" class="bg-gray-200 shadow-md rounded-xl px-8 pt-6 pb-8 mb-4 mt-6" action="{{ route('password.confirm') }}">
                     @csrf
 
                     <div class="mb-6">
                         <label class="block text-gray-700 text-sm font-bold mb-2" for="password">
                             Password
                         </label>
 
-                        <input class="shadow appearance-none @error('password') border-red-500  @enderror border rounded-xlw-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:ring"
+                        <input class="shadow appearance-none @error('password') border-red-500  @enderror border rounded-xl w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:ring"
                                type="password"
                                name="password"
                                id="password"
diff --git a/resources/views/auth/passwords/email.blade.php b/resources/views/auth/passwords/email.blade.php
@@ -7,7 +7,7 @@
 
     <x-panel>
             
-        <form class="bg-gray-200 shadow-md rounded-xlpx-8 pt-6 pb-8 mb-4" 
+        <form class="bg-gray-200 shadow-md rounded-xl px-8 pt-6 pb-8 mb-4" 
             method="POST" action="{{ route('password.email') }}"
         >
             @csrf
@@ -21,7 +21,7 @@
                 </label>
 
                 <input
-                    class="shadow appearance-none @error('email') border border-red-500  @enderror border rounded-xlw-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:ring"
+                    class="shadow appearance-none @error('email') border border-red-500  @enderror border rounded-xl w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:ring"
                     id="email"
                     type="email"
                     name="email"
diff --git a/resources/views/auth/passwords/reset.blade.php b/resources/views/auth/passwords/reset.blade.php
@@ -1,7 +1,7 @@
 <x-master>
     
     <x-panel>
-        <form class="bg-gray-200 shadow-md rounded-xlpx-8 pt-6 pb-8 mb-4" 
+        <form class="bg-gray-200 shadow-md rounded-xl px-8 pt-6 pb-8 mb-4" 
             method="POST" 
             action="{{ route('password.update') }}"
         >
@@ -17,7 +17,7 @@
                 </label>
 
                 <input
-                    class="shadow appearance-none @error('email') border border-red-500  @enderror border rounded-xlw-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:ring"
+                    class="shadow appearance-none @error('email') border border-red-500  @enderror border rounded-xl w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:ring"
                     id="email"
                     type="email"
                     name="email"
@@ -36,7 +36,7 @@ class="shadow appearance-none @error('email') border border-red-500  @enderror b
                 </label>
 
                 <input
-                    class="shadow appearance-none @error('password') border border-red-500  @enderror rounded-xlw-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:ring"
+                    class="shadow appearance-none @error('password') border border-red-500  @enderror rounded-xl w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:ring"
                     id="password"
                     type="password"
                     placeholder="******************"
@@ -55,7 +55,7 @@ class="shadow appearance-none @error('password') border border-red-500  @enderro
                 </label>
 
                 <input
-                    class="shadow appearance-none @error('password') border border-red-500  @enderror rounded-xlw-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:ring"
+                    class="shadow appearance-none @error('password') border border-red-500  @enderror rounded-xl w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:ring"
                     id="password_confirmation"
                     type="password"
                     placeholder="******************"
diff --git a/resources/views/auth/register.blade.php b/resources/views/auth/register.blade.php
@@ -2,7 +2,7 @@
     <x-panel>
 
         <form
-            class="bg-gray-200 shadow-md rounded-xlpx-8 pt-6 pb-8 mb-4 -mt-16"
+            class="bg-gray-200 shadow-md rounded-xl px-8 pt-6 pb-8 mb-4 -mt-16"
             method="POST" action="{{ route('register') }}"
         >
             @csrf
@@ -15,7 +15,7 @@ class="bg-gray-200 shadow-md rounded-xlpx-8 pt-6 pb-8 mb-4 -mt-16"
                 </label>
 
                 <input
-                    class="shadow appearance-none @error('name') border border-red-500  @enderror border rounded-xlw-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:ring"
+                    class="shadow appearance-none @error('name') border border-red-500  @enderror border rounded-xl w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:ring"
                     id="name"
                     type="name"
                     name="name"
@@ -35,7 +35,7 @@ class="shadow appearance-none @error('name') border border-red-500  @enderror bo
                 </label>
 
                 <input
-                    class="shadow appearance-none @error('username') border-red-500  @enderror border rounded-xlw-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:ring"
+                    class="shadow appearance-none @error('username') border-red-500  @enderror border rounded-xl w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:ring"
                     id="username"
                     type="username"
                     name="username"
@@ -54,7 +54,7 @@ class="shadow appearance-none @error('username') border-red-500  @enderror borde
                 </label>
 
                 <input
-                    class="shadow appearance-none @error('email')  border-red-500  @enderror border rounded-xlw-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:ring"
+                    class="shadow appearance-none @error('email')  border-red-500  @enderror border rounded-xl w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:ring"
                     id="email"
                     type="email"
                     name="email"
@@ -73,7 +73,7 @@ class="shadow appearance-none @error('email')  border-red-500  @enderror border
                 </label>
 
                 <input
-                    class="shadow appearance-none @error('password') border border-red-500  @enderror rounded-xlw-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:ring"
+                    class="shadow appearance-none @error('password') border border-red-500  @enderror rounded-xl w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:ring"
                     id="password"
                     type="password"
                     placeholder="******************"
@@ -91,7 +91,7 @@ class="shadow appearance-none @error('password') border border-red-500  @enderro
                 </label>
 
                 <input
-                    class="shadow appearance-none @error('password') border border-red-500  @enderror rounded-xlw-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:ring"
+                    class="shadow appearance-none @error('password') border border-red-500  @enderror rounded-xl w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:ring"
                     id="password_confirmation"
                     type="password"
                     placeholder="******************"
diff --git a/resources/views/components/master.blade.php b/resources/views/components/master.blade.php
@@ -32,7 +32,7 @@
     <link href="{{ asset('css/app.css') }}" rel="stylesheet">
 </head>
 <body>
-<div id="app">
+<div id="app" class="py-8 lg:py-0">
     <section class="w-full bg-white items-center flex-wrap m-auto top-0 animated fixed z-20">
         <header class="container mx-auto flex justify-between bg-white px-4 lg:px-16 py-8">
             <svg xmlns="http://www.w3.org/2000/svg" width="130" height="34" viewBox="0 0 130 34">
diff --git a/resources/views/profiles/edit.blade.php b/resources/views/profiles/edit.blade.php
@@ -14,7 +14,7 @@
 
                 <div>
                     <input
-                        class="bg-gray-200 appearance-none border-2 border-gray-200 rounded-xlw-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-blue-500"
+                        class="bg-gray-200 appearance-none border-2 border-gray-200 rounded-xl w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-blue-500"
                         id="name"
                         name="name"
                         type="text"
@@ -37,7 +37,7 @@ class="bg-gray-200 appearance-none border-2 border-gray-200 rounded-xlw-full py-
 
                 <div>
                     <input
-                        class="bg-gray-200 appearance-none border-2 border-gray-200 rounded-xlw-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-blue-500"
+                        class="bg-gray-200 appearance-none border-2 border-gray-200 rounded-xl w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-blue-500"
                         id="username"
                         name="username"
                         type="text"
@@ -74,7 +74,7 @@ class="bg-gray-200 appearance-none border-2 border-gray-200 rounded-xlw-full py-
 
                 <div>
                     <textarea
-                        class="bg-gray-200 appearance-none border-2 border-gray-200 rounded-xlw-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-blue-500"
+                        class="bg-gray-200 appearance-none border-2 border-gray-200 rounded-xl w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-blue-500"
                         id="description"
                         rows="4"
                         name="description"
diff --git a/resources/views/settings/email/edit.blade.php b/resources/views/settings/email/edit.blade.php
@@ -14,7 +14,7 @@
 
                 <div>
                     <input
-                        class="bg-gray-200 appearance-none border-2 border-gray-200 rounded-xlw-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-blue-500"
+                        class="bg-gray-200 appearance-none border-2 border-gray-200 rounded-xl w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-blue-500"
                         id="email"
                         name="email"
                         type="email"
diff --git a/resources/views/settings/password/edit.blade.php b/resources/views/settings/password/edit.blade.php
@@ -14,7 +14,7 @@
 
                 <div>
                     <input
-                        class="bg-gray-200 appearance-none border-2 border-gray-200 rounded-xlw-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-blue-500"
+                        class="bg-gray-200 appearance-none border-2 border-gray-200 rounded-xl w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-blue-500"
                         id="current_password"
                         name="current_password"
                         type="password"
@@ -34,7 +34,7 @@ class="bg-gray-200 appearance-none border-2 border-gray-200 rounded-xlw-full py-
 
             <div>
                 <input
-                    class="bg-gray-200 appearance-none border-2 border-gray-200 rounded-xlw-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-blue-500"
+                    class="bg-gray-200 appearance-none border-2 border-gray-200 rounded-xl w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-blue-500"
                     id="new_password"
                     name="new_password"
                     type="password"
@@ -55,7 +55,7 @@ class="bg-gray-200 appearance-none border-2 border-gray-200 rounded-xlw-full py-
 
                 <div>
                     <input
-                        class="bg-gray-200 appearance-none border-2 border-gray-200 rounded-xlw-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-blue-500"
+                        class="bg-gray-200 appearance-none border-2 border-gray-200 rounded-xl w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-blue-500"
                         id="new_password_confirmation"
                         name="new_password_confirmation"
                         type="password"

Original file line number	Diff line number	Diff line change
`@@ -13,7 +13,7 @@`
`13`	`13`	`<transition name="pop-out-quick">`
`14`	`14`	`<ul`
`15`	`15`	`v-show="isOpen"`
`16`		`- class="bg-gray-200 absolute mt-2 -m-6 rounded-xlshadow-lg z-50"`
	`16`	`+ class="bg-gray-200 absolute mt-2 -m-6 rounded-xl shadow-lg z-50"`
`17`	`17`	`>`
`18`	`18`	`<slot></slot>`
`19`	`19`	`</ul>`
Original file line number	Diff line number	Diff line change
`@@ -33,10 +33,10 @@`
`33`	`33`	`<form @submit.prevent="dislike">`
`34`	`34`	`<button`
`35`	`35`	`type="submit"`
`36`		`- class="flex items-center focus:outline-none hover:text-blue-500 hover:bg-blue-200 p-2 rounded-xl"`
	`36`	`+ class="flex items-center focus:outline-none hover:text-blue-500 hover:bg-blue-200 p-2 rounded-full"`
`37`	`37`	`:class="`
`38`	`38`	`isDisliked`
`39`		`- ? 'text-blue-500 bg-blue-200 rounded-xl p-2'`
	`39`	`+ ? 'text-blue-500 bg-blue-200 rounded-full p-2'`
`40`	`40`	`: 'text-gray-600'`
`41`	`41`	`"`
`42`	`42`	`>`
Original file line number	Diff line number	Diff line change
`@@ -88,7 +88,7 @@`
`88`	`88`
`89`	`89`	`<button`
`90`	`90`	`type="submit"`
`91`		`- class="px-2 py-2 w-full text-left class text-red-500 rounded-xlhover:bg-red-600 hover:text-white"`
	`91`	`+ class="px-2 py-2 w-full text-left class text-red-500 rounded-xl hover:bg-red-600 hover:text-white"`
`92`	`92`	`@click.prevent="`
`93`	`93`	$modal.show(`confirm-delete-reply-${reply.id}`, deletePayload)
`94`	`94`	`"`