style: 💄 restyled misc, invoices and payment Settings

resources/views/admin/settings/index.blade.php

@@ -67,16 +67,25 @@
 
     <script>
         // Add the following code if you want the name of the file appear on select
-        const tabPaneHash = window.location.hash;
 
         document.addEventListener('DOMContentLoaded', () => {
             $(".custom-file-input").on("change", function() {
                 var fileName = $(this).val().split("\\").pop();
                 $(this).siblings(".custom-file-label").addClass("selected").html(fileName);
             });
+
+            const tabPaneHash = window.location.hash;
             if (tabPaneHash) {
                 $('.nav-tabs a[href="' + tabPaneHash + '"]').tab('show');
             }
+
+            $('.nav-tabs a').click(function(e) {
+                $(this).tab('show');
+                const scrollmem = $('body').scrollTop();
+                window.location.hash = this.hash;
+                $('html,body').scrollTop(scrollmem);
+            });
+
         })
     </script>
 

resources/views/admin/settings/tabs/invoices.blade.php

@@ -5,11 +5,11 @@
         @method('PATCH')
 
         <div class="row">
-            <div class="col-md-6">
+            <div class="col-md-3 p-3">
                 <!-- Name -->
                 <div class="form-group">
-                    <div class="custom-control mb-3">
-                        <label for="company-name">{{ __('Enter your companys name') }}</label>
+                    <div class="custom-control mb-3 p-0">
+                        <label for="company-name">{{ __('Company Name') }}:</label>
                         <input x-model="company-name" id="company-name" name="company-name" type="text" required
                             value="{{ config('SETTINGS::INVOICE:COMPANY_NAME') }}"
                             class="form-control @error('company-name') is-invalid @enderror">
@@ -17,8 +17,8 @@
                 </div>
                 <!-- address -->
                 <div class="form-group">
-                    <div class="custom-control mb-3">
-                        <label for="company-address">{{ __('Enter your companys address') }}</label>
+                    <div class="custom-control mb-3 p-0">
+                        <label for="company-address">{{ __('Company Adress') }}:</label>
                         <input x-model="company-address" id="company-address" name="company-address" type="text"
                             value="{{ config('SETTINGS::INVOICE:COMPANY_ADDRESS') }}"
                             class="form-control @error('company-address') is-invalid @enderror">
@@ -26,8 +26,8 @@
                 </div>
                 <!-- Phone -->
                 <div class="form-group">
-                    <div class="custom-control mb-3">
-                        <label for="company-phone">{{ __('Enter your companys phone number') }}</label>
+                    <div class="custom-control mb-3 p-0">
+                        <label for="company-phone">{{ __('Company Phonenumber') }}:</label>
                         <input x-model="company-phone" id="company-phone" name="company-phone" type="text"
                             value="{{ config('SETTINGS::INVOICE:COMPANY_PHONE') }}"
                             class="form-control @error('company-phone') is-invalid @enderror">
@@ -36,19 +36,20 @@
 
                 <!-- VAT -->
                 <div class="form-group">
-                    <div class="custom-control mb-3">
-                        <label for="company-vat">{{ __('Enter your companys VAT id') }}</label>
+                    <div class="custom-control mb-3 p-0">
+                        <label for="company-vat">{{ __('VAT ID') }}:</label>
                         <input x-model="company-vat" id="company-vat" name="company-vat" type="text"
                             value="{{ config('SETTINGS::INVOICE:COMPANY_VAT') }}"
                             class="form-control @error('company-vat') is-invalid @enderror">
                     </div>
                 </div>
             </div>
-            <div class="col-md-6">
+
+            <div class="col-md-3 p-3">
                 <!-- email -->
                 <div class="form-group">
-                    <div class="custom-control mb-3">
-                        <label for="company-mail">{{ __('Enter your companys email address') }}</label>
+                    <div class="custom-control mb-3 p-0">
+                        <label for="company-mail">{{ __('Company E-Mail Adress') }}:</label>
                         <input x-model="company-mail" id="company-mail" name="company-mail" type="text"
                             value="{{ config('SETTINGS::INVOICE:COMPANY_MAIL') }}"
                             class="form-control @error('company-mail') is-invalid @enderror">
@@ -56,8 +57,8 @@
                 </div>
                 <!-- website -->
                 <div class="form-group">
