Skip to content

Commit

Permalink
Merge pull request #21 from VMGWARE/feature-ui-redesign
Browse files Browse the repository at this point in the history 
UI redesign
  • Loading branch information
@Codycody31
Codycody31 authored Oct 6, 2023
2 parents 25fbe66 + 7792702 commit 573eda5
Show file tree
Hide file tree
Showing 6 changed files with 127 additions and 42 deletions.
55 changes: 33 additions & 22 deletions frontend/src/App.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,36 +3,34 @@
class="navbar navbar-expand-lg navbar-dark bg-dark mb-3 sticky-top"
style="padding-left: 20px"
>
<!-- Logo and Branding -->
<router-link class="navbar-brand" to="/">
<img
src="@/assets/images/branding/Camphouse-v2.png"
alt="Camphouse Logo"
height="30"
width="30"
class="d-inline-block align-text-top me-2"
/>
<img
src="@/assets/images/branding/Camphouse-Icon-Light.png"
alt="Camphouse Logo"
height="30"
width="150"
class="d-inline-block align-text-top me-2"
/>
<!-- Alpha Badge -->
<span class="alpha-badge">ALPHA</span>
</router-link>

<!-- Navigation Toggler for Mobile -->
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation"
style="margin-right: 10px"
>
<span class="navbar-toggler-icon"></span>
</button>

<!-- Navigation Items -->
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto" v-if="!this.$store.state.loggedIn">
<li class="nav-item">
Expand Down Expand Up @@ -70,19 +68,32 @@
>
</li>
<li class="nav-item">
<router-link class="nav-link" to="/messages"
><i class="fa fa-envelope"></i> Messages</router-link
>
</li>
<li class="nav-item">
<router-link class="nav-link" to="/settings"
><i class="fa fa-cog"></i> Settings</router-link
>
</li>
<li class="nav-item">
<p class="fake-link nav-link" @click="logout" v-if="!isLoading">
<i class="fas fa-sign-out-alt"></i> Logout
</p>
<!-- Dropdown for Additional Options -->
<div class="dropdown">
<button
class="nav-link btn btn-secondary dropdown-toggle"
type="button"
id="userOptions"
data-bs-toggle="dropdown"
>
Options
</button>
<div class="dropdown-menu">
<router-link class="dropdown-item" to="/messages"
><i class="fa fa-envelope"></i> Messages</router-link
>
<router-link class="dropdown-item" to="/settings"
><i class="fa fa-cog"></i> Settings</router-link
>
<p
class="fake-link dropdown-item"
@click="logout"
v-if="!isLoading"
>
<i class="fas fa-sign-out-alt"></i> Logout
</p>
</div>
</div>
</li>
<li class="nav-item">
<router-link class="nav-link btn btn-secondary" to="/new-post"
Expand All @@ -92,7 +103,7 @@
</ul>
</div>
</nav>
<div id="main" class="clear-top">
<div id="main">
<router-view />
</div>
<ModalsContainer />
Expand Down Expand Up @@ -208,7 +219,7 @@ export default {
}
#main {
min-height: 100%;
overflow: auto;
/* overflow: auto; */
}
.alpha-badge {
background-color: #ff4500; /* orange-red color */
Expand Down
56 changes: 56 additions & 0 deletions frontend/src/assets/stylesheets/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -527,4 +527,60 @@ img-tag {
color: #ffffff;
padding: 0;
border-radius: 0;
}

.dropdown-menu {
background-color: #222222;
}

.dropdown-menu .dropdown-item {
color: #ffc34d;
border-bottom: 1px solid #333333;
}

.dropdown-menu .dropdown-item:hover {
color: #ffc34d;
background-color: #333333;
}

.dropdown-menu .dropdown-item.active {
color: #ffc34d;
background-color: #333333;
}

.form-group .form-control,
.form-control {
background-color: #333333;
color: #ffffff;
border: none;
border-radius: 8px;
}

.form-group .form-control:focus,
.form-control:focus {
background-color: #333333;
color: #ffffff;
border: none;
border-radius: 8px;
box-shadow: 0 0 0 2px #ffc34d;
}

.form-group .form-control::placeholder,
.form-control::placeholder {
color: #999999;
}

.form-group .form-control:focus::placeholder,
.form-control:focus::placeholder {
color: #999999;
}

.navbar-toggler {
border: none;
margin-right: 10px;
}

/* toggler aria-expanded=true */
.navbar-toggler[aria-expanded='true'] {
color: #ffc34d;
}
2 changes: 1 addition & 1 deletion frontend/src/components/PostComponent.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@
<div class="dropdown-menu" aria-labelledby="dropdownPostOptions">
<!-- TODO: This dropdown can also hold the report button -->
<a
class="dropdown-item fake-link custom-dropdown-item text-dark"
class="dropdown-item fake-link custom-dropdown-item"
href="#"
@click="
openModalWithInfo(
Expand Down
39 changes: 30 additions & 9 deletions frontend/src/views/MessageView.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -230,12 +230,13 @@
}
.context-menu {
position: absolute;
background-color: #fff;
border: 1px solid #ccc;
background-color: #202225;
border: 1px solid #34373c;
color: #ffffff;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
z-index: 1000;
padding: 5px;
color: #333;
/* color: #333; */
font-size: 0.8em;
/* Curve corners */
border-radius: 5px;
Expand All @@ -259,14 +260,16 @@
transition: background-color 0.3s;
}
.context-menu li:hover {
background-color: #f0f0f0;
background-color: #7289da;
border-radius: 5px;
}
#connectionsSidebar {
background-color: #202225;
border-radius: 5px;
overflow-y: auto;
max-height: 100vh;
max-height: calc(100vh - 200px);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
margin-bottom: 20px;
}
#connectionsSidebar a {
Expand All @@ -289,6 +292,28 @@
color: #333;
border-color: #ffc34d;
}
#connectionsSidebar .user-item {
position: relative; /* Makes it the reference for absolutely positioned children */
background-color: #202225;
border: none;
color: #dcddde;
margin-bottom: 5px;
border-radius: 5px;
}
#connectionsSidebar .user-item:hover {
background-color: #2f3136 !important;
color: #ffffff !important;
border-radius: 5px;
transition: background-color 1s;
}
#connectionsSidebar .user-item.active {
background-color: #2f3136 !important;
color: #ffffff !important;
border-radius: 5px;
}
.input-group {
border-top: 1px solid #34373c;
background-color: #2f3136;
Expand Down Expand Up @@ -401,10 +426,6 @@
padding: 2px 5px;
border-radius: 5px;
}
.user-item {
position: relative; /* Makes it the reference for absolutely positioned children */
}
</style>

