Few style changes

attestate · Oct 15, 2024 · 1e75d04 · 1e75d04
1 parent 6688143
commit 1e75d04
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 32 deletions.
diff --git a/src/views/components/row.mjs b/src/views/components/row.mjs
@@ -16,20 +16,14 @@ import log from "../../logger.mjs";
 
 const html = htm.bind(vhtml);
 
-const heartSVG = html`
+const iconSVG = html`
  <svg
- style="color: rgba(0, 0, 0, 0.65); width: 23px; padding: 3px 0;"
+ style="width: 35px;"
+ viewBox="0 0 200 200"
  xmlns="http://www.w3.org/2000/svg"
- viewBox="0 0 256 256"
  >
- <rect width="256" height="256" fill="none" />
  <path
- d="M128,224S24,168,24,102A54,54,0,0,1,78,48c22.59,0,41.94,12.31,50,32,8.06-19.69,27.41-32,50-32a54,54,0,0,1,54,54C232,168,128,224,128,224Z"
- fill="none"
- stroke="currentColor"
- stroke-linecap="round"
- stroke-linejoin="round"
- stroke-width="16"
+ d="M99.84 52.0801L55.04 96.8001L68.44 110.04L90.36 88.0401L90.3747 148H109.8V88.0401L131.84 110.04L144.96 96.8001L100.24 52.0801H99.84Z"
  />
  </svg>
 `;
@@ -328,7 +322,7 @@ const row = (
  style="color: rgb(130, 130, 130); cursor: pointer;"
  title="upvote"
  >
- ${heartSVG}
+ ${iconSVG}
  </div>
  <div
  class="upvotes-container"

diff --git a/src/web/src/Bell.jsx b/src/web/src/Bell.jsx
@@ -127,7 +127,7 @@ const Bell = (props) => {
  position: "absolute",
  top: props.mobile ? "8px" : "5px",
  right: props.mobile ? "32px" : "8px",
- backgroundColor: "red",
+ backgroundColor: "rgb(175, 192, 70)",
  borderRadius: "2px",
  color: "white",
  padding: "1px",

diff --git a/src/web/src/Vote.jsx b/src/web/src/Vote.jsx
@@ -12,32 +12,23 @@ import NFTModal from "./NFTModal.jsx";
 import theme from "./theme.jsx";
 import { getLocalAccount } from "./session.mjs";
 
-const heartSVG = (
+const iconSVG = (
  <svg
- style={{ color: "rgba(0, 0, 0, 0.65)", width: "23px", padding: "3px 0" }}
+ style={{ width: "35px" }}
+ viewBox="0 0 200 200"
  xmlns="http://www.w3.org/2000/svg"
- viewBox="0 0 256 256"
  >
- <rect width="256" height="256" fill="none" />
- <path
- d="M128,224S24,168,24,102A54,54,0,0,1,78,48c22.59,0,41.94,12.31,50,32,8.06-19.69,27.41-32,50-32a54,54,0,0,1,54,54C232,168,128,224,128,224Z"
- fill="none"
- stroke="currentColor"
- strokeLinecap="round"
- strokeLinejoin="round"
- strokeWidth="16"
- />
+ <path d="M99.84 52.0801L55.04 96.8001L68.44 110.04L90.36 88.0401L90.3747 148H109.8V88.0401L131.84 110.04L144.96 96.8001L100.24 52.0801H99.84Z" />
  </svg>
 );
 
-const heartFullSVG = (
+const iconFullSVG = (
  <svg
- style={{ width: "23px", padding: "3px 0" }}
+ style={{ width: "35px" }}
+ viewBox="0 0 200 200"
  xmlns="http://www.w3.org/2000/svg"
- viewBox="0 0 256 256"
  >
- <rect width="256" height="256" fill="none" />
- <path d="M240,102c0,70-103.79,126.66-108.21,129a8,8,0,0,1-7.58,0C119.79,228.66,16,172,16,102A62.07,62.07,0,0,1,78,40c20.65,0,38.73,8.88,50,23.89C139.27,48.88,157.35,40,178,40A62.07,62.07,0,0,1,240,102Z" />
+ <path d="M99.84 52.0801L55.04 96.8001L68.44 110.04L90.36 88.0401L90.3747 148H109.8V88.0401L131.84 110.04L144.96 96.8001L100.24 52.0801H99.84Z" />
  </svg>
 );
 
@@ -174,7 +165,7 @@ const Vote = (props) => {
  }}
  title="upvote"
  >
- {hasUpvoted ? heartFullSVG : heartSVG}
+ {hasUpvoted ? iconFullSVG : iconSVG}
  </div>
  {props.editorPicks !== "true" ? (
  <div

diff --git a/src/web/src/main.jsx b/src/web/src/main.jsx
@@ -93,6 +93,7 @@ async function checkNewStories() {
 function handleClick(event) {
  const sidebar = document.querySelector(".sidebar");
  const overlay = document.querySelector("#overlay");
+ if (!sidebar) return;
  const isClickOutside = !sidebar.contains(event.target);
  const isSidebarOpen =
  sidebar.style.left === "0" || sidebar.style.left === "0px";
@@ -593,7 +594,15 @@ async function addToaster() {
 
  createRoot(newElement).render(
  <StrictMode>
- <Toaster />
+ <Toaster
+ toastOptions={{
+ success: {
+ iconTheme: {
+ primary: "rgb(175, 192, 70)",
+ },
+ },
+ }}
+ />
  </StrictMode>,
  );
  return toast;
@@ -824,8 +833,9 @@ function updateLinkTargetsForIOSPWA() {
 
 function initKiwiRotation(selector) {
  const kiwi = document.querySelector(selector);
- kiwi.style.transition = "transform 0.3s";
+ if (!kiwi) return;
 
+ kiwi.style.transition = "transform 0.3s";
  const val = () => Math.floor(Math.random() * 30);
 
  function rotateKiwi() {