From 80c2833d83aa601ddf725d6830e33ec3da74d922 Mon Sep 17 00:00:00 2001
From: f0x52 <f0x@cthu.lu>
Date: Wed, 12 Oct 2022 18:23:50 +0200
Subject: [PATCH] [frontend] small fixes (#907)

* add missing watchify dependency

* replace svg rss icon with forkawesome+styling

* use $white1 instead of hardcoding white

* fix toot overflow
---
 web/assets/rss.svg         | 18 ------------------
 web/source/css/profile.css |  9 ++++++---
 web/source/css/status.css  |  2 ++
 web/source/package.json    |  1 +
 web/template/profile.tmpl  |  4 +++-
 5 files changed, 12 insertions(+), 22 deletions(-)
 delete mode 100644 web/assets/rss.svg

diff --git a/web/assets/rss.svg b/web/assets/rss.svg
deleted file mode 100644
index 11fd98a59..000000000
--- a/web/assets/rss.svg
+++ /dev/null
@@ -1,18 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="128px" height="128px" id="RSSicon" viewBox="0 0 256 256">
-<defs>
-<linearGradient x1="0.085" y1="0.085" x2="0.915" y2="0.915" id="RSSg">
-<stop offset="0.0" stop-color="#E3702D"/><stop offset="0.1071" stop-color="#EA7D31"/>
-<stop offset="0.3503" stop-color="#F69537"/><stop offset="0.5" stop-color="#FB9E3A"/>
-<stop offset="0.7016" stop-color="#EA7C31"/><stop offset="0.8866" stop-color="#DE642B"/>
-<stop offset="1.0" stop-color="#D95B29"/>
-</linearGradient>
-</defs>
-<rect width="256" height="256" rx="55" ry="55" x="0" y="0" fill="#CC5D15"/>
-<rect width="246" height="246" rx="50" ry="50" x="5" y="5" fill="#F49C52"/>
-<rect width="236" height="236" rx="47" ry="47" x="10" y="10" fill="url(#RSSg)"/>
-<circle cx="68" cy="189" r="24" fill="#FFF"/>
-<path d="M160 213h-34a82 82 0 0 0 -82 -82v-34a116 116 0 0 1 116 116z" fill="#FFF"/>
-<path d="M184 213A140 140 0 0 0 44 73 V 38a175 175 0 0 1 175 175z" fill="#FFF"/>
-</svg>
\ No newline at end of file
diff --git a/web/source/css/profile.css b/web/source/css/profile.css
index 03f65d1d5..e4763f303 100644
--- a/web/source/css/profile.css
+++ b/web/source/css/profile.css
@@ -225,10 +225,13 @@ main {
 	align-items: center;
 	justify-content: space-between;
 	margin: 1rem;
-	.rsslogo {
-		width: 1.45em;
-		height: 1.45em;
+	.rss-icon {
+		font-size: 1.45em;
 		object-fit: contain;
 		vertical-align: middle;
+		color: $orange2;
+		/* can't size a single-color background, so we use a linear-gradient that's effectively white */
+		background: linear-gradient(to right, $white1 100%, transparent 0) no-repeat center center;
+		background-size: 1.2rem 1.4rem;
 	}
 }
diff --git a/web/source/css/status.css b/web/source/css/status.css
index 3e20c7e87..ff5cc2836 100644
--- a/web/source/css/status.css
+++ b/web/source/css/status.css
@@ -133,6 +133,8 @@ main {
 		position: relative;
 		z-index: 2;
 
+		width: 100%;
+
 		a {
 			color: $link-fg;
 			text-decoration: underline;
diff --git a/web/source/package.json b/web/source/package.json
index d6e6507db..3f8bd5a9d 100644
--- a/web/source/package.json
+++ b/web/source/package.json
@@ -47,6 +47,7 @@
     "redux-thunk": "^2.4.1",
     "tiny-lr": "^2.0.0",
     "uglifyify": "^5.0.2",
+    "watchify": "^4.0.0",
     "wouter": "^2.8.0-alpha.2"
   },
   "devDependencies": {
diff --git a/web/template/profile.tmpl b/web/template/profile.tmpl
index 9342f0f43..98197f7cf 100644
--- a/web/template/profile.tmpl
+++ b/web/template/profile.tmpl
@@ -30,7 +30,9 @@
     <h2 id="recent">
         <span>Latest public toots</span>
         {{ if .rssFeed }}
-            <a href="{{ .rssFeed }}"><img class="rsslogo" src="/assets/rss.svg" alt="The orange RSS logo."/></a>
+            <a href="{{ .rssFeed }}" aria-label="RSS feed">
+                <i class="rss-icon fa fa-rss-square" aria-hidden="true"></i>
+            </a>
         {{ end }}
     </h2>
 	    {{ if not .statuses }}