spt/forge
spt/forge
0
0
Fork 0
mirror of https://github.com/sp-tarkov/forge.git synced 2025-02-13 04:30:41 -05:00
Code Issues Packages Projects Releases Wiki Activity

Navigation Rework

Browse Source 
Still needs some TLC with profile photos.
Continued work on the dark theme on the internal pages. More to come.
This commit is contained in:
Refringe 2024-06-22 21:55:20 -04:00
parent a6a813a58f
commit a2fb68ea93
Signed by: Refringe
SSH Key Fingerprint: SHA256:t865XsQpfTeqPRBMN2G6+N8wlDjkgUCZF3WGW6O9N/k
19 changed files with 202 additions and 190 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
resources/css/app.css
View File

@ -6,16 +6,6 @@
display: none; display: none;
} }
button[type="submit"]:not([role="menuitem"]),
button[type="button"]:not([role="menuitem"]) {
@apply border border-transparent rounded-md py-2 px-4 text-white dark:text-gray-100 bg-gray-900 dark:bg-gray-700 hover:bg-gray-800 dark:hover:bg-black dark:hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-600 dark:focus:ring-gray-500 transition-all duration-200
}
nav button[type="submit"]:not([role="menuitem"]),
nav button[type="button"]:not([role="menuitem"]) {
@apply border border-transparent rounded-md py-2 px-4 text-white dark:text-gray-100 bg-gray-900 dark:bg-gray-700 hover:bg-gray-800 dark:hover:bg-gray-900 dark:hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-600 dark:focus:ring-gray-500 transition-all duration-200
}
input[type="checkbox"] { input[type="checkbox"] {
@apply text-gray-800 dark:text-gray-300 focus:ring-gray-600 dark:focus:ring-gray-500 border-gray-300 dark:border-gray-700 rounded; @apply text-gray-800 dark:text-gray-300 focus:ring-gray-600 dark:focus:ring-gray-500 border-gray-300 dark:border-gray-700 rounded;
} }

2
resources/views/components/action-message.blade.php
View File

@ -5,6 +5,6 @@
x-show.transition.out.opacity.duration.1500ms="shown" x-show.transition.out.opacity.duration.1500ms="shown"
x-transition:leave.opacity.duration.1500ms x-transition:leave.opacity.duration.1500ms
style="display: none;" style="display: none;"
{{ $attributes->merge(['class' => 'text-sm text-gray-600']) }}> {{ $attributes->merge(['class' => 'text-sm text-gray-600 dark:text-gray-400']) }}>
{{ $slot->isEmpty() ? 'Saved.' : $slot }} {{ $slot->isEmpty() ? 'Saved.' : $slot }}
</div> </div>

2
resources/views/components/action-section.blade.php
View File

@ -5,7 +5,7 @@
</x-section-title> </x-section-title>
<div class="mt-5 md:mt-0 md:col-span-2"> <div class="mt-5 md:mt-0 md:col-span-2">
<div class="px-4 py-5 sm:p-6 bg-white shadow sm:rounded-lg"> <div class="px-4 py-5 sm:p-6 bg-white dark:bg-gray-900 shadow sm:rounded-lg">
{{ $content }} {{ $content }}
</div> </div>
</div> </div>

2
resources/views/components/button.blade.php
View File

@ -1,3 +1,3 @@
<button {{ $attributes->merge(['type' => 'submit', 'class' => 'inline-flex items-center px-4 py-2 bg-gray-800 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-gray-700 focus:bg-gray-700 active:bg-gray-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 disabled:opacity-50 transition ease-in-out duration-150']) }}> <button {{ $attributes->merge(['type' => 'submit', 'class' => 'inline-flex items-center px-4 py-2 bg-gray-800 dark:bg-gray-400 border border-transparent rounded-md font-semibold text-xs text-white dark:text-gray-900 uppercase tracking-widest hover:bg-gray-700 dark:hover:bg-gray-100 focus:bg-gray-700 dark:focus:bg-gray-100 active:bg-gray-900 dark:active:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-grey-500 dark:focus:ring-gray-500 focus:ring-offset-2 disabled:opacity-50 transition ease-in-out duration-150']) }}>
{{ $slot }} {{ $slot }}
</button> </button>

4
resources/views/components/form-section.blade.php
View File

@ -8,14 +8,14 @@
<div class="mt-5 md:mt-0 md:col-span-2"> <div class="mt-5 md:mt-0 md:col-span-2">
<form wire:submit="{{ $submit }}"> <form wire:submit="{{ $submit }}">
<div class="px-4 py-5 bg-white sm:p-6 shadow {{ isset($actions) ? 'sm:rounded-tl-md sm:rounded-tr-md' : 'sm:rounded-md' }}"> <div class="px-4 py-5 bg-white dark:bg-gray-900 sm:p-6 shadow {{ isset($actions) ? 'sm:rounded-tl-md sm:rounded-tr-md' : 'sm:rounded-md' }}">
<div class="grid grid-cols-6 gap-6"> <div class="grid grid-cols-6 gap-6">
{{ $form }} {{ $form }}
</div> </div>
</div> </div>
@if (isset($actions)) @if (isset($actions))
<div class="flex items-center justify-end px-4 py-3 bg-gray-50 text-end sm:px-6 shadow sm:rounded-bl-md sm:rounded-br-md"> <div class="flex items-center justify-end px-4 py-3 bg-gray-50 dark:bg-gray-900 text-end sm:px-6 shadow sm:rounded-bl-md sm:rounded-br-md">
{{ $actions }} {{ $actions }}
</div> </div>
@endif @endif

