UI UX changes

sharper button corners
button spacing
This commit is contained in:
Corban-Lee Jones 2024-05-28 22:32:23 +01:00
parent f85dc77695
commit 9a45e65630

View File

@ -16,7 +16,7 @@
<ul id="serverList" class="nav nav-pills nav-flush flex-column mb-auto text-center">
<!-- <li class="nav-item"><hr class="my-3"></li> -->
<li class="nav-item">
<button type="button" id="newServerBtn" class="btn btn-outline-primary rounded-circle mt-1" style="width: 46px; height: 46px;">
<button type="button" id="newServerBtn" class="btn btn-outline-primary rounded-1 mt-1" style="width: 46px; height: 46px;">
<i class="bi bi-plus-lg fs-5"></i>
</button>
</li>
@ -53,29 +53,29 @@
<div class="d-flex px-3 pt-4 pb-2">
<ul id="serverTabs" class="nav nav-pills me-auto" role="tablist">
<li class="nav-item" role="presentation">
<button id="subscriptionsTab" class="nav-link" data-bs-toggle="tab" data-bs-target="#subscriptionsTabPane" type="button" aria-controls="subscriptionsTabPane" aria-selected="false">Subscriptions</button>
<button id="subscriptionsTab" class="nav-link rounded-1" data-bs-toggle="tab" data-bs-target="#subscriptionsTabPane" type="button" aria-controls="subscriptionsTabPane" aria-selected="false">Subscriptions</button>
</li>
<li class="nav-item" role="presentation">
<button id="filtersTab" class="nav-link" data-bs-toggle="tab" data-bs-target="#filtersTabPane" type="button" aria-controls="filtersTabPane" aria-selected="false">Content Filters</button>
<button id="filtersTab" class="nav-link rounded-1" data-bs-toggle="tab" data-bs-target="#filtersTabPane" type="button" aria-controls="filtersTabPane" aria-selected="false">Content Filters</button>
</li>
<li class="nav-item" role="presentation">
<button id="contentTab" class="nav-link" data-bs-toggle="tab" data-bs-target="#contentTabPane" type="button" aria-controls="contentTabPane" aria-selected="false">Content</button>
<button id="contentTab" class="nav-link rounded-1" data-bs-toggle="tab" data-bs-target="#contentTabPane" type="button" aria-controls="contentTabPane" aria-selected="false">Content</button>
</li>
</ul>
<div class="tab-pane-buttons">
<div class="tab-pane-buttons-item" data-tab="subscriptionsTab">
<button type="button" id="addSubscriptionBtn" class="btn btn-primary me-2">
<button type="button" id="addSubscriptionBtn" class="btn btn-primary rounded-1 me-3">
<i class="bi bi-plus-lg"></i>
</button>
<button type="button" id="deleteSelectedSubscriptionsBtn" class="btn btn-danger" disabled>
<button type="button" id="deleteSelectedSubscriptionsBtn" class="btn btn-danger rounded-1 ms-0" disabled>
<i class="bi bi-trash3"></i>
</button>
</div>
<div class="tab-pane-buttons-item" data-tab="filtersTab">
<button type="button" id="addFilterBtn" class="btn btn-primary me-2">
<button type="button" id="addFilterBtn" class="btn btn-primary rounded-1 me-3">
<i class="bi bi-plus-lg"></i>
</button>
<button type="button" id="deleteSelectedFiltersBtn" class="btn btn-danger">
<button type="button" id="deleteSelectedFiltersBtn" class="btn btn-danger rounded-1 ms-0">
<i class="bi bi-trash3"></i>
</button>
</div>
@ -114,7 +114,7 @@
{% block javascript %}
<script id="serverItemTemplate" type="text/template">
<li class="nav-item server-item" data-id="" data-bs-toggle="tooltip" data-bs-placement="right">
<button type="button" class="btn border-0 server-item-selector">
<button type="button" class="btn border-0 server-item-selector mb-2">
<img src="" alt="Guild Icon" class="rounded-circle" width="46" height="46">
</button>
</li>