windows styles

UdaraJay · Jan 1, 2024 · 524deec · 524deec
1 parent ee3c851
commit 524deec
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 51 deletions.
diff --git a/package.json b/package.json
@@ -32,10 +32,10 @@
     "build:renderer": "cross-env NODE_ENV=production TS_NODE_TRANSPILE_ONLY=true webpack --config ./.erb/configs/webpack.config.renderer.prod.ts",
     "postinstall": "patch-package && ts-node .erb/scripts/check-native-dep.js && electron-builder install-app-deps && cross-env NODE_ENV=development TS_NODE_TRANSPILE_ONLY=true webpack --config ./.erb/configs/webpack.config.renderer.dev.dll.ts",
     "lint": "cross-env NODE_ENV=development eslint . --ext .js,.jsx,.ts,.tsx",
-    "package": "ts-node ./.erb/scripts/clean.js dist && npm run build && electron-builder build --mac --publish always",
-    "package:mac": "ts-node ./.erb/scripts/clean.js dist && npm run build && electron-builder build --mac ",
+    "package": "ts-node ./.erb/scripts/clean.js dist && npm run build && electron-builder build --mac --publish never",
+    "package:mac": "ts-node ./.erb/scripts/clean.js dist && npm run build && electron-builder build --mac",
     "publish:mac": "ts-node ./.erb/scripts/clean.js dist && npm run build && electron-builder build --mac --publish always",
-    "package:win": "ts-node ./.erb/scripts/clean.js dist && npm run build && electron-builder build --win ",
+    "package:win": "ts-node ./.erb/scripts/clean.js dist && npm run build && electron-builder build --win",
     "publish:win": "ts-node ./.erb/scripts/clean.js dist && npm run build && electron-builder build --win --publish always",
     "rebuild": "electron-rebuild --parallel --types prod,dev,optional --module-dir release/app",
     "start": "ts-node ./.erb/scripts/check-port-in-use.js && npm run start:renderer",
@@ -280,4 +280,4 @@
     ],
     "logLevel": "quiet"
   }
-}
+}
diff --git a/src/renderer/pages/Pile/Layout.tsx b/src/renderer/pages/Pile/Layout.tsx
@@ -50,7 +50,10 @@ export default function PileLayout({ children }) {
     }
   }, [currentTheme]);
 
-  const osStyles = useMemo(() => window.electron.isMac ? styles.mac : styles.win, []);
+  const osStyles = useMemo(
+    () => (window.electron.isMac ? styles.mac : styles.win),
+    []
+  );
 
   return (
     <div className={`${styles.frame} ${themeStyles} ${osStyles}`}>

diff --git a/src/renderer/pages/Pile/Reflections/Reflections.module.scss b/src/renderer/pages/Pile/Reflections/Reflections.module.scss
@@ -86,24 +86,51 @@ input {
 }
 
 .DialogTitle {
-    display: inline-flex;
-    align-items: center;
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
     color: var(--active);
     font-weight: 400;
     border-radius: 7px;
     margin: 100px 0 16px 0;
     font-size: 15px;
     line-height: 1.5;
     mix-blend-mode: soft-light;
+}
 
-    .icon {
-        height: 28px;
-        width: 28px;
-        margin-right: 9px;
+.close {
+    font-family: inherit;
+    border-radius: 90px;
+    height: 32px;
+    width: 32px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    transition: all ease-in-out 120ms;
+    stroke-width: 2px;
+    background: var(--bg-tertiary);
+    color: var(--secondary);
+    margin-left: 12px;
+    position: fixed;
+    top: 16px;
+    right: 16px;
+
+    &:hover {
+        cursor: pointer;
+        color: var(--primary);
     }
-}
 
+    &:active {
+        transform: scale(0.9);
+    }
 
+    &.win {
+        position: relative;
+        margin: -5px 0 0 0;
+        top: 0;
+        left: 0;
+    }
+}
 
 .textarea {
     display: block;
@@ -190,34 +217,6 @@ input {
 
 }
 
-.close {
-    font-family: inherit;
-    border-radius: 90px;
-    height: 32px;
-    width: 32px;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    transition: all ease-in-out 120ms;
-    stroke-width: 2px;
-    background: var(--bg-tertiary);
-    color: var(--secondary);
-    margin-left: 12px;
-    position: fixed;
-    top: 16px;
-    right: 16px;
-
-    &:hover {
-        cursor: pointer;
-        color: var(--primary);
-    }
-
-    &:active {
-        transform: scale(0.9);
-    }
-}
-
-
 .answer {
     padding-bottom: 50px;
     padding-right: 50px;
@@ -226,8 +225,6 @@ input {
     color: var(--secondary);
 }
 
-
-
 .text {
     font-size: 1.6em;
     line-height: 1.45;

diff --git a/src/renderer/pages/Pile/Reflections/index.jsx b/src/renderer/pages/Pile/Reflections/index.jsx
@@ -8,7 +8,7 @@ import {
   DownloadIcon,
   FlameIcon,
 } from 'renderer/icons';
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useMemo } from 'react';
 import * as Dialog from '@radix-ui/react-dialog';
 import { useAIContext } from 'renderer/context/AIContext';
 import {
@@ -76,6 +76,11 @@ export default function Reflections() {
     });
   };
 
+  const osStyles = useMemo(
+    () => (window.electron.isMac ? styles.mac : styles.win),
+    []
+  );
+
   return (
     <>
       <Dialog.Root>
@@ -90,6 +95,14 @@ export default function Reflections() {
             <div className={styles.wrapper}>
               <Dialog.Title className={styles.DialogTitle}>
                 <Status setReady={setReady} />
+                <Dialog.Close asChild>
+                  <button
+                    className={`${styles.close} ${osStyles}`}
+                    aria-label="Close Reflections"
+                  >
+                    <CrossIcon />
+                  </button>
+                </Dialog.Close>
               </Dialog.Title>
               <TextareaAutosize
                 value={text}
@@ -110,14 +123,6 @@ export default function Reflections() {
                     'Reflect'
                   )}
                 </button>
-                <Dialog.Close asChild>
-                  <button
-                    className={styles.close}
-                    aria-label="Close Reflections"
-                  >
-                    <CrossIcon />
-                  </button>
-                </Dialog.Close>
               </div>
 
               <AnimatePresence>