-                    <div class="custom-control mb-3">
-                        <label for="company-web">{{ __('Enter your companys website') }}</label>
+                    <div class="custom-control mb-3 p-0">
+                        <label for="company-web">{{ __('Company Website') }}:</label>
                         <input x-model="company-web" id="company-web" name="company-web" type="text"
                             value="{{ config('SETTINGS::INVOICE:COMPANY_WEBSITE') }}"
                             class="form-control @error('company-web') is-invalid @enderror">
@@ -66,18 +67,19 @@
 
                 <!-- prefix -->
                 <div class="form-group">
-                    <div class="custom-control mb-3">
-                        <label for="invoice-prefix">{{ __('Enter your custom invoice prefix') }}</label>
+                    <div class="custom-control mb-3 p-0">
+                        <label for="invoice-prefix">{{ __('Invoice Prefix') }}:</label>
                         <input x-model="invoice-prefix" id="invoice-prefix" name="invoice-prefix" type="text" required
                             value="{{ config('SETTINGS::INVOICE:PREFIX') }}"
                             class="form-control @error('invoice-prefix') is-invalid @enderror">
                     </div>
                 </div>
-
+            </div>
+            <div class="col-md-3 p-3">
                 <!-- logo -->
                 <div class="form-group">
-                    <div class="custom-control mb-3">
-                        <label for="logo">{{ __('Logo') }}</label>
+                    <div class="custom-control mb-3 p-0">
+                        <label for="logo">{{ __('Logo') }}:</label>
                         <div class="custom-file mb-3">
                             <input type="file" accept="image/png,image/jpeg,image/jpg" class="custom-file-input"
                                 name="logo" id="logo">
@@ -90,12 +92,11 @@
                         </span>
                     @enderror
                 </div>
-
             </div>
         </div>
-        <button class="btn btn-primary">{{ __('Submit') }}</button>
-
-        <!-- end -->
 
+        <div class="row">
+            <button class="btn btn-primary mt-3 ml-3">{{ __('Submit') }}</button>
+        </div>
     </form>
 </div>

resources/views/admin/settings/tabs/language.blade.php

@@ -5,7 +5,7 @@
         @method('PATCH')
 
         <div class="row">
-            <div class="col-md-6">
+            <div class="col-md-3">
                 <div class="form-group">
                     <!-- AVAILABLE LANGUAGES -->
                     <label for="languages">{{ __('Available languages') }}:</label>

resources/views/admin/settings/tabs/misc.blade.php

@@ -6,16 +6,15 @@
 
         <div class="row">
             <!-- DISCORD -->
-            <div class="col-md-3">
+            <div class="col-md-3 p-3">
                 <div class="row mb-3">
-                    <div class="col  text-center">
-                        <img height="50" src="{{ url('/images/discord_logo.png') }}"></br>
-                        <span class=" mt-0 text-muted">({{ __('optional') }})</span>
+                    <div class="col text-center">
+                        <h1>Discord</h1>
                     </div>
                 </div>
                 <div class="form-group">
-                    <div class="custom-control mb-3">
-                        <label for="discord-client-id">{{ __('Discord Client-ID') }}</label>
+                    <div class="custom-control mb-3 p-0">
+                        <label for="discord-client-id">{{ __('Discord Client-ID') }}:</label>
                         <input x-model="discord-client-id" id="discord-client-id" name="discord-client-id" type="text"
                             value="{{ config('SETTINGS::DISCORD:CLIENT_ID') }}"
                             class="form-control @error('discord-client-id') is-invalid @enderror">
@@ -23,8 +22,8 @@
                 </div>
 
                 <div class="form-group">
-                    <div class="custom-control mb-3">
-                        <label for="discord-client-secret">{{ __('Discord Client-Secret') }} </label>
+                    <div class="custom-control mb-3 p-0">
+                        <label for="discord-client-secret">{{ __('Discord Client-Secret') }}:</label>
                         <input x-model="discord-client-secret" id="discord-client-secret" name="discord-client-secret"
                             type="text" value="{{ config('SETTINGS::DISCORD:CLIENT_SECRET') }}"
                             class="form-control @error('discord-client-secret') is-invalid @enderror">
@@ -32,8 +31,8 @@
                 </div>
 
                 <div class="form-group">
