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

@@ -888,10 +888,10 @@
}
function renderFirstRunSetupMessage() {
first_run_message = `Hi 👋🏾, to get started:
first_run_message = `<p class="first-run-message-heading">Hi 👋🏾, to get started:<p>
<ol>
<li>Generate an API token in the <a class='inline-chat-link' href="#" onclick="window.navigateAPI.navigateToWebSettings()">Khoj Web settings</a></li>
<li>Paste it into the API Key field in the <a class='inline-chat-link' href="#" onclick="window.navigateAPI.navigateToSettings()">Khoj Desktop settings</a></li>
<li class="first-run-message-text">Generate an API token <a class='first-run-message-link' href="#" onclick="window.navigateAPI.navigateToWebSettings()">Khoj Web settings</a></li>
<li class="first-run-message-text">Paste it into the API Key field <a class='first-run-message-link' href="#" onclick="window.navigateAPI.navigateToSettings()">Khoj Desktop settings</a></li>
</ol>`
.trim()
.replace(/(\r\n|\n|\r)/gm, "");
@@ -1715,10 +1715,53 @@
box-shadow: 0 0 16px var(--primary);
}
.first-run-message-heading {
font-size: 20px;
font-weight: 300;
line-height: 1.5em;
color: var(--main-text-color);
margin: 0;
padding: 10px;
}
.first-run-message-text {
font-size: 18px;
font-weight: 300;
line-height: 1.5em;
color: var(--main-text-color);
margin: 0;
padding-bottom: 25px;
}
a.inline-chat-link {
color: #475569;
text-decoration: none;
border-bottom: 1px dotted #475569;
display: block;
text-align: center;
font-size: 14px;
color: #fff;
padding: 6px 15px;
border-radius: 999px;
text-decoration: none;
background-color: rgba(71, 85, 105, 0.6);
transition: background-color 0.3s ease-in-out;
}
a.inline-chat-link:hover {
background-color: #475569;
}
a.first-run-message-link {
display: block;
text-align: center;
font-size: 14px;
color: #fff;
padding: 6px 15px;
border-radius: 999px;
text-decoration: none;
background-color: rgba(71, 85, 105, 0.6);
transition: background-color 0.3s ease-in-out;
}
a.first-run-message-link:hover {
background-color: #475569;
}
a.reference-link {