From 95b673d8fc210ba62484c0aca3024db24adf9960 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=A0t=C4=9Bp=C3=A1n=20=C5=A0korpil?= <stepan@skorpil.cz>
Date: Mon, 10 Jan 2022 23:33:00 +0100
Subject: [PATCH] Fixed empty display name, firefox styling, removed colors
 from fallback avatar

---
 application/src/components/Result.tsx |  2 +-
 application/src/pages/api/feed.ts     | 15 ++++++++--
 application/src/public/avatar.svg     | 43 +++++++++++++++------------
 application/src/styles/global.scss    |  9 +++---
 4 files changed, 43 insertions(+), 26 deletions(-)

diff --git a/application/src/components/Result.tsx b/application/src/components/Result.tsx
index 4a1d03c..6f0de87 100644
--- a/application/src/components/Result.tsx
+++ b/application/src/components/Result.tsx
@@ -32,7 +32,7 @@ const Result:React.FC<{ feed:FeedResponseItem }> = ({ feed }) => {
       <section className={'feed'}>
           <h3 className={'display-name with-emoji'}>
               <a href={feed.url}
-                 dangerouslySetInnerHTML={{ __html: striptags(feed.displayName, ['img']) }}
+                 dangerouslySetInnerHTML={{ __html: striptags(feed.displayName !== '' ? feed.displayName : feed.name, ['img']) }}
               />
           </h3>
         <Avatar url={feed.avatar}/>
diff --git a/application/src/pages/api/feed.ts b/application/src/pages/api/feed.ts
index 293b7e5..0d5d5f3 100644
--- a/application/src/pages/api/feed.ts
+++ b/application/src/pages/api/feed.ts
@@ -4,7 +4,7 @@ import { feedRequestSchema } from '../../types/FeedRequest'
 import { NextApiRequest, NextApiResponse } from 'next'
 import { FeedResponse } from '../../types/FeedResponse'
 
-const handleFeedSearch = async (req:NextApiRequest, res:NextApiResponse<FeedResponse>):Promise<void> => {
+const handleFeedSearch = async (req: NextApiRequest, res: NextApiResponse<FeedResponse>): Promise<void> => {
   console.info('Searching feeds', { query: req.query })
 
   const feedRequest = feedRequestSchema.parse(req.query)
@@ -36,7 +36,18 @@ const handleFeedSearch = async (req:NextApiRequest, res:NextApiResponse<FeedResp
       emails: true,
       fields: true,
       node: true
-    }
+    },
+    orderBy: [
+      {
+        lastStatusAt: 'desc'
+      },
+      {
+        followersCount: 'desc'
+      },
+      {
+        statusesCount: 'desc'
+      }
+    ]
   })
 
   res.status(200)
