Cleanup & Minor design improvements

anweisen · Oct 20, 2023 · d39cbc5 · d39cbc5
1 parent 9172b32
commit d39cbc5
Show file tree

Hide file tree

Showing 9 changed files with 226 additions and 202 deletions.
diff --git a/src/components/Clock.tsx b/src/components/Clock.tsx
@@ -1,16 +1,15 @@
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
-import {faCheck, faDownload, faShareAlt} from "@fortawesome/free-solid-svg-icons";
+import {faDownload, faShareAlt} from "@fortawesome/free-solid-svg-icons";
 import React, {useContext, useEffect, useState} from "react";
 import {TvSeriesDetails} from "../tmdb/types";
 import {lookup, lookupRuntime} from "../tmdb/api";
 import {encodeItems, formatTime, Item, timesOf, useForceUpdate} from "../utils";
-import Loader from "./Loader";
-import "./Clock.scss";
 import ImportModal from "./ui/ImportModal";
 import {ModalContext} from "./context/ModalContext";
 import {AppContext} from "./context/AppContext";
-import SimpleModal from "./ui/SimpleModal";
 import WageModal from "./ui/WageModal";
+import Loader from "./Loader";
+import "./Clock.scss";
 
 const Clock = ({items}: { items: Item[] }) => {
 
@@ -56,17 +55,17 @@ const Clock = ({items}: { items: Item[] }) => {
     <div className={"Clock" + (!finished ? " Loading" : "")}>
       <div>
         <div className={"TitleWrapper"}>
-          {isSharedData && <div className={"TitleNotice"} onClick={() => { window.location.href = window.location.origin }}>this could be you</div>}
+          {isSharedData && <div className={"TitleNotice"} onClick={() => window.location.href = window.location.origin}>this could be you</div>}
           <div className="Title">{isSharedData ? "⤿ someone" : "you've"} wasted over</div>
         </div>
         <div className="Main">{formatTime(time)}</div>
         {!finished ? <Loader/> : <>
-          <div className="Or">or</div>
+          <div className="Or">OR</div>
           <div className="Days">{(time / 60 / 24).toFixed(1)} days</div>
           <div className="Wage">
             <div className={"WageEarned"}>{(time / 60 * (wage <= 0 ? 12 : wage)).toLocaleString("en-US", {maximumFractionDigits: 0})}{currency}</div>
             <div onClick={event => {
-              openModal(<WageModal wage={wage} setWage={setWage} currency={currency} setCurrency={setCurrency} />);
+              openModal(<WageModal wage={wage} setWage={setWage} currency={currency} setCurrency={setCurrency}/>);
             }} className={"WageAmount"}>at {wage <= 0 ? "minimum wage" : wage + currency + "/h"}</div>
           </div>
         </>}
@@ -90,9 +89,9 @@ const Clock = ({items}: { items: Item[] }) => {
                 .then(() => console.log("Successful copy"))
                 .catch((error) => console.log("Error copying", error));
             }
-          }}><FontAwesomeIcon icon={faShareAlt}/> share your history
-          </div>
-          : <div className="Button" onClick={event => openModal(<ImportModal/>)}>
+          }}><FontAwesomeIcon icon={faShareAlt}/> share your history</div>
+          :
+          <div className="Button" onClick={event => openModal(<ImportModal/>)}>
             <FontAwesomeIcon icon={faDownload}/> import this history
           </div>}
       </div>

