reduced stroke width from some icons, thinner text for title, fixed s…

…ome hover bugs
RenanSui · Aug 4, 2023 · 3c9d567 · 3c9d567
1 parent b91a1b9
commit 3c9d567
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 17 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "salvage",
-  "version": "1.4.0",
+  "version": "1.4.1",
   "description": "Simple backup automator",
   "main": "./out/main/index.js",
   "author": "RenanSui",

diff --git a/src/renderer/src/App.tsx b/src/renderer/src/App.tsx
@@ -39,14 +39,15 @@ function App(): JSX.Element {
 
       {showMenu && <Menu />}
 
-      <main className="bg-neutral-950 text-white ">
+      <main className="bg-neutral-950 text-white">
         <Shell className="overflow-hidden h-[calc(100vh-37px)] flex flex-shell gap-2 mx-2">
           <Shell
             variant={'transparent'}
             size={'sm'}
             center={true}
             as={'button'}
             onClick={addPathItem}
+            className="group"
           >
             <IconShell variant="transparent" as={'span'}>
               <Icons.plusCircle className="group-hover:text-neutral-100 text-neutral-400 transition-all duration-300" />
@@ -55,7 +56,7 @@ function App(): JSX.Element {
 
           {/* <button onClick={() => window.api.observeWatch()}>observe</button> */}
 
-          <Shell className="salvageContainer h-[calc(100vh_-_95px)] gap-2 overflow-auto">
+          <Shell className="group salvageContainer h-[calc(100vh_-_95px)] gap-2 overflow-auto">
             {responsePathItems?.map((item) => (
               <SalvageItem
                 item={item}

diff --git a/src/renderer/src/components/salvage-item.tsx b/src/renderer/src/components/salvage-item.tsx
@@ -170,21 +170,21 @@ const SalvageItemComponent = ({ item, setRerender }: SalvageItemProps) => {
       <header className="flex items-center justify-between mt-1 ">
         {salvageState === 'maximized' && (
           <Icons.chevronUp
-            className="h-6 w-6 cursor-pointer hover:opacity-50 transition-all duration-300"
+            className="h-6 w-6 cursor-pointer hover:opacity-50 transition-all duration-300 stroke-[1]"
             onClick={() => setSalvageState('minimized')}
           />
         )}
 
         {salvageState === 'minimized' && (
           <Icons.chevronDown
-            className="h-6 w-6 cursor-pointer hover:opacity-50 transition-all duration-300"
+            className="h-6 w-6 cursor-pointer hover:opacity-50 transition-all duration-300 stroke-[1]"
             onClick={() => setSalvageState('maximized')}
           />
         )}
 
         {salvageState === 'editing' && (
           <Icons.chevronLeft
-            className="h-6 w-6 cursor-pointer hover:opacity-50 transition-all duration-300"
+            className="h-6 w-6 cursor-pointer hover:opacity-50 transition-all duration-300 stroke-[1.25]"
             onClick={() => {
               setSalvageState('maximized')
               watchPath()
@@ -194,7 +194,7 @@ const SalvageItemComponent = ({ item, setRerender }: SalvageItemProps) => {
         )}
 
         <Icons.x
-          className="h-5 w-5 mr-1 cursor-pointer hover:text-red-300 transition-all duration-300"
+          className="h-5 w-5 mr-1 cursor-pointer hover:text-red-300 transition-all duration-300 stroke-[1]"
           onClick={deleteItem}
         />
       </header>
@@ -203,8 +203,8 @@ const SalvageItemComponent = ({ item, setRerender }: SalvageItemProps) => {
         <div className="flex flex-col gap-1 max-w-[260px] flex-grow">
           {salvageState !== 'editing' && title && (
             <Ellipis
-              className={`font-semibold
-                ${salvageState === 'maximized' ? 'text-2xl ' : 'text-xl'}
+              className={`
+                ${salvageState === 'maximized' ? 'text-2xl ' : 'text-2xl'}
               `}
             >
               {title}
@@ -233,7 +233,7 @@ const SalvageItemComponent = ({ item, setRerender }: SalvageItemProps) => {
         <div className=" flex flex-col gap-2 mt-1 justify-between">
           {salvageState !== 'editing' && (
             <Icons.refreshCw
-              className={`h-7 w-7 cursor-pointer 
+              className={`h-7 w-7 cursor-pointer stroke-[1]
               ${
                 srcDir &&
                 destDir &&
@@ -250,14 +250,14 @@ const SalvageItemComponent = ({ item, setRerender }: SalvageItemProps) => {
 
           {salvageState === 'maximized' && (
             <Icons.arrowDownUp
-              className="h-7 w-7 cursor-pointer text-white hover:text-neutral-500 transition-all duration-300"
+              className="stroke-[1] h-7 w-7 cursor-pointer text-white hover:text-neutral-500 transition-all duration-300"
               onClick={moveItemUp}
             />
           )}
 
           {salvageState === 'maximized' && (
             <Icons.pencilLine
-              className="h-7 w-7 cursor-pointer text-white hover:text-neutral-500 transition-all duration-300"
+              className="stroke-[1] h-7 w-7 cursor-pointer text-white hover:text-neutral-500 transition-all duration-300"
               onClick={() => {
                 setSalvageState('editing')
                 stopWatchPath()

diff --git a/src/renderer/src/components/shells/shell.tsx b/src/renderer/src/components/shells/shell.tsx
@@ -2,7 +2,7 @@ import { ElementType, FC, HTMLAttributes } from 'react'
 import { VariantProps, tv } from 'tailwind-variants'
 
 const shell = tv({
-  base: 'group flex flex-col rounded-md transition-all duration-300',
+  base: 'flex flex-col rounded-md transition-all duration-300',
   variants: {
     variant: {
       default: '',

diff --git a/src/renderer/src/components/title-bar.tsx b/src/renderer/src/components/title-bar.tsx
@@ -32,9 +32,9 @@ const TitleBar = ({
           onClick={() => setShowMenu((prev) => !prev)}
         >
           {showMenu ? (
-            <Icons.chevronLeft className="text-white group-hover:text-green-300" />
+            <Icons.chevronLeft className="text-white group-hover:text-green-300 stroke-[1.5]" />
           ) : (
-            <Icons.alignLeft className="text-white group-hover:text-green-300" />
+            <Icons.alignLeft className="text-white group-hover:text-green-300 stroke-2" />
           )}
         </IconShell>
 
@@ -55,11 +55,11 @@ const TitleBar = ({
 
       <div className="h-full flex">
         <IconShell as={'span'} onClick={minimizeApp}>
-          <Icons.minus className="text-white" />
+          <Icons.minus className="text-white stroke-[2]" />
         </IconShell>
 
         <IconShell variant="red" as={'span'} onClick={closeApp}>
-          <Icons.x className="text-white" />
+          <Icons.x className="text-white stroke-[1.5]" />
         </IconShell>
       </div>
     </header>