Merge pull request #1355 from responsively-org/minor-fixes

Minor UI Polish

Author: manojVivek

desktop-app/src/main/web-permissions/index.ts

@@ -32,9 +32,14 @@ export const WebPermissionHandlers = (mainWindow: BrowserWindow) => {
           urls: ['<all_urls>'],
         },
         (details, callback) => {
-          details.requestHeaders['Accept-Language'] = store.get(
+          const acceptLanguage = store.get(
             'userPreferences.webRequestHeaderAcceptLanguage'
           );
+          if (acceptLanguage != null && acceptLanguage !== '') {
+            details.requestHeaders['Accept-Language'] = store.get(
+              'userPreferences.webRequestHeaderAcceptLanguage'
+            );
+          }
           callback({ requestHeaders: details.requestHeaders });
         }
       );

desktop-app/src/renderer/components/ButtonGroup/index.tsx

@@ -0,0 +1,35 @@
+import { ReactElement } from 'react';
+import cx from 'classnames';
+
+interface Props {
+  buttons: {
+    content: ReactElement;
+    srContent: string;
+    onClick: () => void;
+    isActive: boolean;
+  }[];
+}
+
+export const ButtonGroup = ({ buttons }: Props) => {
+  return (
+    <span className="isolate inline-flex rounded-md shadow-sm">
+      {buttons.map(({ content, srContent, onClick, isActive }, index) => (
+        <button
+          type="button"
+          className={cx(
+            'relative inline-flex items-center px-2 py-2 text-slate-500 ring-1 ring-inset ring-slate-300 hover:bg-slate-300 focus:z-10 dark:text-slate-200 hover:dark:bg-slate-600',
+            {
+              'rounded-l-md': index === 0,
+              'rounded-r-md': index === buttons.length - 1,
+              'bg-slate-200 dark:bg-slate-600': isActive,
+            }
+          )}
+          onClick={onClick}
+        >
+          <span className="sr-only">{srContent}</span>
+          {content}
+        </button>
+      ))}
+    </span>
+  );
+};

desktop-app/src/renderer/components/Divider/index.tsx

@@ -1,3 +1,3 @@
 export const Divider = () => (
-  <div className="my-4 w-full border-t border-gray-200 opacity-20" />
+  <div className="my-1 w-full border-t border-gray-400 opacity-30" />
 );

desktop-app/src/renderer/components/Masonry/MasonryLayout.tsx