-                    <div class="custom-control mb-3">
-                        <label for="discord-client-secret">{{ __('Discord Bot-Token') }} </label>
+                    <div class="custom-control mb-3 p-0">
+                        <label for="discord-client-secret">{{ __('Discord Bot-Token') }}:</label>
                         <input x-model="discord-bot-token" id="discord-bot-token" name="discord-bot-token" type="text"
                             value="{{ config('SETTINGS::DISCORD:BOT_TOKEN') }}"
                             class="form-control @error('discord-bot-token') is-invalid @enderror">
@@ -41,8 +40,8 @@
                 </div>
 
                 <div class="form-group">
-                    <div class="custom-control mb-3">
-                        <label for="discord-client-secret">{{ __('Discord Guild-ID') }} </label>
+                    <div class="custom-control mb-3 p-0">
+                        <label for="discord-client-secret">{{ __('Discord Guild-ID') }}:</label>
                         <input x-model="discord-guild-id" id="discord-guild-id" name="discord-guild-id" type="number"
                             value="{{ config('SETTINGS::DISCORD:GUILD_ID') }}"
                             class="form-control @error('discord-guild-id') is-invalid @enderror">
@@ -50,8 +49,8 @@
                 </div>
 
                 <div class="form-group">
-                    <div class="custom-control mb-3">
-                        <label for="discord-invite-url">{{ __('Discord Invite-URL') }} </label>
+                    <div class="custom-control mb-3 p-0">
+                        <label for="discord-invite-url">{{ __('Discord Invite-URL') }}:</label>
                         <input x-model="discord-invite-url" id="discord-invite-url" name="discord-invite-url"
                             type="text" value="{{ config('SETTINGS::DISCORD:INVITE_URL') }}"
                             class="form-control @error('discord-invite-url') is-invalid @enderror">
@@ -59,9 +58,8 @@
                 </div>
 
                 <div class="form-group">
-                    <div class="custom-control mb-3">
-                        <label for="discord-role-id">{{ __('Discord Role-ID') }}
-                        </label>
+                    <div class="custom-control mb-3 p-0">
+                        <label for="discord-role-id">{{ __('Discord Role-ID') }}:</label>
                         <input x-model="discord-role-id" id="discord-role-id" name="discord-role-id" type="number"
                             value="{{ config('SETTINGS::DISCORD:ROLE_ID') }}"
                             class="form-control @error('discord-role-id') is-invalid @enderror">
@@ -72,10 +70,9 @@
         </div>
 
 
+        <div class="row">
+            <button class="btn btn-primary mt-3 ml-3">{{ __('Submit') }}</button>
 
-        <button class="btn btn-primary mt-3">{{ __('Submit') }}</button>
+        </div>
     </form>
-
-
-
 </div>

resources/views/admin/settings/tabs/payments.blade.php → resources/views/admin/settings/tabs/payment.blade.php

@@ -1,72 +1,77 @@
-<div class="tab-pane mt-3" id="payments">
+<div class="tab-pane mt-3" id="payment">
     <form method="POST" enctype="multipart/form-data" class="mb-3"
         action="{{ route('admin.settings.update.paymentsettings') }}">
         @csrf
         @method('PATCH')
 
         <div class="row">
-            <div class="col-md-6">
-                <img class="mb-3" height="50" src="{{ url('/images/paypal_logo.png') }}">
-                <!-- PAYPAL -->
+            {{-- PayPal --}}
+            <div class="col-md-3 px-3">
+                <div class="row mb-3">
+                    <div class="col text-center">
+                        <h1>PayPal</h1>
+                    </div>
+                </div>
+
                 <div class="form-group">
-                    <div class="custom-control mb-3">
-                        <label for="paypal-client-id">{{ __('Enter your PayPal Client_ID') }}</label>
+                    <div class="custom-control mb-3 p-0">
+                        <label for="paypal-client-id">{{ __('PayPal Client-ID') }}:</label>
                         <input x-model="paypal-client-id" id="paypal-client-id" name="paypal-client-id" type="text"
                             value="{{ config('SETTINGS::PAYMENTS:PAYPAL:CLIENT_ID') }}"
                             class="form-control @error('paypal-client-id') is-invalid @enderror">
                     </div>
                 </div>
 
-                <!-- PAYPAL -->
                 <div class="form-group">