diff --git a/application/src/public/avatar.svg b/application/src/public/avatar.svg
index 5a207f6..b83e3c7 100644
--- a/application/src/public/avatar.svg
+++ b/application/src/public/avatar.svg
@@ -1,20 +1,25 @@
-<?xml version="1.0" encoding="iso-8859-1"?>
-<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
-<path style="fill:#BDFDFF;" d="M0,488.727C0,501.58,10.42,512,23.273,512H256h232.727C501.58,512,512,501.58,512,488.727v-93.091
-	V23.273C512,10.42,501.58,0,488.727,0H256H23.273C16.043,0,9.584,3.297,5.314,8.47c-1.896,2.298-3.361,4.968-4.268,7.883
-	C0.366,18.538,0,20.863,0,23.273"/>
-<path style="fill:#A78966;" d="M507.412,381.763l-18.685-25.166l-74.406-100.214c-4.389-5.914-11.32-9.399-18.685-9.399
-	s-14.296,3.486-18.685,9.399l-73.745,99.322L256,287.517l-73.956-106.826c-4.347-6.277-11.498-10.024-19.135-10.024
-	s-14.787,3.747-19.135,10.026L46.545,321.134l-23.273,33.617L4.138,382.39C1.444,386.281,0,390.903,0,395.636v93.091
-	C0,501.58,10.42,512,23.273,512H256h232.727C501.58,512,512,501.58,512,488.727v-93.091
-	C512,390.639,510.391,385.775,507.412,381.763z"/>
-<path style="fill:#9BC9FF;" d="M23.273,0C10.42,0,0,10.42,0,23.273v372.364c0-4.734,1.444-9.356,4.138-13.247l19.135-27.64
-	l23.273-33.617l97.229-140.442c4.347-6.277,11.498-10.024,19.135-10.024s14.787,3.747,19.135,10.026L256,287.517V183.128v-55.954V0
-	H23.273z"/>
-<path style="fill:#806749;" d="M182.044,180.693c-4.347-6.279-11.498-10.026-19.135-10.026s-14.787,3.747-19.135,10.026
-	L46.545,321.134l-23.273,33.617L4.138,382.39C1.444,386.281,0,390.903,0,395.636v93.091C0,501.58,10.42,512,23.273,512H256V287.517
-	L182.044,180.693z"/>
-<circle style="fill:#FFB655;" cx="302.545" cy="155.152" r="54.303"/>
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   version="1.1"
+   id="Layer_1"
+   x="0px"
+   y="0px"
+   viewBox="0 0 512 512"
+   style="enable-background:new 0 0 512 512;"
+   xml:space="preserve"
+   xmlns="http://www.w3.org/2000/svg">
+<path
+   style="fill:#9c9c9c;fill-opacity:0.48627451"
+   d="M0,488.727C0,501.58,10.42,512,23.273,512H256h232.727C501.58,512,512,501.58,512,488.727v-93.091  V23.273C512,10.42,501.58,0,488.727,0H256H23.273C16.043,0,9.584,3.297,5.314,8.47c-1.896,2.298-3.361,4.968-4.268,7.883  C0.366,18.538,0,20.863,0,23.273"
+   id="path2" />
+<path
+   style="fill:#212224;fill-opacity:1"
+   d="M507.412,381.763l-18.685-25.166l-74.406-100.214c-4.389-5.914-11.32-9.399-18.685-9.399  s-14.296,3.486-18.685,9.399l-73.745,99.322L256,287.517l-73.956-106.826c-4.347-6.277-11.498-10.024-19.135-10.024  s-14.787,3.747-19.135,10.026L46.545,321.134l-23.273,33.617L4.138,382.39C1.444,386.281,0,390.903,0,395.636v93.091  C0,501.58,10.42,512,23.273,512H256h232.727C501.58,512,512,501.58,512,488.727v-93.091  C512,390.639,510.391,385.775,507.412,381.763z"
+   id="path4" />
+<circle
+   style="fill:#ededed;fill-opacity:1"
+   cx="302.545"
+   cy="155.152"
+   r="54.303"
+   id="circle10" />
 </svg>
diff --git a/application/src/styles/global.scss b/application/src/styles/global.scss
index 3b7f6c9..ec4c253 100644
--- a/application/src/styles/global.scss
+++ b/application/src/styles/global.scss
@@ -101,14 +101,14 @@ a:hover {
   text-align: center;
   width: 100%;
   grid-gap: 1em;
-  box-sizing: content-box;
+  box-sizing: border-box;
 
   header {
     grid-column: start / end;
     grid-row: start / message;
     display: grid;
 
-    grid-template-columns: [start] auto [text] auto [end];
+    grid-template-columns: [start] 4em [text] auto [end];
     grid-template-rows: [start] auto [end];
     grid-gap: 1em;
 
@@ -172,7 +172,7 @@ form {
     }
 
     svg {
-      vertical-align: middle;
+      vertical-align: baseline;
       width: 1em;
       max-width: 1em;
       max-height: 1em;
@@ -270,6 +270,7 @@ img {
       display: none;
     }
     img,svg{
+      width: 100%;
       max-width: 1em;
       max-height: 1em;
       display: inline;
@@ -279,7 +280,7 @@ img {
     }
 
     .badge{
-      display: inline;
+      display: inline-block;
       margin-right: 1em;
       white-space: nowrap;
     }