<script>
Expand Down
2 changes: 2 additions & 0 deletions frontend/src/views/NewPostView.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -183,6 +183,8 @@ textarea.form-input {
background-color: #121212;
border-radius: 4px;
color: #ffffff;
overflow-wrap: break-word;
overflow-x: auto;
}
.btn-submit {
Expand Down
15 changes: 5 additions & 10 deletions frontend/src/views/SettingsView.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,8 @@

<!-- Profile Picture Card -->
<div class="card">
<h5 class="card-title">Profile Picture</h5>
<div class="card-body">
<h5 class="card-title">Profile Picture</h5>

<!-- Display current profile picture -->
<div v-if="currentUser && currentUser.profilePicture">
<img
Expand All @@ -20,8 +19,9 @@

<!-- Form to upload new profile picture -->
<form @submit.prevent="uploadProfilePicture">
<div class="form-group">
<div class="form-group mt-3">
<label for="profilePicture">Upload Profile Picture</label>
<br />
<input
type="file"
class="form-control-file"
Expand All @@ -46,8 +46,8 @@

<!-- General Settings Form -->
<div class="card">
<h5 class="card-title">General</h5>
<div class="card-body">
<h5 class="card-title">General</h5>
<form @submit.prevent="saveGeneralSettings">
<div class="form-group">
<label for="handle">Handle</label>
Expand Down Expand Up @@ -142,13 +142,8 @@

<!-- Two-Factor Authentication (2FA) Section -->
<div class="card">
<h5 class="card-title">Two-Factor Authentication</h5>
<div class="card-body">
<h5 class="card-title">Two-Factor Authentication</h5>
<p class="card-text">
Two-factor authentication (2FA) is an extra layer of security for your
account.
</p>

<div v-if="!currentUser.twoFactorAuth.enabled">
<button type="button" class="btn btn-primary mb-3" @click="setup2FA">
Enable 2FA
Expand Down

0 comments on commit 573eda5

Please sign in to comment.