CreatePersonaTokenPopup implementation

resources/js/components/FilesView/InfoSidebar.vue

@@ -74,7 +74,7 @@
                 <div class="share-link">
                     <lock-icon v-if="isLocked" @click="openShareOptions" class="lock-icon" size="17" />
                     <unlock-icon v-if="! isLocked" @click="openShareOptions" class="lock-icon" size="17" />
-                    <CopyInput :item="singleFile" class="copy-share-link" size="small" />
+                    <CopyShareLink :item="singleFile" class="copy-share-link" size="small" />
                 </div>
             </ListInfoItem>
 
@@ -95,7 +95,7 @@
 	import ImageMetaData from '@/components/FilesView/ImageMetaData'
     import EmptyMessage from '@/components/FilesView/EmptyMessage'
 	import TitlePreview from '@/components/FilesView/TitlePreview'
-	import CopyInput from '@/components/Others/Forms/CopyInput'
+	import CopyShareLink from '@/components/Others/Forms/CopyShareLink'
 	import ListInfoItem from '@/components/Others/ListInfoItem'
 	import ListInfo from '@/components/Others/ListInfo'
 	import {mapGetters} from 'vuex'
@@ -110,7 +110,7 @@
 			TitlePreview,
 			ListInfoItem,
 			UnlockIcon,
-			CopyInput,
+			CopyShareLink,
 			Edit2Icon,
 			LockIcon,
 			ListInfo,

resources/js/components/Others/CreatePersonaTokenPopup.vue

