From 5dc507be8c5d90e88a80dc609c5c2c30072204f8 Mon Sep 17 00:00:00 2001
From: Dinoosauro <80783030+Dinoosauro@users.noreply.github.com>
Date: Tue, 23 Apr 2024 21:08:47 +0200
Subject: [PATCH] Update some styling

- Now the toolbar icons are always centered, since it seems to be nicer overall
- Added margin for the PWA promotion tab
---
 src/Components/Toolbar.tsx | 4 ++--
 src/index.css              | 1 +
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/Components/Toolbar.tsx b/src/Components/Toolbar.tsx
index 3201f77..61ff1af 100644
--- a/src/Components/Toolbar.tsx
+++ b/src/Components/Toolbar.tsx
@@ -59,14 +59,14 @@ export default function Toolbar({ pageSettings, updatePage, settingsCallback, pd
      * Make sure no buttons are lost due to the div being justified in the center
      */
     function fixToolbarContentJustification() {
-        if (checkFlexDiv.current && checkFlexDiv.current.getAttribute("data-autojustify") === "a") checkFlexDiv.current.style.justifyContent = checkFlexDiv.current.scrollWidth - checkFlexDiv.current.getBoundingClientRect().width > -3 && checkFlexDiv.current.scrollWidth - checkFlexDiv.current.getBoundingClientRect().width < 3 ? "center" : "left"; // Add a 3px tollerance for WebKit, since one of the two values might be a pixel greater than the other
+        if (checkFlexDiv.current) checkFlexDiv.current.style.justifyContent = checkFlexDiv.current.scrollWidth - checkFlexDiv.current.getBoundingClientRect().width > -3 && checkFlexDiv.current.scrollWidth - checkFlexDiv.current.getBoundingClientRect().width < 3 ? "center" : "left"; // Add a 3px tollerance for WebKit, since one of the two values might be a pixel greater than the other
     }
     useEffect(() => fixToolbarContentJustification());
     useEffect(() => window.addEventListener("resize", () => fixToolbarContentJustification()), [])
     let generateColorValues = () => [{ name: "Green", value: "rgb(0,255,0)" }, { name: "Blue", value: "rgb(0,0,255)" }, { name: "Red", value: "rgb(255,0,0)" }, { name: "Accent color", value: getComputedStyle(document.body).getPropertyValue("--accent") }, ...JSON.parse(localStorage.getItem(`PDFPointer-CustomColor`) ?? "[]")]; // Make it a function so that the accent color is refreshed every time.
     return <div style={{ marginTop: "10px", margin: "0px 20px" }}>
         <Card type={1} zIndex={999991}>
-            <div ref={checkFlexDiv} data-autojustify={CardShown.indexOf(",") === -1 || CardShown.substring(0, CardShown.indexOf(",")) === "hello" ? "a" : "b"} className="toolbar" style={{ justifyContent: CardShown === "hello" ? "center" : "left" }}>
+            <div ref={checkFlexDiv} className="toolbar" style={{ justifyContent: CardShown === "hello" ? "center" : "left" }}>
                 {CardShown === "pen" || CardShown === "text" ? <>
                     {usefulBtn[CardShown === "pen" ? "pen" : "text"]}
                     <DropdownItem title={Lang("Erase annotations after:")} custom={<CustomCallback type="number" identifier="CustomSelectTimer" callback={settingsCallback} placeholder={Lang("Custom value (in seconds)")}></CustomCallback>} content={<IntelliSelect select={settingsCallback} pre={[{ name: `5 ${Lang("seconds")}`, value: "5" }, { name: `10 ${Lang("seconds")}`, value: "10" }, { name: `15 ${Lang("seconds")}`, value: "15" }, { name: `30 ${Lang("seconds")}`, value: "30" }, { name: `1 ${Lang("minute")}`, value: "60" }]} identifier="CustomSelectTimer"></IntelliSelect>}>
diff --git a/src/index.css b/src/index.css
index 27f5654..c151730 100644
--- a/src/index.css
+++ b/src/index.css
@@ -526,4 +526,5 @@ a:visited {
 
 .doubleFlex>div {
   flex: 1 0 300px;
+  margin: 0px 10px;
 }
\ No newline at end of file