2
resources/views/components/input-error.blade.php
View File

@ -1,5 +1,5 @@
@props(['for']) @props(['for'])
@error($for) @error($for)
<p {{ $attributes->merge(['class' => 'text-sm text-red-600']) }}>{{ $message }}</p> <p {{ $attributes->merge(['class' => 'text-sm text-red-600 dark:text-red-400']) }}>{{ $message }}</p>
@enderror @enderror

2
resources/views/components/input.blade.php
View File

@ -1,3 +1,3 @@
@props(['disabled' => false]) @props(['disabled' => false])
<input {{ $disabled ? 'disabled' : '' }} {!! $attributes->merge(['class' => 'border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm']) !!}> <input {{ $disabled ? 'disabled' : '' }} {!! $attributes->merge(['class' => 'rounded-md border-0 bg-white dark:bg-gray-700 py-2 px-3 text-gray-900 dark:text-gray-300 ring-1 ring-inset ring-gray-300 dark:ring-gray-700 placeholder:text-gray-400 dark:placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-gray-600 dark:focus:bg-gray-200 dark:focus:text-black dark:focus:ring-0 sm:text-sm']) !!}>

2
resources/views/components/label.blade.php
View File

@ -1,5 +1,5 @@
@props(['value']) @props(['value'])
<label {{ $attributes->merge(['class' => 'block font-medium text-sm text-gray-700']) }}> <label {{ $attributes->merge(['class' => 'block font-medium text-sm text-gray-700 dark:text-gray-300']) }}>
{{ $value ?? $slot }} {{ $value ?? $slot }}
</label> </label>

4
resources/views/components/nav-link.blade.php
View File

@ -2,8 +2,8 @@
@php @php
$classes = ($active ?? false) $classes = ($active ?? false)
? 'inline-flex items-center px-1 pt-1 border-b-2 border-indigo-400 dark:border-gray-800 text-sm font-medium leading-5 text-gray-900 dark:text-gray-300 focus:outline-none focus:border-indigo-700 dark:focus:border-gray-700 transition duration-150 ease-in-out' ? 'rounded-md px-3 py-2 text-sm font-medium text-black dark:text-white bg-gray-100 dark:bg-gray-900 transition duration-150 ease-in-out'
: 'inline-flex items-center px-1 pt-1 border-b-2 border-transparent dark:border-gray-800 text-sm font-medium leading-5 text-gray-500 dark:text-gray-300 hover:text-gray-700 dark:hover:text-gray-500 hover:border-gray-300 dark:hover:border-gray-700 focus:outline-none focus:text-gray-700 dark:focus:text-gray-500 focus:border-gray-300 dark:focus:border-gray-700 transition duration-150 ease-in-out'; : 'rounded-md px-3 py-2 text-sm font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-700 hover:text-black dark:hover:text-white transition duration-150 ease-in-out';
@endphp @endphp
<a {{ $attributes->merge(['class' => $classes]) }}> <a {{ $attributes->merge(['class' => $classes]) }}>

2
resources/views/components/secondary-button.blade.php
View File

@ -1,3 +1,3 @@
<button {{ $attributes->merge(['type' => 'button', 'class' => 'inline-flex items-center px-4 py-2 bg-white border border-gray-300 rounded-md font-semibold text-xs text-gray-700 uppercase tracking-widest shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 disabled:opacity-25 transition ease-in-out duration-150']) }}> <button {{ $attributes->merge(['type' => 'button', 'class' => 'inline-flex items-center px-4 py-2 bg-gray-800 dark:bg-gray-600 border border-transparent rounded-md font-semibold text-xs text-white dark:text-gray-100 uppercase tracking-widest hover:bg-gray-700 dark:hover:bg-gray-100 dark:hover:text-gray-900 focus:bg-gray-700 dark:focus:bg-gray-100 dark:focus:text-gray-900 active:bg-gray-900 dark:active:bg-gray-100 dark:active:text-gray-900 focus:outline-none focus:ring-2 focus:ring-grey-500 dark:focus:ring-gray-500 focus:ring-offset-2 disabled:opacity-50 transition ease-in-out duration-150']) }}>
{{ $slot }} {{ $slot }}
</button> </button>

2
resources/views/components/section-border.blade.php
View File

@ -1,5 +1,5 @@
<div class="hidden sm:block"> <div class="hidden sm:block">
<div class="py-8"> <div class="py-8">
<div class="border-t border-gray-200"></div> <div class="border-t border-gray-200 dark:border-gray-800"></div>
</div> </div>
</div> </div>

