style fixes

Moebits · Aug 13, 2021 · 478a2e3 · 478a2e3
1 parent 564da2b
commit 478a2e3
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 10 deletions.
diff --git a/components/PhotoViewer.tsx b/components/PhotoViewer.tsx
@@ -64,7 +64,7 @@ const PhotoViewer: React.FunctionComponent = (props) => {
     const [resetHover, setResetHover] = useState(false)
     const [previousHover, setPreviousHover] = useState(false)
     const [nextHover, setNextHover] = useState(false)
-    const [image, setImage] = useState(noImage)
+    const [image, setImage] = useState("")
     const [hover, setHover] = useState(false)
     const initialCropState = {unit: "%", x: 0, y: 0, width: 100, height: 100, aspect: undefined}
     const [cropState, setCropState] = useState(initialCropState)
@@ -152,6 +152,7 @@ const PhotoViewer: React.FunctionComponent = (props) => {
         const copyAddress = () => {
             clipboard.writeText(image)
         }
+        if (!image) setImage(noImage)
         ipcRenderer.on("copy-image", copyImage)
         ipcRenderer.on("copy-address", copyAddress)
         ipcRenderer.on("save-img-context", save)

diff --git a/components/TitleBar.tsx b/components/TitleBar.tsx
@@ -111,6 +111,12 @@ const TitleBar: React.FunctionComponent = (props) => {
             document.documentElement.style.setProperty("--text-color", "#3177f5")
             document.documentElement.style.setProperty("--button-color", "#090409")
             document.documentElement.style.setProperty("--button-text", "#4486ff")
+            document.documentElement.style.setProperty("--version-color", "#090409")
+            document.documentElement.style.setProperty("--version-text", "#3a8fff")
+            document.documentElement.style.setProperty("--version-accept", "#090409")
+            document.documentElement.style.setProperty("--version-reject", "#090409")
+            document.documentElement.style.setProperty("--version-accept-text", "#4486ff")
+            document.documentElement.style.setProperty("--version-reject-text", "#338bff")
             setTheme("dark")
             ipcRenderer.invoke("save-theme", "dark")
         } else {
@@ -119,6 +125,12 @@ const TitleBar: React.FunctionComponent = (props) => {
             document.documentElement.style.setProperty("--text-color", "black")
             document.documentElement.style.setProperty("--button-color", "#4486ff")
             document.documentElement.style.setProperty("--button-text", "black")
+            document.documentElement.style.setProperty("--version-color", "#3a8fff")
+            document.documentElement.style.setProperty("--version-text", "black")
+            document.documentElement.style.setProperty("--version-accept", "#4486ff")
+            document.documentElement.style.setProperty("--version-reject", "#338bff")
+            document.documentElement.style.setProperty("--version-accept-text", "black")
+            document.documentElement.style.setProperty("--version-reject-text", "black")
             setTheme("light")
             ipcRenderer.invoke("save-theme", "light")
         }

diff --git a/index.less b/index.less
@@ -12,6 +12,12 @@
     --button-text: black;
     --selection-color: #3491fc;
     --bg-color: #7294cf;
+    --version-color: #3a8fff;
+    --version-text: black;
+    --version-accept: #4486ff;
+    --version-reject: #338bff;
+    --version-accept-text: black;
+    --version-reject-text: black;
 }
 
 * {

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "photo-viewer",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "An image/GIF viewer that can apply various resizing and color effects.",
   "main": "dist/main.js",
   "scripts": {

diff --git a/styles/versiondialog.less b/styles/versiondialog.less
@@ -21,7 +21,7 @@
     width: 35%;
     height: 30%;
     border-radius: 10px;
-    background-color: #3a8fff;
+    background-color: var(--version-color);
     padding: 10px;
     display: flex;
     flex-direction: column;
@@ -37,7 +37,7 @@
 }
 
 .version-dialog-text {
-    color: black;
+    color: var(--version-text);
     cursor: text;
     user-select: text;
     font-size: 20px;
@@ -59,11 +59,11 @@
     padding-bottom: 7px;
     padding-left: 14px;
     padding-right: 14px;
-    color: black;
+    color: var(--version-reject-text);
     font-size: 20px;
     font-family: "Maven Pro", sans-serif;
-    background-color: #338bff;
-    border: 3px solid black;
+    background-color: var(--version-reject);
+    border: 3px solid var(--version-reject-text);
     &:hover {
         color: white;
         border: 3px solid white;
@@ -77,11 +77,11 @@
     padding-bottom: 7px;
     padding-left: 14px;
     padding-right: 14px;
-    color: black;
+    color: var(--version-accept-text);
     font-size: 20px;
     font-family: "Maven Pro", sans-serif;
-    background-color: #4486ff;
-    border: 3px solid black;
+    background-color: var(--version-accept);
+    border: 3px solid var(--version-accept-text);
     &:hover {
         color: white;
         border: 3px solid white;