mirror of
https://github.com/ryanamay/pint.git
synced 2024-09-20 01:50:34 +00:00
pr #28: popup ui revamp
This commit is contained in:
commit
4eeba6d7d8
11 changed files with 379 additions and 174 deletions
|
@ -12,7 +12,7 @@
|
||||||
|
|
||||||
[pint](https://projects.fuwa.sh/pint/) is a theming engine that allows you to rice your github experience.
|
[pint](https://projects.fuwa.sh/pint/) is a theming engine that allows you to rice your github experience.
|
||||||
|
|
||||||
![pintpreview](https://go.fuwa.sh/u/ufuvwg.png)
|
![image](https://user-images.githubusercontent.com/53419401/180970561-02cc824d-f4e5-4935-97f0-560d3860b05a.png)
|
||||||
<br>
|
<br>
|
||||||
<br>
|
<br>
|
||||||
|
|
||||||
|
|
File diff suppressed because one or more lines are too long
Before Width: | Height: | Size: 4.8 KiB After Width: | Height: | Size: 20 KiB |
|
@ -9,17 +9,17 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.custom-layout .react-colorful__saturation {
|
.custom-layout .react-colorful__saturation {
|
||||||
border-radius: 5px;
|
border-radius: 0px;
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
width: inherit;
|
width: inherit;
|
||||||
height: inherit;
|
height: inherit;
|
||||||
margin: 5px 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.custom-layout .react-colorful__hue {
|
.custom-layout .react-colorful__hue {
|
||||||
order: -1;
|
order: -1;
|
||||||
height: 14px;
|
height: 14px;
|
||||||
border-radius: 5px;
|
border-radius: 0px;
|
||||||
}
|
}
|
||||||
.custom-layout .react-colorful__alpha {
|
.custom-layout .react-colorful__alpha {
|
||||||
display: none;
|
display: none;
|
||||||
|
|
|
@ -6,10 +6,9 @@ html,
|
||||||
body {
|
body {
|
||||||
/* width: 375px; */
|
/* width: 375px; */
|
||||||
margin: 0;
|
margin: 0;
|
||||||
background-color: #0d1117;
|
background-color: #010409;
|
||||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial,
|
||||||
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
|
sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
|
||||||
sans-serif;
|
|
||||||
-webkit-font-smoothing: antialiased;
|
-webkit-font-smoothing: antialiased;
|
||||||
-moz-osx-font-smoothing: grayscale;
|
-moz-osx-font-smoothing: grayscale;
|
||||||
}
|
}
|
||||||
|
|
|
@ -4,6 +4,7 @@ interface Props {
|
||||||
name: string;
|
name: string;
|
||||||
color?: string;
|
color?: string;
|
||||||
textcolor?: string | "#ffffff";
|
textcolor?: string | "#ffffff";
|
||||||
|
className?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function CardTitle(props: Props) {
|
export default function CardTitle(props: Props) {
|
||||||
|
|
|
@ -1,8 +1,16 @@
|
||||||
import logo from "../../assets/images/pint.svg";
|
import logo from "../../assets/images/pint.svg";
|
||||||
import "../../assets/styles/App.css";
|
import "../../assets/styles/App.css";
|
||||||
import { IoMdSettings } from "react-icons/io";
|
import { IoMdSettings } from "react-icons/io";
|
||||||
import { AiFillGithub } from "react-icons/ai";
|
import {
|
||||||
|
AiFillGithub,
|
||||||
|
AiFillCloseCircle,
|
||||||
|
AiFillClockCircle,
|
||||||
|
AiFillCheckCircle,
|
||||||
|
AiFillCiCircle,
|
||||||
|
AiFillHeart,
|
||||||
|
} from "react-icons/ai";
|
||||||
|
import { BsFillCalendar3WeekFill, BsMenuButtonWideFill } from "react-icons/bs";
|
||||||
|
import { MdTextSnippet, MdFormatColorText } from "react-icons/md";
|
||||||
export default function Header() {
|
export default function Header() {
|
||||||
function openOptions() {
|
function openOptions() {
|
||||||
chrome.runtime.openOptionsPage();
|
chrome.runtime.openOptionsPage();
|
||||||
|
@ -14,13 +22,16 @@ export default function Header() {
|
||||||
selected: true,
|
selected: true,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex flex-row rounded-lg mb-1 m-2 mx-3 p-1 justify-between items-center">
|
<div className="flex flex-row mb-2 px-4 p-1 justify-between items-center bg-[#161b22] h-[64px]">
|
||||||
<div className="flex flex-row">
|
<div className="flex flex-row">
|
||||||
<img src={logo} className="flex-none w-12" alt="logo" />
|
<img src={logo} className="flex-none w-10" alt="logo" />
|
||||||
<div className="flex-col p-1 text-white">
|
<div className="flex-col p-1 text-white align-middle ml-2 ">
|
||||||
<p className="flex-1 self-center text-xl"> pint for github </p>
|
<p className="flex-1 text-left text-md mt-1"> pint for github</p>
|
||||||
<p className="flex-1 self-center text-l">2.0-dev - simple mode</p>
|
<p className="flex-1 text-left text-md mb-1 text-gray-400">
|
||||||
|
sign in to broadcast your palette
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
|
|
|
@ -2,135 +2,345 @@ import react from "react";
|
||||||
import "../../assets/styles/App.css";
|
import "../../assets/styles/App.css";
|
||||||
import "../../assets/styles/RC.css";
|
import "../../assets/styles/RC.css";
|
||||||
import { HexColorPicker, HexColorInput } from "react-colorful";
|
import { HexColorPicker, HexColorInput } from "react-colorful";
|
||||||
import updateScale from "../../methods/helpers/scaleHelper";
|
import updateScale, { updateSpecific } from "../../methods/helpers/scaleHelper";
|
||||||
import * as scaleHelper from "../../methods/helpers/scaleHelper";
|
import * as scaleHelper from "../../methods/helpers/scaleHelper";
|
||||||
import { TextField } from "@mui/material";
|
import {
|
||||||
import { IoIosBrush } from "react-icons/io";
|
pintGetUpdate,
|
||||||
import CardTitle from "../global/CardTitle";
|
updateMultiple,
|
||||||
import { pintGetUpdate } from "../../methods/helpers/storageHelper";
|
} from "../../methods/helpers/storageHelper";
|
||||||
import { updateOpacity } from "../../methods/helpers/opacityHelper";
|
import { updateOpacity } from "../../methods/helpers/opacityHelper";
|
||||||
|
import {
|
||||||
|
BsFillBrushFill,
|
||||||
|
BsFillCalendar3WeekFill,
|
||||||
|
BsFillPaletteFill,
|
||||||
|
BsMenuButtonWideFill,
|
||||||
|
} from "react-icons/bs";
|
||||||
|
import {
|
||||||
|
AiFillCheckCircle,
|
||||||
|
AiFillCiCircle,
|
||||||
|
AiFillClockCircle,
|
||||||
|
AiFillCloseCircle,
|
||||||
|
AiFillHeart,
|
||||||
|
} from "react-icons/ai";
|
||||||
|
import { MdFormatColorText, MdTextSnippet } from "react-icons/md";
|
||||||
|
import * as settings from "../../methods/config/colorGroups.js";
|
||||||
|
import * as scales from "../../methods/helpers/scaleHelper.js";
|
||||||
|
import chroma from "chroma-js";
|
||||||
|
import { FcIdea } from "react-icons/fc";
|
||||||
|
|
||||||
var defaultValue = "#c0ffee";
|
var defaultValue = "#c0ffee";
|
||||||
|
|
||||||
|
var quickScheme: string[] = [];
|
||||||
|
|
||||||
export default function QuickChange() {
|
export default function QuickChange() {
|
||||||
react.useLayoutEffect(() => {
|
react.useLayoutEffect(() => {
|
||||||
pintGetUpdate("__color_canvas_default", setBgColor);
|
pintGetUpdate(settings.cg46_6e7681[0], setScaleGray);
|
||||||
pintGetUpdate("__color_calendar_graph_day_L4_bg", setL4);
|
pintGetUpdate(settings.cg67_bb8009[0], setScaleYellow);
|
||||||
pintGetUpdate("__color_scale_gray_1", setTextColor);
|
pintGetUpdate(settings.cg16_1f6feb[0], setScaleBlue);
|
||||||
|
pintGetUpdate(settings.cg21_2ea043[0], setScaleGreen);
|
||||||
|
pintGetUpdate(settings.cg89_f85149[0], setScaleRed);
|
||||||
|
pintGetUpdate(settings.cg77_db61a2[0], setScalePink);
|
||||||
|
pintGetUpdate(settings.cg60_a371f7[0], setScalePurple);
|
||||||
|
pintGetUpdate(settings.cg19_26a641[0], setScaleCalendar);
|
||||||
|
pintGetUpdate(settings.cg106_ffffff[0], setScaleText);
|
||||||
|
quickScheme = scaleHelper.generateScheme(color, "analogic", "default", 0.5);
|
||||||
});
|
});
|
||||||
|
|
||||||
const [bgColor, setBgColor] = react.useState(`${defaultValue}`);
|
|
||||||
const [color, setColor] = react.useState(`${defaultValue}`);
|
const [color, setColor] = react.useState(`${defaultValue}`);
|
||||||
const [textColor, setTextColor] = react.useState(`${defaultValue}`);
|
|
||||||
|
|
||||||
// l1-l4 and other used shit
|
// scale colors
|
||||||
const [l4, setL4] = react.useState(`${defaultValue}`);
|
const [scaleGray, setScaleGray] = react.useState(`${defaultValue}`);
|
||||||
|
|
||||||
function paintAccent() {
|
function paintGray() {
|
||||||
scaleHelper.updateAccent(color);
|
updateSpecific(color, 0, 0, scales.gray);
|
||||||
setL4(color);
|
setScaleGray(color);
|
||||||
}
|
}
|
||||||
|
|
||||||
function paintBg() {
|
const [scaleYellow, setScaleYellow] = react.useState(`${defaultValue}`);
|
||||||
setBgColor(color);
|
|
||||||
updateScale(color);
|
function paintYellow() {
|
||||||
updateOpacity();
|
updateSpecific(color, 0, 0, scales.yellow);
|
||||||
chrome.tabs.reload();
|
setScaleGray(color);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const [scaleBlue, setScaleBlue] = react.useState(`${defaultValue}`);
|
||||||
|
|
||||||
|
function paintBlue() {
|
||||||
|
updateSpecific(color, 0, 0, scales.blue);
|
||||||
|
setScaleGray(color);
|
||||||
|
}
|
||||||
|
|
||||||
|
const [scaleGreen, setScaleGreen] = react.useState(`${defaultValue}`);
|
||||||
|
|
||||||
|
function paintGreen() {
|
||||||
|
updateSpecific(color, 0, 0, scales.green);
|
||||||
|
setScaleGray(color);
|
||||||
|
}
|
||||||
|
|
||||||
|
const [scaleRed, setScaleRed] = react.useState(`${defaultValue}`);
|
||||||
|
|
||||||
|
function paintRed() {
|
||||||
|
updateSpecific(color, 0, 0, scales.red);
|
||||||
|
setScaleGray(color);
|
||||||
|
}
|
||||||
|
|
||||||
|
const [scalePurple, setScalePurple] = react.useState(`${defaultValue}`);
|
||||||
|
|
||||||
|
function paintPurple() {
|
||||||
|
updateSpecific(color, 0, 0, scales.purple);
|
||||||
|
setScaleGray(color);
|
||||||
|
}
|
||||||
|
|
||||||
|
const [scalePink, setScalePink] = react.useState(`${defaultValue}`);
|
||||||
|
|
||||||
|
function paintPink() {
|
||||||
|
updateSpecific(color, 0, 0, scales.pink);
|
||||||
|
setScaleGray(color);
|
||||||
|
}
|
||||||
|
|
||||||
|
const [scaleCalendar, setScaleCalendar] = react.useState(`${defaultValue}`);
|
||||||
|
|
||||||
|
function paintCalendar() {
|
||||||
|
updateSpecific(color, 0, 0, scales.calendar);
|
||||||
|
setScaleGray(color);
|
||||||
|
}
|
||||||
|
|
||||||
|
const [scaleText, setScaleText] = react.useState(`${defaultValue}`);
|
||||||
|
|
||||||
function paintText() {
|
function paintText() {
|
||||||
scaleHelper.updateText(color);
|
updateMultiple(settings.cg106_ffffff, chroma(color).hex());
|
||||||
setTextColor(color);
|
setScaleGray(color);
|
||||||
|
}
|
||||||
|
|
||||||
|
function paintAll() {
|
||||||
|
updateScale(color);
|
||||||
|
pintGetUpdate(settings.cg46_6e7681[0], setScaleGray);
|
||||||
|
pintGetUpdate(settings.cg67_bb8009[0], setScaleYellow);
|
||||||
|
pintGetUpdate(settings.cg16_1f6feb[0], setScaleBlue);
|
||||||
|
pintGetUpdate(settings.cg21_2ea043[0], setScaleGreen);
|
||||||
|
pintGetUpdate(settings.cg89_f85149[0], setScaleRed);
|
||||||
|
pintGetUpdate(settings.cg77_db61a2[0], setScalePink);
|
||||||
|
pintGetUpdate(settings.cg60_a371f7[0], setScalePurple);
|
||||||
|
pintGetUpdate(settings.cg19_26a641[0], setScaleCalendar);
|
||||||
|
pintGetUpdate(settings.cg106_ffffff[0], setScaleText);
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateColor(color: string) {
|
||||||
|
setColor(color);
|
||||||
|
quickScheme = scaleHelper.generateScheme(color, "analogic", "default", 0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="pint flex flex-row mb-2 mt-1 mx-2">
|
<div>
|
||||||
<div className="flex-1 flex-col rounded-lg m-1 p-1 bg-white">
|
<div className="flex flex-col rounded-lg mt-4 mx-3">
|
||||||
<div className="flex flex-row justify-content text-center justify-center">
|
<div className="flex-1 flex-col rounded-[6px] bg-[#06193a] border-solid border-[#163e6d] border-2 ">
|
||||||
<CardTitle name="color picker - " />
|
<div className="flex flex-row justify-content text-left text-white justify-left items-center mt-2 ml-2">
|
||||||
<HexColorInput
|
<FcIdea className="mx-1" />
|
||||||
style={{ width: 40, textAlign: "center" }}
|
<p className="text-semibold">
|
||||||
color={color}
|
Need ideas? These colors compliment your current pick!
|
||||||
onChange={setColor}
|
</p>
|
||||||
/>
|
</div>
|
||||||
</div>
|
<div className="flex flex-row justify-content p-1 ml-2 mb-2">
|
||||||
<div className="flex justify-content p-1">
|
{quickScheme.map((qsColor) => {
|
||||||
<HexColorPicker
|
return (
|
||||||
className="custom-layout"
|
<button
|
||||||
color={color}
|
title="Use this Color"
|
||||||
onChange={setColor}
|
className=" hover:bg-[#40363d] active:bg-[#40363d] focus:outline-none focus:ring focus:bg-[#40363d] p-2 rounded-[6px] h-[15px] w-[15px] border-solid border-[#40363d] flex justify-between mr-1"
|
||||||
/>
|
onClick={() => {
|
||||||
|
setColor(qsColor);
|
||||||
|
}}
|
||||||
|
style={{
|
||||||
|
borderWidth: "2px 2px 2px 2px",
|
||||||
|
borderStyle: "solid",
|
||||||
|
borderColor: "#30363d",
|
||||||
|
backgroundColor: chroma(qsColor).hex(),
|
||||||
|
}}
|
||||||
|
></button>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex-grow flex-col rounded-lg m-1 p-1 bg-white">
|
<div className="pint flex flex-row m-2">
|
||||||
<CardTitle name="theme painter" />
|
<div className="flex-1 flex-col rounded-[6px] m-1 bg-[#010409] border-solid border-[#30363d] border-2 ">
|
||||||
<div className="flex-start flex flex-row -center text-l mt-2 mb-1 w-[165px] p-1">
|
<div className="flex flex-row justify-content text-left text-white justify-left items-center rounded-t-[6px] bg-[#161b22] p-1">
|
||||||
<TextField
|
<BsFillPaletteFill className="mx-1" size={15} />
|
||||||
id="acentColor"
|
<div className="flex-start align-left text-l p-1 rounded-t-lg ">
|
||||||
label="accent color"
|
<p className="text-semibold">color picker </p>
|
||||||
disabled={true}
|
</div>
|
||||||
value={l4}
|
<HexColorInput
|
||||||
variant="outlined"
|
style={{
|
||||||
size="small"
|
width: 40,
|
||||||
/>
|
textAlign: "left",
|
||||||
<button
|
color: "#b2b2b2",
|
||||||
title="updateAccent"
|
backgroundColor: "#161b22",
|
||||||
className="bg-[#0d1117] hover:bg-violet-600 active:bg-violet-700 focus:outline-none focus:ring focus:ring-violet-300 p-2 ml-2 mb-2 mx-2 rounded-full"
|
}}
|
||||||
onClick={paintAccent}
|
color={color}
|
||||||
>
|
onChange={updateColor}
|
||||||
<IoIosBrush className="text-xl p-0 text-white" />
|
/>
|
||||||
</button>
|
</div>
|
||||||
|
<div className="flex justify-content p-1">
|
||||||
|
<HexColorPicker
|
||||||
|
className="custom-layout"
|
||||||
|
color={color}
|
||||||
|
onChange={updateColor}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex-start flex flex-row -center text-l mt-2 mb-1 w-[165px] p-1">
|
<div className="flex-grow flex-col align-center m-1 text-white flex-1 rounded-[6px] bg-[#010409] border-solid border-[#30363d] border-2 justify-center">
|
||||||
<TextField
|
<div className="flex flex-row justify-content text-left text-white justify-left items-center rounded-t-[6px] bg-[#161b22] p-1">
|
||||||
id="bgColorHex"
|
<BsFillBrushFill className="mx-1" size={15} />
|
||||||
label="background"
|
<div className="flex-start align-left text-l p-1 rounded-t-lg ">
|
||||||
disabled={true}
|
<p className="text-semibold"> color painter </p>
|
||||||
value={bgColor}
|
</div>
|
||||||
variant="outlined"
|
</div>
|
||||||
size="small"
|
<div className="flex flex-row justify-content text-center text-white justify-center items-center p-1 mt-1">
|
||||||
/>
|
<div className="flex-start align-left text-l mb-2 rounded-t-lg">
|
||||||
<button
|
<p className="">Click a button to set a color</p>
|
||||||
title="updateBackground"
|
</div>
|
||||||
className="bg-[#0d1117] hover:bg-violet-600 active:bg-violet-700 focus:outline-none focus:ring focus:ring-violet-300 p-2 ml-2 mb-2 mx-2 rounded-full"
|
</div>
|
||||||
onClick={paintBg}
|
<div className="flex-wrap flex flex-row justify-content text-center text-white justify-center items-center p-1">
|
||||||
>
|
<button
|
||||||
<IoIosBrush className="text-xl p-0 text-white" />
|
title="Paint Canvas"
|
||||||
</button>
|
className=" hover:bg-[#40363d] active:bg-[#40363d] focus:outline-none focus:ring focus:bg-[#40363d] p-2 rounded-[6px] h-[30px] border-solid border-[#40363d] flex justify-between m-1"
|
||||||
</div>
|
onClick={paintGray}
|
||||||
<div className="flex-start flex flex-row -center text-l mt-2 mb-1 w-[165px] p-1">
|
style={{
|
||||||
<TextField
|
borderWidth: "2px 2px 2px 2px",
|
||||||
id="textColorHex"
|
borderStyle: "solid",
|
||||||
label="text color"
|
borderColor: "#30363d",
|
||||||
disabled={true}
|
backgroundColor: scaleGray,
|
||||||
value={textColor}
|
}}
|
||||||
variant="outlined"
|
>
|
||||||
size="small"
|
<MdTextSnippet className=" self-center text-xl p-1 text-[#30363d]" />
|
||||||
/>
|
</button>
|
||||||
<button
|
<button
|
||||||
title="updateText"
|
title="Paint Text Colors"
|
||||||
className="bg-[#0d1117] hover:bg-violet-600 active:bg-violet-700 focus:outline-none focus:ring focus:ring-violet-300 p-2 ml-2 mb-2 mx-2 rounded-full"
|
className=" hover:bg-[#40363d] active:bg-[#40363d] focus:outline-none focus:ring focus:bg-[#40363d] p-2 rounded-[6px] h-[30px] border-solid border-[#40363d] flex justify-between m-1"
|
||||||
onClick={paintText}
|
onClick={paintText}
|
||||||
>
|
style={{
|
||||||
<IoIosBrush className="text-xl p-0 text-white" />
|
borderWidth: "2px 2px 2px 2px",
|
||||||
</button>
|
borderStyle: "solid",
|
||||||
</div>
|
borderColor: "#30363d",
|
||||||
{/* <div className="flex flex-row justify-center">
|
backgroundColor: scaleText,
|
||||||
<div
|
}}
|
||||||
style={{ backgroundColor: activeButton }}
|
>
|
||||||
className="w-5 h-5 p-1 m-1 rounded-full"
|
<MdFormatColorText className=" self-center text-xl p-1 text-[#30363d]" />
|
||||||
></div>
|
</button>
|
||||||
<div
|
<button
|
||||||
style={{ backgroundColor: accentEmphasis }}
|
title="Paint Primary Accents"
|
||||||
className="w-5 h-5 p-1 m-1 rounded-full"
|
className=" hover:bg-[#40363d] active:bg-[#40363d] focus:outline-none focus:ring focus:bg-[#40363d] p-2 rounded-[6px] h-[30px] border-solid border-[#40363d] flex justify-between m-1"
|
||||||
></div>
|
onClick={paintBlue}
|
||||||
<div
|
style={{
|
||||||
style={{ backgroundColor: bgColor }}
|
borderWidth: "2px 2px 2px 2px",
|
||||||
className="w-5 h-5 p-1 m-1 rounded-full"
|
borderStyle: "solid",
|
||||||
></div>
|
borderColor: "#30363d",
|
||||||
</div> */}
|
backgroundColor: scaleBlue,
|
||||||
<div className="flex flex-row justify-center">
|
}}
|
||||||
<p className="text-center">Made with ❤️ - fuwa</p>
|
>
|
||||||
|
<BsMenuButtonWideFill className=" self-center text-xl p-1 text-[#30363d]" />
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
title="Paint GitHub Calendar"
|
||||||
|
className=" hover:bg-[#40363d] active:bg-[#40363d] focus:outline-none focus:ring focus:bg-[#40363d] p-2 rounded-[6px] h-[30px] border-solid border-[#40363d] flex justify-between m-1"
|
||||||
|
onClick={paintCalendar}
|
||||||
|
style={{
|
||||||
|
borderWidth: "2px 2px 2px 2px",
|
||||||
|
borderStyle: "solid",
|
||||||
|
borderColor: "#30363d",
|
||||||
|
backgroundColor: scaleCalendar,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<BsFillCalendar3WeekFill className=" self-center text-xl p-1 text-[#30363d]" />
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
title="Paint CI/CD Tasks"
|
||||||
|
className=" hover:bg-[#40363d] active:bg-[#40363d] focus:outline-none focus:ring focus:bg-[#40363d] p-2 rounded-[6px] h-[30px] border-solid border-[#40363d] flex justify-between m-1"
|
||||||
|
onClick={paintPurple}
|
||||||
|
style={{
|
||||||
|
borderWidth: "2px 2px 2px 2px",
|
||||||
|
borderStyle: "solid",
|
||||||
|
borderColor: "#30363d",
|
||||||
|
backgroundColor: scalePurple,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<AiFillCiCircle className=" self-center text-xl p-1 text-[#30363d]" />
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
title="Paint Checks and Successors"
|
||||||
|
className=" hover:bg-[#40363d] active:bg-[#40363d] focus:outline-none focus:ring focus:bg-[#40363d] p-2 rounded-[6px] h-[30px] border-solid border-[#40363d] flex justify-between m-1"
|
||||||
|
onClick={paintGreen}
|
||||||
|
style={{
|
||||||
|
borderWidth: "2px 2px 2px 2px",
|
||||||
|
borderStyle: "solid",
|
||||||
|
borderColor: "#30363d",
|
||||||
|
backgroundColor: scaleGreen,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<AiFillCheckCircle className=" self-center text-xl p-1 text-[#30363d]" />
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
title="Paint Warnings and Waits"
|
||||||
|
className=" hover:bg-[#40363d] active:bg-[#40363d] focus:outline-none focus:ring focus:bg-[#40363d] p-2 rounded-[6px] h-[30px] border-solid border-[#40363d] flex justify-between m-1"
|
||||||
|
onClick={paintYellow}
|
||||||
|
style={{
|
||||||
|
borderWidth: "2px 2px 2px 2px",
|
||||||
|
borderStyle: "solid",
|
||||||
|
borderColor: "#30363d",
|
||||||
|
backgroundColor: scaleYellow,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<AiFillClockCircle className=" self-center text-xl p-1 text-[#30363d]" />
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
title="Paint Errors and Dangers"
|
||||||
|
className=" hover:bg-[#40363d] active:bg-[#40363d] focus:outline-none focus:ring focus:bg-[#40363d] p-2 rounded-[6px] h-[30px] border-solid border-[#40363d] flex justify-between m-1"
|
||||||
|
onClick={paintRed}
|
||||||
|
style={{
|
||||||
|
borderWidth: "2px 2px 2px 2px",
|
||||||
|
borderStyle: "solid",
|
||||||
|
borderColor: "#30363d",
|
||||||
|
backgroundColor: scaleRed,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<AiFillCloseCircle className=" self-center text-xl p-1 text-[#30363d]" />
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
title="Paint GitHub Sponsors"
|
||||||
|
className=" hover:bg-[#40363d] active:bg-[#40363d] focus:outline-none focus:ring focus:bg-[#40363d] p-2 rounded-[6px] h-[30px] border-solid border-[#40363d] flex justify-between m-1"
|
||||||
|
onClick={paintPink}
|
||||||
|
style={{
|
||||||
|
borderWidth: "2px 2px 2px 2px",
|
||||||
|
borderStyle: "solid",
|
||||||
|
borderColor: "#30363d",
|
||||||
|
backgroundColor: scalePink,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<AiFillHeart className=" self-center text-xl p-1 text-[#30363d]" />
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
title="Paint Everything"
|
||||||
|
className="bg-[#30363d] hover:bg-[#40363d] active:bg-[#676767] focus:outline-none focus:ring focus:bg-[#40363d] p-2 rounded-[6px] h-[30px] w-[132px] border-solid border-[#40363d] flex justify-center m-1"
|
||||||
|
onClick={paintAll}
|
||||||
|
style={{
|
||||||
|
borderWidth: "2px 2px 2px 2px",
|
||||||
|
borderStyle: "solid",
|
||||||
|
borderColor: "#30363d",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<p className=" self-center text-center text-md p-1 text-white">
|
||||||
|
Update All
|
||||||
|
</p>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
{/* <div className="flex-start align-left text-l mb-1 rounded-t-lg text-blue">
|
||||||
|
<p className="">Not Enough Settings?</p>
|
||||||
|
</div>
|
||||||
|
<div className="flex-start align-left text-l mb-2 rounded-t-lg text-blue-600 ">
|
||||||
|
<p className="">All Settings</p>
|
||||||
|
</div>
|
||||||
|
<div className="flex-1 flex-col rounded-[6px] bg-[#06193a] border-solid border-[#163e6d] border-2 justify-center mt-2">
|
||||||
|
<p className="text-center">Made with ❤️ - fuwa</p>
|
||||||
|
</div> */}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,36 +0,0 @@
|
||||||
import { Switch } from "@mui/material";
|
|
||||||
import "../../assets/styles/App.css";
|
|
||||||
|
|
||||||
export default function QuickSettings() {
|
|
||||||
return (
|
|
||||||
<div className="flex flex-col rounded-lg mt-4 mx-3 p-1 bg-white">
|
|
||||||
<div className=" bg-whiteflex-start align-left text-l p-1">
|
|
||||||
<p>quick settings</p>
|
|
||||||
<div className="flex-col">
|
|
||||||
<div className="flex flex-row justify-between items-center">
|
|
||||||
<p className="flex-start my-1">view global user pints?</p>
|
|
||||||
<Switch defaultChecked size="small" />
|
|
||||||
</div>
|
|
||||||
<form
|
|
||||||
className="flex flex-row justify-between items-center"
|
|
||||||
action="#"
|
|
||||||
>
|
|
||||||
<label>select color scheme: </label>
|
|
||||||
<div>
|
|
||||||
<select
|
|
||||||
title="colorSchemeSelector"
|
|
||||||
name="colorschemes"
|
|
||||||
id="lang"
|
|
||||||
defaultValue="1"
|
|
||||||
>
|
|
||||||
<option value="0">Solarized Dark</option>
|
|
||||||
<option value="1">Github Dark</option>
|
|
||||||
<option value="2">Github Light</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
|
@ -6,7 +6,7 @@ import * as settings from "../config/colorGroups.js";
|
||||||
import { updateMultiple } from "./storageHelper.js";
|
import { updateMultiple } from "./storageHelper.js";
|
||||||
|
|
||||||
// ----------- ASSIGNABLES -----------
|
// ----------- ASSIGNABLES -----------
|
||||||
let orange = [
|
export let orange = [
|
||||||
settings.cg28_3d1300,
|
settings.cg28_3d1300,
|
||||||
settings.cg39_5a1e02,
|
settings.cg39_5a1e02,
|
||||||
settings.cg47_762d0a,
|
settings.cg47_762d0a,
|
||||||
|
@ -19,7 +19,7 @@ let orange = [
|
||||||
settings.cg105_ffdfb6,
|
settings.cg105_ffdfb6,
|
||||||
];
|
];
|
||||||
|
|
||||||
let yellow = [
|
export let yellow = [
|
||||||
settings.cg23_341a00,
|
settings.cg23_341a00,
|
||||||
settings.cg34_4b2900,
|
settings.cg34_4b2900,
|
||||||
settings.cg44_693e00,
|
settings.cg44_693e00,
|
||||||
|
@ -32,7 +32,7 @@ let yellow = [
|
||||||
settings.cg90_f8e3a1,
|
settings.cg90_f8e3a1,
|
||||||
];
|
];
|
||||||
|
|
||||||
let gray = [
|
export let gray = [
|
||||||
settings.cg8_0d1117,
|
settings.cg8_0d1117,
|
||||||
settings.cg13_161b22,
|
settings.cg13_161b22,
|
||||||
settings.cg17_21262d,
|
settings.cg17_21262d,
|
||||||
|
@ -45,7 +45,7 @@ let gray = [
|
||||||
settings.cg84_f0f6fc,
|
settings.cg84_f0f6fc,
|
||||||
];
|
];
|
||||||
|
|
||||||
let blue = [
|
export let blue = [
|
||||||
settings.cg6_051d4d,
|
settings.cg6_051d4d,
|
||||||
settings.cg7_0c2d6b,
|
settings.cg7_0c2d6b,
|
||||||
settings.cg9_0d419d,
|
settings.cg9_0d419d,
|
||||||
|
@ -58,7 +58,7 @@ let blue = [
|
||||||
settings.cg72_cae8ff,
|
settings.cg72_cae8ff,
|
||||||
];
|
];
|
||||||
|
|
||||||
let green = [
|
export let green = [
|
||||||
settings.cg5_04260f,
|
settings.cg5_04260f,
|
||||||
settings.cg4_033a16,
|
settings.cg4_033a16,
|
||||||
settings.cg11_0f5323,
|
settings.cg11_0f5323,
|
||||||
|
@ -71,7 +71,7 @@ let green = [
|
||||||
settings.cg63_aff5b4,
|
settings.cg63_aff5b4,
|
||||||
];
|
];
|
||||||
|
|
||||||
let red = [
|
export let red = [
|
||||||
settings.cg33_490202,
|
settings.cg33_490202,
|
||||||
settings.cg43_67060c,
|
settings.cg43_67060c,
|
||||||
settings.cg56_8e1519,
|
settings.cg56_8e1519,
|
||||||
|
@ -84,7 +84,7 @@ let red = [
|
||||||
settings.cg103_ffdcd7,
|
settings.cg103_ffdcd7,
|
||||||
];
|
];
|
||||||
|
|
||||||
let purple = [
|
export let purple = [
|
||||||
settings.cg20_271052,
|
settings.cg20_271052,
|
||||||
settings.cg27_3c1e70,
|
settings.cg27_3c1e70,
|
||||||
settings.cg35_553098,
|
settings.cg35_553098,
|
||||||
|
@ -97,7 +97,7 @@ let purple = [
|
||||||
settings.cg82_eddeff,
|
settings.cg82_eddeff,
|
||||||
];
|
];
|
||||||
|
|
||||||
let pink = [
|
export let pink = [
|
||||||
settings.cg30_42062a,
|
settings.cg30_42062a,
|
||||||
settings.cg40_5e103e,
|
settings.cg40_5e103e,
|
||||||
settings.cg50_7d2457,
|
settings.cg50_7d2457,
|
||||||
|
@ -110,7 +110,7 @@ let pink = [
|
||||||
settings.cg102_ffdaec,
|
settings.cg102_ffdaec,
|
||||||
];
|
];
|
||||||
|
|
||||||
let coral = [
|
export let coral = [
|
||||||
settings.cg31_460701,
|
settings.cg31_460701,
|
||||||
settings.cg42_640D04,
|
settings.cg42_640D04,
|
||||||
settings.cg53_872012,
|
settings.cg53_872012,
|
||||||
|
@ -123,7 +123,7 @@ let coral = [
|
||||||
settings.cg105_ffdfb6,
|
settings.cg105_ffdfb6,
|
||||||
];
|
];
|
||||||
|
|
||||||
let calendar = [
|
export let calendar = [
|
||||||
settings.cg10_0e4429,
|
settings.cg10_0e4429,
|
||||||
settings.cg2_006d32,
|
settings.cg2_006d32,
|
||||||
settings.cg19_26a641,
|
settings.cg19_26a641,
|
||||||
|
@ -225,9 +225,10 @@ export function updateAccent(color) {
|
||||||
|
|
||||||
export function generateScheme(color, scheme, variation, distance) {
|
export function generateScheme(color, scheme, variation, distance) {
|
||||||
let s = new ColorScheme();
|
let s = new ColorScheme();
|
||||||
s.from_hex(chroma(color).hex())
|
s.from_hex(chroma(color).hex().slice(-6))
|
||||||
.scheme(scheme)
|
.scheme(scheme)
|
||||||
.variation(variation)
|
.variation(variation)
|
||||||
|
.add_complement(true)
|
||||||
.distance(distance);
|
.distance(distance);
|
||||||
|
|
||||||
return s.colors();
|
return s.colors();
|
||||||
|
|
|
@ -1,7 +1,6 @@
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import "../assets/styles/App.css";
|
import "../assets/styles/App.css";
|
||||||
import Header from "../components/options/Header";
|
import Header from "../components/options/Header";
|
||||||
import QuickSettings from "../components/popup/QuickSettings";
|
|
||||||
import "../methods/config/settings.js";
|
import "../methods/config/settings.js";
|
||||||
import { settings } from "../methods/config/settings";
|
import { settings } from "../methods/config/settings";
|
||||||
import ChangeCard from "../components/options/ChangeCard";
|
import ChangeCard from "../components/options/ChangeCard";
|
||||||
|
@ -31,7 +30,6 @@ export default function Options() {
|
||||||
<div className=" w-[300px]"></div>
|
<div className=" w-[300px]"></div>
|
||||||
<div className=" fixed w-[300px]">
|
<div className=" fixed w-[300px]">
|
||||||
<Header />
|
<Header />
|
||||||
<QuickSettings />
|
|
||||||
<div className="flex flex-col rounded-lg mt-2 mx-3 p-1 bg-white">
|
<div className="flex flex-col rounded-lg mt-2 mx-3 p-1 bg-white">
|
||||||
<div className=" bg-whiteflex-start align-left text-l p-1">
|
<div className=" bg-whiteflex-start align-left text-l p-1">
|
||||||
<p>hex-rgba converter</p>
|
<p>hex-rgba converter</p>
|
||||||
|
|
|
@ -3,13 +3,10 @@ import "../assets/styles/App.css";
|
||||||
import QuickChange from "../components/popup/QuickChange";
|
import QuickChange from "../components/popup/QuickChange";
|
||||||
import Header from "../components/popup/Header";
|
import Header from "../components/popup/Header";
|
||||||
|
|
||||||
import QuickSettings from "../components/popup/QuickSettings";
|
|
||||||
|
|
||||||
function Popup() {
|
function Popup() {
|
||||||
return (
|
return (
|
||||||
<div className="relative text-center">
|
<div className="relative text-center">
|
||||||
<Header />
|
<Header />
|
||||||
<QuickSettings />
|
|
||||||
<QuickChange />
|
<QuickChange />
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
Loading…
Reference in a new issue