UI improvements part 5

resources/js/App.vue

@@ -10,11 +10,7 @@
         <Spinner v-if="! isLoaded" />
 
 		<!--Show warning bar when user functionality is restricted-->
-		<div v-if="isLimitedUser" class="bg-red-500 text-center py-1">
-			<router-link :to="{name: 'Billing'}" class="text-white font-bold text-xs">
-				{{ $t('Your functionality is restricted. Please review your billing settings.') }}
-			</router-link>
-		</div>
+		<RestrictionWarningBar />
 
 		<!--App view-->
         <router-view v-if="isLoaded" />
@@ -30,12 +26,14 @@ import CookieDisclaimer from '/resources/js/components/Others/CookieDisclaimer'
 import Spinner from '/resources/js/components/FilesView/Spinner'
 import Vignette from '/resources/js/components/Others/Vignette'
 import Alert from '/resources/js/components/FilesView/Alert'
+import RestrictionWarningBar from "./RestrictionWarningBar"
 import {mapGetters} from 'vuex'
 import {events} from './bus'
 
 export default {
 	name: 'App',
 	components: {
+		RestrictionWarningBar,
 		CookieDisclaimer,
 		ToasterWrapper,
 		Vignette,
@@ -49,7 +47,6 @@ export default {
 	},
 	computed: {
 		...mapGetters([
-			'isLimitedUser',
 			'config',
 			'user',
 		]),

resources/js/RestrictionWarningBar.vue

@@ -0,0 +1,12 @@
+<template>
+	<div v-if="$store.getters.isLimitedUser" class="bg-red-500 text-center py-1">
+		<router-link :to="{name: 'Billing'}" class="text-white font-bold text-xs">
+			{{ $t('Your functionality is restricted. Please review your billing settings.') }}
+		</router-link>
+	</div>
+</template>
+<script>
+	export default {
+		name: 'RestrictionWarningBar',
+	}
+</script>

resources/js/components/Admin/WidgetLatestTransactions.vue

@@ -49,8 +49,10 @@
 						{{ row.data.attributes.created_at }}
 					</span>
 				</td>
-				<td class="md:pl-1 pl-3 text-right">
-					<img class="inline-block h-5" :src="$getPaymentLogo(row.data.attributes.driver)" :alt="row.data.attributes.driver">
+				<td class="md:pl-1 pl-3">
+					<div class="text-right md:w-full w-32">
+						<img class="w-32 md:inline-block" :src="$getPaymentLogo(row.data.attributes.driver)" :alt="row.data.attributes.driver">
+					</div>
 				</td>
 			</tr>
 		</template>

resources/js/components/Auth/AuthContentWrapper.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="h-screen flex justify-center items-center md:px-0 px-5">
+    <div class="flex justify-center items-center md:px-0 px-5">
         <slot></slot>
     </div>
 </template>

resources/js/components/Sidebar/ContentSidebar.vue

@@ -1,5 +1,5 @@
 <template>
-    <section class="content-sidebar flex-none xl:w-56 w-52 lg:block hidden overflow-y-auto pt-6 select-none dark:bg-dark-background bg-light-background z-10" id="content-sidebar">
+    <section class="content-sidebar flex-none xl:w-48 w-40 lg:block hidden overflow-y-auto pt-6 select-none dark:bg-dark-background bg-light-background z-10" id="content-sidebar">
         <slot></slot>
     </section>
 </template>

resources/js/components/UI/BarChart.vue

@@ -10,7 +10,7 @@
 		<!--Ghost bar-->
 		<span
 			v-if="ghostLength > 0"
-			class="2xl:w-3 md:w-2 w-1 block rounded-lg lg:mr-2 mr-1.5 dark:bg-gray-800 bg-gray-100"
+			class="2xl:w-3 lg:w-2 block lg:mr-2 relative cursor-pointer dark:bg-gray-800 bg-gray-100"
 			v-for="(ghost, i) in ghostLength"
 			:style="{height: '7%'}"
 			:key="i">

resources/js/views/Admin/Invoices.vue

@@ -57,7 +57,11 @@
 				'config',
 			]),
 			columns() {
-				return this.$store.getters.transactionColumns.filter(column => ! ['type'].includes(column.field))
+				if (config.subscriptionType === 'fixed') {
+					return this.$store.getters.transactionColumns.filter(column => ! ['type'].includes(column.field))
+				}
+
+				return this.$store.getters.transactionColumns
 			}
 		},
 		data() {

resources/js/views/Auth/ForgottenPassword.vue

@@ -1,5 +1,5 @@
 <template>
-    <AuthContentWrapper ref="auth">
+    <AuthContentWrapper ref="auth" class="h-screen">
 
         <!--Forgotten your password?-->
         <AuthContent name="forgotten-password" :visible="true">

resources/js/views/Auth/SignIn.vue

@@ -1,5 +1,5 @@
 <template>
-    <AuthContentWrapper ref="auth">
+    <AuthContentWrapper ref="auth" class="h-screen">
 
         <!--Log In by Email-->
         <AuthContent name="log-in" :visible="true">

resources/js/views/Auth/SignUp.vue

@@ -2,7 +2,7 @@
     <AuthContentWrapper ref="auth">
 
         <!--Registration-->
-        <AuthContent name="sign-up" :visible="true">
+        <AuthContent name="sign-up" :visible="true" class="mt-4 mb-12">
             <Headline
 				:title="$t('page_registration.title')"
 				:description="$t('page_registration.subtitle')"
@@ -71,7 +71,6 @@
                 </router-link>
             </span>
         </AuthContent>
-
     </AuthContentWrapper>
 </template>
 

resources/js/views/Auth/SuccessfullyEmailVerified.vue

@@ -1,5 +1,5 @@
 <template>
-    <AuthContentWrapper>
+    <AuthContentWrapper class="h-screen">
         <AuthContent :visible="true">
 			<Headline
 				:title="$t('page_email_successfully_verified.title')"

resources/js/views/Auth/SuccessfullySendEmail.vue

@@ -1,5 +1,5 @@
 <template>
-    <AuthContentWrapper>        
+    <AuthContentWrapper class="h-screen">
         <AuthContent :visible="true">
 			<Headline
 				:title="$t('page_email_successfully_send.title')"