Review updates

- default empty array - remove default padding - align left px value ofr rulers - updated keyboard shortcut
responsively-org · Dec 4, 2023 · 3752797 · 3752797
1 parent b227b0f
commit 3752797
Show file tree

Hide file tree

Showing 6 changed files with 16 additions and 12 deletions.
diff --git a/desktop-app/src/renderer/components/KeyboardShortcutsManager/constants.ts b/desktop-app/src/renderer/components/KeyboardShortcutsManager/constants.ts
@@ -36,7 +36,7 @@ export const SHORTCUT_KEYS: { [key in ShortcutChannel]: string[] } = {
   [SHORTCUT_CHANNEL.ROTATE_ALL]: ['mod+alt+r'],
   [SHORTCUT_CHANNEL.SCREENSHOT_ALL]: ['mod+s'],
   [SHORTCUT_CHANNEL.THEME]: ['mod+t'],
-  [SHORTCUT_CHANNEL.TOGGLE_RULERS]: ['mod+alt+del', 'alt+r'],
+  [SHORTCUT_CHANNEL.TOGGLE_RULERS]: ['alt+r'],
   [SHORTCUT_CHANNEL.ZOOM_IN]: ['mod+=', 'mod++', 'mod+shift+='],
   [SHORTCUT_CHANNEL.ZOOM_OUT]: ['mod+-'],
 };
diff --git a/desktop-app/src/renderer/components/Previewer/Device/Toolbar.tsx b/desktop-app/src/renderer/components/Previewer/Device/Toolbar.tsx
@@ -139,10 +139,7 @@ const Toolbar = ({
   };
 
   return (
-    <div
-      className="flex items-center justify-between gap-1"
-      style={{ paddingLeft: '30px' }}
-    >
+    <div className="flex items-center justify-between gap-1">
       <div className="my-1 inline-flex max-w-[75%] items-center gap-1">
         <Button onClick={refreshView} title="Refresh This View">
           <Icon icon="ic:round-refresh" />

diff --git a/desktop-app/src/renderer/components/Previewer/Device/index.tsx b/desktop-app/src/renderer/components/Previewer/Device/index.tsx
@@ -501,7 +501,7 @@ const Device = ({ isPrimary, device, setIndividualDevice }: Props) => {
         'w-52': device.width < 400 && zoomfactor < 0.6,
       })}
     >
-      <div className="flex justify-between" style={{ paddingLeft: '30px' }}>
+      <div className="flex justify-between">
         <span>
           {device.name}
           <span className="ml-[2px] text-xs opacity-60">
@@ -522,8 +522,12 @@ const Device = ({ isPrimary, device, setIndividualDevice }: Props) => {
       />
       <div
         style={{
-          height: scaledHeight,
-          width: scaledWidth + 30,
+          height: rulerEnabled(`${width}x${height}`)
+            ? scaledHeight + 30
+            : scaledHeight,
+          width: rulerEnabled(`${width}x${height}`)
+            ? scaledWidth + 30
+            : scaledWidth,
         }}
         className="relative origin-top-left bg-white"
       >
@@ -543,7 +547,7 @@ const Device = ({ isPrimary, device, setIndividualDevice }: Props) => {
               return x.resolution === `${width}x${height}`;
             })}
         />
-        <div style={{}} className="bg-slate-200 dark:bg-slate-800">
+        <div className="bg-white">
           <webview
             id={device.name}
             src={address}
@@ -552,8 +556,8 @@ const Device = ({ isPrimary, device, setIndividualDevice }: Props) => {
               width,
               display: 'inline-flex',
               transform: `scale(${zoomfactor})`,
-              marginLeft: '30px',
-              marginTop: '30px',
+              marginLeft: rulerEnabled(`${width}x${height}`) ? '30px' : 0,
+              marginTop: rulerEnabled(`${width}x${height}`) ? '30px' : 0,
             }}
             ref={ref}
             className="origin-top-left"

diff --git a/desktop-app/src/renderer/components/Previewer/Guides/guide.css b/desktop-app/src/renderer/components/Previewer/Guides/guide.css
@@ -29,5 +29,5 @@
 }
 
 .scena-guides-horizontal .scena-guides-guide-pos {
-  left: 49% !important;
+  left: 48% !important;
 }
diff --git a/desktop-app/src/renderer/components/Previewer/Guides/index.tsx b/desktop-app/src/renderer/components/Previewer/Guides/index.tsx
@@ -111,6 +111,7 @@ const GuideGrid = ({
               ref={horizontalGuidesRef as LegacyRef<Guides>}
               type="horizontal"
               backgroundColor="transparent"
+              className="bg-slate-200 dark:bg-slate-800"
               textColor={night ? 'rgb(209, 213, 219)' : 'rgb(55, 65, 81)'}
               mainLineSize="40%"
               longLineSize="5"
@@ -149,6 +150,7 @@ const GuideGrid = ({
               ref={verticalGuidesRef as LegacyRef<Guides>}
               type="vertical"
               backgroundColor="transparent"
+              className="bg-slate-200 dark:bg-slate-800"
               textColor={night ? 'rgb(209, 213, 219)' : 'rgb(55, 65, 81)'}
               mainLineSize="40%"
               longLineSize="5"

diff --git a/desktop-app/src/store/index.ts b/desktop-app/src/store/index.ts
@@ -158,6 +158,7 @@ const schema = {
           },
           default: {},
         },
+        default: [],
       },
       screenshot: {
         type: 'object',