From ab72d2fc33900fa8f9b2e13e213b93a8b2ecfd03 Mon Sep 17 00:00:00 2001
From: Hmmm <102938585+git-Hmmm@users.noreply.github.com>
Date: Sat, 31 Dec 2022 23:43:25 +0530
Subject: [PATCH] feat: css fixes on custom sources options

---
 public/settings/index.html    | 36 ++++++++++++++++++-----------------
 public/styles/fontawesome.css |  4 ++++
 public/styles/settings.css    |  8 ++++++++
 3 files changed, 31 insertions(+), 17 deletions(-)

diff --git a/public/settings/index.html b/public/settings/index.html
index 11485b1d..cf3e3c6d 100644
--- a/public/settings/index.html
+++ b/public/settings/index.html
@@ -88,26 +88,28 @@ <h3>
                   autocomplete="off" /><span class="slider"></span
               ></label>
             </div>
-            <div class="option">
-              <h3>Sources</h3>
+            <div id="src" class="option">
+              <h3><i class="fa-solid fa-server"></i>Sources</h3>
+
+              <p>
+                Configure your custom sources.<br />Eg. GitHub
+                Username/Repository.
+              </p>
 
-              <p>Configure your custom sources.</p>
-              <div class="option">
-                <div id="themecolor-picker">
-                  <h3>Patches Organization</h3>
-                  <input id="patch-org" class="searchBox" />
-                  <h3>Patches Source</h3>
-                  <input id="patch-src" class="searchBox" />
-                </div>
+              <div>
+                <h3>Patches Organization</h3>
+                <input id="patch-org" class="searchBox" />
+                <h3>Patches Source</h3>
+                <input id="patch-src" class="searchBox" />
               </div>
-              <div class="option">
-                <div id="themecolor-picker">
-                  <h3>Integrations Organization</h3>
-                  <input id="integrations-org" class="searchBox" />
-                  <h3>Integrations Source</h3>
-                  <input id="integrations-src" class="searchBox" />
-                </div>
+
+              <div>
+                <h3>Integrations Organization</h3>
+                <input id="integrations-org" class="searchBox" />
+                <h3>Integrations Source</h3>
+                <input id="integrations-src" class="searchBox" />
               </div>
+
               <button class="highlighted" onclick="setSources();">
                 Set Sources
               </button>
diff --git a/public/styles/fontawesome.css b/public/styles/fontawesome.css
index 4cceb35a..c7ecdce1 100644
--- a/public/styles/fontawesome.css
+++ b/public/styles/fontawesome.css
@@ -98,6 +98,10 @@
   content: '\f013';
 }
 
+.fa-server:before {
+  content: '\f233';
+}
+
 .fa-brands {
   font-family: 'Font Awesome 6 Brands';
   font-size: 400;
diff --git a/public/styles/settings.css b/public/styles/settings.css
index bee0f3eb..f3287c94 100644
--- a/public/styles/settings.css
+++ b/public/styles/settings.css
@@ -86,3 +86,11 @@ p {
 .check:checked + .slider {
   background-color: var(--accentColor);
 }
+
+.option#src div {
+  padding: 0 8px 0 8px;
+}
+
+.option#src div input {
+  margin-bottom: 15px;
+}