feat(web): settings cosmetic improvements (#621)

* Minor cosmetic changes

- Changed Feeds paragraph to include regular RSS feeds
- Centered "Danger Zone" header on Settings/Releases
- Added punctuations to subtitles and sublabes that were missing them
- Removed some subtitles over "Create new" buttons in Settings

* settings(releases) Added paragraph below header

* Changed user and docs icons

* Fixed Notifications table for narrow screens

* Made Notifications-page dynamic like the IRC-page

- Hiding notification type and events on smaller screens

* Made API table look better on smaller screens

- Adjusted col-spans
- overflow-auto on name

* overflow-hidden on name

* Made Feeds dynamic like Notifications

* Made Clients dynamic like Feeds and Notifications

* name field will now truncate instead of span itself over multiple lines
mouseovering the name will now show the full value
mitigated scrollbars
changes to col-span to move the name column closer to enabled switch
adjusted paddings in desktop and mobile layout

Co-authored-by: martylukyy <35452459+martylukyy@users.noreply.github.com>

web/src/screens/settings/DownloadClient.tsx

@@ -37,13 +37,13 @@ function DownloadClientSettingsListItem({ client, idx }: DLSettingsItemProps) {
 
   return (
     <li key={client.name}>
-      <div className="grid grid-cols-12 gap-2 lg:gap-4 items-center py-2">
+      <div className="grid grid-cols-12 gap-4 items-center py-3">
         <DownloadClientUpdateForm
           client={client}
           isOpen={updateClientIsOpen}
           toggle={toggleUpdateClient}
         />
-        <div className="col-span-3 sm:col-span-2 px-4 sm:px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+        <div className="col-span-3 px-6 flex items-center sm:px-6">
           <Switch
             checked={client.enabled}
             onChange={onToggleMutation}
@@ -62,9 +62,9 @@ function DownloadClientSettingsListItem({ client, idx }: DLSettingsItemProps) {
             />
           </Switch>
         </div>
-        <div className="col-span-7 sm:col-span-3 px-1 sm:px-0 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white truncate" title={client.name}>{client.name}</div>
-        <div className="hidden sm:block col-span-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400 truncate" title={client.host}>{client.host}</div>
-        <div className="hidden sm:block col-span-2 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">{DownloadClientTypeNameMap[client.type]}</div>
+        <div className="col-span-6 md:col-span-3 lg:col-span-3 px-6 py-3 flex flex-col px-6 text-sm font-medium text-gray-900 dark:text-white truncate" title={client.name}>{client.name}</div>
+        <div className="hidden md:flex col-span-3 py-3 flex items-center whitespace-nowrap text-sm text-gray-500 dark:text-gray-400 truncate" title={client.host}>{client.host}</div>
+        <div className="hidden md:flex col-span-2 py-3 flex items-center sm:px-6 text-sm text-gray-500 dark:text-gray-400">{DownloadClientTypeNameMap[client.type]}</div>
         <div className="col-span-1 whitespace-nowrap text-center text-sm font-medium">
           <span className="text-blue-600 dark:text-gray-300 hover:text-blue-900 cursor-pointer" onClick={toggleUpdateClient}>
             Edit
@@ -117,16 +117,16 @@ function DownloadClientSettings() {
             <section className="light:bg-white dark:bg-gray-800 light:shadow sm:rounded-md">
               <ol className="min-w-full relative">
                 <li className="grid grid-cols-12 gap-4 border-b border-gray-200 dark:border-gray-700">
-                  <div className="col-span-3 sm:col-span-2 px-2 sm:px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                  <div className="col-span-3 px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                     Enabled
                   </div>
-                  <div className="col-span-6 sm:col-span-3 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                  <div className="col-span-6 md:col-span-3 lg:col-span-3 px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                     Name
                   </div>
-                  <div className="hidden sm:block col-span-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                  <div className="hidden md:flex col-span-3 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                     Host
                   </div>
-                  <div className="hidden sm:block col-span-2 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                  <div className="hidden md:flex col-span-3 px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                     Type
                   </div>
                 </li>
@@ -135,7 +135,7 @@ function DownloadClientSettings() {
                 ))}
               </ol>
             </section>
-            : <EmptySimple title="No download clients" subtitle="Add a new client" buttonText="New client" buttonAction={toggleAddClient} />
+            : <EmptySimple title="No download clients" subtitle="" buttonText="Add new client" buttonAction={toggleAddClient} />
           }
         </div>
       </div>