4
resources/views/components/section-title.blade.php
View File

@ -1,8 +1,8 @@
<div class="md:col-span-1 flex justify-between"> <div class="md:col-span-1 flex justify-between">
<div class="px-4 sm:px-0"> <div class="px-4 sm:px-0">
<h3 class="text-lg font-medium text-gray-900">{{ $title }}</h3> <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100">{{ $title }}</h3>
<p class="mt-1 text-sm text-gray-600"> <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
{{ $description }} {{ $description }}
</p> </p>
</div> </div>

4
resources/views/components/welcome.blade.php
View File

@ -1,5 +1,5 @@
<div class="p-6 lg:p-8 bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800"> <div class="p-6 lg:p-8 border-b border-gray-200 dark:border-gray-800">
<x-application-logo class="block h-12 w-auto"/> <x-application-logo class="block h-12 w-auto"/>
<h1 class="text-2xl font-medium text-gray-900 dark:text-white">Welcome {{ auth()->user()->name }}!</h1> <h1 class="text-2xl font-medium text-gray-900 dark:text-white">Welcome {{ auth()->user()->name }}!</h1>
<p class="mt-6 text-gray-500 dark:text-gray-200 leading-relaxed">I don't know why you're here. There's not much to see yet.</p> <p class="mt-6 text-gray-500 dark:text-gray-200 leading-relaxed">There's not much to see yet.</p>
</div> </div>

10
resources/views/dashboard.blade.php
View File

@ -1,15 +1,13 @@
<x-app-layout> <x-app-layout>
<x-slot name="header"> <x-slot name="header">
<h2 class="font-semibold text-xl text-gray-800 leading-tight"> <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-100 leading-tight">
{{ __('Dashboard') }} {{ __('Dashboard') }}
</h2> </h2>
</x-slot> </x-slot>
<div class="py-12"> <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8"> <div class="bg-white dark:bg-gray-900 overflow-hidden shadow-xl sm:rounded-lg">
<div class="bg-white overflow-hidden shadow-xl sm:rounded-lg"> <x-welcome />
<x-welcome />
</div>
</div> </div>
</div> </div>
</x-app-layout> </x-app-layout>

2
resources/views/home.blade.php
View File

@ -3,7 +3,7 @@
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8"> <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
<div class="bg-white dark:bg-gray-900 overflow-hidden shadow-xl dark:shadow-gray-900 rounded-none sm:rounded-lg"> <div class="bg-white dark:bg-gray-900 overflow-hidden shadow-xl dark:shadow-gray-900 rounded-none sm:rounded-lg">
<div class="relative isolate overflow-hidden bg-gray-900 dark:bg-gray-800 px-6 py-24 sm:py-32 lg:px-8 rounded-none sm:rounded-md"> <div class="relative isolate overflow-hidden bg-gray-900 dark:bg-gray-800 px-6 py-24 sm:py-32 lg:px-8 rounded-none sm:rounded-md">
<video autoplay muted loop class="absolute inset-0 -z-10 h-full w-full object-cover"> <video autoplay muted loop class="absolute inset-0 -z-10 h-full w-full object-cover z-0">
<source src="{{ Vite::asset('resources/video/welcome.mp4') }}" type="video/mp4"> <source src="{{ Vite::asset('resources/video/welcome.mp4') }}" type="video/mp4">
</video> </video>
<div class="hidden sm:absolute sm:-top-10 sm:right-1/2 sm:-z-10 sm:mr-10 sm:block sm:transform-gpu sm:blur-3xl" aria-hidden="true"> <div class="hidden sm:absolute sm:-top-10 sm:right-1/2 sm:-z-10 sm:mr-10 sm:block sm:transform-gpu sm:blur-3xl" aria-hidden="true">

302
resources/views/navigation-menu.blade.php
View File

