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/Notifications.tsx

@@ -43,10 +43,10 @@ function NotificationSettings() {
           <section className="mt-6 light:bg-white dark:bg-gray-800 light:shadow sm:rounded-md">
             <ol className="min-w-full">
               <li className="grid grid-cols-12 gap-4 border-b border-gray-200 dark:border-gray-700">
-                <div className="col-span-2 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-4 px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Name</div>
-                <div className="col-span-2 px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Type</div>
-                <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">Events</div>
+                <div className="col-span-2 pl-4 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 md:col-span-5 pl-10 md:pl-0 pr-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Name</div>
+                <div className="hidden md:flex col-span-2 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Type</div>
+                <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">Events</div>
               </li>
 
               {data && data.map((n: Notification) => (
@@ -54,7 +54,7 @@ function NotificationSettings() {
               ))}
             </ol>
           </section>
-          : <EmptySimple title="No notifications setup" subtitle="Add a new notification" buttonText="New notification" buttonAction={toggleAddNotifications} />}
+          : <EmptySimple title="No notifications" subtitle="" buttonText="Create new notification" buttonAction={toggleAddNotifications} />}
       </div>
     </div>
   );
@@ -96,7 +96,7 @@ function ListItem({ notification }: ListItemProps) {
       <NotificationUpdateForm isOpen={updateFormIsOpen} toggle={toggleUpdateForm} notification={notification} />
 
       <div className="grid grid-cols-12 gap-4 items-center py-3">
-        <div className="col-span-2 flex items-center sm:px-6">
+        <div className="col-span-2 md:col-span-2 pl-6 flex items-center sm:pl-6">
           <Switch
             checked={notification.enabled}
             onChange={toggleUpdateForm}
@@ -115,13 +115,13 @@ function ListItem({ notification }: ListItemProps) {
             />
           </Switch>
         </div>
-        <div className="col-span-4 flex items-center sm:px-6">
+        <div className="col-span-8 md:col-span-5 pl-10 md:pl-0 pr-2 sm:pr-6 truncate block items-center" title={notification.name}>
           {notification.name}
         </div>
-        <div className="col-span-2 flex items-center sm:px-6">
+        <div className="hidden md:flex col-span-2 items-center">
           {iconComponentMap[notification.type]}
         </div>
-        <div className="col-span-3 flex items-center sm:px-6">
+        <div className="hidden md:flex col-span-2 px-6 items-center sm:px-6">
           <span
             className="mr-2 inline-flex items-center px-2.5 py-1 rounded-md text-sm font-medium bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-400"
             title={notification.events.join(", ")}
@@ -129,7 +129,7 @@ function ListItem({ notification }: ListItemProps) {
             {notification.events.length}
           </span>
         </div>
-        <div className="col-span-1 flex items-center">
+        <div className="col-span-2 md:col-span-1 flex items-center">
           <span className="text-blue-600 dark:text-gray-300 hover:text-blue-900 cursor-pointer" onClick={toggleUpdateForm}>
             Edit
           </span>