-                    <div class="custom-control mb-3">
-                        <label for="paypal-client-secret">{{ __('Your PayPal Secret-Key') }} (
-                            https://developer.paypal.com/docs/integration/direct/rest/ ) </label>
+                    <div class="custom-control mb-3 p-0">
+                        <label for="paypal-client-secret">{{ __('PayPal Secret-Key') }}:</label>
                         <input x-model="paypal-client-secret" id="paypal-client-secret" name="paypal-client-secret"
                             type="text" value="{{ config('SETTINGS::PAYMENTS:PAYPAL:SECRET') }}"
                             class="form-control @error('paypal-client-secret') is-invalid @enderror">
                     </div>
                 </div>
 
-                <!-- PAYPAL -->
+
                 <div class="form-group">
-                    <div class="custom-control mb-3">
-                        <label
-                            for="paypal-sandbox-id">{{ __('Your PayPal SANDBOX Client-ID used for testing') }}</label>
+                    <div class="custom-control mb-3 p-0">
+                        <label for="paypal-sandbox-id">{{ __('PayPal Sandbox Client-ID') }}:</label>
+                        <small class="text-muted">({{ __('optional') }})</small>
                         <input x-model="paypal-sandbox-id" id="paypal-sandbox-id" name="paypal-sandbox-id" type="text"
                             value="{{ config('SETTINGS::PAYMENTS:PAYPAL:SANDBOX_CLIENT_ID') }}"
                             class="form-control @error('paypal-sandbox-id') is-invalid @enderror">
                     </div>
                 </div>
 
-                <!-- PAYPAL -->
                 <div class="form-group">
-                    <div class="custom-control mb-3">
-                        <label
-                            for="paypal-sandbox-secret">{{ __('Your PayPal SANDBOX Secret-Key used for testing ') }}</label>
+                    <div class="custom-control mb-3 p-0">
+                        <label for="paypal-sandbox-secret">{{ __('PayPal Sandbox Secret-Key') }}:</label>
+                        <small class="text-muted">({{ __('optional') }})</small>
                         <input x-model="paypal-sandbox-secret" id="paypal-sandbox-secret" name="paypal-sandbox-secret"
                             type="text" value="{{ config('SETTINGS::PAYMENTS:PAYPAL:SANDBOX_SECRET') }}"
                             class="form-control @error('paypal-sandbox-secret') is-invalid @enderror">
                     </div>
                 </div>
             </div>
-            <div class="col-md-6">
 
-                <img class="mb-3" height="50" src="{{ url('/images/stripe_logo.png') }}">
-                <!-- STRIPE -->
+            {{-- Stripe --}}
+            <div class="col-md-3 px-3">
+
+                <div class="row mb-3">
+                    <div class="col text-center">
+                        <h1>Stripe</h1>
+                    </div>
+                </div>
                 <div class="form-group">
-                    <div class="custom-control mb-3">
-                        <label for="stripe-secret">{{ __('Your Stripe  Secret-Key') }} (
-                            https://dashboard.stripe.com/account/apikeys )</label>
+                    <div class="custom-control mb-3 p-0">
+                        <label for="stripe-secret">{{ __('Stripe Secret-Key') }}:</label>
                         <input x-model="stripe-secret" id="stripe-secret" name="stripe-secret" type="text"
                             value="{{ config('SETTINGS::PAYMENTS:STRIPE:SECRET') }}"
                             class="form-control @error('stripe-secret') is-invalid @enderror">
                     </div>
                 </div>
-                <!-- STRIPE -->
                 <div class="form-group">
-                    <div class="custom-control mb-3">
-                        <label for="stripe-endpoint-secret">{{ __('Enter your Stripe endpoint-secret-key') }}</label>
+                    <div class="custom-control mb-3 p-0">
+                        <label for="stripe-endpoint-secret">{{ __('Stripe Endpoint-Secret-Key') }}:</label>
                         <input x-model="stripe-endpoint-secret" id="stripe-endpoint-secret"
                             name="stripe-endpoint-secret" type="text"
                             value="{{ config('SETTINGS::PAYMENTS:STRIPE:ENDPOINT_SECRET') }}"
@@ -74,34 +79,34 @@
                     </div>
                 </div>
 
-                <!-- STRIPE -->
                 <div class="form-group">
-                    <div class="custom-control mb-3">
-                        <label for="stripe-test-secret">{{ __('Enter your Stripe test-secret-key') }}</label>
+                    <div class="custom-control mb-3 p-0">
+                        <label for="stripe-test-secret">{{ __('Stripe Test Secret-Key') }}:</label>
+                        <small class="text-muted">({{ __('optional') }})</small>
                         <input x-model="stripe-test-secret" id="stripe-test-secret" name="stripe-test-secret"
                             type="text" value="{{ config('SETTINGS::PAYMENTS:STRIPE:TEST_SECRET') }}"
                             class="form-control @error('stripe-test-secret') is-invalid @enderror">
                     </div>
                 </div>
 
-                <!-- STRIPE -->
                 <div class="form-group">
-                    <div class="custom-control mb-3">
-                        <label
-                            for="stripe-endpoint-test-secret">{{ __('Enter your Stripe endpoint-test-secret-key') }}</label>
+                    <div class="custom-control mb-3 p-0">
+                        <label for="stripe-endpoint-test-secret">{{ __('Stripe Test Endpoint-Secret-Key') }}:</label>
+                        <small class="text-muted">({{ __('optional') }})</small>
                         <input x-model="stripe-endpoint-test-secret" id="stripe-endpoint-test-secret"
                             name="stripe-endpoint-test-secret" type="text"
                             value="{{ config('SETTINGS::PAYMENTS:STRIPE:ENDPOINT_TEST_SECRET') }}"
                             class="form-control @error('stripe-endpoint-test-secret') is-invalid @enderror">
                     </div>
                 </div>
-
-                <!-- STRIPE -->
                 <div class="form-group">
-                    <div class="custom-control mb-3">
-                        <label
-                            for="stripe-methods">{{ __('Comma seperated list of payment methods that are enabled') }}
-                            (https://stripe.com/docs/payments/payment-methods/integration-options)</label>
+                    <div class="custom-control mb-3 p-0">
+                        <div class="col m-0 p-0 d-flex justify-content-between align-items-center">
+                            <label for="stripe-methods">{{ __('Payment Methods') }}:</label>
+                            <i data-toggle="popover" data-trigger="hover" data-html="true"
+                                data-content="Comma separated list of payment methods without whitespaces. <br><br> Example: card,klarna,sepa"
+                                class="fas fa-info-circle"></i>
+                        </div>
                         <input x-model="stripe-methods" id="stripe-methods" name="stripe-methods" type="text"
                             value="{{ config('SETTINGS::PAYMENTS:STRIPE:METHODS') }}"
                             class="form-control @error('stripe-methods') is-invalid @enderror">
@@ -109,27 +114,31 @@
                 </div>
             </div>
 
-
-            <!-- Sorry IceToast, aber kein plan wie man das hier schön gestalten soll.... -->
-            <div class="row">
-                <div class="col-md-6">
-
-                    <!-- Tax -->
-                    <div class="form-group">
-                        <div class="custom-control mb-3">
-                            <label
-                                for="sales_tax">{{ __('The %-value of tax that will be added to the product price on checkout') }}</label>
-                            <input x-model="sales_tax" id="sales_tax" name="sales_tax" type="number"
-                                value="{{ config('SETTINGS::PAYMENTS:SALES_TAX') }}"
-                                class="form-control @error('sales_tax') is-invalid @enderror">
+            {{-- Other --}}
+            <div class="col-md-3 px-3">
+                <div class="row mb-3">
+                    <div class="col text-center">
+                        <h1>Other</h1>
+                    </div>
+                </div>
+                <!-- Tax -->
+                <div class="form-group">
+                    <div class="custom-control mb-3 p-0">
+                        <div class="col m-0 p-0 d-flex justify-content-between align-items-center">
+                            <label for="sales_tax">{{ __('Tax Value in %') }}:</label>
+                            <i data-toggle="popover" data-trigger="hover" data-html="true"
+                                data-content="Tax Value that will be added to the total price of the order. <br><br> Example: 19 results in (19%)"
+                                class="fas fa-info-circle"></i>
                         </div>
+                        <input x-model="sales_tax" id="sales_tax" name="sales_tax" type="number"
+                            value="{{ config('SETTINGS::PAYMENTS:SALES_TAX') }}"
+                            class="form-control @error('sales_tax') is-invalid @enderror">
                     </div>
                 </div>
             </div>
         </div>
-        <button class="btn btn-primary">{{ __('Submit') }}</button>
-
-        <!-- end -->
-
+        <div class="row">
+            <button class="btn btn-primary ml-3 mt-3">{{ __('Submit') }}</button>
+        </div>
     </form>
 </div>