Skip to content

Commit 5e873f7

Browse files
ReenigneArcherReenigneArcher
committed
fix(web-ui): modernize UI
1 parent 38a94b3 commit 5e873f7

14 files changed

Lines changed: 1815 additions & 379 deletions

File tree

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
"type": "module",
1111
"dependencies": {
1212
"@lizardbyte/shared-web": "2025.922.181114",
13+
"lucide-vue-next": "0.563.0",
1314
"marked": "17.0.1",
1415
"vue": "3.5.26",
1516
"vue-i18n": "11.2.8"

‎src_assets/common/assets/web/Navbar.vue‎

Lines changed: 38 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<nav class="navbar navbar-light navbar-expand-lg navbar-background header">
2+
<nav class="navbar navbar-expand-lg navbar-sunshine">
33
<div class="container-fluid">
44
<a class="navbar-brand" href="./" title="Sunshine">
55
<img src="/images/logo-sunshine-45.png" height="45" alt="Sunshine">
@@ -11,22 +11,40 @@
1111
<div class="collapse navbar-collapse" id="navbarSupportedContent">
1212
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
1313
<li class="nav-item">
14-
<a class="nav-link" href="./"><i class="fas fa-fw fa-home"></i> {{ $t('navbar.home') }}</a>
14+
<a class="nav-link" href="./">
15+
<Home :size="18" class="icon"></Home>
16+
{{ $t('navbar.home') }}
17+
</a>
1518
</li>
1619
<li class="nav-item">
17-
<a class="nav-link" href="./pin"><i class="fas fa-fw fa-unlock"></i> {{ $t('navbar.pin') }}</a>
20+
<a class="nav-link" href="./pin">
21+
<Lock :size="18" class="icon"></Lock>
22+
{{ $t('navbar.pin') }}
23+
</a>
1824
</li>
1925
<li class="nav-item">
20-
<a class="nav-link" href="./apps"><i class="fas fa-fw fa-stream"></i> {{ $t('navbar.applications') }}</a>
26+
<a class="nav-link" href="./apps">
27+
<Layers :size="18" class="icon"></Layers>
28+
{{ $t('navbar.applications') }}
29+
</a>
2130
</li>
2231
<li class="nav-item">
23-
<a class="nav-link" href="./config"><i class="fas fa-fw fa-cog"></i> {{ $t('navbar.configuration') }}</a>
32+
<a class="nav-link" href="./config">
33+
<Settings :size="18" class="icon"></Settings>
34+
{{ $t('navbar.configuration') }}
35+
</a>
2436
</li>
2537
<li class="nav-item">
26-
<a class="nav-link" href="./password"><i class="fas fa-fw fa-user-shield"></i> {{ $t('navbar.password') }}</a>
38+
<a class="nav-link" href="./password">
39+
<Shield :size="18" class="icon"></Shield>
40+
{{ $t('navbar.password') }}
41+
</a>
2742
</li>
2843
<li class="nav-item">
29-
<a class="nav-link" href="./troubleshooting"><i class="fas fa-fw fa-info"></i> {{ $t('navbar.troubleshoot') }}</a>
44+
<a class="nav-link" href="./troubleshooting">
45+
<Info :size="18" class="icon"></Info>
46+
{{ $t('navbar.troubleshoot') }}
47+
</a>
3048
</li>
3149
<li class="nav-item">
3250
<ThemeToggle/>
@@ -38,10 +56,19 @@
3856
</template>
3957

4058
<script>
59+
import { Home, Lock, Layers, Settings, Shield, Info } from 'lucide-vue-next'
4160
import ThemeToggle from './ThemeToggle.vue'
4261
4362
export default {
44-
components: { ThemeToggle },
63+
components: {
64+
ThemeToggle,
65+
Home,
66+
Lock,
67+
Layers,
68+
Settings,
69+
Shield,
70+
Info
71+
},
4572
created() {
4673
console.log("Header mounted!")
4774
},
@@ -53,34 +80,8 @@ export default {
5380
</script>
5481

5582
<style>
56-
.navbar-background {
57-
background-color: #ffc400
58-
}
59-
60-
.header .nav-link {
61-
color: rgba(0, 0, 0, .65) !important;
62-
}
63-
64-
.header .nav-link.active {
65-
color: rgb(0, 0, 0) !important;
66-
font-weight: 500;
67-
}
68-
69-
.header .nav-link:hover {
70-
color: rgb(0, 0, 0) !important;
71-
font-weight: 500;
72-
}
73-
74-
.header .navbar-toggler {
75-
color: rgba(var(--bs-dark-rgb), .65) !important;
76-
border: var(--bs-border-width) solid rgba(var(--bs-dark-rgb), 0.15) !important;
77-
}
78-
79-
.header .navbar-toggler-icon {
80-
--bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2833, 37, 41, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
81-
}
82-
83-
.form-control::placeholder {
84-
opacity: 0.5;
83+
/* Navbar toggler icon for dark text on light background */
84+
.navbar-sunshine .navbar-toggler-icon {
85+
--bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
8586
}
8687
</style>

‎src_assets/common/assets/web/ResourceCard.vue‎

Lines changed: 38 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,55 @@
11
<template>
2-
<div class="card p-2">
2+
<div class="card">
33
<div class="card-body">
44
<h2>{{ $t('resource_card.resources') }}</h2>
5-
<br>
65
<p>{{ $t('resource_card.resources_desc') }}</p>
7-
<div class="card-group p-4 align-items-center">
8-
<a class="btn btn-success m-1" href="https://app.lizardbyte.dev" target="_blank">
9-
{{ $t('resource_card.lizardbyte_website') }}</a>
10-
<a class="btn btn-primary m-1" href="https://app.lizardbyte.dev/discord" target="_blank">
11-
<i class="fab fa-fw fa-discord"></i> Discord</a>
12-
<a class="btn btn-secondary m-1" href="https://github.com/orgs/LizardByte/discussions" target="_blank">
13-
<i class="fab fa-fw fa-github"></i> {{ $t('resource_card.github_discussions') }}</a>
6+
<div class="d-flex flex-wrap gap-2 mt-4">
7+
<a class="btn btn-success" href="https://app.lizardbyte.dev" target="_blank">
8+
<Globe :size="18" class="icon"></Globe>
9+
{{ $t('resource_card.lizardbyte_website') }}
10+
</a>
11+
<a class="btn btn-primary" href="https://app.lizardbyte.dev/discord" target="_blank">
12+
<MessageCircle :size="18" class="icon"></MessageCircle>
13+
Discord
14+
</a>
15+
<a class="btn btn-secondary" href="https://github.com/orgs/LizardByte/discussions" target="_blank">
16+
<Github :size="18" class="icon"></Github>
17+
{{ $t('resource_card.github_discussions') }}
18+
</a>
1419
</div>
1520
</div>
1621
</div>
1722
<!-- Legal -->
18-
<div class="card p-2 mt-4">
23+
<div class="card mt-4">
1924
<div class="card-body">
2025
<h2>{{ $t('resource_card.legal') }}</h2>
21-
<br>
2226
<p>{{ $t('resource_card.legal_desc') }}</p>
23-
<div class="card-group p-4 align-items-center">
24-
<a class="btn btn-danger m-1" href="https://github.com/LizardByte/Sunshine/blob/master/LICENSE"
27+
<div class="d-flex flex-wrap gap-2 mt-4">
28+
<a class="btn btn-danger" href="https://github.com/LizardByte/Sunshine/blob/master/LICENSE"
2529
target="_blank">
26-
<i class="fas fa-fw fa-file-alt"></i> {{ $t('resource_card.license') }}</a>
27-
<a class="btn btn-danger m-1" href="https://github.com/LizardByte/Sunshine/blob/master/NOTICE"
30+
<FileText :size="18" class="icon"></FileText>
31+
{{ $t('resource_card.license') }}
32+
</a>
33+
<a class="btn btn-danger" href="https://github.com/LizardByte/Sunshine/blob/master/NOTICE"
2834
target="_blank">
29-
<i class="fas fa-fw fa-exclamation"></i> {{ $t('resource_card.third_party_notice') }}</a>
35+
<AlertCircle :size="18" class="icon"></AlertCircle>
36+
{{ $t('resource_card.third_party_notice') }}
37+
</a>
3038
</div>
3139
</div>
3240
</div>
3341
</template>
42+
43+
<script>
44+
import { Globe, MessageCircle, Github, FileText, AlertCircle } from 'lucide-vue-next'
45+
46+
export default {
47+
components: {
48+
Globe,
49+
MessageCircle,
50+
Github,
51+
FileText,
52+
AlertCircle
53+
}
54+
}
55+
</script>

‎src_assets/common/assets/web/ThemeToggle.vue‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<script setup>
22
import { loadAutoTheme, setupThemeToggleListener } from './theme'
33
import { onMounted } from 'vue'
4+
import { Sun, Moon, MonitorSmartphone } from 'lucide-vue-next'
45
56
onMounted(() => {
67
loadAutoTheme()
@@ -10,31 +11,33 @@ onMounted(() => {
1011

1112
<template>
1213
<div class="dropdown bd-mode-toggle">
13-
<a class="nav-link dropdown-toggle align-items-center"
14+
<a class="nav-link dropdown-toggle d-flex align-items-center"
1415
id="bd-theme"
1516
type="button"
1617
aria-expanded="false"
1718
data-bs-toggle="dropdown"
1819
aria-label="{{ $t('navbar.toggle_theme') }} ({{ $t('navbar.theme_auto') }})">
19-
<span class="bi my-1 theme-icon-active"><i class="fa-solid fa-circle-half-stroke"></i></span>
20+
<span class="theme-icon-active">
21+
<MonitorSmartphone :size="18" class="icon"></MonitorSmartphone>
22+
</span>
2023
<span id="bd-theme-text">{{ $t('navbar.toggle_theme') }}</span>
2124
</a>
2225
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="bd-theme-text">
2326
<li>
2427
<button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="light" aria-pressed="false">
25-
<i class="bi me-2 theme-icon fas fa-fw fa-solid fa-sun"></i>
28+
<Sun :size="18" class="theme-icon icon"></Sun>
2629
{{ $t('navbar.theme_light') }}
2730
</button>
2831
</li>
2932
<li>
3033
<button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="dark" aria-pressed="false">
31-
<i class="bi me-2 theme-icon fas fa-fw fa-solid fa-moon"></i>
34+
<Moon :size="18" class="theme-icon icon"></Moon>
3235
{{ $t('navbar.theme_dark') }}
3336
</button>
3437
</li>
3538
<li>
3639
<button type="button" class="dropdown-item d-flex align-items-center active" data-bs-theme-value="auto" aria-pressed="true">
37-
<i class="bi me-2 theme-icon fas fa-fw fa-solid fa-circle-half-stroke"></i>
40+
<MonitorSmartphone :size="18" class="theme-icon icon"></MonitorSmartphone>
3841
{{ $t('navbar.theme_auto') }}
3942
</button>
4043
</li>

0 commit comments

Comments
 (0)