@@ -1,6 +1,6 @@
 const NotificationEmptyStatus = () => {
   return (
-    <div className="mb-2 text-sm text-white">
+    <div className="mb-2">
       <p>You are all caught up! No new notifications at the moment.</p>
     </div>
   );

desktop-app/src/renderer/components/Notifications/NotificationEmptyStatus.tsx

@@ -10,7 +10,7 @@ const Notifications = () => {
 
   return (
     <div className="mb-4 max-h-[200px] overflow-y-auto rounded-lg p-1 px-4 shadow-lg dark:bg-slate-900">
-      <span className="text-lg">Notifications</span>
+      <span className="text-md">Notifications</span>
       <div className="mt-2">
         {(!notificationsState ||
           (notificationsState && notificationsState?.length === 0)) && (

desktop-app/src/renderer/components/Notifications/Notifications.tsx

@@ -29,7 +29,7 @@ const ViewAllBookmarks = ({ bookmarks, handleBookmarkFlyout }: Props) => {
 
   return (
     <div>
-      <div className="absolute top-[179px] right-[322px] z-50 flex max-h-[60vh] min-h-min flex-col overflow-x-auto overflow-y-auto rounded border bg-white focus:outline-none dark:bg-slate-900 dark:ring-white dark:!ring-opacity-40">
+      <div className="absolute right-[316px] top-0 z-50 flex max-h-[60vh] min-h-min flex-col overflow-x-auto overflow-y-auto rounded border bg-slate-100 focus:outline-none dark:bg-slate-900 dark:ring-white dark:!ring-opacity-40">
         {bookmarks.map((bookmark) => {
           return (
             <div key={bookmark.id}>
@@ -48,7 +48,7 @@ const ViewAllBookmarks = ({ bookmarks, handleBookmarkFlyout }: Props) => {
           </Button>
         )}
       </div>
-      <div className="absolute right-[565px] top-[179px]">
+      <div className="absolute right-[560px]">
         {openFlyout && (
           <BookmarkFlyout
             bookmark={currentBookmark}

desktop-app/src/renderer/components/ToolBar/Menu/Flyout/Bookmark/ViewAllBookmarks/index.tsx

@@ -23,10 +23,11 @@ const Bookmark = () => {
 
   return (
     <div
+      className="relative"
       onMouseEnter={() => setIsOpen(true)}
       onMouseLeave={() => setIsOpen(false)}
     >
-      <div className="">
+      <div>
         <div className="relative right-2 w-80 dark:border-slate-400">
           <Button
             className="flex w-full items-center justify-between pl-6"

desktop-app/src/renderer/components/ToolBar/Menu/Flyout/Bookmark/index.tsx

@@ -1,43 +1,73 @@
 import { Icon } from '@iconify/react';
-import { PREVIEW_LAYOUTS } from 'common/constants';
+import { PREVIEW_LAYOUTS, PreviewLayout } from 'common/constants';
 import { useDispatch, useSelector } from 'react-redux';
+import { ButtonGroup } from 'renderer/components/ButtonGroup';
 import useKeyboardShortcut, {
   SHORTCUT_CHANNEL,
 } from 'renderer/components/KeyboardShortcutsManager/useKeyboardShortcut';
-import Toggle from 'renderer/components/Toggle';
 import { selectLayout, setLayout } from 'renderer/store/features/renderer';
 
-const PreviewLayout = () => {
+const PreviewLayoutSelector = () => {
   const layout = useSelector(selectLayout);
   const dispatch = useDispatch();
 
-  const handleLayout = () => {
-    if (layout === PREVIEW_LAYOUTS.FLEX)
-      dispatch(setLayout(PREVIEW_LAYOUTS.COLUMN));
-    else dispatch(setLayout(PREVIEW_LAYOUTS.FLEX));
+  const handleLayout = (newLayout: PreviewLayout) => {
+    dispatch(setLayout(newLayout));
   };
 
-  useKeyboardShortcut(SHORTCUT_CHANNEL.PREVIEW_LAYOUT, handleLayout);
+  const toggleNextLayout = () => {
+    const layouts = Object.values(PREVIEW_LAYOUTS);
+    const currentIndex = layouts.findIndex((l) => l === layout);
+    const nextIndex = (currentIndex + 1) % layouts.length;
+    dispatch(setLayout(layouts[nextIndex]));
+  };
+
+  useKeyboardShortcut(SHORTCUT_CHANNEL.PREVIEW_LAYOUT, toggleNextLayout);
 
   return (
     <div className="flex flex-row items-center justify-start px-4">
       <span className="w-1/2">Preview Layout</span>
-      <div className="flex w-fit items-center gap-3 border-l px-5 dark:border-slate-400">
-        <Icon icon="radix-icons:layout" />
-        <Toggle
-          isOn={layout === PREVIEW_LAYOUTS.FLEX}
-          onChange={(e) => {
-            if (e.target.checked) {
-              dispatch(setLayout(PREVIEW_LAYOUTS.FLEX));
-            } else {
-              dispatch(setLayout(PREVIEW_LAYOUTS.COLUMN));
-            }
-          }}
+      <div className="flex w-fit items-center gap-3 px-5 ">
+        <ButtonGroup
+          buttons={[
+            {
+              content: (
+                <div className="flex flex-col items-center text-xs">
+                  {' '}
+                  <Icon icon="radix-icons:layout" /> Column
+                </div>
+              ),
+              srContent: 'Horizontal Layout',
+              onClick: () => handleLayout(PREVIEW_LAYOUTS.COLUMN),
+              isActive: layout === PREVIEW_LAYOUTS.COLUMN,
+            },
+            {
+              content: (
+                <div className="flex min-w-12 flex-col items-center text-xs">
+                  {' '}
+                  <Icon icon="lucide:layout-dashboard" /> Flex
+                </div>
+              ),
+              srContent: 'Flex Layout',
+              onClick: () => handleLayout(PREVIEW_LAYOUTS.FLEX),
+              isActive: layout === PREVIEW_LAYOUTS.FLEX,
+            },
+            {
+              content: (
+                <div className="flex flex-col items-center text-xs">
+                  {' '}
+                  <Icon icon="bx:bx-grid-alt" /> Masonry
+                </div>
+              ),
+              srContent: 'Masonry Layout',
+              onClick: () => handleLayout(PREVIEW_LAYOUTS.MASONRY),
+              isActive: layout === PREVIEW_LAYOUTS.MASONRY,
+            },
+          ]}
         />
-        <Icon icon="lucide:layout-dashboard" />
       </div>
     </div>
   );
 };
 
-export default PreviewLayout;
+export default PreviewLayoutSelector;

desktop-app/src/renderer/components/ToolBar/Menu/Flyout/PreviewLayout/index.tsx

@@ -29,7 +29,8 @@ export const SettingsContentHeaders: FC<ISettingsContentHeaders> = ({
             />
           </label>
           <p className="text-sm text-gray-500 dark:text-gray-400">
-            HTTP request Accept-Language parameter
+            HTTP request Accept-Language parameter (default: language from OS
+            locale settings)
           </p>
         </div>
       </div>