Added indication in the desktop UI for back-end connectivity (#711)

* Changed the styling of the link that takes a user to the settings page into a button
* added an indicator that shows if a user is connected to the server or not
* made a class name more descriptive and also made the text in first run message more intuitive
* changed the command to install dependencies in the README.md
* changed the class name of the first run message text to be more descriptive
* added icons in the desktop UI that shows if a file is synced successfully or not
* made the link class name in the homepage more descriptive
* fixed the hover issue on status box in the chat header pane
* fixed hovering issue on status box on macOS
This commit is contained in:
Olatoyan George
2024-04-23 12:13:48 +01:00
committed by GitHub
parent 419b044ac5
commit ad59180fb8
8 changed files with 140 additions and 7 deletions

View File

@@ -0,0 +1,9 @@
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
<svg width="800px" height="800px" viewBox="-2.4 -2.4 28.80 28.80" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="SVGRepo_bgCarrier" stroke-width="0">
<rect x="-2.4" y="-2.4" width="28.80" height="28.80" rx="14.4" fill="#ffad9f" strokewidth="0"/>
</g>

After

Width:  |  Height:  |  Size: 1.6 KiB

View File

@@ -0,0 +1,9 @@
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
<svg width="800px" height="800px" viewBox="-2.4 -2.4 28.80 28.80" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="#16ba00">
<g id="SVGRepo_bgCarrier" stroke-width="0">
<rect x="-2.4" y="-2.4" width="28.80" height="28.80" rx="14.4" fill="#7aff00" strokewidth="0"/>
</g>

After

Width:  |  Height:  |  Size: 1.3 KiB

View File

@@ -89,8 +89,38 @@ nav.khoj-nav {
grid-auto-flow: column;
grid-gap: 32px;
justify-self: right;
align-items: center;
}
.khoj-status-box {
display: flex;
align-items: center;
justify-content: center;
min-width: 52px;
gap: 4px;
-webkit-app-region: no-drag;
}
.khoj-status-box .khoj-status-connected {
height: 12px;
width: 12px;
border-radius: 50%;
background-color: rgb(90, 235, 90);
}
.khoj-status-box .khoj-status-not-connected {
height: 12px;
width: 12px;
border-radius: 50%;
background-color: rgb(235, 90, 90);
}
.khoj-status-box .khoj-status-text {
display: none;
}
.khoj-status-box:hover .khoj-status-text {
display: block;
}
a.khoj-nav {
display: flex;
align-items: center;