fixed color schema, fixed button ref component, fixed default styles

SteamOrganizer.Web/src/assets/index.css

@@ -11,35 +11,20 @@
  color-scheme: dark;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizelegibility;
- --failed: #ef4444;
- @apply selection:bg-indigo-600 selection:text-fg-3 caret-fg-2
-}
-
-.os-theme-dark,
-.os-theme-light {
- --os-size: 7px;
+ @apply selection:bg-indigo-600 selection:text-foreground-accent caret-foreground
 }
 
 #root {
- max-width: 100vw;
- max-height: 100vh;
- @apply h-screen w-screen overflow-clip bg-pr-1 flex
+ max-width: 100svw;
+ max-height: 100svh;
+ @apply h-svh w-svw overflow-clip bg-background flex
 }
 
-.primary-grad {
- background: linear-gradient(to right, #87CEFA 0%, #6c5ecf 100%);
-}
-
-.invalidate {
- background: var(--failed);
- pointer-events: none;
- animation: shake 0.5s;
+.os-theme-dark,
+.os-theme-light {
+ --os-size: 7px;
 }
 
-@keyframes shake {
- 0% { transform: translateX(0); }
- 25% { transform: translateX(-5px); }
- 50% { transform: translateX(5px); }
- 75% { transform: translateX(-5px); }
- 100% { transform: translateX(0); }
+.letter-space {
+ letter-spacing: 1px;
 }

SteamOrganizer.Web/src/assets/index.tsx

@@ -13,6 +13,10 @@ export function Defs() {
  <stop offset="1" stopColor="#6c5ecf"/>
  </linearGradient>
  </defs>
+ <mask id="mask">
+
+ <path className="st0" d="M152.18,175H31.1c-12.92,0-23.4-11.34-23.4-25.32L-0.19,26.68C-0.19,11.94,11.29,0,25.46,0h132.71c14.16,0,25.64,11.94,25.64,26.68l-8.24,123.01C175.58,163.66,165.1,175,152.18,175z" fill="#ffff"/>
+ </mask>
  </svg>
  )
 }

SteamOrganizer.Web/src/components/Header.tsx

@@ -8,8 +8,7 @@ import {ESidebarState, setState } from "@/components/Sidebar.tsx";
 export const Header: FC = () => {
 
  return (
- <div className="w-full flex justify-between items-center bg-pr-2 h-12 border-b-2 border-b-stroke-1 px-3
- text-fg-2 flex-shrink-0">
+ <div className="w-full flex justify-between items-center bg-primary h-12 border-b-2 border-b-border px-3 text-foreground flex-shrink-0">
  <div className="flex">
  <LuAlignJustify className=" lg:invisible" size={20} onClick={() => {
  setState(prev =>
@@ -25,7 +24,7 @@ export const Header: FC = () => {
  className: "w-full max-w-[405px]",
  title: "Settings",
  body:
- <div className="text-[13px] text-fg-2">
+ <div className="text-[13px] text-foreground">
  Settings component
  </div>
  })

SteamOrganizer.Web/src/components/Sidebar.tsx

@@ -36,11 +36,11 @@ export const SidebarItem: FC<ISidebarItemProps> = ({icon,text,link }) => {
 
  if(location.pathname.startsWith(link)) {
  iconClass = "text-blue-400"
- bgCol = "scale-x-100 bg-pr-3 border-l-[3px]"
- textClass += " text-fg-2"
+ bgCol = "scale-x-100 bg-accent border-l-[3px]"
+ textClass += " text-foreground"
  }
  else {
- iconClass = "text-fg-1 hover:bg-stroke-1"
+ iconClass = "text-foreground-muted hover:bg-border"
  bgCol = "scale-x-0"
  }
 
@@ -53,13 +53,10 @@ export const SidebarItem: FC<ISidebarItemProps> = ({icon,text,link }) => {
  <p className={`mt-3 font-semibold text-sm ${textClass}`}>{text}</p>
  </div>
 
- <div className={`w-full h-full origin-left border-l-pr-4 absolute duration-500 transition-all ${bgCol}`}/>
+ <div className={`w-full h-full origin-left border-l-secondary absolute duration-500 transition-all ${bgCol}`}/>
 
  {state == ESidebarState.Partial && (
- <div className={`absolute left-full rounded-md px-2 py-1 ml-5
- bg-pr-3 text-fg-2 text-sm
- invisible opacity-20 -translate-x-3 transition-all
- group-hover:visible group-hover:opacity-100 group-hover:translate-x-0`}>
+ <div className={`absolute left-full rounded-md px-2 py-1 ml-5 bg-accent text-foreground text-sm invisible opacity-20 -translate-x-3 transition-all group-hover:visible group-hover:opacity-100 group-hover:translate-x-0`}>
  {text}
  </div>
  )}
@@ -105,31 +102,31 @@ export const Sidebar: FC<ISidebarProps> = ({children}) => {
 
  return (
  <aside className={clsx(`fixed lg:relative flex flex-shrink-0 h-full z-50`)}>
- <nav className={`h-full flex flex-col bg-pr-2 transition-all rounded-sm ${state == ESidebarState.Full ? "w-52" : state == ESidebarState.Partial ? "w-16" : "w-0 overflow-clip"}`}>
+ <nav className={`h-full flex flex-col bg-primary transition-all rounded-sm ${state == ESidebarState.Full ? "w-52" : state == ESidebarState.Partial ? "w-16" : "w-0 overflow-clip"}`}>
 
- <div className={`lg:h-[48px] border-b-2 border-b-stroke-1`}/>
+ <div className={`lg:h-[48px] border-b-2 border-b-border`}/>
 
  <SidebarContext.Provider value={ state }>
  <ul className="flex-1">
  {children}
  </ul>
  </SidebarContext.Provider>
- <div className={`border-t border-pr-3 px-[11px] py-3 flex overflow-clip`}>
+ <div className={`border-t border-accent px-[11px] py-3 flex overflow-clip`}>
  <img
  src="https://ui-avatars.com/api/?background=c7d2fe&color=3730a3&bold=true"
  alt=""
  className="w-10 h-10 rounded-md"
  />
  <div className="pl-2 flex-col flex justify-center text-nowrap w-full overflow-clip relative">
- <h4 className="text-fg-3 text-sm">Kitbyte</h4>
- <span className="text-fg-1 text-xs">kit8.com</span>
- <div className="absolute w-1/3 h-full right-0 bg-gradient-to-r from-transparent to-pr-2"/>
+ <h4 className="text-foreground-accent text-sm">Kitbyte</h4>
+ <span className="text-foreground-muted text-xs">kit8.com</span>
+ <div className="absolute w-1/3 h-full right-0 bg-gradient-to-r from-transparent to-primary"/>
  </div>
  </div>
  </nav>
 
  <div ref={sliderRef} className="pl-1 items-center transition-all h-full opacity-0 active:opacity-100 hover:opacity-100 cursor-col-resize hidden lg:flex absolute -right-2">
- <div className="bg-pr-4 h-32 w-1 rounded-xl"/>
+ <div className="bg-secondary h-32 w-1 rounded-xl"/>
  </div>
 
  {state != ESidebarState.Hidden && isSmallScreen &&

SteamOrganizer.Web/src/components/elements/Button.tsx

@@ -35,11 +35,11 @@ const Button: FC<IButtonProps> = (
  }
 
  return (
- <button ref={actions?.payload?.ref} disabled={isLoading}
- className={cn("rounded-xm font-semibold select-none px-3 py-1 flex-center text-2xs min-h-7 bg-pr-4 text-pr-3 transition-colors enabled:hover:text-fg-3 " , className)} {...props}>
+ <button ref={buttonRef} disabled={isLoading}
+ className={cn("rounded-xm font-semibold select-none px-3 py-1 flex-center text-2xs min-h-7 bg-secondary text-accent transition-colors enabled:hover:text-foreground-accent " , className)} {...props}>
 
  {isLoading ?
- <svg className="animate-spin h-5 w-5 text-fg-3" viewBox="0 0 24 24">
+ <svg className="animate-spin h-5 w-5 text-foreground-accent" viewBox="0 0 24 24">
  <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" fill="transparent"
  strokeWidth="4"/>
  <path className="opacity-75" fill="currentColor"

SteamOrganizer.Web/src/components/elements/Input.tsx

@@ -9,7 +9,7 @@ const Input = forwardRef<HTMLInputElement,IInputProps>((
  { className, ...props},ref) => {
  return (
  <input type="text" ref={ref} {...props}
- className={cn("w-full placeholder-fg-1 px-2.5 outline-0 outline-none rounded-sm text-fg-2 text-2xs focus:placeholder:opacity-50 placeholder:duration-300 placeholder:transition-opacity bg-pr-3 h-[35px]", className)}/>
+ className={cn("w-full placeholder-foreground-muted px-2.5 outline-0 outline-none rounded-sm text-foreground text-2xs focus:placeholder:opacity-50 placeholder:duration-300 placeholder:transition-opacity bg-accent h-[35px]", className)}/>
  )
 })
 

SteamOrganizer.Web/src/components/elements/InputWrapper.tsx

@@ -14,14 +14,14 @@ const InputWrapper = forwardRef<HTMLSpanElement,IInputWrapperProps>(
  return (
  <div className={clsx(className)}>
  <div className="flex justify-between items-center mb-0.5 ml-0.5 relative ">
- <p className="text-pr-5 text-[13px] font-semibold">{title}</p>
- <span ref={ref} className="text-[11px] bg-failed text-fg-3 py-0.5 opacity-90 px-1
+ <p className="text-chip text-[13px] font-semibold">{title}</p>
+ <span ref={ref} className="text-[11px] bg-danger text-foreground-accent py-0.5 opacity-90 px-1
  rounded-sm absolute right-0 bottom-0 max-w-[70%] text-ellipsis text-nowrap
  overflow-hidden hover:text-wrap empty:opacity-0 empty:p-0 transition-opacity pointer-events-none"/>
  </div>
 
  <div className="flex mb-1">
- <div className="bg-gradient-to-br from-stroke-2 to-stroke-3 w-[35px] h-[35px]
+ <div className="grad-purple w-[35px] h-[35px]
  rounded-xm flex-shrink-0 flex items-center justify-center mr-2.5">
  {icon}
  </div>

SteamOrganizer.Web/src/components/elements/Modal.tsx

@@ -41,7 +41,7 @@ const ModalBody: FC<IModalProps> = React.memo(
  return (
  <div ref={contentRef} className={"inset-0 fixed items-center overflow-y-auto z-50 w-screen flex justify-center"} onClick={() => handleClose(id!, onClosing)}
  >
- <motion.div className={cn("rounded-2xm bg-pr-2 p-[10px] mb-12", className)}
+ <motion.div className={cn("rounded-2xm bg-primary p-[10px] mb-12", className)}
  modal-id={id}
  onClick={(e) => e.stopPropagation()}
  initial={{opacity: 0, marginTop: -80}}
@@ -53,8 +53,8 @@ const ModalBody: FC<IModalProps> = React.memo(
  onClick={() => handleClose(id!, onClosing)}/>
  }
 
- <h2 className="text-lg mb-2 text-center font-semibold text-fg-3">{title}</h2>
- <div role="separator" className="bg-pr-1 h-1 -mx-[10px] mb-3"/>
+ <h2 className="text-lg mb-2 text-center font-semibold text-foreground-accent">{title}</h2>
+ <div role="separator" className="bg-background h-1 -mx-[10px] mb-3"/>
  {body}
  </motion.div>
  </div>

SteamOrganizer.Web/src/components/elements/PasswordBox.tsx

@@ -13,10 +13,10 @@ export const PasswordBox = forwardRef<HTMLInputElement,IPasswordBoxProps> (
  const [passwordVisible,setPasswordVisibility]= useState(false);
 
  return(
- <div className={clsx("w-full flex items-center bg-pr-3 rounded-xm text-fg-2 text-2xs",className)}>
+ <div className={clsx("w-full flex items-center bg-accent rounded-xm text-foreground text-2xs",className)}>
  <Input type={clsx(passwordVisible || "password","")} {...props} ref={ref}
  className="bg-transparent"/>
- <button className="h-full hover:text-fg-3 transition-all pr-2.5"
+ <button className="h-full hover:text-foreground-accent transition-all pr-2.5"
  onClick={() => setPasswordVisibility((prev) => !prev)}>
  {
  passwordVisible ? <IoMdEye size={18} /> : <IoMdEyeOff size={18} />

SteamOrganizer.Web/src/pages/Accounts/elements/AccountCard.tsx

@@ -13,12 +13,12 @@ interface IAccountCardProps {
 
 const AccountCard: FC<IAccountCardProps> = ({acc} ) => {
  return (
- <div className="flex bg-pr-2 p-4 pr-10 rounded-[3px] h-fit relative">
+ <div className="flex bg-primary p-4 pr-10 rounded-[3px] h-fit relative">
 
  <img
  src="https://ui-avatars.com/api/?background=c7d2fe&color=3730a3&bold=true"
  alt=""
- className="rounded-lg primary-grad p-0.5 w-[55px] h-[55px]"
+ className="rounded-lg grad-primary p-0.5 w-[55px] h-[55px]"
  />
 
  <div className="ml-3">
@@ -31,7 +31,7 @@ const AccountCard: FC<IAccountCardProps> = ({acc} ) => {
  <FaSignInAlt size={14}/>
  </button>
  </div>
- <div className="text-xs mt-[7px] flex flex-wrap font-bold text-pr-1 gap-[5px]">
+ <div className="text-xs mt-[7px] flex flex-wrap font-bold text-background gap-[5px]">
 
  <div className="flex text-nowrap gap-[5px] mr-2">
  <div className="chip">Level: 1000</div>
@@ -45,12 +45,12 @@ const AccountCard: FC<IAccountCardProps> = ({acc} ) => {
  <div className="chip bg-success">Community</div>
  </div>
 
- <span className="text-fg-2 font-medium w-full"><b className="text-pr-4">ID:</b> {acc.steamId64?.toString()}</span>
+ <span className="text-foreground font-medium w-full"><b className="text-secondary">ID:</b> {acc.steamId64?.toString()}</span>
  </div>
  </div>
 
- <BsPinAngleFill className="absolute text-fg-1 right-3 top-3 hover:text-yellow-300 btn" size={17}/>
- <MdDelete className="absolute text-fg-1 right-3 bottom-3 hover:text-failed btn" size={20}/>
+ <BsPinAngleFill className="absolute text-foreground-muted right-3 top-3 hover:text-yellow-300 btn" size={17}/>
+ <MdDelete className="absolute text-foreground-muted right-3 bottom-3 hover:text-failed btn" size={20}/>
 
  </div>
 

SteamOrganizer.Web/src/pages/Accounts/elements/Toolbar.module.pcss

@@ -3,21 +3,21 @@
 }
 
 .editButton {
- @apply bg-pr-2 max-w-[60px] w-full h-[40px] rounded-r-xl rounded-l-3xl flex-center text-fg-2 sm:-order-2 z-20
+ @apply bg-primary max-w-[60px] w-full h-[40px] rounded-r-xl rounded-l-3xl flex-center text-foreground sm:-order-2 z-20
 }
 
 .addButton {
- @apply bg-pr-3 max-w-[60px] w-full h-[40px] rounded-l-xl rounded-r-3xl flex-center text-blue-400 z-20
+ @apply bg-accent max-w-[60px] w-full h-[40px] rounded-l-xl rounded-r-3xl flex-center text-blue-400 z-20
 }
 
 .searchPanel {
  @apply absolute right-0 top-0 flex-center h-full
 }
 
 .iconWrapper {
- @apply bg-pr-3 h-full w-16 rounded-r-xl rounded-l-3xl flex-center text-blue-400
+ @apply bg-accent h-full w-16 rounded-r-xl rounded-l-3xl flex-center text-blue-400
 }
 
 .searchOverlay {
- @apply bg-pr-2 h-[75px] bg-opacity-70 rounded-b-xl w-full absolute top-8 sm:hidden -z-10 backdrop-blur-md transition-all
+ @apply bg-primary h-[75px] bg-opacity-70 rounded-b-xl w-full absolute top-8 sm:hidden -z-10 backdrop-blur-md transition-all
 }

SteamOrganizer.Web/src/pages/Accounts/elements/Toolbar.tsx

@@ -20,11 +20,11 @@ const Toolbar: FC = () => {
  </button>
  <div className="w-full flex-center relative -order-1 z-20 h-[40px]">
  <div className={clsx(styles.searchOverlay, expanded || "h-0")}></div>
- <Input className="rounded-lg pr-24 h-full bg-pr-2 placeholder:font-semibold" maxLength={60} placeholder="Search in accounts"/>
+ <Input className="rounded-lg pr-24 h-full bg-primary placeholder:font-semibold" maxLength={60} placeholder="Search in accounts"/>
  <div className={styles.searchPanel}>
 
  <FaChevronDown size={15}
- className={clsx("mr-2 text-fg-2 transition-transform sm:hidden", expanded && "rotate-180")}
+ className={clsx("mr-2 text-foreground transition-transform sm:hidden", expanded && "rotate-180")}
  onClick={() => setExpanded(prev => !prev)}/>
 
  <div className={styles.iconWrapper}>

SteamOrganizer.Web/src/pages/Backups/BackupCard.tsx

@@ -10,7 +10,7 @@ interface IBackupProps{
 
  const BackupCard: FC<IBackupProps> = ({name,icon,date}) => {
  return(
- <div className="flex min-h-[105px] w-full bg-pr-2 p-4 pr-10 rounded-[3px] relative">
+ <div className="flex min-h-[105px] w-full bg-primary p-4 pr-10 rounded-[3px] relative">
  <div className="ml-3 flex flex-col justify-center">
  <div className="inline-flex">
 
@@ -21,11 +21,11 @@ interface IBackupProps{
  </div>
 
  <div className="">
- <span className="text-fg-2 text-xs font-medium w-full"><b className="text-pr-4">Date :</b> {date!.toLocaleString()}</span>
+ <span className="text-foreground text-xs font-medium w-full"><b className="text-secondary">Date :</b> {date!.toLocaleString()}</span>
  </div>
  </div>
- <MdOutlineRestorePage className="absolute text-fg-1 right-3 top-3 hover:text-blue-500 btn" size={23}/>
- <MdDelete className="absolute text-fg-1 right-3 bottom-3 hover:text-failed btn" size={23}/>
+ <MdOutlineRestorePage className="absolute text-foreground-muted right-3 top-3 hover:text-blue-500 btn" size={23}/>
+ <MdDelete className="absolute text-foreground-muted right-3 bottom-3 hover:text-failed btn" size={23}/>
 
  </div>
  )

SteamOrganizer.Web/src/pages/Modals/Authentication.tsx

@@ -37,8 +37,8 @@ const Authentication : FC<IAuthProps> = (props) => {
 
  return (
  <div className="flex flex-col items-center w-full" ref={contentRef}>
- <div className="text-[12px] text-fg-2 relative pl-5 text-justify pr-2 mb-3">
- <FaInfo size={18} className="text-fg-3 absolute -left-0.5 top-0.5"/>
+ <div className="text-[12px] text-foreground relative pl-5 text-justify pr-2 mb-3">
+ <FaInfo size={18} className="text-foreground-accent absolute -left-0.5 top-0.5"/>
  <span>{props.info}</span>
  </div>
  <InputWrapper ref={messageRef} title="Password" className="mb-7 w-full" icon={<MdVpnKey size={18}/>}>