@ -1,159 +1,183 @@
<nav x-data="{ open: false }" class="bg-white dark:bg-gray-950 border-b border-gray-100 dark:border-gray-800"> <nav x-data="{ open: false }" class="bg-white dark:bg-gray-950 border-b border-gray-100 dark:border-gray-800">
{{-- Primary Navigation Menu --}} <div class="mx-auto max-w-7xl px-2 sm:px-4 lg:px-8">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="relative flex h-16 items-center justify-between">
<div class="flex justify-between h-16"> <div class="flex items-center px-2 lg:px-0">
<div class="flex"> <div class="flex-shrink-0">
{{-- Logo --}}
<div class="shrink-0 flex items-center">
<a href="{{ route('home') }}"> <a href="{{ route('home') }}">
<x-application-mark class="block h-9 w-auto"/> <x-application-mark class="block h-9 w-auto"/>
</a> </a>
</div> </div>
<div class="hidden lg:ml-6 lg:block">
{{-- Navigation Links --}} <div class="flex space-x-4">
<div class="hidden space-x-8 sm:-my-px sm:ms-10 sm:flex"> @auth
@auth <x-nav-link href="{{ route('dashboard') }}" :active="request()->routeIs('dashboard')">{{ __('Dashboard') }}</x-nav-link>
<x-nav-link href="#">{{ __('Dashboard') }}</x-nav-link> @endauth
@endauth
<x-nav-link href="#">{{ __('About') }}</x-nav-link>
<x-nav-link href="#">{{ __('Articles') }}</x-nav-link>
<x-nav-link href="#">{{ __('Documentation') }}</x-nav-link>
<x-nav-link href="{{ route('mods') }}" :active="request()->routeIs('mods')">{{ __('Mods') }}</x-nav-link>
<x-nav-link href="#">{{ __('Support') }}</x-nav-link>
</div>
</div>
<div class="hidden sm:flex sm:items-center sm:ms-6 gap-4">
<button type="button" @click="searchOpen = !searchOpen; $nextTick(() => { document.querySelector('#global-search').focus(); });" class="text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5">
<svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"/>
</svg>
</button>
{{-- Theme Toggle Button --}}
<button id="theme-toggle" type="button" class="text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5">
<svg id="theme-toggle-dark-icon" class="hidden w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
</svg>
<svg id="theme-toggle-light-icon" class="hidden w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" fill-rule="evenodd" clip-rule="evenodd"></path>
</svg>
</button>
@guest
<div class="ml-4">
<a href="{{ route('login') }}" class="text-sm font-semibold leading-6 text-gray-900 dark:text-gray-100 whitespace-nowrap">Log in
<span aria-hidden="true">&rarr;</span></a>
</div> </div>
@endguest
{{-- Settings Dropdown --}}
<div class="relative">
<x-dropdown align="right" width="48">
<x-slot name="trigger">
@auth
<span class="inline-flex rounded-md">
<button type="button" class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-gray-500 dark:text-gray-300 bg-white dark:bg-gray-800 hover:text-gray-700 dark:hover:text-gray-500 focus:outline-none focus:bg-gray-50 dark:focus:bg-gray-700 active:bg-gray-50 dark:active:bg-gray-700 transition ease-in-out duration-150">
{{ auth()->user()->name }}
<svg class="ms-2 -me-0.5 h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5"/>
</svg>
</button>
</span>
@endauth
</x-slot>
<x-slot name="content">
{{-- Account Management --}}
<div class="block px-4 py-2 text-xs text-gray-400 dark:text-gray-300">
{{ __('Manage Account') }}
</div>
<x-dropdown-link href="{{ route('profile.show') }}">
{{ __('Profile') }}
</x-dropdown-link>
@if (Laravel\Jetstream\Jetstream::hasApiFeatures())
<x-dropdown-link href="{{ route('api-tokens.index') }}">
{{ __('API Tokens') }}
</x-dropdown-link>
@endif
<div class="border-t border-gray-200 dark:border-gray-700"></div>
<form method="POST" action="{{ route('logout') }}" x-data>
@csrf
<x-dropdown-link href="{{ route('logout') }}" @click.prevent="$root.submit();">
{{ __('Log Out') }}
</x-dropdown-link>
</form>
</x-slot>
</x-dropdown>
</div> </div>
</div> </div>
<div class="flex flex-1 justify-center px-2 lg:ml-6 lg:justify-end">
<div class="w-full max-w-lg lg:max-w-xs">
<label for="search" class="sr-only">{{ __('Search') }}</label>
<div class="relative group">
<div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
<svg class="h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z" clip-rule="evenodd" />
</svg>
</div>
<input id="search" name="search" class="block w-full rounded-md border-0 bg-white dark:bg-gray-700 py-1.5 pl-10 pr-3 text-gray-900 dark:text-gray-300 ring-1 ring-inset ring-gray-300 dark:ring-gray-700 placeholder:text-gray-400 dark:placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-gray-600 dark:focus:bg-gray-200 dark:focus:text-black dark:focus:ring-0 sm:text-sm sm:leading-6" placeholder="{{ __('Search') }}" type="search">
</div>
</div>
</div>
<div class="flex lg:hidden">
<!-- Mobile menu button -->
<button type="button" class="relative inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white" aria-controls="mobile-menu" aria-expanded="false">
<span class="absolute -inset-0.5"></span>
<span class="sr-only">{{ __('Open main menu') }}</span>
<!--
Icon when menu is closed.
{{-- Hamburger --}} Menu open: "hidden", Menu closed: "block"
<div class="-me-2 flex items-center sm:hidden"> -->
<button @click="open = ! open" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-none focus:bg-gray-100 dark:focus:bg-gray-800 focus:text-gray-500 dark:focus:text-gray-300 transition duration-150 ease-in-out"> <svg class="block h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
<path :class="{'hidden': open, 'inline-flex': ! open }" class="inline-flex" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/> </svg>
<path :class="{'hidden': ! open, 'inline-flex': open }" class="hidden" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/> <!--
Icon when menu is open.
Menu open: "block", Menu closed: "hidden"
-->
<svg class="hidden h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg> </svg>
</button> </button>
</div> </div>
<div class="hidden lg:ml-4 lg:block">
<div class="flex items-center gap-4">
{{-- Theme Toggle --}}
<button id="theme-toggle" type="button" class="relative flex-shrink-0 rounded-full p-1 bg-white dark:bg-gray-800 text-gray-400 hover:text-gray-500 dark:hover:text-white focus:outline-none focus:ring-2 focus:ring-gray-500 dark:focus:ring-white focus:ring-offset-2 dark:focus:ring-offset-gray-800">
<span class="absolute -inset-1.5"></span>
<span class="sr-only">{{ __('Toggle themes') }}</span>
<svg id="theme-toggle-dark-icon" class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
<path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
</svg>
<svg id="theme-toggle-light-icon" class="hidden w-6 h-6" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
<path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" fill-rule="evenodd" clip-rule="evenodd"></path>
</svg>
</button>
@auth
{{-- Profile Dropdown --}}
<div x-data="{ isOpen: false, openedWithKeyboard: false }" @keydown.esc.window="isOpen = false, openedWithKeyboard = false" class="relative">
<button id="user-menu-button" type="button" @click="isOpen = ! isOpen" @keydown.space.prevent="openedWithKeyboard = true" @keydown.enter.prevent="openedWithKeyboard = true" @keydown.down.prevent="openedWithKeyboard = true" class="relative flex rounded-full bg-gray-800 text-sm text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800" :class="isOpen || openedWithKeyboard ? 'text-black dark:text-white' : 'text-slate-700 dark:text-slate-300'" :aria-expanded="isOpen || openedWithKeyboard" aria-haspopup="true">
<span class="absolute -inset-1.5"></span>
<span class="sr-only">{{ __('Open user menu') }}</span>
<img class="h-8 w-8 rounded-full" src="{{ auth()->user()->profile_photo_url }}" alt="{{ auth()->user()->name }}">
</button>
<div x-cloak x-show="isOpen || openedWithKeyboard" x-transition x-trap="openedWithKeyboard" @click.outside="isOpen = false, openedWithKeyboard = false" @keydown.down.prevent="$focus.wrap().next()" @keydown.up.prevent="$focus.wrap().previous()" class="absolute top-11 right-0 z-10 flex w-full min-w-[12rem] flex-col divide-y divide-slate-300 overflow-hidden rounded-xl border border-slate-300 bg-slate-100 dark:divide-slate-700 dark:border-slate-700 dark:bg-slate-800" role="menu">
<div class="flex flex-col py-1.5">
<a href="{{ route('dashboard') }}" class="flex items-center gap-2 bg-slate-100 px-4 py-2 text-sm text-slate-700 hover:bg-slate-800/5 hover:text-black focus-visible:bg-slate-800/10 focus-visible:text-black focus-visible:outline-none dark:bg-slate-800 dark:text-slate-300 dark:hover:bg-slate-100/5 dark:hover:text-white dark:focus-visible:bg-slate-100/10 dark:focus-visible:text-white" role="menuitem">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4">
<path d="M19.006 3.705a.75.75 0 1 0-.512-1.41L6 6.838V3a.75.75 0 0 0-.75-.75h-1.5A.75.75 0 0 0 3 3v4.93l-1.006.365a.75.75 0 0 0 .512 1.41l16.5-6Z" />
<path fill-rule="evenodd" d="M3.019 11.114 18 5.667v3.421l4.006 1.457a.75.75 0 1 1-.512 1.41l-.494-.18v8.475h.75a.75.75 0 0 1 0 1.5H2.25a.75.75 0 0 1 0-1.5H3v-9.129l.019-.007ZM18 20.25v-9.566l1.5.546v9.02H18Zm-9-6a.75.75 0 0 0-.75.75v4.5c0 .414.336.75.75.75h3a.75.75 0 0 0 .75-.75V15a.75.75 0 0 0-.75-.75H9Z" clip-rule="evenodd" />
</svg>
{{ __('Dashboard') }}
</a>
</div>
<div class="flex flex-col py-1.5">
<a href="{{ route('profile.show') }}" class="flex items-center gap-2 bg-slate-100 px-4 py-2 text-sm text-slate-700 hover:bg-slate-800/5 hover:text-black focus-visible:bg-slate-800/10 focus-visible:text-black focus-visible:outline-none dark:bg-slate-800 dark:text-slate-300 dark:hover:bg-slate-100/5 dark:hover:text-white dark:focus-visible:bg-slate-100/10 dark:focus-visible:text-white" role="menuitem">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" fill="currentColor" class="w-4 h-4">
<path fill-rule="evenodd" d="M7.5 6a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM3.751 20.105a8.25 8.25 0 0116.498 0 .75.75 0 01-.437.695A18.683 18.683 0 0112 22.5c-2.786 0-5.433-.608-7.812-1.7a.75.75 0 01-.437-.695z" clip-rule="evenodd"/>
</svg>
{{ __('Profile') }}
</a>
@if (Laravel\Jetstream\Jetstream::hasApiFeatures())
<a href="{{ route('api-tokens.index') }}" class="flex items-center gap-2 bg-slate-100 px-4 py-2 text-sm text-slate-700 hover:bg-slate-800/5 hover:text-black focus-visible:bg-slate-800/10 focus-visible:text-black focus-visible:outline-none dark:bg-slate-800 dark:text-slate-300 dark:hover:bg-slate-100/5 dark:hover:text-white dark:focus-visible:bg-slate-100/10 dark:focus-visible:text-white" role="menuitem">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" fill="currentColor" class="w-4 h-4">
<path fill-rule="evenodd" d="M11.078 2.25c-.917 0-1.699.663-1.85 1.567L9.05 4.889c-.02.12-.115.26-.297.348a7.493 7.493 0 00-.986.57c-.166.115-.334.126-.45.083L6.3 5.508a1.875 1.875 0 00-2.282.819l-.922 1.597a1.875 1.875 0 00.432 2.385l.84.692c.095.078.17.229.154.43a7.598 7.598 0 000 1.139c.015.2-.059.352-.153.43l-.841.692a1.875 1.875 0 00-.432 2.385l.922 1.597a1.875 1.875 0 002.282.818l1.019-.382c.115-.043.283-.031.45.082.312.214.641.405.985.57.182.088.277.228.297.35l.178 1.071c.151.904.933 1.567 1.85 1.567h1.844c.916 0 1.699-.663 1.85-1.567l.178-1.072c.02-.12.114-.26.297-.349.344-.165.673-.356.985-.57.167-.114.335-.125.45-.082l1.02.382a1.875 1.875 0 002.28-.819l.923-1.597a1.875 1.875 0 00-.432-2.385l-.84-.692c-.095-.078-.17-.229-.154-.43a7.614 7.614 0 000-1.139c-.016-.2.059-.352.153-.43l.84-.692c.708-.582.891-1.59.433-2.385l-.922-1.597a1.875 1.875 0 00-2.282-.818l-1.02.382c-.114.043-.282.031-.449-.083a7.49 7.49 0 00-.985-.57c-.183-.087-.277-.227-.297-.348l-.179-1.072a1.875 1.875 0 00-1.85-1.567h-1.843zM12 15.75a3.75 3.75 0 100-7.5 3.75 3.75 0 000 7.5z" clip-rule="evenodd"/>
</svg>
{{ __('API Tokens') }}
</a>
@endif
</div>
<div class="flex flex-col py-1.5">
<form method="POST" action="{{ route('logout') }}" x-data>
@csrf
<a href="{{ route('logout') }}" @click.prevent="$root.submit();" class="flex items-center gap-2 bg-slate-100 px-4 py-2 text-sm text-slate-700 hover:bg-slate-800/5 hover:text-black focus-visible:bg-slate-800/10 focus-visible:text-black focus-visible:outline-none dark:bg-slate-800 dark:text-slate-300 dark:hover:bg-slate-100/5 dark:hover:text-white dark:focus-visible:bg-slate-100/10 dark:focus-visible:text-white" role="menuitem">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4">
<path fill-rule="evenodd" d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25Zm-2.625 6c-.54 0-.828.419-.936.634a1.96 1.96 0 0 0-.189.866c0 .298.059.605.189.866.108.215.395.634.936.634.54 0 .828-.419.936-.634.13-.26.189-.568.189-.866 0-.298-.059-.605-.189-.866-.108-.215-.395-.634-.936-.634Zm4.314.634c.108-.215.395-.634.936-.634.54 0 .828.419.936.634.13.26.189.568.189.866 0 .298-.059.605-.189.866-.108.215-.395.634-.936.634-.54 0-.828-.419-.936-.634a1.96 1.96 0 0 1-.189-.866c0-.298.059-.605.189-.866Zm-4.34 7.964a.75.75 0 0 1-1.061-1.06 5.236 5.236 0 0 1 3.73-1.538 5.236 5.236 0 0 1 3.695 1.538.75.75 0 1 1-1.061 1.06 3.736 3.736 0 0 0-2.639-1.098 3.736 3.736 0 0 0-2.664 1.098Z" clip-rule="evenodd" />
</svg>
{{ __('Log Out') }}
</a>
</form>
</div>
</div>
</div>
@elseauth
signin
@endauth
{{--
<div class="relative ml-4 flex-shrink-0">
<div>
<button type="button" class="relative flex rounded-full bg-gray-800 text-sm text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800" id="user-menu-button" aria-expanded="false" aria-haspopup="true">
<span class="absolute -inset-1.5"></span>
<span class="sr-only">{{ __('Open user menu') }}</span>
<img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
</button>
</div>
<!--
Dropdown menu, show/hide based on menu state.
Entering: "transition ease-out duration-100"
From: "transform opacity-0 scale-95"
To: "transform opacity-100 scale-100"
Leaving: "transition ease-in duration-75"
From: "transform opacity-100 scale-100"
To: "transform opacity-0 scale-95"
-->
<div class="absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="user-menu-button" tabindex="-1">
<!-- Active: "bg-gray-100", Not Active: "" -->
<a href="#" class="block px-4 py-2 text-sm text-gray-700" role="menuitem" tabindex="-1" id="user-menu-item-0">Your Profile</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700" role="menuitem" tabindex="-1" id="user-menu-item-1">Settings</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700" role="menuitem" tabindex="-1" id="user-menu-item-2">Sign out</a>
</div>
</div>
--}}
</div>
</div>
</div> </div>
</div> </div>
{{-- Responsive Navigation Menu --}} <!-- Mobile menu, show/hide based on menu state. -->
<div :class="{'block': open, 'hidden': ! open}" class="hidden sm:hidden"> <div class="lg:hidden" id="mobile-menu">
<div class="pt-2 pb-3 space-y-1"> <div class="space-y-1 px-2 pb-3 pt-2">
@auth() <!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" -->
<x-responsive-nav-link href="{{ route('dashboard') }}" :active="request()->routeIs('dashboard')">{{ __('Dashboard') }}</x-responsive-nav-link> <a href="#" class="block rounded-md bg-gray-900 px-3 py-2 text-base font-medium text-white">Dashboard</a>
@endauth <a href="#" class="block rounded-md px-3 py-2 text-base font-medium text-gray-300 hover:bg-gray-700 hover:text-white">Team</a>
<x-responsive-nav-link href="#">{{ __('About') }}</x-responsive-nav-link> <a href="#" class="block rounded-md px-3 py-2 text-base font-medium text-gray-300 hover:bg-gray-700 hover:text-white">Projects</a>
<x-responsive-nav-link href="#">{{ __('Articles') }}</x-responsive-nav-link> <a href="#" class="block rounded-md px-3 py-2 text-base font-medium text-gray-300 hover:bg-gray-700 hover:text-white">Calendar</a>
<x-responsive-nav-link href="#">{{ __('Documentation') }}</x-responsive-nav-link>
<x-responsive-nav-link href="{{ route('mods') }}" :active="request()->routeIs('mods')">{{ __('Mods') }}</x-responsive-nav-link>
<x-responsive-nav-link href="#">{{ __('Support') }}</x-responsive-nav-link>
</div> </div>
{{-- Responsive Settings Options --}} <div class="border-t border-gray-700 pb-3 pt-4">
<div class="pt-4 pb-1 border-t border-gray-200 dark:border-gray-700"> <div class="flex items-center px-5">
<div class="flex items-center px-4"> <div class="flex-shrink-0">
@auth <img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
@if (Laravel\Jetstream\Jetstream::managesProfilePhotos()) </div>
<div class="shrink-0 me-3"> <div class="ml-3">
<img class="h-10 w-10 rounded-full object-cover" src="{{ auth()->user()->profile_photo_url }}" alt="{{ auth()->user()->name }}"/> <div class="text-base font-medium text-white">Tom Cook</div>
</div> <div class="text-sm font-medium text-gray-400">tom@example.com</div>
@endif </div>
<div> <button type="button" class="relative ml-auto flex-shrink-0 rounded-full bg-gray-800 p-1 text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800">
<div class="font-medium text-base text-gray-800 dark:text-gray-300">{{ auth()->user()->name }}</div> <span class="absolute -inset-1.5"></span>
<div class="font-medium text-sm text-gray-500 dark:text-gray-300">{{ auth()->user()->email }}</div> <span class="sr-only">View notifications</span>
</div> <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
@endauth <path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0 0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085 5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0" />
</svg>
</button>
</div> </div>
<div class="mt-3 space-y-1 px-2">
<div class="mt-3 space-y-1"> <a href="#" class="block rounded-md px-3 py-2 text-base font-medium text-gray-400 hover:bg-gray-700 hover:text-white">Your Profile</a>
@auth <a href="#" class="block rounded-md px-3 py-2 text-base font-medium text-gray-400 hover:bg-gray-700 hover:text-white">Settings</a>
{{-- Account Management --}} <a href="#" class="block rounded-md px-3 py-2 text-base font-medium text-gray-400 hover:bg-gray-700 hover:text-white">Sign out</a>
<x-responsive-nav-link href="{{ route('profile.show') }}" :active="request()->routeIs('profile.show')">
{{ __('Profile') }}
</x-responsive-nav-link>
@if (Laravel\Jetstream\Jetstream::hasApiFeatures())
<x-responsive-nav-link href="{{ route('api-tokens.index') }}" :active="request()->routeIs('api-tokens.index')">
{{ __('API Tokens') }}
</x-responsive-nav-link>
@endif
{{-- Authentication --}}
<form method="POST" action="{{ route('logout') }}" x-data>
@csrf
<x-responsive-nav-link href="{{ route('logout') }}" @click.prevent="$root.submit();">
{{ __('Log Out') }}
</x-responsive-nav-link>
</form>
@endauth
</div> </div>
</div> </div>
</div> </div>