@@ -0,0 +1,125 @@
+<template>
+    <PopupWrapper name="create-personal-token">
+
+        <PopupHeader :title="$t('Create Personal Token')" icon="key" />
+
+        <PopupContent>
+             <ValidationObserver v-if="! token" @submit.prevent="createTokenForm" ref="createToken" v-slot="{ invalid }" tag="form" class="form-wrapper">
+                <ValidationProvider tag="div" mode="passive" class="input-wrapper password" name="Token Name" rules="required" v-slot="{ errors }">
+                    <label class="input-label"> {{ $t('Token Name') }}:</label>
+                    <input v-model="name" :class="{'is-error': errors[0]}" type="text" ref="input" class="focus-border-theme" :placeholder="$t('Type token name...')">
+                    <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+                </ValidationProvider>
+            </ValidationObserver>
+
+            <div v-if="token" class="form-wrapper">
+				<div v-if="token">
+					<div class="input-wrapper">
+						<label class="input-label">{{ $t('Your Personal Access Token') }}:</label>
+						<CopyInput size="small" :str="token['plainTextToken']" />
+					</div>
+				</div>
+				<InfoBox style="margin-bottom: 0; margin-top: 20px">
+                	<p v-html="$t('Make sure to <b class=\'text-theme\'>copy your personal access token now</b>. You won’t be able to see it again!')"></p>
+            	</InfoBox>
+            </div>
+        </PopupContent>
+
+        <PopupActions v-if="! token">
+            <ButtonBase
+				class="popup-button"
+				@click.native="$closePopup()"
+				button-style="secondary"
+			>
+                {{ $t('global.cancel') }}
+            </ButtonBase>
+            <ButtonBase
+				class="popup-button"
+				@click.native="createTokenForm"
+				button-style="theme"
+				:loading="isLoading"
+				:disabled="isLoading"
+			>
+               {{ $t('Create Token') }}
+            </ButtonBase>
+        </PopupActions>
+
+        <PopupActions v-if="token">
+            <ButtonBase
+				class="popup-button"
+				@click.native="closePopup"
+				button-style="theme"
+			>
+                {{ $t('shared_form.button_done') }}
+            </ButtonBase>
+        </PopupActions>
+    </PopupWrapper>
+</template>
+
+<script>
+import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
+import PopupWrapper from '@/components/Others/Popup/PopupWrapper'
+import PopupActions from '@/components/Others/Popup/PopupActions'
+import PopupContent from '@/components/Others/Popup/PopupContent'
+import PopupHeader from '@/components/Others/Popup/PopupHeader'
+import CopyInput from '@/components/Others/Forms/CopyInput'
+import ButtonBase from '@/components/FilesView/ButtonBase'
+import InfoBox from '@/components/Others/Forms/InfoBox'
+import {required} from 'vee-validate/dist/rules'
+import axios from 'axios'
+
+export default {
+	name: "CreatePersonaTokenPopup",
+	components: {
+		ValidationProvider,
+		ValidationObserver,
+		PopupWrapper,
+		PopupActions,
+		PopupContent,
+		PopupHeader,
+		ButtonBase,
+		CopyInput,
+		required,
+		InfoBox,
+	},
+	data() {
+		return {
+			isLoading: false,
+			name: undefined,
+			token: undefined
+		}
+	},
+	methods: {
+		async createTokenForm() {
+
+			const isValid = await this.$refs.createToken.validate()
+
+			if (!isValid) return
+
+			this.isLoading = true
+
+			axios
+				.post('/api/user/token/create', {
+					name: this.name
+				})
+				.then(response => {
+					this.token = response.data
+				})
+				.catch(() => this.$isSomethingWrong())
+				.finally(() => {
+					this.isLoading = false
+					this.name = undefined
+				})
+		},
+		closePopup() {
+			this.$closePopup()
+			this.token = undefined
+		}
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+	@import "@assets/vuefilemanager/_inapp-forms.scss";
+	@import '@assets/vuefilemanager/_forms';
+</style>

resources/js/components/Others/Forms/CopyInput.vue

@@ -1,28 +1,27 @@
 <template>
     <div class="inline-wrapper icon-append copy-input" :class="size" @click="copyUrl">
-        <input ref="sel" :value="item.shared.link" id="link-input" type="text" class="input-text" readonly>
+        <input ref="sel" :value="str" id="link-input" type="text" class="input-text" readonly>
         <div class="multi-icon">
             <div class="icon-item group hover-bg-theme-100">
-                <link-icon v-if="! isCopiedLink" size="14" class="group-hover-text-theme hover-text-theme"/>
+                <copy-icon v-if="! isCopiedLink" size="14" class="group-hover-text-theme hover-text-theme"/>
                 <check-icon v-if="isCopiedLink" size="14" class="group-hover-text-theme hover-text-theme"/>
             </div>
-            <div class="icon-item group hover-bg-theme-100" @click.stop.prevent="menuForEmail">
-                <send-icon size="14" class="group-hover-text-theme hover-text-theme" />
-            </div>
         </div>
     </div>
 </template>
 
 <script>
-import { LinkIcon, CheckIcon, SendIcon } from 'vue-feather-icons'
-import { events } from '@/bus'
+import { CopyIcon, CheckIcon, SendIcon } from 'vue-feather-icons'
 
 export default {
     name: 'CopyInput',
-    props: ['size', 'item'],
+    props: [
+		'size',
+		'str'
+	],
     components: {
         CheckIcon,
-        LinkIcon,
+        CopyIcon,
         SendIcon
     },
     data() {
@@ -31,13 +30,6 @@ export default {
         }
     },
     methods: {
-        menuForEmail() {
-            events.$emit('popup:open', {
-                name: 'share-edit',
-                item: this.item,
-                sentToEmail: true,
-            })
-        },
         copyUrl() {
 
             // Get input value
@@ -76,6 +68,7 @@ export default {
     border-top-right-radius: 8px;
 
     line,
+	rect,
     path,
     polygon {
         color: $text;
@@ -93,6 +86,7 @@ export default {
             line,
             polyline,
             path,
+			rect,
             polygon {
                 color: inherit;
             }
@@ -158,6 +152,7 @@ export default {
 
         line,
         path,
+		rect,
         polygon {
             color: inherit !important;
         }
@@ -165,8 +160,6 @@ export default {
         .icon-item {
             border-color: #333333;
         }
-
-
     }
 
     .copy-input {

resources/js/components/Others/Forms/CopyShareLink.vue

@@ -0,0 +1,178 @@
+<template>
+    <div class="inline-wrapper icon-append copy-input" :class="size" @click="copyUrl">
+        <input ref="sel" :value="item.shared.link" id="link-input" type="text" class="input-text" readonly>
+        <div class="multi-icon">
+            <div class="icon-item group hover-bg-theme-100">
+                <link-icon v-if="! isCopiedLink" size="14" class="group-hover-text-theme hover-text-theme"/>
+                <check-icon v-if="isCopiedLink" size="14" class="group-hover-text-theme hover-text-theme"/>
+            </div>
+            <div class="icon-item group hover-bg-theme-100" @click.stop.prevent="menuForEmail">
+                <send-icon size="14" class="group-hover-text-theme hover-text-theme" />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import { LinkIcon, CheckIcon, SendIcon } from 'vue-feather-icons'
+import { events } from '@/bus'
+
+export default {
+    name: 'CopyShareLink',
+    props: ['size', 'item'],
+    components: {
+        CheckIcon,
+        LinkIcon,
+        SendIcon
+    },
+    data() {
+        return {
+            isCopiedLink: false
+        }
+    },
+    methods: {
+        menuForEmail() {
+            events.$emit('popup:open', {
+                name: 'share-edit',
+                item: this.item,
+                sentToEmail: true,
+            })
+        },
+        copyUrl() {
+
+            // Get input value
+            var copyText = document.getElementById('link-input')
+
+            // select link
+            copyText.select()
+            copyText.setSelectionRange(0, 99999)
+
+            // Copy
+            document.execCommand('copy')
+
+            // Mark button as copied
+            this.isCopiedLink = true
+
+            // Reset copy button
+            setTimeout(() => {
+                this.isCopiedLink = false
+            }, 1000)
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '@assets/vuefilemanager/_variables';
+@import '@assets/vuefilemanager/_mixins';
+@import "@assets/vuefilemanager/_inapp-forms.scss";
+@import "@assets/vuefilemanager/_forms.scss";
+
+.multi-icon {
+    display: flex;
+    align-items: center;
+    background: $light_background;
+    border-bottom-right-radius: 8px;
+    border-top-right-radius: 8px;
+
+    line,
+    path,
+    polygon {
+        color: $text;
+    }
+
+    .icon-item {
+        padding: 9px 10px;
+        display: flex;
+        align-items: center;
+        border-left: 1px solid $light_mode_border_darken;
+        cursor: pointer;
+
+        &:hover {
+
+            line,
+            polyline,
+            path,
+            polygon {
+                color: inherit;
+            }
+        }
+
+        &:first-child {
+            border-left: none;
+        }
+
+        &:last-child {
+            border-bottom-right-radius: 8px;
+            border-top-right-radius: 8px;
+        }
+    }
+
+
+}
+
+// Single page
+.copy-input {
+    border: 1px solid $light_mode_border_darken;
+    border-radius: 8px;
+
+    &.small {
+
+        &.icon-append {
+
+            .icon {
+                padding: 10px;
+            }
+        }
+
+        input {
+            padding: 6px 10px;
+            @include font-size(13);
+        }
+    }
+
+    .icon {
+        cursor: pointer;
+    }
+
+    input {
+        text-overflow: ellipsis;
+        box-shadow: none;
+
+        &:disabled {
+            color: $text;
+            cursor: pointer;
+        }
+    }
+}
+
+@media (prefers-color-scheme: dark) {
+
+    .copy-input {
+        border-color: #333333;
+    }
+
+    .multi-icon {
+        background: $dark_mode_foreground;
+        box-shadow: 0 1px 5px rgba(0, 0, 0, 0.12);
+
+        line,
+        path,
+        polygon {
+            color: inherit !important;
+        }
+
+        .icon-item {
+            border-color: #333333;
+        }
+
+
+    }
+
+    .copy-input {
+        input {
+            color: $dark_mode_text_primary;
+        }
+    }
+}
+</style>

resources/js/components/Others/ShareCreatePopup.vue

@@ -71,7 +71,7 @@
             <div v-if="isGeneratedShared" class="form-wrapper">
                 <div class="input-wrapper">
                     <label class="input-label">{{ this.sharedViaEmail ? $t('shared_form.label_share_vie_email') : $t('shared_form.label_shared_url') }}:</label>
-                    <CopyInput size="small" :item="pickedItem" />
+                    <CopyShareLink size="small" :item="pickedItem" />
                 </div>
             </div>
         </PopupContent>
@@ -100,7 +100,7 @@ import SwitchInput from '@/components/Others/Forms/SwitchInput'
 import SelectInput from '@/components/Others/Forms/SelectInput'
 import ThumbnailItem from '@/components/Others/ThumbnailItem'
 import ActionButton from '@/components/Others/ActionButton'
-import CopyInput from '@/components/Others/Forms/CopyInput'
+import CopyShareLink from '@/components/Others/Forms/CopyShareLink'
 import TabWrapper from '@/components/Others/TabWrapper'
 import TabOption from '@/components/Others/TabOption'
 import ButtonBase from '@/components/FilesView/ButtonBase'
@@ -129,7 +129,7 @@ export default {
         SelectInput,
         SwitchInput,
         ButtonBase,
-        CopyInput,
+        CopyShareLink,
         MailIcon,
         required,
         LinkIcon,

resources/js/components/Others/ShareEditPopup.vue

@@ -16,7 +16,7 @@
 
             <div v-if="! sendToRecipientsMenu || (sendToRecipientsMenu && isEmailSended)" class="input-wrapper copy-input">
                 <label class="input-label">{{ $t('shared_form.label_share_vie_email') }}:</label>
-                <CopyInput size="small" :item="pickedItem" />
+                <CopyShareLink size="small" :item="pickedItem" />
             </div>
 
             <ValidationObserver @submit.prevent v-if="sendToRecipientsMenu && !isEmailSended" v-slot="{ invalid }" ref="shareEmail" tag="form" class="form-wrapper">
@@ -106,7 +106,7 @@
     import MultiEmailInput from '@/components/Others/Forms/MultiEmailInput'
     import ThumbnailItem from '@/components/Others/ThumbnailItem'
     import ActionButton from '@/components/Others/ActionButton'
-    import CopyInput from '@/components/Others/Forms/CopyInput'
+    import CopyShareLink from '@/components/Others/Forms/CopyShareLink'
     import ButtonBase from '@/components/FilesView/ButtonBase'
     import InfoBox from '@/components/Others/Forms/InfoBox'
     import {required} from 'vee-validate/dist/rules'
@@ -130,7 +130,7 @@
             MultiEmailInput,
             SwitchInput,
             ButtonBase,
-            CopyInput,
+            CopyShareLink,
             required,
             InfoBox,
         },

resources/js/views/Profile.vue

@@ -125,11 +125,15 @@
 		<!--2FA popups-->
 		<TwoFactorRecoveryCodesPopup />
 		<TwoFactorSetupPopup />
+
+		<!--Access Token Popup-->
+		<CreatePersonaTokenPopup />
     </section>
 </template>
 
 <script>
 	import TwoFactorRecoveryCodesPopup from '@/components/Others/TwoFactorRecoveryCodesPopup'
+	import CreatePersonaTokenPopup from '@/components/Others/CreatePersonaTokenPopup'
 	import TwoFactorSetupPopup from '@/components/Others/TwoFactorSetupPopup'
     import ContentSidebar from '@/components/Sidebar/ContentSidebar'
     import ContentGroup from '@/components/Sidebar/ContentGroup'
@@ -155,6 +159,7 @@
         name: 'Settings',
         components: {
 			TwoFactorRecoveryCodesPopup,
+			CreatePersonaTokenPopup,
 			TwoFactorSetupPopup,
             ContentSidebar,
             CreditCardIcon,

resources/js/views/User/Password.vue

@@ -1,27 +1,37 @@
 <template>
     <PageTab>
+		<PageTabGroup class="form block-form">
+            <FormLabel>{{ $t('Personal Access Token') }}</FormLabel>
+			<InfoBox v-if="tokens.length === 0">
+				<p>{{ $t("You don't have any created personal access tokens yet.") }}</p>
+			</InfoBox>
+
+			<ButtonBase @click.native="openCreateTokenPopup" type="submit" button-style="theme" class="confirm-form">
+				{{ $t('Create Token') }}
+			</ButtonBase>
+        </PageTabGroup>
         <PageTabGroup>
             <ValidationObserver ref="password" @submit.prevent="resetPassword" v-slot="{ invalid }" tag="form" class="form block-form">
                 <FormLabel>{{ $t('user_password.title') }}</FormLabel>
                 <div class="block-wrapper">
                     <label>{{ $t('page_create_password.label_new_pass') }}:</label>
                     <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="New Password"
-                                        rules="required" v-slot="{ errors }">
+										rules="required" v-slot="{ errors }">
                         <input v-model="newPassword" :placeholder="$t('page_create_password.label_new_pass')"
-                               type="password"
-                               class="focus-border-theme"
-                               :class="{'is-error': errors[0]}"/>
+							   type="password"
+							   class="focus-border-theme"
+							   :class="{'is-error': errors[0]}" />
                         <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                     </ValidationProvider>
                 </div>
                 <div class="block-wrapper">
                     <label>{{ $t('page_create_password.label_confirm_pass') }}:</label>
                     <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Confirm Your Password"
-                                        rules="required" v-slot="{ errors }">
+										rules="required" v-slot="{ errors }">
                         <input v-model="newPasswordConfirmation"
-                               :placeholder="$t('page_create_password.label_confirm_pass')" type="password"
-                               class="focus-border-theme"
-                               :class="{'is-error': errors[0]}"/>
+							   :placeholder="$t('page_create_password.label_confirm_pass')" type="password"
+							   class="focus-border-theme"
+							   :class="{'is-error': errors[0]}" />
                         <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                     </ValidationProvider>
                 </div>
@@ -50,7 +60,6 @@
 					</div>
 				</div>
 			</div>
-
             <div v-if="user && user.data.attributes.two_factor_authentication" class="block-wrapper">
 				<div class="input-wrapper">
 					<div class="inline-wrapper button-block">
@@ -78,118 +87,133 @@
 
 <script>
     import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
+	import PageTabGroup from '@/components/Others/Layout/PageTabGroup'
+	import UserImageInput from '@/components/Others/UserImageInput'
+	import SwitchInput from '@/components/Others/Forms/SwitchInput'
+	import FormLabel from '@/components/Others/Forms/FormLabel'
+	import MobileHeader from '@/components/Mobile/MobileHeader'
+	import ButtonBase from '@/components/FilesView/ButtonBase'
+	import PageTab from '@/components/Others/Layout/PageTab'
+	import InfoBox from '@/components/Others/Forms/InfoBox'
+	import PageHeader from '@/components/Others/PageHeader'
+	import ThemeLabel from '@/components/Others/ThemeLabel'
+	import {required} from 'vee-validate/dist/rules'
+	import {mapGetters} from 'vuex'
+	import {events} from '@/bus'
+	import axios from 'axios'
 
-    import PageTabGroup from '@/components/Others/Layout/PageTabGroup'
-    import UserImageInput from '@/components/Others/UserImageInput'
-    import SwitchInput from '@/components/Others/Forms/SwitchInput'
-    import FormLabel from '@/components/Others/Forms/FormLabel'
-    import MobileHeader from '@/components/Mobile/MobileHeader'
-    import ButtonBase from '@/components/FilesView/ButtonBase'
-    import PageTab from '@/components/Others/Layout/PageTab'
-    import PageHeader from '@/components/Others/PageHeader'
-    import ThemeLabel from '@/components/Others/ThemeLabel'
-    import {required} from 'vee-validate/dist/rules'
-    import {mapGetters} from 'vuex'
-    import {events} from '@/bus'
-    import axios from 'axios'
+	export default {
+		name: 'Password',
+		components: {
+			PageTabGroup,
+			FormLabel,
+			PageTab,
+			InfoBox,
+			ValidationProvider,
+			ValidationObserver,
+			UserImageInput,
+			SwitchInput,
+			MobileHeader,
+			PageHeader,
+			ButtonBase,
+			ThemeLabel,
+			required,
+		},
+		computed: {
+			...mapGetters(['user'])
+		},
+		data() {
+			return {
+				newPasswordConfirmation: '',
+				newPassword: '',
+				isLoading: false,
+				tokens: [],
+			}
+		},
+		methods: {
+			async resetPassword() {
 
-    export default {
-        name: 'Password',
-        components: {
-            PageTabGroup,
-            FormLabel,
-            PageTab,
-            ValidationProvider,
-            ValidationObserver,
-            UserImageInput,
-            SwitchInput,
-            MobileHeader,
-            PageHeader,
-            ButtonBase,
-            ThemeLabel,
-            required,
-        },
-        computed: {
-            ...mapGetters(['user'])
-        },
-        data() {
-            return {
-                newPasswordConfirmation: '',
-                newPassword: '',
-                isLoading: false,
-            }
-        },
-        methods: {
-            async resetPassword() {
+				// Validate fields
+				const isValid = await this.$refs.password.validate();
 
-                // Validate fields
-                const isValid = await this.$refs.password.validate();
+				if (!isValid) return;
 
-                if (!isValid) return;
+				// Send request to get user reset link
+				axios
+					.post(this.$store.getters.api + '/user/password', {
+						password: this.newPassword,
+						password_confirmation: this.newPasswordConfirmation,
+					})
+					.then(() => {
 
-                // Send request to get user reset link
-                axios
-                    .post(this.$store.getters.api + '/user/password', {
-                        password: this.newPassword,
-                        password_confirmation: this.newPasswordConfirmation,
-                    })
-                    .then(() => {
+						// Reset inputs
+						this.newPassword = ''
+						this.newPasswordConfirmation = ''
 
-                        // Reset inputs
-                        this.newPassword = ''
-                        this.newPasswordConfirmation = ''
+						// Reset errors
+						this.$refs.password.reset()
 
-                        // Reset errors
-                        this.$refs.password.reset()
+						// Show error message
+						events.$emit('success:open', {
+							title: this.$t('popup_pass_changed.title'),
+							message: this.$t('popup_pass_changed.message'),
+						})
+					})
+					.catch(error => {
 
-                        // Show error message
-                        events.$emit('success:open', {
-                            title: this.$t('popup_pass_changed.title'),
-                            message: this.$t('popup_pass_changed.message'),
-                        })
-                    })
-                    .catch(error => {
+						if (error.response.status == 422) {
 
-                        if (error.response.status == 422) {
+							if (error.response.data.errors['password']) {
 
-                            if (error.response.data.errors['password']) {
-
-                                this.$refs.password.setErrors({
-                                    'New Password': error.response.data.errors['password']
-                                });
-                            }
-                        }
-                    })
-            },
-            open2faPopup() {
-                events.$emit('popup:open', {name: 'two-factor-authentication-confirm'})
-            },
-            showRecoveryCodes() {
-                events.$emit('popup:open', {name: 'two-factor-recovery-codes'})
-            }
-        }
-    }
+								this.$refs.password.setErrors({
+									'New Password': error.response.data.errors['password']
+								});
+							}
+						}
+					})
+			},
+			getPersonalAccessTokens() {
+				axios.get('/api/user/tokens')
+					.then(response => {
+						this.tokens = response.data
+					})
+					.catch(() => this.$isSomethingWrong())
+			},
+			open2faPopup() {
+				events.$emit('popup:open', {name: 'two-factor-authentication-confirm'})
+			},
+			showRecoveryCodes() {
+				events.$emit('popup:open', {name: 'two-factor-recovery-codes'})
+			},
+			openCreateTokenPopup() {
+				events.$emit('popup:open', {name: 'create-personal-token'})
+			}
+		},
+		created() {
+			this.getPersonalAccessTokens()
+		}
+	}
 </script>
 
 <style lang="scss" scoped>
     @import '@assets/vuefilemanager/_variables';
-    @import '@assets/vuefilemanager/_mixins';
-    @import '@assets/vuefilemanager/_forms';
+	@import '@assets/vuefilemanager/_mixins';
+	@import '@assets/vuefilemanager/_forms';
 
-    .block-form {
-        max-width: 100%;
-    }
+	.block-form {
+		max-width: 100%;
+	}
 
-    @media only screen and (max-width: 960px) {
+	@media only screen and (max-width: 960px) {
 
-        .form {
-            .button-base {
-                width: 100%;
-                margin-top: 0;
-                text-align: center;
-            }
-        }
-    }
+		.form {
+			.button-base {
+				width: 100%;
+				margin-top: 0;
+				text-align: center;
+			}
+		}
+	}
 
 	@media only screen and (max-width: 690px) {
 
@@ -202,8 +226,8 @@
 		}
 	}
 
-    @media (prefers-color-scheme: dark) {
+	@media (prefers-color-scheme: dark) {
 
-    }
+	}
 
 </style>