dashboard add search engine settings

css/search-engine-settings.css

@@ -0,0 +1,104 @@
+.searchEngine {
+	font-family: roboto;
+	width: 100%;
+	height: auto;
+	position: relative;;
+	border-radius: 6px;
+	color: var(--base-color);
+	background: var(--base-container);
+	margin-top: 10px;
+}
+
+#searchEnginePadding {
+	padding: 5px;
+	height: auto;
+}
+
+#searchEngineHeader {
+	height: 32px;
+	width: 100%;
+
+	display: flex;
+	flex-direction: row;
+	justify-content: left;
+}
+
+#searchEngineHeaderIcon {
+	background: url('../assets/ui-icons/internet.svg');
+	background-size: cover;
+	margin-right: 10px;
+	width: 28px;
+	height: 28px;
+}
+
+#searchEngineHeaderLabel {
+	text-align: left;
+	font-weight: bold;
+	font-size: 14pt;
+	margin-top: auto;
+	margin-bottom: auto;
+}
+
+#searchEngineContainer {
+	margin-top: 5px;
+}
+
+#searchEngineSelect {
+	width: 100%;
+	height: 32px;
+	background: var(--base-container);
+	color: var(--base-color);
+	font-weight: normal;
+	font-style: 14pt;
+	border: none;
+	border-radius: 6px;
+	padding: 5px;
+
+	-webkit-appearance: none;
+	-moz-appearance: none;
+	appearance: none;
+}
+
+#searchEngineSelect:hover {
+	cursor: pointer;
+}
+
+#searchEngineSelect option {
+	color: initial;
+	border: none;
+}
+
+select::-ms-expand {
+  display: none;
+}
+
+#searchEngineAsDefault {
+	background: var(--base-container);
+	color: var(--base-color);
+	text-align: center;
+	width: 100%;
+	height: 32px;
+	margin-top: 5px;
+	border-radius: 6px;
+	cursor: pointer;
+
+	/*Center vertically*/
+	display: flex;
+  	justify-content: center;
+  	align-items: center;
+}
+
+#searchEngineAsDefault:hover {
+	background: var(--base-hover-bg);
+}
+
+#searchEngineAsDefault:active {
+	background: var(--base-active-bg);
+}
+
+@media screen and (max-width: 580px) {
+	.searchEngine {
+		width: 96vw;
+		box-sizing: border-box;
+	}
+}

css/style.css

@@ -11,6 +11,7 @@
 @import url('search-box.css');
 @import url('dashboard.css');
 @import url('greeter-date-message.css');
+@import url('search-engine-settings.css');
 
 :root {
 	/* Colors */

index.html

@@ -60,6 +60,29 @@
 			<div id="greeterMessage"></div>
 			<div id="dateMessage"></div>
 
+
+			<!-- Select search engine -->
+			<div class="searchEngine">
+				<div id="searchEnginePadding">
+					<div class="header" id="searchEngineHeader">
+						<div class="headerIcon" id="searchEngineHeaderIcon"></div>
+						<div class="headerLabel" id="searchEngineHeaderLabel">Search Engine</div>
+					</div>
+					<div id="searchEngineContainer">
+						<select id="searchEngineSelect">
+						  <option value="google">Google</option>
+						  <option value="duckduckgo">Duckduckgo</option>
+						  <option value="ecosia">Ecosia</option>
+						  <option value="yahoo">Yahoo</option>
+						  <option value="bing">Bing</option>
+						</select>
+						<div id="searchEngineAsDefault">Set as default</div>
+					</div>
+				</div>
+			</div>
+			
+			
+
 		</div>
 	</div>
 	<div class="dashboardOverlay" id="dashboardOverlay"></div>