2
resources/views/profile/show.blade.php
View File

@ -1,6 +1,6 @@
<x-app-layout> <x-app-layout>
<x-slot name="header"> <x-slot name="header">
<h2 class="font-semibold text-xl text-gray-800 leading-tight"> <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-100 leading-tight">
{{ __('Profile') }} {{ __('Profile') }}
</h2> </h2>
</x-slot> </x-slot>

10
resources/views/profile/two-factor-authentication-form.blade.php
View File

@ -8,7 +8,7 @@
</x-slot> </x-slot>
<x-slot name="content"> <x-slot name="content">
<h3 class="text-lg font-medium text-gray-900"> <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100">
@if ($this->enabled) @if ($this->enabled)
@if ($showingConfirmation) @if ($showingConfirmation)
{{ __('Finish enabling two factor authentication.') }} {{ __('Finish enabling two factor authentication.') }}
@ -20,7 +20,7 @@
@endif @endif
</h3> </h3>
<div class="mt-3 max-w-xl text-sm text-gray-600"> <div class="mt-3 max-w-xl text-sm text-gray-600 dark:text-gray-400">
<p> <p>
{{ __('When two factor authentication is enabled, you will be prompted for a secure, random token during authentication. You may retrieve this token from your phone\'s Google Authenticator application.') }} {{ __('When two factor authentication is enabled, you will be prompted for a secure, random token during authentication. You may retrieve this token from your phone\'s Google Authenticator application.') }}
</p> </p>
@ -28,7 +28,7 @@
@if ($this->enabled) @if ($this->enabled)
@if ($showingQrCode) @if ($showingQrCode)
<div class="mt-4 max-w-xl text-sm text-gray-600"> <div class="mt-4 max-w-xl text-sm text-gray-600 dark:text-gray-400">
<p class="font-semibold"> <p class="font-semibold">
@if ($showingConfirmation) @if ($showingConfirmation)
{{ __('To finish enabling two factor authentication, scan the following QR code using your phone\'s authenticator application or enter the setup key and provide the generated OTP code.') }} {{ __('To finish enabling two factor authentication, scan the following QR code using your phone\'s authenticator application or enter the setup key and provide the generated OTP code.') }}
@ -42,7 +42,7 @@
{!! $this->user->twoFactorQrCodeSvg() !!} {!! $this->user->twoFactorQrCodeSvg() !!}
</div> </div>
<div class="mt-4 max-w-xl text-sm text-gray-600"> <div class="mt-4 max-w-xl text-sm text-gray-600 dark:text-gray-400">
<p class="font-semibold"> <p class="font-semibold">
{{ __('Setup Key') }}: {{ decrypt($this->user->two_factor_secret) }} {{ __('Setup Key') }}: {{ decrypt($this->user->two_factor_secret) }}
</p> </p>
@ -62,7 +62,7 @@
@endif @endif
@if ($showingRecoveryCodes) @if ($showingRecoveryCodes)
<div class="mt-4 max-w-xl text-sm text-gray-600"> <div class="mt-4 max-w-xl text-sm text-gray-600 dark:text-gray-400">
<p class="font-semibold"> <p class="font-semibold">
{{ __('Store these recovery codes in a secure password manager. They can be used to recover access to your account if your two factor authentication device is lost.') }} {{ __('Store these recovery codes in a secure password manager. They can be used to recover access to your account if your two factor authentication device is lost.') }}
</p> </p>