diff --git a/src/components/ui/ContextMenu.scss b/src/components/ui/ContextMenu.scss
@@ -1,131 +1,158 @@
 .ContextMenu {
-  position: relative;
-
-  .ContextWindow {
-
-    position: absolute;
-    top: 70px;
-    right: 10px;
-
-    width: 200px;
-    height: auto;
-    border-radius: 20px;
-    background: var(--background-border);
-
-    font-family: "Poppins", sans-serif;
-
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-    padding: 10px;
-
-    hr {
-      opacity: 50%;
-      width: 80%;
-      margin: auto;
-    }
-
-    .Button {
-      display: flex;
-      justify-content: flex-start;
-      gap: 20px;
-      padding: 0 0 0 20px;
-      align-items: center;
-      height: 40px;
-      width: 90%;
-
-      margin: auto;
-      border-radius: 10px;
-
-      cursor: pointer;
-
-      transition: background-color ease .2s;
-      &:hover {
-        background: var(--background-popup-secondary);
-      }
-
-      .ButtonIcon {
-        color: var(--text-primary);
-      }
-
-      .ButtonTitle {
-        color: var(--text-primary);
-        text-align: center;
-      }
-    }
-
-    .S9gUrf-YoZ4jf {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-    }
-
-    .SignedInAs {
-      color: var(--text-secondary);
-      font-size: 12px;
-      text-align: center;
-    }
-
-    .UserName {
-      color: var(--text-primary);
-      font-size: 16px;
-      text-align: center;
-    }
-
-    &:not(.Visible) {
-      display: none;
-
-      animation: modal-fadeout-wrapper .15s ease-out forwards;
-
-      @keyframes modal-fadeout-wrapper {
-        from {
-          display: grid;
-        }
-        to {
-          display: none;
-          opacity: 0;
-        }
-      }
-    }
-
-    &.Visible {
-      animation: modal-fadein-wrapper .15s ease-out forwards;
-
-      @keyframes modal-fadein-wrapper {
-        from {
-          display: none;
-          opacity: 0;
-        }
-        to {
-          display: grid;
-        }
-
-      }
-    }
-
-  }
-
-  .MainButton {
-    position: absolute;
-
-    right: 40px;
-    top: 20px;
-
-    width: 40px;
-    height: 40px;
-    border-radius: 20px;
-    background: var(--text-secondary);
-    cursor: pointer;
-
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    .ProfilePicture {
-      width: 100%;
-      height: 100%;
-      border-radius: 20px;
-    }
-  }
+	position: relative;
+
+	.ContextWindow {
+		position: absolute;
+		top: 70px;
+		right: 10px;
+
+		width: 200px;
+		height: auto;
+		border-radius: 20px;
+		background: var(--background-border);
+
+		font-family: "Poppins", sans-serif;
+
+		display: flex;
+		flex-direction: column;
+		gap: 10px;
+		padding: 10px 20px;
+
+		hr {
+			opacity: 50%;
+			width: 80%;
+			margin: auto;
+		}
+
+		.Button {
+			display: flex;
+			justify-content: flex-start;
+			gap: 20px;
+			padding: 0 0 0 20px;
+			align-items: center;
+			height: 40px;
+			width: 90%;
+
+			margin: auto;
+			border-radius: 10px;
+
+			cursor: pointer;
+			user-select: none;
+
+			transition: background-color ease .2s;
+
+			&:hover {
+				background: var(--background-popup-secondary);
+			}
+
+			color: var(--text-primary);
+
+			.ButtonTitle {
+				text-align: center;
+			}
+
+			&.Logout {
+				color: var(--action-fail);
+
+				&:hover {
+					background: var(--action-fail-background);
+				}
+			}
+		}
+
+		.S9gUrf-YoZ4jf {
+			display: flex;
+			justify-content: center;
+			align-items: center;
+		}
+
+		.SignedInAs {
+			color: var(--text-secondary);
+			font-size: 12px;
+			text-align: center;
+		}
+
+		.UserName {
+			color: var(--text-primary);
+			font-size: 16px;
+			text-align: center;
+		}
+
+		.LoggedOut {
+			text-align: center;
+			padding: 7px 0;
+
+			svg {
+				font-size: 20px;
+				color: var(--action-fail-background);
+			}
+
+			p {
+				color: var(--icon-primary);
+			}
+		}
+
+		&:not(.Visible) {
+			display: none;
+
+			animation: context-fadeout .15s ease-in-out forwards;
+
+			@keyframes context-fadeout {
+				from {
+					display: grid;
+				}
+				to {
+					transform: translateY(-5px);
+					display: none;
+					opacity: 0;
+				}
+			}
+		}
+
+		&.Visible {
+			animation: context-fadein .15s ease-in-out forwards;
+
+			@keyframes context-fadein {
+				from {
+					transform: translateY(-5px);
+					display: none;
+					opacity: 0;
+				}
+				to {
+					display: grid;
+				}
+
+			}
+		}
+
+	}
+
+	.MainButton {
+		position: absolute;
+
+		right: 40px;
+		top: 20px;
+
+		@media (max-width: 600px) {
+			right: 20px;
+		}
+
+		width: 40px;
+		height: 40px;
+		border-radius: 20px;
+		background: var(--background-border);
+		color: var(--icon-primary);
+		cursor: pointer;
+
+		display: flex;
+		justify-content: center;
+		align-items: center;
+
+		.ProfilePicture {
+			width: 100%;
+			height: 100%;
+			border-radius: 20px;
+		}
+	}
 
 }