From 8f6b31a47a1a817c168a5974dbdd5d5c2ebf07fe Mon Sep 17 00:00:00 2001
From: Gerome Matilla <gerome.matilla07@gmail.com>
Date: Thu, 4 Jun 2020 11:49:17 +0800
Subject: [PATCH] dashboard add weather settings gui

---
 css/style.css            |   1 +
 css/weather-settings.css | 126 +++++++++++++++++++++++++++++++++++++++
 index.html               |  42 +++++++++++++
 3 files changed, 169 insertions(+)
 create mode 100644 css/weather-settings.css

diff --git a/css/style.css b/css/style.css
index 85761b7..bf27801 100644
--- a/css/style.css
+++ b/css/style.css
@@ -14,6 +14,7 @@
 @import url('search-engine-settings.css');
 @import url('theme-engine.css');
 @import url('weather-screen.css');
+@import url('weather-settings.css');
 
 :root {
 	/* Colors */
diff --git a/css/weather-settings.css b/css/weather-settings.css
new file mode 100644
index 0000000..80926d1
--- /dev/null
+++ b/css/weather-settings.css
@@ -0,0 +1,126 @@
+.weatherSettings {
+	font-family: roboto;
+	width: 100%;
+	height: auto;
+	position: relative;;
+	border-radius: 6px;
+	color: var(--base-color);
+	background: var(--base-container);
+	margin-top: 10px;
+}
+
+#weatherSettingsPadding {
+	padding: 5px;
+	height: auto;
+}
+
+#weatherSettingsHeader {
+	height: 32px;
+	width: 100%;
+
+	display: flex;
+	flex-direction: row;
+	justify-content: left;
+}
+
+#weatherSettingsHeaderIcon {
+	background: url('../assets/ui-icons/weather.svg');
+	background-size: cover;
+	margin-right: 10px;
+	width: 28px;
+	height: 28px;
+}
+
+#weatherSettingsHeaderLabel {
+	text-align: left;
+	font-weight: bold;
+	font-size: 14pt;
+	margin-top: auto;
+	margin-bottom: auto;
+}
+
+/*Main settings*/
+.weatherSettingsGroups {
+	height: auto;
+	width: 100%;
+	margin-top: 5px;
+}
+
+.weatherSettingsLabels {
+	font-size: 12pt;
+	text-align: left;
+}
+
+.weatherSettingsInputs {
+	height: 32px;
+	width: 100%;
+	box-sizing: border-box;
+	margin-top: 5px;
+	border: none;
+	text-align: center;
+	border-radius: 6px;
+	color: var(--base-color);
+	background: var(--panel-bg);
+
+	/*Center vertically*/
+	display: flex;
+  	justify-content: center;
+  	align-items: center;
+}
+
+#weatherSelectUnits {
+	background: var(--base-container);
+	color: var(--base-color);
+
+	-webkit-appearance: none;
+	-moz-appearance: none;
+	appearance: none;
+}
+
+#weatherSelectUnits:hover {
+	cursor: pointer;
+}
+
+#weatherSelectUnits option {
+	color: initial;
+	border: none;
+}
+
+#weatherSettingsApply, #weatherSettingsReset {
+	margin-top: 0;
+	background: var(--base-container) !important;
+}
+
+#weatherSettingsApply {
+	margin-left: 2.5px;
+}
+
+#weatherSettingsReset {
+	margin-right: 2.5px;
+}
+
+#weatherSettingsApply:hover, #weatherSettingsReset:hover {
+	background: var(--base-hover-bg) !important;
+	cursor: pointer;
+}
+
+#weatherSettingsApply:active, #weatherSettingsReset:active {
+	background: var(--base-active-bg) !important;
+}
+
+#weatherSettingsButtons {
+	display: flex;
+	flex-direction: row;
+	justify-content: left;
+}
+
+#weatherSettingsContainer {
+	height: auto;
+}
+
+@media screen and (max-width: 580px) {
+	.weatherSettings {
+		width: 96vw;
+		box-sizing: border-box;
+	}
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index 63ee6a4..8164039 100644
--- a/index.html
+++ b/index.html
@@ -61,6 +61,48 @@
 			<div id="dateMessage"></div>
 
 
+			<!-- Weather Settings -->
+			<div class="weatherSettings">
+				<div id="weatherSettingsPadding">
+
+					<div class="header" id="weatherSettingsHeader">
+						<div class="headerIcon" id="weatherSettingsHeaderIcon"></div>
+						<div class="headerLabel" id="weatherSettingsHeaderLabel">Weather Settings</div>
+					</div>
+
+					<div id="weatherSettingsContainer">
+						<div class="weatherSettingsGroups">
+							<div class="weatherSettingsLabels">
+								API Key
+							</div>
+							<input type="text" class="weatherSettingsInputs" id="apiBox" autocomplete="off" placeholder="API KEY"/>
+						</div>
+						<div class="weatherSettingsGroups">
+							<div class="weatherSettingsLabels">
+								City ID
+							</div>
+							<input type="text" class="weatherSettingsInputs" id="cityBox" autocomplete="off" placeholder="City ID"/>
+						</div>
+						<div class="weatherSettingsGroups">
+							<div class="weatherSettingsLabels">
+								Units
+							</div>
+							<select class="weatherSettingsInputs" id="weatherSelectUnits">
+								<option value="metric">Metric</option>
+							  	<option value="imperial">Imperial</option>
+							</select>
+						</div>
+
+						<div class="weatherSettingsGroups" id="weatherSettingsButtons">
+							<div class="weatherSettingsInputs" id="weatherSettingsReset">Clear Credentials</div>
+							<div class="weatherSettingsInputs" id="weatherSettingsApply">Apply</div>
+						</div>
+					</div>
+				</div>
+			</div>
+
+
+
 			<!-- Select search engine -->
 			<div class="searchEngine">
 				<div id="searchEnginePadding">