24
resources/views/profile/update-profile-information-form.blade.php
View File

@ -13,16 +13,16 @@
<div x-data="{photoName: null, photoPreview: null}" class="col-span-6 sm:col-span-4"> <div x-data="{photoName: null, photoPreview: null}" class="col-span-6 sm:col-span-4">
<!-- Profile Photo File Input --> <!-- Profile Photo File Input -->
<input type="file" id="photo" class="hidden" <input type="file" id="photo" class="hidden"
wire:model.live="photo" wire:model.live="photo"
x-ref="photo" x-ref="photo"
x-on:change=" x-on:change="
photoName = $refs.photo.files[0].name; photoName = $refs.photo.files[0].name;
const reader = new FileReader(); const reader = new FileReader();
reader.onload = (e) => { reader.onload = (e) => {
photoPreview = e.target.result; photoPreview = e.target.result;
}; };
reader.readAsDataURL($refs.photo.files[0]); reader.readAsDataURL($refs.photo.files[0]);
" /> " />
<x-label for="photo" value="{{ __('Photo') }}" /> <x-label for="photo" value="{{ __('Photo') }}" />
@ -69,13 +69,13 @@
<p class="text-sm mt-2"> <p class="text-sm mt-2">
{{ __('Your email address is unverified.') }} {{ __('Your email address is unverified.') }}
<button type="button" class="underline text-sm text-gray-600 hover:text-gray-900 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" wire:click.prevent="sendEmailVerification"> <button type="button" class="underline text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500" wire:click.prevent="sendEmailVerification">
{{ __('Click here to re-send the verification email.') }} {{ __('Click here to re-send the verification email.') }}
</button> </button>
</p> </p>
@if ($this->verificationLinkSent) @if ($this->verificationLinkSent)
<p class="mt-2 font-medium text-sm text-green-600"> <p class="mt-2 font-medium text-sm text-green-600 dark:text-green-400">
{{ __('A new verification link has been sent to your email address.') }} {{ __('A new verification link has been sent to your email address.') }}
</p> </p>
@endif @endif