SVG arrow

Cargo.lock

@@ -844,9 +844,9 @@ dependencies = [
 
 [[package]]
 name = "hermit-abi"
-version = "0.1.17"
+version = "0.1.18"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "5aca5565f760fb5b220e499d72710ed156fdb74e631659e99377d9ebfbd13ae8"
+checksum = "322f4de77956e22ed0e5032c359a0f1273f1f7f0d79bfa3b8ffbc730d7fbcc5c"
 dependencies = [
  "libc",
 ]

static/style.css

@@ -117,6 +117,10 @@ a:hover {
 	text-decoration: underline;
 }
 
+svg {
+	stroke: var(--text);
+}
+
 img[src=""] {
 	display: none;
 }
@@ -280,14 +284,18 @@ select, #search {
 
 #restrict_sr { margin-right: 5px; }
 
-input[type="submit"] {
+input[type="submit"], button.submit {
 	border: 0;
 	border-radius: 0px 5px 5px 0px;
-	transition: 0.2s all;
 }
 
+button.submit { display: flex; }
 select:hover { background: var(--foreground); }
-input[type="submit"]:hover { color: var(--accent); }
+
+input[type="submit"]:hover, button.submit:hover {
+	transition: 0.2s all;
+	color: var(--accent);
+}
 
 #timeframe {
 	margin: 0 2px;
@@ -568,7 +576,6 @@ a.search_subreddit:hover {
 	grid-area: 1 / 1 / 2 / 2;
 	align-self: center;
 	justify-self: center;
-	stroke: var(--text);
 	max-width: 100%;
 }
 

templates/post.html

@@ -87,7 +87,13 @@
 		<form id="sort">
 			<select name="sort" title="Sort comments by"> 
 				{% call utils::options(sort, ["confidence", "top", "new", "controversial", "old"], "confidence") %}
-			</select><input id="sort_submit" type="submit" value="&rarr;">
+			</select><button id="sort_submit" class="submit">
+				<svg width="15" viewBox="0 0 110 100" fill="none" stroke-width="10" stroke-linecap="round">
+					<path d="M20 50 H100" />
+					<path d="M75 15 L100 50 L75 85" />
+					&rarr;
+				</svg>
+			</button>
 		</form>
 
 		<!-- COMMENTS -->

templates/search.html

@@ -17,7 +17,13 @@
 				{% call utils::options(params.sort, ["relevance", "hot", "top", "new", "comments"], "") %}
 			</select>{% if params.sort != "new" %}<select id="timeframe" name="t" title="Timeframe"> 
 				{% call utils::options(params.t, ["hour", "day", "week", "month", "year", "all"], "all") %}
-			</select>{% endif %}<input id="sort_submit" type="submit" value="&rarr;">
+			</select>{% endif %}<button id="sort_submit" class="submit">
+					<svg width="15" viewBox="0 0 110 100" fill="none" stroke-width="10" stroke-linecap="round">
+						<path d="M20 50 H100" />
+						<path d="M75 15 L100 50 L75 85" />
+						&rarr;
+					</svg>
+				</button>
 		</form>
 		
 		{% if subreddits.len() > 0 %}

templates/subreddit.html

@@ -24,8 +24,15 @@
 				</div>
 				{% if sort.0 == "top" || sort.0 == "controversial" %}<select id="timeframe" name="t" title="Timeframe"> 
 					{% call utils::options(sort.1, ["hour", "day", "week", "month", "year", "all"], "day") %}
-					<input id="sort_submit" type="submit" value="&rarr;">
-				</select>{% endif %}
+				</select>
+				<button id="sort_submit" class="submit">
+					<svg width="15" viewBox="0 0 110 100" fill="none" stroke-width="10" stroke-linecap="round">
+						<path d="M20 50 H100" />
+						<path d="M75 15 L100 50 L75 85" />
+						&rarr;
+					</svg>
+				</button>
+				{% endif %}
 			</form>
 
 			<div id="posts">

templates/user.html

@@ -15,7 +15,13 @@
 					{% call utils::options(sort.0, ["hot", "new", "top"], "") %}
 				</select>{% if sort.0 == "top" %}<select id="timeframe" name="t"> 
 					{% call utils::options(sort.1, ["hour", "day", "week", "month", "year", "all"], "all") %}
-				</select>{% endif %}<input id="sort_submit" type="submit" value="&rarr;">
+				</select>{% endif %}<button id="sort_submit" class="submit">
+					<svg width="15" viewBox="0 0 110 100" fill="none" stroke-width="10" stroke-linecap="round">
+						<path d="M20 50 H100" />
+						<path d="M75 15 L100 50 L75 85" />
+						&rarr;
+					</svg>
+				</button>
 			</form>
 
 			<div id="posts">

templates/utils.html

@@ -23,7 +23,13 @@
 		<label for="restrict_sr" class="search_label">in {{ root }}</label>
 	</div>
 	{% endif %}
-	<input type="submit" value="&rarr;">
+	<button class="submit">
+		<svg width="15" viewBox="0 0 110 100" fill="none" stroke-width="10" stroke-linecap="round">
+			<path d="M20 50 H100" />
+			<path d="M75 15 L100 50 L75 85" />
+			&rarr;
+		</svg>
+	</button>
 </form>
 {%- endmacro %}