mirror of
https://github.com/ryanamay/pint.git
synced 2024-09-20 01:50:34 +00:00
pr: various improvements and features
This commit is contained in:
Jariel Que
GitHub
commit
d46ac94a9c
38 changed files with 27854 additions and 6772 deletions
|
|
@ -20,6 +20,7 @@
|
||||||
"react-dom": "^18.2.0",
|
"react-dom": "^18.2.0",
|
||||||
"react-icons": "^4.4.0",
|
"react-icons": "^4.4.0",
|
||||||
"react-scripts": "^5.0.1",
|
"react-scripts": "^5.0.1",
|
||||||
|
"standard": "^17.0.0",
|
||||||
"typescript": "^4.7.4",
|
"typescript": "^4.7.4",
|
||||||
"web-vitals": "^2.1.4"
|
"web-vitals": "^2.1.4"
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
// HACK: manifest workaround
|
// HACK: manifest workaround
|
||||||
/* eslint-disable no-undef */
|
/* eslint-disable no-undef */
|
||||||
/*global chrome*/
|
/* global chrome */
|
||||||
|
|
||||||
defaultColorScheme = {
|
defaultColorScheme = {
|
||||||
__color_canvas_default_transparent: "rgba(13, 17, 23, 0)",
|
__color_canvas_default_transparent: "rgba(13, 17, 23, 0)",
|
||||||
|
|
@ -462,18 +462,18 @@ defaultColorScheme = {
|
||||||
colorSettings = Object.keys(defaultColorScheme);
|
colorSettings = Object.keys(defaultColorScheme);
|
||||||
|
|
||||||
// function initialize() {
|
// function initialize() {
|
||||||
console.log(`Pulling Data from Local Storage`);
|
console.log("Pulling Data from Local Storage");
|
||||||
|
|
||||||
colorSettings.forEach((colorSetting) => {
|
colorSettings.forEach((colorSetting) => {
|
||||||
// replace all underscore with dash
|
// replace all underscore with dash
|
||||||
let colorSettingVar = colorSetting.replace(/_/g, "-");
|
const colorSettingVar = colorSetting.replace(/_/g, "-");
|
||||||
let colorSettingPersist = colorSetting;
|
const colorSettingPersist = colorSetting;
|
||||||
chrome.storage.local.get([`${colorSetting}`], function (result) {
|
chrome.storage.local.get([`${colorSetting}`], function (result) {
|
||||||
if (result[colorSetting] === undefined) {
|
if (result[colorSetting] === undefined) {
|
||||||
console.log(
|
console.log(
|
||||||
`Key not In Place - ${colorSettingVar}: Defaulting ${defaultColorScheme[colorSettingPersist]}`
|
`Key not In Place - ${colorSettingVar}: Defaulting ${defaultColorScheme[colorSettingPersist]}`
|
||||||
);
|
);
|
||||||
var key = {};
|
const key = {};
|
||||||
key[`${colorSetting}`] = defaultColorScheme[colorSetting];
|
key[`${colorSetting}`] = defaultColorScheme[colorSetting];
|
||||||
chrome.storage.local.set(key);
|
chrome.storage.local.set(key);
|
||||||
document.documentElement.style.setProperty(
|
document.documentElement.style.setProperty(
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
// HACK: manifest workaround
|
// HACK: manifest workaround
|
||||||
/* eslint-disable no-undef */
|
/* eslint-disable no-undef */
|
||||||
/*global chrome*/
|
/* global chrome */
|
||||||
|
|
||||||
defaultColorScheme = {
|
defaultColorScheme = {
|
||||||
__color_accent_emphasis: "#1f6feb",
|
__color_accent_emphasis: "#1f6feb",
|
||||||
|
|
@ -466,23 +466,21 @@ initialSettings = Object.keys(defaultColorScheme);
|
||||||
// defaultColorScheme object
|
// defaultColorScheme object
|
||||||
chrome.runtime.onInstalled.addListener(() => {
|
chrome.runtime.onInstalled.addListener(() => {
|
||||||
initialSettings.forEach((initialSetting) => {
|
initialSettings.forEach((initialSetting) => {
|
||||||
let key = {};
|
const key = {};
|
||||||
key[`${initialSetting}`] = defaultColorScheme[initialSetting];
|
key[`${initialSetting}`] = defaultColorScheme[initialSetting];
|
||||||
chrome.storage.local.set(key);
|
chrome.storage.local.set(key);
|
||||||
console.log(
|
|
||||||
"Setup: Configuring " +
|
|
||||||
initialSetting +
|
|
||||||
" >> " +
|
|
||||||
defaultColorScheme[initialSetting]
|
|
||||||
);
|
|
||||||
});
|
});
|
||||||
chrome.tabs.create({ url: "https://pint.sh/success" });
|
// open ./pint-newinstall/index.html in new page
|
||||||
|
chrome.tabs.create({
|
||||||
|
url: "./pint-newinstall/index.html",
|
||||||
|
active: true,
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
|
chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
|
||||||
chrome.scripting.executeScript(
|
chrome.scripting.executeScript(
|
||||||
{
|
{
|
||||||
target: { tabId: tabId },
|
target: { tabId },
|
||||||
files: ["initial.js"],
|
files: ["initial.js"],
|
||||||
},
|
},
|
||||||
() => chrome.runtime.lastError
|
() => chrome.runtime.lastError
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
/*global chrome*/
|
/* global chrome */
|
||||||
var link = document.createElement("link");
|
const link = document.createElement("link");
|
||||||
link.href = chrome.extension.getURL("pint-css.css");
|
link.href = chrome.extension.getURL("pint-css.css");
|
||||||
link.type = "text/css";
|
link.type = "text/css";
|
||||||
link.rel = "stylesheet";
|
link.rel = "stylesheet";
|
||||||
|
|
|
||||||
10144
public/pint-newinstall/assets/bootstrap/css/bootstrap.min.css
vendored
Normal file
10144
public/pint-newinstall/assets/bootstrap/css/bootstrap.min.css
vendored
Normal file
File diff suppressed because it is too large
Load diff
4110
public/pint-newinstall/assets/bootstrap/js/bootstrap.min.js
vendored
Normal file
4110
public/pint-newinstall/assets/bootstrap/js/bootstrap.min.js
vendored
Normal file
File diff suppressed because it is too large
Load diff
340
public/pint-newinstall/assets/css/styles.min.css
vendored
Normal file
340
public/pint-newinstall/assets/css/styles.min.css
vendored
Normal file
|
|
@ -0,0 +1,340 @@
|
||||||
|
@font-face {
|
||||||
|
font-family: Inter;
|
||||||
|
src: url(/assets/fonts//s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2JL7SUc.woff2)
|
||||||
|
format("woff2");
|
||||||
|
font-weight: 300;
|
||||||
|
font-style: normal;
|
||||||
|
font-display: swap;
|
||||||
|
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
|
||||||
|
U+FE2E-FE2F;
|
||||||
|
}
|
||||||
|
@font-face {
|
||||||
|
font-family: Inter;
|
||||||
|
src: url(/assets/fonts//s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa0ZL7SUc.woff2)
|
||||||
|
format("woff2");
|
||||||
|
font-weight: 300;
|
||||||
|
font-style: normal;
|
||||||
|
font-display: swap;
|
||||||
|
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
|
||||||
|
}
|
||||||
|
@font-face {
|
||||||
|
font-family: Inter;
|
||||||
|
src: url(/assets/fonts//s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2ZL7SUc.woff2)
|
||||||
|
format("woff2");
|
||||||
|
font-weight: 300;
|
||||||
|
font-style: normal;
|
||||||
|
font-display: swap;
|
||||||
|
unicode-range: U+1F00-1FFF;
|
||||||
|
}
|
||||||
|
@font-face {
|
||||||
|
font-family: Inter;
|
||||||
|
src: url(/assets/fonts//s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1pL7SUc.woff2)
|
||||||
|
format("woff2");
|
||||||
|
font-weight: 300;
|
||||||
|
font-style: normal;
|
||||||
|
font-display: swap;
|
||||||
|
unicode-range: U+0370-03FF;
|
||||||
|
}
|
||||||
|
@font-face {
|
||||||
|
font-family: Inter;
|
||||||
|
src: url(/assets/fonts//s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2pL7SUc.woff2)
|
||||||
|
format("woff2");
|
||||||
|
font-weight: 300;
|
||||||
|
font-style: normal;
|
||||||
|
font-display: swap;
|
||||||
|
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
|
||||||
|
U+01AF-01B0, U+1EA0-1EF9, U+20AB;
|
||||||
|
}
|
||||||
|
@font-face {
|
||||||
|
font-family: Inter;
|
||||||
|
src: url(/assets/fonts//s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa25L7SUc.woff2)
|
||||||
|
format("woff2");
|
||||||
|
font-weight: 300;
|
||||||
|
font-style: normal;
|
||||||
|
font-display: swap;
|
||||||
|
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
|
||||||
|
U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
||||||
|
}
|
||||||
|
@font-face {
|
||||||
|
font-family: Inter;
|
||||||
|
src: url(/assets/fonts//s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7.woff2)
|
||||||
|
format("woff2");
|
||||||
|
font-weight: 300;
|
||||||
|
font-style: normal;
|
||||||
|
font-display: swap;
|
||||||
|
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
|
||||||
|
U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
|
||||||
|
U+FEFF, U+FFFD;
|
||||||
|
}
|
||||||
|
@font-face {
|
||||||
|
font-family: Inter;
|
||||||
|
src: url(/assets/fonts//s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2JL7SUc.woff2)
|
||||||
|
format("woff2");
|
||||||
|
font-weight: 400;
|
||||||
|
font-style: normal;
|
||||||
|
font-display: swap;
|
||||||
|
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
|
||||||
|
U+FE2E-FE2F;
|
||||||
|
}
|
||||||
|
@font-face {
|
||||||
|
font-family: Inter;
|
||||||
|
src: url(/assets/fonts//s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa0ZL7SUc.woff2)
|
||||||
|
format("woff2");
|
||||||
|
font-weight: 400;
|
||||||
|
font-style: normal;
|
||||||
|
font-display: swap;
|
||||||
|
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
|
||||||
|
}
|
||||||
|
@font-face {
|
||||||
|
font-family: Inter;
|
||||||
|
src: url(/assets/fonts//s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2ZL7SUc.woff2)
|
||||||
|
format("woff2");
|
||||||
|
font-weight: 400;
|
||||||
|
font-style: normal;
|
||||||
|
font-display: swap;
|
||||||
|
unicode-range: U+1F00-1FFF;
|
||||||
|
}
|
||||||
|
@font-face {
|
||||||
|
font-family: Inter;
|
||||||
|
src: url(/assets/fonts//s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1pL7SUc.woff2)
|
||||||
|
format("woff2");
|
||||||
|
font-weight: 400;
|
||||||
|
font-style: normal;
|
||||||
|
font-display: swap;
|
||||||
|
unicode-range: U+0370-03FF;
|
||||||
|
}
|
||||||
|
@font-face {
|
||||||
|
font-family: Inter;
|
||||||
|
src: url(/assets/fonts//s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2pL7SUc.woff2)
|
||||||
|
format("woff2");
|
||||||
|
font-weight: 400;
|
||||||
|
font-style: normal;
|
||||||
|
font-display: swap;
|
||||||
|
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
|
||||||
|
U+01AF-01B0, U+1EA0-1EF9, U+20AB;
|
||||||
|
}
|
||||||
|
@font-face {
|
||||||
|
font-family: Inter;
|
||||||
|
src: url(/assets/fonts//s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa25L7SUc.woff2)
|
||||||
|
format("woff2");
|
||||||
|
font-weight: 400;
|
||||||
|
font-style: normal;
|
||||||
|
font-display: swap;
|
||||||
|
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
|
||||||
|
U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
||||||
|
}
|
||||||
|
@font-face {
|
||||||
|
font-family: Inter;
|
||||||
|
src: url(/assets/fonts//s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7.woff2)
|
||||||
|
format("woff2");
|
||||||
|
font-weight: 400;
|
||||||
|
font-style: normal;
|
||||||
|
font-display: swap;
|
||||||
|
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
|
||||||
|
U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
|
||||||
|
U+FEFF, U+FFFD;
|
||||||
|
}
|
||||||
|
@font-face {
|
||||||
|
font-family: Inter;
|
||||||
|
src: url(/assets/fonts//s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2JL7SUc.woff2)
|
||||||
|
format("woff2");
|
||||||
|
font-weight: 600;
|
||||||
|
font-style: normal;
|
||||||
|
font-display: swap;
|
||||||
|
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
|
||||||
|
U+FE2E-FE2F;
|
||||||
|
}
|
||||||
|
@font-face {
|
||||||
|
font-family: Inter;
|
||||||
|
src: url(/assets/fonts//s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa0ZL7SUc.woff2)
|
||||||
|
format("woff2");
|
||||||
|
font-weight: 600;
|
||||||
|
font-style: normal;
|
||||||
|
font-display: swap;
|
||||||
|
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
|
||||||
|
}
|
||||||
|
@font-face {
|
||||||
|
font-family: Inter;
|
||||||
|
src: url(/assets/fonts//s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2ZL7SUc.woff2)
|
||||||
|
format("woff2");
|
||||||
|
font-weight: 600;
|
||||||
|
font-style: normal;
|
||||||
|
font-display: swap;
|
||||||
|
unicode-range: U+1F00-1FFF;
|
||||||
|
}
|
||||||
|
@font-face {
|
||||||
|
font-family: Inter;
|
||||||
|
src: url(/assets/fonts//s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1pL7SUc.woff2)
|
||||||
|
format("woff2");
|
||||||
|
font-weight: 600;
|
||||||
|
font-style: normal;
|
||||||
|
font-display: swap;
|
||||||
|
unicode-range: U+0370-03FF;
|
||||||
|
}
|
||||||
|
@font-face {
|
||||||
|
font-family: Inter;
|
||||||
|
src: url(/assets/fonts//s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2pL7SUc.woff2)
|
||||||
|
format("woff2");
|
||||||
|
font-weight: 600;
|
||||||
|
font-style: normal;
|
||||||
|
font-display: swap;
|
||||||
|
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
|
||||||
|
U+01AF-01B0, U+1EA0-1EF9, U+20AB;
|
||||||
|
}
|
||||||
|
@font-face {
|
||||||
|
font-family: Inter;
|
||||||
|
src: url(/assets/fonts//s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa25L7SUc.woff2)
|
||||||
|
format("woff2");
|
||||||
|
font-weight: 600;
|
||||||
|
font-style: normal;
|
||||||
|
font-display: swap;
|
||||||
|
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
|
||||||
|
U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
||||||
|
}
|
||||||
|
@font-face {
|
||||||
|
font-family: Inter;
|
||||||
|
src: url(/assets/fonts//s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7.woff2)
|
||||||
|
format("woff2");
|
||||||
|
font-weight: 600;
|
||||||
|
font-style: normal;
|
||||||
|
font-display: swap;
|
||||||
|
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
|
||||||
|
U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
|
||||||
|
U+FEFF, U+FFFD;
|
||||||
|
}
|
||||||
|
@font-face {
|
||||||
|
font-family: Inter;
|
||||||
|
src: url(/assets/fonts//s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2JL7SUc.woff2)
|
||||||
|
format("woff2");
|
||||||
|
font-weight: 700;
|
||||||
|
font-style: normal;
|
||||||
|
font-display: swap;
|
||||||
|
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
|
||||||
|
U+FE2E-FE2F;
|
||||||
|
}
|
||||||
|
@font-face {
|
||||||
|
font-family: Inter;
|
||||||
|
src: url(/assets/fonts//s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa0ZL7SUc.woff2)
|
||||||
|
format("woff2");
|
||||||
|
font-weight: 700;
|
||||||
|
font-style: normal;
|
||||||
|
font-display: swap;
|
||||||
|
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
|
||||||
|
}
|
||||||
|
@font-face {
|
||||||
|
font-family: Inter;
|
||||||
|
src: url(/assets/fonts//s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2ZL7SUc.woff2)
|
||||||
|
format("woff2");
|
||||||
|
font-weight: 700;
|
||||||
|
font-style: normal;
|
||||||
|
font-display: swap;
|
||||||
|
unicode-range: U+1F00-1FFF;
|
||||||
|
}
|
||||||
|
@font-face {
|
||||||
|
font-family: Inter;
|
||||||
|
src: url(/assets/fonts//s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1pL7SUc.woff2)
|
||||||
|
format("woff2");
|
||||||
|
font-weight: 700;
|
||||||
|
font-style: normal;
|
||||||
|
font-display: swap;
|
||||||
|
unicode-range: U+0370-03FF;
|
||||||
|
}
|
||||||
|
@font-face {
|
||||||
|
font-family: Inter;
|
||||||
|
src: url(/assets/fonts//s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2pL7SUc.woff2)
|
||||||
|
format("woff2");
|
||||||
|
font-weight: 700;
|
||||||
|
font-style: normal;
|
||||||
|
font-display: swap;
|
||||||
|
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
|
||||||
|
U+01AF-01B0, U+1EA0-1EF9, U+20AB;
|
||||||
|
}
|
||||||
|
@font-face {
|
||||||
|
font-family: Inter;
|
||||||
|
src: url(/assets/fonts//s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa25L7SUc.woff2)
|
||||||
|
format("woff2");
|
||||||
|
font-weight: 700;
|
||||||
|
font-style: normal;
|
||||||
|
font-display: swap;
|
||||||
|
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
|
||||||
|
U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
||||||
|
}
|
||||||
|
@font-face {
|
||||||
|
font-family: Inter;
|
||||||
|
src: url(/assets/fonts//s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7.woff2)
|
||||||
|
format("woff2");
|
||||||
|
font-weight: 700;
|
||||||
|
font-style: normal;
|
||||||
|
font-display: swap;
|
||||||
|
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
|
||||||
|
U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
|
||||||
|
U+FEFF, U+FFFD;
|
||||||
|
}
|
||||||
|
@font-face {
|
||||||
|
font-family: Inter;
|
||||||
|
src: url(/assets/fonts//s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2JL7SUc.woff2)
|
||||||
|
format("woff2");
|
||||||
|
font-weight: 800;
|
||||||
|
font-style: normal;
|
||||||
|
font-display: swap;
|
||||||
|
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
|
||||||
|
U+FE2E-FE2F;
|
||||||
|
}
|
||||||
|
@font-face {
|
||||||
|
font-family: Inter;
|
||||||
|
src: url(/assets/fonts//s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa0ZL7SUc.woff2)
|
||||||
|
format("woff2");
|
||||||
|
font-weight: 800;
|
||||||
|
font-style: normal;
|
||||||
|
font-display: swap;
|
||||||
|
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
|
||||||
|
}
|
||||||
|
@font-face {
|
||||||
|
font-family: Inter;
|
||||||
|
src: url(/assets/fonts//s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2ZL7SUc.woff2)
|
||||||
|
format("woff2");
|
||||||
|
font-weight: 800;
|
||||||
|
font-style: normal;
|
||||||
|
font-display: swap;
|
||||||
|
unicode-range: U+1F00-1FFF;
|
||||||
|
}
|
||||||
|
@font-face {
|
||||||
|
font-family: Inter;
|
||||||
|
src: url(/assets/fonts//s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1pL7SUc.woff2)
|
||||||
|
format("woff2");
|
||||||
|
font-weight: 800;
|
||||||
|
font-style: normal;
|
||||||
|
font-display: swap;
|
||||||
|
unicode-range: U+0370-03FF;
|
||||||
|
}
|
||||||
|
@font-face {
|
||||||
|
font-family: Inter;
|
||||||
|
src: url(/assets/fonts//s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2pL7SUc.woff2)
|
||||||
|
format("woff2");
|
||||||
|
font-weight: 800;
|
||||||
|
font-style: normal;
|
||||||
|
font-display: swap;
|
||||||
|
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
|
||||||
|
U+01AF-01B0, U+1EA0-1EF9, U+20AB;
|
||||||
|
}
|
||||||
|
@font-face {
|
||||||
|
font-family: Inter;
|
||||||
|
src: url(/assets/fonts//s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa25L7SUc.woff2)
|
||||||
|
format("woff2");
|
||||||
|
font-weight: 800;
|
||||||
|
font-style: normal;
|
||||||
|
font-display: swap;
|
||||||
|
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
|
||||||
|
U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
||||||
|
}
|
||||||
|
@font-face {
|
||||||
|
font-family: Inter;
|
||||||
|
src: url(/assets/fonts//s/inter/v12/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7.woff2)
|
||||||
|
format("woff2");
|
||||||
|
font-weight: 800;
|
||||||
|
font-style: normal;
|
||||||
|
font-display: swap;
|
||||||
|
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
|
||||||
|
U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
|
||||||
|
U+FEFF, U+FFFD;
|
||||||
|
}
|
||||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
BIN
public/pint-newinstall/assets/img/clipboard-image-3.png
Normal file
BIN
public/pint-newinstall/assets/img/clipboard-image-3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
BIN
public/pint-newinstall/assets/img/clipboard-image-4.png
Normal file
BIN
public/pint-newinstall/assets/img/clipboard-image-4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 101 KiB |
BIN
public/pint-newinstall/assets/img/clipboard-image.png
Normal file
BIN
public/pint-newinstall/assets/img/clipboard-image.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
BIN
public/pint-newinstall/assets/img/pint-logo.png
Normal file
BIN
public/pint-newinstall/assets/img/pint-logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
25
public/pint-newinstall/assets/img/pint.svg
Normal file
25
public/pint-newinstall/assets/img/pint.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 20 KiB |
5586
public/pint-newinstall/assets/js/jquery.min.js
vendored
Normal file
5586
public/pint-newinstall/assets/js/jquery.min.js
vendored
Normal file
File diff suppressed because it is too large
Load diff
56
public/pint-newinstall/assets/js/script.min.js
vendored
Normal file
56
public/pint-newinstall/assets/js/script.min.js
vendored
Normal file
|
|
@ -0,0 +1,56 @@
|
||||||
|
!(function () {
|
||||||
|
"use strict";
|
||||||
|
var e = document.querySelector("#mainNav");
|
||||||
|
if (e) {
|
||||||
|
var n = function () {
|
||||||
|
(void 0 !== window.pageYOffset
|
||||||
|
? window.pageYOffset
|
||||||
|
: (
|
||||||
|
document.documentElement ||
|
||||||
|
document.body.parentNode ||
|
||||||
|
document.body
|
||||||
|
).scrollTop) > 100
|
||||||
|
? e.classList.add("navbar-shrink")
|
||||||
|
: e.classList.remove("navbar-shrink");
|
||||||
|
};
|
||||||
|
n(), document.addEventListener("scroll", n);
|
||||||
|
}
|
||||||
|
document.getElementsByClassName("popup-gallery").length > 0 &&
|
||||||
|
baguetteBox.run(".popup-gallery", { animation: "slideIn" }),
|
||||||
|
(function () {
|
||||||
|
if (
|
||||||
|
"requestAnimationFrame" in window &&
|
||||||
|
!/Mobile|Android/.test(navigator.userAgent)
|
||||||
|
) {
|
||||||
|
var e = document.querySelectorAll("[data-bss-parallax]");
|
||||||
|
if (e.length) {
|
||||||
|
var n,
|
||||||
|
t = [];
|
||||||
|
window.addEventListener("scroll", a),
|
||||||
|
window.addEventListener("resize", a),
|
||||||
|
a();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function a() {
|
||||||
|
t.length = 0;
|
||||||
|
for (var a = 0; a < e.length; a++) {
|
||||||
|
var r = e[a].getBoundingClientRect(),
|
||||||
|
i =
|
||||||
|
parseFloat(e[a].getAttribute("data-bss-parallax-speed"), 10) ||
|
||||||
|
0.5;
|
||||||
|
r.bottom > 0 &&
|
||||||
|
r.top < window.innerHeight &&
|
||||||
|
t.push({ speed: i, node: e[a] });
|
||||||
|
}
|
||||||
|
cancelAnimationFrame(n), t.length && (n = requestAnimationFrame(o));
|
||||||
|
}
|
||||||
|
function o() {
|
||||||
|
for (var e = 0; e < t.length; e++) {
|
||||||
|
var n = t[e].node,
|
||||||
|
a = t[e].speed;
|
||||||
|
n.style.transform =
|
||||||
|
"translate3d(0, " + -window.scrollY * a + "px, 0)";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})();
|
||||||
|
})();
|
||||||
233
public/pint-newinstall/index.html
Normal file
233
public/pint-newinstall/index.html
Normal file
|
|
@ -0,0 +1,233 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta
|
||||||
|
name="viewport"
|
||||||
|
content="width=device-width, initial-scale=1.0, shrink-to-fit=no"
|
||||||
|
/>
|
||||||
|
<title>Setup Pint</title>
|
||||||
|
<link
|
||||||
|
rel="icon"
|
||||||
|
type="image/png"
|
||||||
|
sizes="750x750"
|
||||||
|
href="./assets/img/pint-logo.png"
|
||||||
|
/>
|
||||||
|
<link
|
||||||
|
rel="icon"
|
||||||
|
type="image/png"
|
||||||
|
sizes="750x750"
|
||||||
|
href="./assets/img/pint-logo.png"
|
||||||
|
/>
|
||||||
|
<link
|
||||||
|
rel="icon"
|
||||||
|
type="image/png"
|
||||||
|
sizes="750x750"
|
||||||
|
href="./assets/img/pint-logo.png"
|
||||||
|
/>
|
||||||
|
<link
|
||||||
|
rel="icon"
|
||||||
|
type="image/png"
|
||||||
|
sizes="750x750"
|
||||||
|
href="./assets/img/pint-logo.png"
|
||||||
|
/>
|
||||||
|
<link
|
||||||
|
rel="icon"
|
||||||
|
type="image/png"
|
||||||
|
sizes="750x750"
|
||||||
|
href="./assets/img/pint-logo.png"
|
||||||
|
/>
|
||||||
|
<link rel="stylesheet" href="./assets/bootstrap/css/bootstrap.min.css" />
|
||||||
|
<link rel="stylesheet" href="./assets/css/styles.min.css" />
|
||||||
|
</head>
|
||||||
|
<body
|
||||||
|
style="
|
||||||
|
/*background: url("design.jpg");*/
|
||||||
|
background-position: 0 -60px;
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<nav
|
||||||
|
class="navbar navbar-dark navbar-expand-md fixed-top navbar-shrink py-3"
|
||||||
|
id="mainNav"
|
||||||
|
>
|
||||||
|
<div class="container">
|
||||||
|
<img src="./assets/img/pint.svg" width="48" height="40" /><a
|
||||||
|
class="navbar-brand d-flex align-items-center"
|
||||||
|
href="/"
|
||||||
|
><span>Pint for GitHub</span></a
|
||||||
|
><button
|
||||||
|
data-bs-toggle="collapse"
|
||||||
|
class="navbar-toggler"
|
||||||
|
data-bs-target="#navcol-1"
|
||||||
|
>
|
||||||
|
<span class="visually-hidden">Toggle navigation</span
|
||||||
|
><span class="navbar-toggler-icon"></span>
|
||||||
|
</button>
|
||||||
|
<div class="collapse navbar-collapse" id="navcol-1">
|
||||||
|
<ul class="navbar-nav mx-auto">
|
||||||
|
<li class="nav-item"></li>
|
||||||
|
</ul>
|
||||||
|
<a
|
||||||
|
class="btn btn-primary shadow"
|
||||||
|
role="button"
|
||||||
|
href="https://github.com/fuwaa/pint"
|
||||||
|
target="_blank"
|
||||||
|
>View Source</a
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
<header class="bg-dark pt-5"></header>
|
||||||
|
<section>
|
||||||
|
<div class="container bg-dark py-5">
|
||||||
|
<div class="text-center">
|
||||||
|
<p class="fw-bold text-success mb-2">Welcome to Pint!</p>
|
||||||
|
<h1 class="fw-bold">Let's get you set up.</h1>
|
||||||
|
</div>
|
||||||
|
<div class="py-5 p-lg-5">
|
||||||
|
<div
|
||||||
|
class="row row-cols-1 row-cols-md-2 mx-auto"
|
||||||
|
style="max-width: 900px"
|
||||||
|
>
|
||||||
|
<div class="col mb-5">
|
||||||
|
<div class="card shadow-sm">
|
||||||
|
<div
|
||||||
|
class="card-body px-4 py-5 px-md-5"
|
||||||
|
style="height: 429.969px"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="bs-icon-lg d-flex justify-content-center align-items-center mb-3 bs-icon"
|
||||||
|
style="top: 1rem; right: 1rem; position: absolute"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
viewBox="-128 0 512 512"
|
||||||
|
width="1em"
|
||||||
|
height="1em"
|
||||||
|
fill="currentColor"
|
||||||
|
class="text-success"
|
||||||
|
>
|
||||||
|
<!--! Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. -->
|
||||||
|
<path
|
||||||
|
d="M256 448c0 17.67-14.33 32-32 32H32c-17.67 0-32-14.33-32-32s14.33-32 32-32h64V123.8L49.75 154.6C35.02 164.5 15.19 160.4 5.375 145.8C-4.422 131.1-.4531 111.2 14.25 101.4l96-64c9.828-6.547 22.45-7.187 32.84-1.594C153.5 41.37 160 52.22 160 64.01v352h64C241.7 416 256 430.3 256 448z"
|
||||||
|
></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h5 class="fw-bold card-title">Go to your GitHub Settings</h5>
|
||||||
|
<p class="text-muted card-text mb-4">
|
||||||
|
Click on the button below to go to your GitHub Settings.
|
||||||
|
</p>
|
||||||
|
<img
|
||||||
|
class="img-thumbnail"
|
||||||
|
src="./assets/img/clipboard-image-4.png"
|
||||||
|
width="329"
|
||||||
|
height="176"
|
||||||
|
style="
|
||||||
|
width: 314px;
|
||||||
|
height: 176px;
|
||||||
|
padding: 0px;
|
||||||
|
margin: 0;
|
||||||
|
margin-bottom: 14px;
|
||||||
|
"
|
||||||
|
/><a
|
||||||
|
class="btn btn-primary shadow"
|
||||||
|
href="https://github.com/settings/appearance"
|
||||||
|
target="_blank"
|
||||||
|
type="button"
|
||||||
|
>Go to GitHub Settings</a
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col mb-5">
|
||||||
|
<div class="card shadow-sm">
|
||||||
|
<div class="card-body px-4 py-5 px-md-5">
|
||||||
|
<div
|
||||||
|
class="bs-icon-lg d-flex justify-content-center align-items-center mb-3 bs-icon"
|
||||||
|
style="top: 1rem; right: 1rem; position: absolute"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
viewBox="-96 0 512 512"
|
||||||
|
width="1em"
|
||||||
|
height="1em"
|
||||||
|
fill="currentColor"
|
||||||
|
class="text-success"
|
||||||
|
>
|
||||||
|
<!--! Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. -->
|
||||||
|
<path
|
||||||
|
d="M320 448c0 17.67-14.33 32-32 32H32c-13.08 0-24.83-7.953-29.7-20.09c-4.859-12.12-1.859-26 7.594-35.03l193.6-185.1c31.36-30.17 33.95-80 5.812-113.4c-14.91-17.69-35.86-28.12-58.97-29.38C127.4 95.83 105.3 103.9 88.53 119.9L53.52 151.7c-13.08 11.91-33.33 10.89-45.2-2.172C-3.563 136.5-2.594 116.2 10.48 104.3l34.45-31.3c28.67-27.34 68.39-42.11 108.9-39.88c40.33 2.188 78.39 21.16 104.4 52.03c49.8 59.05 45.2 147.3-10.45 200.8l-136 130H288C305.7 416 320 430.3 320 448z"
|
||||||
|
></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h5 class="fw-bold card-title">
|
||||||
|
Apply the Default Dark Theme
|
||||||
|
</h5>
|
||||||
|
<p class="text-muted card-text mb-4">
|
||||||
|
Apply the "Default Dark" theme on the Theme Preferences
|
||||||
|
section
|
||||||
|
</p>
|
||||||
|
<img
|
||||||
|
class="img-thumbnail"
|
||||||
|
src="./assets/img/clipboard-image.png"
|
||||||
|
width="331"
|
||||||
|
height="216"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-xl-12 mb-4">
|
||||||
|
<div class="card shadow-sm">
|
||||||
|
<div class="card-body px-4 py-5 px-md-5">
|
||||||
|
<div
|
||||||
|
class="bs-icon-lg d-flex justify-content-center align-items-center mb-3 bs-icon"
|
||||||
|
style="top: 1rem; right: 1rem; position: absolute"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
viewBox="-96 0 512 512"
|
||||||
|
width="1em"
|
||||||
|
height="1em"
|
||||||
|
fill="currentColor"
|
||||||
|
class="text-success"
|
||||||
|
>
|
||||||
|
<!--! Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. -->
|
||||||
|
<path
|
||||||
|
d="M320 344c0 74.98-61.02 136-136 136H103.6c-46.34 0-87.31-29.53-101.1-73.48c-5.594-16.77 3.484-34.88 20.25-40.47c16.75-5.609 34.89 3.484 40.47 20.25c5.922 17.77 22.48 29.7 41.23 29.7H184c39.7 0 72-32.3 72-72s-32.3-72-72-72H80c-13.2 0-25.05-8.094-29.83-20.41C45.39 239.3 48.66 225.3 58.38 216.4l131.4-120.4H32c-17.67 0-32-14.33-32-32s14.33-32 32-32h240c13.2 0 25.05 8.094 29.83 20.41c4.781 12.3 1.516 26.27-8.203 35.19l-131.4 120.4H184C258.1 208 320 269 320 344z"
|
||||||
|
></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h5 class="fw-bold card-title">You're all Set!</h5>
|
||||||
|
<p class="text-muted card-text mb-4">
|
||||||
|
You can get started on using pint! Please use the extension
|
||||||
|
button to quickly change your color scheme or click options
|
||||||
|
on the modal to go advanced.
|
||||||
|
</p>
|
||||||
|
<img
|
||||||
|
class="img-thumbnail"
|
||||||
|
src="./assets/img/clipboard-image-3.png"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section></section>
|
||||||
|
<section class="py-5"></section>
|
||||||
|
<footer class="bg-dark">
|
||||||
|
<div class="container py-4 py-lg-5">
|
||||||
|
<hr />
|
||||||
|
<div
|
||||||
|
class="text-muted d-flex justify-content-between align-items-center pt-3"
|
||||||
|
>
|
||||||
|
<p class="mb-0">fuwa.sh - pint for github</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
<script src="./assets/js/jquery.min.js"></script>
|
||||||
|
<script src="./assets/bootstrap/js/bootstrap.min.js"></script>
|
||||||
|
<script src="./assets/js/script.min.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -1,9 +0,0 @@
|
||||||
import React from "react";
|
|
||||||
import { render, screen } from "@testing-library/react";
|
|
||||||
import Popup from "./views/Popup";
|
|
||||||
|
|
||||||
test("renders learn react link", () => {
|
|
||||||
render(<Popup />);
|
|
||||||
const linkElement = screen.getByText(/learn react/i);
|
|
||||||
expect(linkElement).toBeInTheDocument();
|
|
||||||
});
|
|
||||||
|
|
@ -1,9 +1,8 @@
|
||||||
import "../../assets/styles/App.css";
|
import "../../assets/styles/App.css";
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
name: string;
|
name: string;
|
||||||
color?: string;
|
color?: string;
|
||||||
textcolor?: string | "#ffffff";
|
textcolor?: string | "#000000";
|
||||||
className?: string;
|
className?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -12,7 +11,7 @@ export default function CardTitle(props: Props) {
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
style={{ backgroundColor: textcolor }}
|
style={{ backgroundColor: textcolor }}
|
||||||
className="flex-start align-left text-l p-1 rounded-t-lg"
|
className={`flex-start align-left text-white text-l p-1 rounded-t-[4px]`}
|
||||||
>
|
>
|
||||||
<p className="text-bold">
|
<p className="text-bold">
|
||||||
{name} {color}
|
{name} {color}
|
||||||
|
|
|
||||||
|
|
@ -1,22 +1,21 @@
|
||||||
import react from "react";
|
import react from "react";
|
||||||
import "../../assets/styles/App.css";
|
import "../../assets/styles/App.css";
|
||||||
import { IoIosBrush } from "react-icons/io";
|
import { IoIosBrush } from "react-icons/io";
|
||||||
|
import { BiReset } from "react-icons/bi";
|
||||||
import CardTitle from "../global/CardTitle";
|
import CardTitle from "../global/CardTitle";
|
||||||
import {
|
import {
|
||||||
pintSetNoReload,
|
pintSetNoReload,
|
||||||
pintGetUpdate,
|
pintGetUpdate,
|
||||||
} from "../../methods/helpers/storageHelper";
|
} from "../../methods/helpers/storageHelper";
|
||||||
|
import { settings } from "../../methods/config/settings";
|
||||||
|
|
||||||
var defaultValue = "#c0ffee";
|
var defaultValue = "#c0ffee";
|
||||||
|
|
||||||
|
var settingsList = Object.entries(settings);
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
settingName: string;
|
settingName: string;
|
||||||
colorPickerColor: {
|
colorPickerColor: string;
|
||||||
r: number;
|
|
||||||
g: number;
|
|
||||||
b: number;
|
|
||||||
a: number;
|
|
||||||
};
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function ChangeCard(props: Props) {
|
export default function ChangeCard(props: Props) {
|
||||||
|
|
@ -34,9 +33,8 @@ export default function ChangeCard(props: Props) {
|
||||||
const [current, setCurrent] = react.useState(`${defaultValue}`);
|
const [current, setCurrent] = react.useState(`${defaultValue}`);
|
||||||
|
|
||||||
function updateColor() {
|
function updateColor() {
|
||||||
var stringifiedColor = `rgba(${colorPickerColor.r},${colorPickerColor.g},${colorPickerColor.b},${colorPickerColor.a})`;
|
setCurrent(colorPickerColor);
|
||||||
setCurrent(stringifiedColor);
|
pintSetNoReload(settingName, colorPickerColor);
|
||||||
pintSetNoReload(settingName, stringifiedColor);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function updateColorExplicitly(value: string) {
|
function updateColorExplicitly(value: string) {
|
||||||
|
|
@ -44,28 +42,44 @@ export default function ChangeCard(props: Props) {
|
||||||
pintSetNoReload(settingName, value);
|
pintSetNoReload(settingName, value);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function resetDefaults() {
|
||||||
|
// get default value from settingsList
|
||||||
|
var defaults = settingsList.find(
|
||||||
|
(setting) => setting[0] === settingName
|
||||||
|
)[1];
|
||||||
|
setCurrent(defaults);
|
||||||
|
pintSetNoReload(settingName, defaults);
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="pint flex flex-row w-[260px] text-center">
|
<div className="pint flex flex-row w-[260px] text-center">
|
||||||
<div className="flex-1 flex-col rounded-lg m-1 p-1 bg-white">
|
<div className="flex-1 flex-col rounded-[6px] m-1 p-1 bg-[#010409] border-solid border-[#30363d] border-2">
|
||||||
<CardTitle name={current} textcolor={current} />
|
<CardTitle name={current} textcolor={current} />
|
||||||
<CardTitle name={settingReadable} />
|
<CardTitle name={settingReadable} textcolor="#010409" />
|
||||||
<div className="flex flex-row justify-center justify-items-center">
|
<div className="flex flex-row justify-center justify-items-center">
|
||||||
<div className="flex align-middle justify-content p-1">
|
<div className="flex align-middle justify-content p-1">
|
||||||
<input
|
<input
|
||||||
id="aaa"
|
id="aaa"
|
||||||
type="text"
|
type="text"
|
||||||
className="p-2 text-center w-full"
|
className="p-2 text-center text-white w-full bg-[#010409]"
|
||||||
placeholder="insert replacement value"
|
placeholder="insert custom value/css"
|
||||||
onChange={(e) => updateColorExplicitly(e.target.value)}
|
onChange={(e) => updateColorExplicitly(e.target.value)}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<button
|
<button
|
||||||
title="updateColor"
|
title="updateColor"
|
||||||
className="bg-[#0d1117] hover:bg-violet-600 active:bg-violet-700 focus:outline-none focus:ring focus:ring-violet-300 p-2 ml-2 mx-2 my-1 rounded-full text-white"
|
className="bg-[#0041c4] hover:bg-[#004de5] active:bg-[#0035A0]focus:outline-none focus:ring focus:ring-violet-300 px-1 my-2 mx-1 rounded-full text-white"
|
||||||
onClick={updateColor}
|
onClick={updateColor}
|
||||||
>
|
>
|
||||||
<IoIosBrush className="text-xl p-1 text-white" />
|
<IoIosBrush className="text-xl p-1 text-white" />
|
||||||
</button>
|
</button>
|
||||||
|
<button
|
||||||
|
title="Reset to defaults"
|
||||||
|
className="bg-[#3a3a3a] hover:bg-[#585858] active:bg-[#272727]focus:outline-none focus:ring focus:ring-violet-300 px-1 my-2 mx-1 rounded-full text-white"
|
||||||
|
onClick={resetDefaults}
|
||||||
|
>
|
||||||
|
<BiReset className="text-xl p-1 text-white" />
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,17 +1,51 @@
|
||||||
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 { AiFillGithub } from "react-icons/ai";
|
||||||
|
import { SiGithubsponsors } from "react-icons/si";
|
||||||
|
|
||||||
export default function Header() {
|
export default function Header() {
|
||||||
|
function openGithub() {
|
||||||
|
chrome.tabs.create({
|
||||||
|
url: "https://github.com/fuwaa/pint",
|
||||||
|
selected: true,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function supportProject() {
|
||||||
|
chrome.tabs.create({
|
||||||
|
url: "https://github.com/sponsors/fuwaa",
|
||||||
|
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="sticky top-0 z-30 w-screen flex flex-row mb-2 p-1 justify-between items-center bg-[#161b22] h-[64px] px-3 px-md-4 px-lg-5 ">
|
||||||
<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 - advanced mode</p>
|
<p className="flex-1 text-left text-md mb-1 text-gray-400">
|
||||||
|
advanced settings
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div></div>
|
<div className="flex flex-row">
|
||||||
|
<button
|
||||||
|
title="Support this project"
|
||||||
|
className=" hover:bg-[#40363d] active:bg-[#5b5b5b] focus:outline-none focus:ring focus:bg-[#444444] p-2 rounded-[6px] h-[30px] border-solid border-2 border-[#404040] hover:border-[#ffffff] flex flex-row justify-between m-1"
|
||||||
|
onClick={supportProject}
|
||||||
|
>
|
||||||
|
<SiGithubsponsors className="self-center text-xl p-1 text-[#db61a2]" />
|
||||||
|
<p className="self-center p-1 text-white"> Support this project </p>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
title="View the Source"
|
||||||
|
className="flex-none rounded-lg text-xl text-white p-2"
|
||||||
|
onClick={openGithub}
|
||||||
|
>
|
||||||
|
<AiFillGithub />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,34 +0,0 @@
|
||||||
import react from "react";
|
|
||||||
import "../../assets/styles/App.css";
|
|
||||||
import { HexColorInput, HexColorPicker } from "react-colorful";
|
|
||||||
import CardTitle from "../global/CardTitle";
|
|
||||||
|
|
||||||
var defaultValue = "#c0ffee";
|
|
||||||
|
|
||||||
export default function QuickChange() {
|
|
||||||
react.useLayoutEffect(() => {});
|
|
||||||
|
|
||||||
const [color, setColor] = react.useState(`${defaultValue}`);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="pint flex flex-row mb-2 mt-1 mx-2 text-center">
|
|
||||||
<div className="flex-1 flex-col rounded-lg m-1 p-1 bg-white">
|
|
||||||
<div className="flex flex-row justify-content text-center justify-center">
|
|
||||||
<CardTitle name="color picker - " />
|
|
||||||
<HexColorInput
|
|
||||||
style={{ width: 40, textAlign: "center" }}
|
|
||||||
color={color}
|
|
||||||
onChange={setColor}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="flex justify-content p-1">
|
|
||||||
<HexColorPicker
|
|
||||||
style={{ width: 258, height: 258 }}
|
|
||||||
color={color}
|
|
||||||
onChange={setColor}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
598
src/components/options/Sidebar.tsx
Normal file
598
src/components/options/Sidebar.tsx
Normal file
|
|
@ -0,0 +1,598 @@
|
||||||
|
import react from "react";
|
||||||
|
import "../../assets/styles/App.css";
|
||||||
|
import "../../assets/styles/RC.css";
|
||||||
|
import { HexColorPicker, HexColorInput } from "react-colorful";
|
||||||
|
import updateScale, { updateSpecific } from "../../methods/helpers/scaleHelper";
|
||||||
|
import * as scaleHelper from "../../methods/helpers/scaleHelper";
|
||||||
|
import {
|
||||||
|
pintGetUpdate,
|
||||||
|
pintSetNoReload,
|
||||||
|
updateMultiple,
|
||||||
|
} from "../../methods/helpers/storageHelper";
|
||||||
|
import {
|
||||||
|
BsFillBrushFill,
|
||||||
|
BsFillCalendar3WeekFill,
|
||||||
|
BsFillPaletteFill,
|
||||||
|
BsMenuButtonWideFill,
|
||||||
|
} from "react-icons/bs";
|
||||||
|
import {
|
||||||
|
AiFillCheckCircle,
|
||||||
|
AiFillCiCircle,
|
||||||
|
AiFillClockCircle,
|
||||||
|
AiFillCloseCircle,
|
||||||
|
AiFillHeart,
|
||||||
|
AiOutlineSearch,
|
||||||
|
} 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";
|
||||||
|
import { BiReset } from "react-icons/bi";
|
||||||
|
import * as baseSettings from "../../methods/config/settings";
|
||||||
|
|
||||||
|
var defaultValue = "#c0ffee";
|
||||||
|
|
||||||
|
var defaultScheme = "analogic";
|
||||||
|
var defaultVariation = "default";
|
||||||
|
|
||||||
|
var quickScheme: string[] = [];
|
||||||
|
|
||||||
|
var defaultSettings = Object.entries(baseSettings.settings);
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
color: string;
|
||||||
|
setColor: (type: string) => void;
|
||||||
|
filteredList: string[];
|
||||||
|
setFilter: (type: string[]) => void;
|
||||||
|
setting: string[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function Sidebar(props: Props) {
|
||||||
|
var { color, setColor, setFilter, setting } = props;
|
||||||
|
|
||||||
|
react.useLayoutEffect(() => {
|
||||||
|
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);
|
||||||
|
pintGetUpdate("variation", setVariation);
|
||||||
|
pintGetUpdate("scheme", setScheme);
|
||||||
|
pintGetUpdate("hiddenQS", setHiddenQS);
|
||||||
|
quickScheme = scaleHelper.generateScheme(color, scheme, variation, 0.5);
|
||||||
|
});
|
||||||
|
|
||||||
|
// scale colors
|
||||||
|
const [scaleGray, setScaleGray] = react.useState(`${defaultValue}`);
|
||||||
|
|
||||||
|
const [scheme, setScheme] = react.useState(`${defaultScheme}`);
|
||||||
|
const [variation, setVariation] = react.useState(`${defaultVariation}`);
|
||||||
|
const [hiddenQS, setHiddenQS] = react.useState("true");
|
||||||
|
|
||||||
|
function paintGray() {
|
||||||
|
updateSpecific(color, 0, 0, scales.gray);
|
||||||
|
setScaleGray(color);
|
||||||
|
setColor(color);
|
||||||
|
}
|
||||||
|
|
||||||
|
const [scaleYellow, setScaleYellow] = react.useState(`${defaultValue}`);
|
||||||
|
|
||||||
|
function paintYellow() {
|
||||||
|
updateSpecific(color, 0, 0, scales.yellow);
|
||||||
|
setScaleGray(color);
|
||||||
|
setColor(color);
|
||||||
|
}
|
||||||
|
|
||||||
|
const [scaleBlue, setScaleBlue] = react.useState(`${defaultValue}`);
|
||||||
|
|
||||||
|
function paintBlue() {
|
||||||
|
updateSpecific(color, 0, 0, scales.blue);
|
||||||
|
setScaleGray(color);
|
||||||
|
setColor(color);
|
||||||
|
}
|
||||||
|
|
||||||
|
const [scaleGreen, setScaleGreen] = react.useState(`${defaultValue}`);
|
||||||
|
|
||||||
|
function paintGreen() {
|
||||||
|
updateSpecific(color, 0, 0, scales.green);
|
||||||
|
setScaleGray(color);
|
||||||
|
setColor(color);
|
||||||
|
}
|
||||||
|
|
||||||
|
const [scaleRed, setScaleRed] = react.useState(`${defaultValue}`);
|
||||||
|
|
||||||
|
function paintRed() {
|
||||||
|
updateSpecific(color, 0, 0, scales.red);
|
||||||
|
setScaleGray(color);
|
||||||
|
setColor(color);
|
||||||
|
}
|
||||||
|
|
||||||
|
const [scalePurple, setScalePurple] = react.useState(`${defaultValue}`);
|
||||||
|
|
||||||
|
function paintPurple() {
|
||||||
|
updateSpecific(color, 0, 0, scales.purple);
|
||||||
|
setScaleGray(color);
|
||||||
|
setColor(color);
|
||||||
|
}
|
||||||
|
|
||||||
|
const [scalePink, setScalePink] = react.useState(`${defaultValue}`);
|
||||||
|
|
||||||
|
function paintPink() {
|
||||||
|
updateSpecific(color, 0, 0, scales.pink);
|
||||||
|
setScaleGray(color);
|
||||||
|
setColor(color);
|
||||||
|
}
|
||||||
|
|
||||||
|
const [scaleCalendar, setScaleCalendar] = react.useState(`${defaultValue}`);
|
||||||
|
|
||||||
|
function paintCalendar() {
|
||||||
|
updateSpecific(color, 0, 0, scales.calendar);
|
||||||
|
setScaleGray(color);
|
||||||
|
setColor(color);
|
||||||
|
}
|
||||||
|
|
||||||
|
const [scaleText, setScaleText] = react.useState(`${defaultValue}`);
|
||||||
|
|
||||||
|
function paintText() {
|
||||||
|
updateMultiple(settings.cg106_ffffff, chroma(color).hex());
|
||||||
|
setScaleGray(color);
|
||||||
|
setColor(color);
|
||||||
|
quickScheme = scaleHelper.generateScheme(color, scheme, variation, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
function setDefault() {
|
||||||
|
pintSetNoReload("variation", "default");
|
||||||
|
setVariation("default");
|
||||||
|
quickScheme = scaleHelper.generateScheme(color, scheme, variation, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
function setPastel() {
|
||||||
|
pintSetNoReload("variation", "pastel");
|
||||||
|
setVariation("pastel");
|
||||||
|
quickScheme = scaleHelper.generateScheme(color, scheme, variation, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
function setSoft() {
|
||||||
|
pintSetNoReload("variation", "soft");
|
||||||
|
setVariation("soft");
|
||||||
|
quickScheme = scaleHelper.generateScheme(color, scheme, variation, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
function setLight() {
|
||||||
|
pintSetNoReload("variation", "light");
|
||||||
|
setVariation("light");
|
||||||
|
quickScheme = scaleHelper.generateScheme(color, scheme, variation, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
function setHard() {
|
||||||
|
pintSetNoReload("variation", "hard");
|
||||||
|
setVariation("hard");
|
||||||
|
quickScheme = scaleHelper.generateScheme(color, scheme, variation, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
function setPale() {
|
||||||
|
pintSetNoReload("variation", "pale");
|
||||||
|
setVariation("pale");
|
||||||
|
quickScheme = scaleHelper.generateScheme(color, scheme, variation, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
function setTriade() {
|
||||||
|
pintSetNoReload("scheme", "triade");
|
||||||
|
setScheme("triade");
|
||||||
|
quickScheme = scaleHelper.generateScheme(color, scheme, variation, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
function setTetrade() {
|
||||||
|
pintSetNoReload("scheme", "tetrade");
|
||||||
|
setScheme("tetrade");
|
||||||
|
quickScheme = scaleHelper.generateScheme(color, scheme, variation, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
function setAnalogic() {
|
||||||
|
pintSetNoReload("scheme", "analogic");
|
||||||
|
setScheme("analogic");
|
||||||
|
quickScheme = scaleHelper.generateScheme(color, scheme, variation, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
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);
|
||||||
|
setColor(color);
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateColor(color: string) {
|
||||||
|
setColor(color);
|
||||||
|
quickScheme = scaleHelper.generateScheme(color, scheme, variation, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
function hideQS() {
|
||||||
|
if (hiddenQS === "true") {
|
||||||
|
pintSetNoReload("hiddenQS", "false");
|
||||||
|
setHiddenQS("false");
|
||||||
|
} else {
|
||||||
|
pintSetNoReload("hiddenQS", "true");
|
||||||
|
setHiddenQS("true");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function resetAll() {
|
||||||
|
defaultSettings.forEach((setting) => {
|
||||||
|
pintSetNoReload(setting[0], setting[1]);
|
||||||
|
});
|
||||||
|
chrome.tabs.reload();
|
||||||
|
}
|
||||||
|
|
||||||
|
function settingsFilter(searchquery: string) {
|
||||||
|
if (searchquery === "") {
|
||||||
|
setFilter(setting);
|
||||||
|
} else {
|
||||||
|
// replace all spaces with underscores
|
||||||
|
let filteredsearch = searchquery.replace(/\s/g, "_");
|
||||||
|
setFilter(setting.filter((s) => s.includes(filteredsearch)));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<aside className="w-[428px] sticky flex left-0 top-0 flex-col h-screen ">
|
||||||
|
<div className="flex flex-col rounded-lg mb-1 mt-2 mx-3 pt-[82px]">
|
||||||
|
<div className="flex-1 flex-col rounded-[6px] bg-[#161b22] border-solid border-[#30363d] border-2 ">
|
||||||
|
<div className="flex flex-row justify-content text-left text-white justify-left items-center mt-2 ml-2 mb-2">
|
||||||
|
<AiOutlineSearch className="mx-1" />
|
||||||
|
<input
|
||||||
|
id="aaa"
|
||||||
|
type="text"
|
||||||
|
className="p-1 text-white w-full bg-[#161b22] text-left"
|
||||||
|
placeholder="Search or jump to..."
|
||||||
|
onChange={(e) => settingsFilter(e.target.value)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="w-[410px] pint flex flex-row mx-2 mb-1">
|
||||||
|
<div className="flex-1 flex-col rounded-[6px] m-1 bg-[#010409] border-solid border-[#30363d] border-2 ">
|
||||||
|
<div className="flex flex-row justify-content text-left text-white justify-left items-center rounded-t-[6px] bg-[#161b22] p-1">
|
||||||
|
<BsFillPaletteFill className="mx-1" size={15} />
|
||||||
|
<div className="flex-start align-left text-l p-1 rounded-t-lg ">
|
||||||
|
<p className="text-semibold">color picker </p>
|
||||||
|
</div>
|
||||||
|
<HexColorInput
|
||||||
|
style={{
|
||||||
|
width: 40,
|
||||||
|
textAlign: "left",
|
||||||
|
color: "#b2b2b2",
|
||||||
|
backgroundColor: "#161b22",
|
||||||
|
}}
|
||||||
|
color={color}
|
||||||
|
onChange={updateColor}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-content p-1">
|
||||||
|
<HexColorPicker
|
||||||
|
className="custom-layout"
|
||||||
|
color={color}
|
||||||
|
onChange={updateColor}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<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">
|
||||||
|
<div className="flex flex-row justify-content text-left text-white justify-left items-center rounded-t-[6px] bg-[#161b22] p-1">
|
||||||
|
<BsFillBrushFill className="mx-1" size={15} />
|
||||||
|
<div className="flex-start align-left text-l p-1 rounded-t-lg ">
|
||||||
|
<p className="text-semibold"> group painter </p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<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 rounded-t-lg">
|
||||||
|
<p className="">Click a button to set a color</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex-wrap flex flex-row justify-content text-center text-white justify-center items-center p-1">
|
||||||
|
<button
|
||||||
|
title="Paint Canvas"
|
||||||
|
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={paintGray}
|
||||||
|
style={{
|
||||||
|
borderWidth: "2px 2px 2px 2px",
|
||||||
|
borderStyle: "solid",
|
||||||
|
borderColor: "#30363d",
|
||||||
|
backgroundColor: scaleGray,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<MdTextSnippet className=" self-center text-xl p-1 text-[#30363d]" />
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
title="Paint Text Colors"
|
||||||
|
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}
|
||||||
|
style={{
|
||||||
|
borderWidth: "2px 2px 2px 2px",
|
||||||
|
borderStyle: "solid",
|
||||||
|
borderColor: "#30363d",
|
||||||
|
backgroundColor: scaleText,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<MdFormatColorText className=" self-center text-xl p-1 text-[#30363d]" />
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
title="Paint Primary Accents"
|
||||||
|
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={paintBlue}
|
||||||
|
style={{
|
||||||
|
borderWidth: "2px 2px 2px 2px",
|
||||||
|
borderStyle: "solid",
|
||||||
|
borderColor: "#30363d",
|
||||||
|
backgroundColor: scaleBlue,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col rounded-lg mb-2 mx-3">
|
||||||
|
<div className="flex-1 flex-col rounded-[6px] bg-[#3a0606] border-solid border-[#6d1616] border-2 ">
|
||||||
|
<button
|
||||||
|
className="flex flex-row justify-content text-left text-white justify-left items-center mt-2 ml-2 mb-2"
|
||||||
|
onClick={resetAll}
|
||||||
|
>
|
||||||
|
<BiReset className="mx-1" />
|
||||||
|
<p className="text-semibold">Reset everything to defaults</p>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col rounded-lg mb-3 mx-3">
|
||||||
|
<div className="flex-1 flex-col rounded-[6px] bg-[#06193a] border-solid border-[#163e6d] border-2 ">
|
||||||
|
<button
|
||||||
|
className="flex flex-row justify-content text-left text-white justify-left items-center mt-2 ml-2 mb-2"
|
||||||
|
onClick={hideQS}
|
||||||
|
>
|
||||||
|
<FcIdea className="mx-1" />
|
||||||
|
<p className="text-semibold">
|
||||||
|
{hiddenQS === "true"
|
||||||
|
? "Need ideas? Click me to show similar colors!"
|
||||||
|
: "Showing similar colors. Click me to hide!"}
|
||||||
|
</p>
|
||||||
|
</button>
|
||||||
|
<div className={`${hiddenQS === "true" ? "hidden" : ""}`}>
|
||||||
|
<div className="flex flex-row justify-content text-left text-[#3080af] justify-left items-center mt-2 ml-3 mb-1">
|
||||||
|
<p className="text-semibold">Scheme Variations</p>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-row justify-content p-1 ml-2">
|
||||||
|
<button
|
||||||
|
className={`mr-1 ${
|
||||||
|
scheme === "triade"
|
||||||
|
? "bg-[#1f6feb] text-[#ffffff]"
|
||||||
|
: "bg-[#163e6d] text-[#3ba6ff]"
|
||||||
|
} hover:bg-[#1d5393] py-[2px] px-2 justify-between align-middle rounded-full table-cell`}
|
||||||
|
onClick={setTriade}
|
||||||
|
>
|
||||||
|
{" "}
|
||||||
|
triade{" "}
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
className={`mr-1 ${
|
||||||
|
scheme === "tetrade"
|
||||||
|
? "bg-[#1f6feb] text-[#ffffff]"
|
||||||
|
: "bg-[#163e6d] text-[#3ba6ff]"
|
||||||
|
} hover:bg-[#1d5393] py-[2px] px-2 justify-between align-middle rounded-full table-cell`}
|
||||||
|
onClick={setTetrade}
|
||||||
|
>
|
||||||
|
{" "}
|
||||||
|
tetrade{" "}
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
className={`mr-1 ${
|
||||||
|
scheme === "analogic"
|
||||||
|
? "bg-[#1f6feb] text-[#ffffff]"
|
||||||
|
: "bg-[#163e6d] text-[#3ba6ff]"
|
||||||
|
} hover:bg-[#1d5393] py-[2px] px-2 justify-between align-middle rounded-full table-cell`}
|
||||||
|
onClick={setAnalogic}
|
||||||
|
>
|
||||||
|
{" "}
|
||||||
|
analogic{" "}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-row justify-content text-left text-[#3080af] justify-left items-center mt-2 ml-3 mb-1">
|
||||||
|
<p className="text-semibold">Color Variations</p>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-row justify-content p-1 ml-2">
|
||||||
|
<button
|
||||||
|
className={`mr-1 ${
|
||||||
|
variation === "default"
|
||||||
|
? "bg-[#1f6feb] text-[#ffffff]"
|
||||||
|
: "bg-[#163e6d] text-[#3ba6ff]"
|
||||||
|
} hover:bg-[#1d5393] py-[2px] px-2 justify-between align-middle rounded-full table-cell`}
|
||||||
|
onClick={setDefault}
|
||||||
|
>
|
||||||
|
{" "}
|
||||||
|
default{" "}
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
className={`mr-1 ${
|
||||||
|
variation === "pastel"
|
||||||
|
? "bg-[#1f6feb] text-[#ffffff]"
|
||||||
|
: "bg-[#163e6d] text-[#3ba6ff]"
|
||||||
|
} hover:bg-[#1d5393] py-[2px] px-2 justify-between align-middle rounded-full table-cell`}
|
||||||
|
onClick={setPastel}
|
||||||
|
>
|
||||||
|
{" "}
|
||||||
|
pastel{" "}
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
className={`mr-1 ${
|
||||||
|
variation === "soft"
|
||||||
|
? "bg-[#1f6feb] text-[#ffffff]"
|
||||||
|
: "bg-[#163e6d] text-[#3ba6ff]"
|
||||||
|
} hover:bg-[#1d5393] py-[2px] px-2 justify-between align-middle rounded-full table-cell`}
|
||||||
|
onClick={setSoft}
|
||||||
|
>
|
||||||
|
{" "}
|
||||||
|
soft{" "}
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
className={`mr-1 ${
|
||||||
|
variation === "light"
|
||||||
|
? "bg-[#1f6feb] text-[#ffffff]"
|
||||||
|
: "bg-[#163e6d] text-[#3ba6ff]"
|
||||||
|
} hover:bg-[#1d5393] py-[2px] px-2 justify-between align-middle rounded-full table-cell`}
|
||||||
|
onClick={setLight}
|
||||||
|
>
|
||||||
|
{" "}
|
||||||
|
light{" "}
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
className={`mr-1 ${
|
||||||
|
variation === "hard"
|
||||||
|
? "bg-[#1f6feb] text-[#ffffff]"
|
||||||
|
: "bg-[#163e6d] text-[#3ba6ff]"
|
||||||
|
} hover:bg-[#1d5393] py-[2px] px-2 justify-between align-middle rounded-full table-cell`}
|
||||||
|
onClick={setHard}
|
||||||
|
>
|
||||||
|
{" "}
|
||||||
|
hard{" "}
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
className={`mr-1 ${
|
||||||
|
variation === "pale"
|
||||||
|
? "bg-[#1f6feb] text-[#ffffff]"
|
||||||
|
: "bg-[#163e6d] text-[#3ba6ff]"
|
||||||
|
} hover:bg-[#1d5393] py-[2px] px-2 justify-between align-middle rounded-full table-cell`}
|
||||||
|
onClick={setPale}
|
||||||
|
>
|
||||||
|
{" "}
|
||||||
|
pale{" "}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-row justify-content text-left text-[#3080af] justify-left items-center mt-2 ml-3 mb-1">
|
||||||
|
<p className="text-semibold">Generated Colors</p>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-row justify-content p-1 ml-2 mb-2">
|
||||||
|
{quickScheme.map((qsColor) => {
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
title={qsColor}
|
||||||
|
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-[#163e6d] 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>
|
||||||
|
</aside>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -1,16 +1,9 @@
|
||||||
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 {
|
import { AiFillGithub } from "react-icons/ai";
|
||||||
AiFillGithub,
|
import { SiGithubsponsors } from "react-icons/si";
|
||||||
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();
|
||||||
|
|
@ -23,6 +16,13 @@ export default function Header() {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function supportProject() {
|
||||||
|
chrome.tabs.create({
|
||||||
|
url: "https://github.com/sponsors/fuwaa",
|
||||||
|
selected: true,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex flex-row mb-2 px-4 p-1 justify-between items-center bg-[#161b22] h-[64px]">
|
<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">
|
||||||
|
|
@ -30,21 +30,28 @@ export default function Header() {
|
||||||
<div className="flex-col p-1 text-white align-middle ml-2 ">
|
<div className="flex-col p-1 text-white align-middle ml-2 ">
|
||||||
<p className="flex-1 text-left text-md mt-1"> pint for github</p>
|
<p className="flex-1 text-left text-md mt-1"> pint for github</p>
|
||||||
<p className="flex-1 text-left text-md mb-1 text-gray-400">
|
<p className="flex-1 text-left text-md mb-1 text-gray-400">
|
||||||
sign in to broadcast your palette
|
quick settings
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<button
|
<button
|
||||||
title="Advanced"
|
title="Support this project"
|
||||||
className="flex-none p-1 rounded-lg text-xl text-white p-2"
|
className="flex-none rounded-lg text-xl text-[#db61a2] p-2"
|
||||||
|
onClick={supportProject}
|
||||||
|
>
|
||||||
|
<SiGithubsponsors />
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
title="View the Source"
|
||||||
|
className="flex-none rounded-lg text-xl text-white p-2"
|
||||||
onClick={openGithub}
|
onClick={openGithub}
|
||||||
>
|
>
|
||||||
<AiFillGithub />
|
<AiFillGithub />
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
title="Advanced"
|
title="Advanced"
|
||||||
className="flex-none p-1 rounded-lg text-xl text-white p-2"
|
className="flex-none rounded-lg text-xl text-white p-2"
|
||||||
onClick={openOptions}
|
onClick={openOptions}
|
||||||
>
|
>
|
||||||
<IoMdSettings />
|
<IoMdSettings />
|
||||||
|
|
|
||||||
|
|
@ -9,7 +9,6 @@ import {
|
||||||
pintSetNoReload,
|
pintSetNoReload,
|
||||||
updateMultiple,
|
updateMultiple,
|
||||||
} from "../../methods/helpers/storageHelper";
|
} from "../../methods/helpers/storageHelper";
|
||||||
import { updateOpacity } from "../../methods/helpers/opacityHelper";
|
|
||||||
import {
|
import {
|
||||||
BsFillBrushFill,
|
BsFillBrushFill,
|
||||||
BsFillCalendar3WeekFill,
|
BsFillCalendar3WeekFill,
|
||||||
|
|
@ -65,63 +64,71 @@ export default function QuickChange() {
|
||||||
function paintGray() {
|
function paintGray() {
|
||||||
updateSpecific(color, 0, 0, scales.gray);
|
updateSpecific(color, 0, 0, scales.gray);
|
||||||
setScaleGray(color);
|
setScaleGray(color);
|
||||||
|
chrome.tabs.reload();
|
||||||
}
|
}
|
||||||
|
|
||||||
const [scaleYellow, setScaleYellow] = react.useState(`${defaultValue}`);
|
const [scaleYellow, setScaleYellow] = react.useState(`${defaultValue}`);
|
||||||
|
|
||||||
function paintYellow() {
|
function paintYellow() {
|
||||||
updateSpecific(color, 0, 0, scales.yellow);
|
updateSpecific(color, 0, 0, scales.yellow);
|
||||||
setScaleGray(color);
|
setScaleYellow(color);
|
||||||
|
chrome.tabs.reload();
|
||||||
}
|
}
|
||||||
|
|
||||||
const [scaleBlue, setScaleBlue] = react.useState(`${defaultValue}`);
|
const [scaleBlue, setScaleBlue] = react.useState(`${defaultValue}`);
|
||||||
|
|
||||||
function paintBlue() {
|
function paintBlue() {
|
||||||
updateSpecific(color, 0, 0, scales.blue);
|
updateSpecific(color, 0, 0, scales.blue);
|
||||||
setScaleGray(color);
|
setScaleBlue(color);
|
||||||
|
chrome.tabs.reload();
|
||||||
}
|
}
|
||||||
|
|
||||||
const [scaleGreen, setScaleGreen] = react.useState(`${defaultValue}`);
|
const [scaleGreen, setScaleGreen] = react.useState(`${defaultValue}`);
|
||||||
|
|
||||||
function paintGreen() {
|
function paintGreen() {
|
||||||
updateSpecific(color, 0, 0, scales.green);
|
updateSpecific(color, 0, 0, scales.green);
|
||||||
setScaleGray(color);
|
setScaleGreen(color);
|
||||||
|
chrome.tabs.reload();
|
||||||
}
|
}
|
||||||
|
|
||||||
const [scaleRed, setScaleRed] = react.useState(`${defaultValue}`);
|
const [scaleRed, setScaleRed] = react.useState(`${defaultValue}`);
|
||||||
|
|
||||||
function paintRed() {
|
function paintRed() {
|
||||||
updateSpecific(color, 0, 0, scales.red);
|
updateSpecific(color, 0, 0, scales.red);
|
||||||
setScaleGray(color);
|
setScaleRed(color);
|
||||||
|
chrome.tabs.reload();
|
||||||
}
|
}
|
||||||
|
|
||||||
const [scalePurple, setScalePurple] = react.useState(`${defaultValue}`);
|
const [scalePurple, setScalePurple] = react.useState(`${defaultValue}`);
|
||||||
|
|
||||||
function paintPurple() {
|
function paintPurple() {
|
||||||
updateSpecific(color, 0, 0, scales.purple);
|
updateSpecific(color, 0, 0, scales.purple);
|
||||||
setScaleGray(color);
|
setScalePurple(color);
|
||||||
|
chrome.tabs.reload();
|
||||||
}
|
}
|
||||||
|
|
||||||
const [scalePink, setScalePink] = react.useState(`${defaultValue}`);
|
const [scalePink, setScalePink] = react.useState(`${defaultValue}`);
|
||||||
|
|
||||||
function paintPink() {
|
function paintPink() {
|
||||||
updateSpecific(color, 0, 0, scales.pink);
|
updateSpecific(color, 0, 0, scales.pink);
|
||||||
setScaleGray(color);
|
setScalePink(color);
|
||||||
|
chrome.tabs.reload();
|
||||||
}
|
}
|
||||||
|
|
||||||
const [scaleCalendar, setScaleCalendar] = react.useState(`${defaultValue}`);
|
const [scaleCalendar, setScaleCalendar] = react.useState(`${defaultValue}`);
|
||||||
|
|
||||||
function paintCalendar() {
|
function paintCalendar() {
|
||||||
updateSpecific(color, 0, 0, scales.calendar);
|
updateSpecific(color, 0, 0, scales.calendar);
|
||||||
setScaleGray(color);
|
setScaleCalendar(color);
|
||||||
|
chrome.tabs.reload();
|
||||||
}
|
}
|
||||||
|
|
||||||
const [scaleText, setScaleText] = react.useState(`${defaultValue}`);
|
const [scaleText, setScaleText] = react.useState(`${defaultValue}`);
|
||||||
|
|
||||||
function paintText() {
|
function paintText() {
|
||||||
updateMultiple(settings.cg106_ffffff, chroma(color).hex());
|
updateMultiple(settings.cg106_ffffff, chroma(color).hex());
|
||||||
setScaleGray(color);
|
setScaleText(color);
|
||||||
quickScheme = scaleHelper.generateScheme(color, scheme, variation, 0.5);
|
chrome.tabs.reload();
|
||||||
}
|
}
|
||||||
|
|
||||||
function setDefault() {
|
function setDefault() {
|
||||||
|
|
@ -189,6 +196,7 @@ export default function QuickChange() {
|
||||||
pintGetUpdate(settings.cg60_a371f7[0], setScalePurple);
|
pintGetUpdate(settings.cg60_a371f7[0], setScalePurple);
|
||||||
pintGetUpdate(settings.cg19_26a641[0], setScaleCalendar);
|
pintGetUpdate(settings.cg19_26a641[0], setScaleCalendar);
|
||||||
pintGetUpdate(settings.cg106_ffffff[0], setScaleText);
|
pintGetUpdate(settings.cg106_ffffff[0], setScaleText);
|
||||||
|
chrome.tabs.reload();
|
||||||
}
|
}
|
||||||
|
|
||||||
function updateColor(color: string) {
|
function updateColor(color: string) {
|
||||||
|
|
@ -238,7 +246,7 @@ export default function QuickChange() {
|
||||||
<div className="flex flex-row justify-content text-left text-white justify-left items-center rounded-t-[6px] bg-[#161b22] p-1">
|
<div className="flex flex-row justify-content text-left text-white justify-left items-center rounded-t-[6px] bg-[#161b22] p-1">
|
||||||
<BsFillBrushFill className="mx-1" size={15} />
|
<BsFillBrushFill className="mx-1" size={15} />
|
||||||
<div className="flex-start align-left text-l p-1 rounded-t-lg ">
|
<div className="flex-start align-left text-l p-1 rounded-t-lg ">
|
||||||
<p className="text-semibold"> color painter </p>
|
<p className="text-semibold"> group painter </p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex flex-row justify-content text-center text-white justify-center items-center p-1 mt-1">
|
<div className="flex flex-row justify-content text-center text-white justify-center items-center p-1 mt-1">
|
||||||
|
|
@ -379,15 +387,6 @@ export default function QuickChange() {
|
||||||
</p>
|
</p>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</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 className="flex flex-col rounded-lg mb-3 mx-3">
|
<div className="flex flex-col rounded-lg mb-3 mx-3">
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,6 @@ import React from "react";
|
||||||
import ReactDOM from "react-dom/client";
|
import ReactDOM from "react-dom/client";
|
||||||
import "./assets/styles/index.css";
|
import "./assets/styles/index.css";
|
||||||
import App from "./App";
|
import App from "./App";
|
||||||
import reportWebVitals from "./reportWebVitals";
|
|
||||||
|
|
||||||
const root = ReactDOM.createRoot(
|
const root = ReactDOM.createRoot(
|
||||||
document.getElementById("root") as HTMLElement
|
document.getElementById("root") as HTMLElement
|
||||||
|
|
@ -12,8 +11,3 @@ root.render(
|
||||||
<App />
|
<App />
|
||||||
</React.StrictMode>
|
</React.StrictMode>
|
||||||
);
|
);
|
||||||
|
|
||||||
// If you want to start measuring performance in your app, pass a function
|
|
||||||
// to log results (for example: reportWebVitals(console.log))
|
|
||||||
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
|
|
||||||
reportWebVitals();
|
|
||||||
|
|
|
||||||
|
|
@ -813,6 +813,12 @@ export var cg106_ffffff = [
|
||||||
"__color_checks_line_dt_fm_text",
|
"__color_checks_line_dt_fm_text",
|
||||||
"__color_fg_on_emphasis",
|
"__color_fg_on_emphasis",
|
||||||
"__color_scale_white",
|
"__color_scale_white",
|
||||||
|
"__color_primer_fg_disabled",
|
||||||
|
"__color_accent_fg",
|
||||||
|
"__color_fg_subtle",
|
||||||
|
"__color_fg_muted",
|
||||||
|
"__color_done_fg",
|
||||||
|
"__color_fg_default",
|
||||||
];
|
];
|
||||||
|
|
||||||
// color group: 106 | default color: #ffffff0c
|
// color group: 106 | default color: #ffffff0c
|
||||||
|
|
|
||||||
|
|
@ -6,7 +6,7 @@ import * as settings from "../config/colorGroups.js";
|
||||||
import { updateMultiple } from "./storageHelper.js";
|
import { updateMultiple } from "./storageHelper.js";
|
||||||
|
|
||||||
// ----------- ASSIGNABLES -----------
|
// ----------- ASSIGNABLES -----------
|
||||||
export let orange = [
|
export const orange = [
|
||||||
settings.cg28_3d1300,
|
settings.cg28_3d1300,
|
||||||
settings.cg39_5a1e02,
|
settings.cg39_5a1e02,
|
||||||
settings.cg47_762d0a,
|
settings.cg47_762d0a,
|
||||||
|
|
@ -19,7 +19,7 @@ export let orange = [
|
||||||
settings.cg105_ffdfb6,
|
settings.cg105_ffdfb6,
|
||||||
];
|
];
|
||||||
|
|
||||||
export let yellow = [
|
export const yellow = [
|
||||||
settings.cg23_341a00,
|
settings.cg23_341a00,
|
||||||
settings.cg34_4b2900,
|
settings.cg34_4b2900,
|
||||||
settings.cg44_693e00,
|
settings.cg44_693e00,
|
||||||
|
|
@ -32,7 +32,7 @@ export let yellow = [
|
||||||
settings.cg90_f8e3a1,
|
settings.cg90_f8e3a1,
|
||||||
];
|
];
|
||||||
|
|
||||||
export let gray = [
|
export const gray = [
|
||||||
settings.cg8_0d1117,
|
settings.cg8_0d1117,
|
||||||
settings.cg13_161b22,
|
settings.cg13_161b22,
|
||||||
settings.cg17_21262d,
|
settings.cg17_21262d,
|
||||||
|
|
@ -45,7 +45,7 @@ export let gray = [
|
||||||
settings.cg84_f0f6fc,
|
settings.cg84_f0f6fc,
|
||||||
];
|
];
|
||||||
|
|
||||||
export let blue = [
|
export const blue = [
|
||||||
settings.cg6_051d4d,
|
settings.cg6_051d4d,
|
||||||
settings.cg7_0c2d6b,
|
settings.cg7_0c2d6b,
|
||||||
settings.cg9_0d419d,
|
settings.cg9_0d419d,
|
||||||
|
|
@ -58,7 +58,7 @@ export let blue = [
|
||||||
settings.cg72_cae8ff,
|
settings.cg72_cae8ff,
|
||||||
];
|
];
|
||||||
|
|
||||||
export let green = [
|
export const green = [
|
||||||
settings.cg5_04260f,
|
settings.cg5_04260f,
|
||||||
settings.cg4_033a16,
|
settings.cg4_033a16,
|
||||||
settings.cg11_0f5323,
|
settings.cg11_0f5323,
|
||||||
|
|
@ -71,7 +71,7 @@ export let green = [
|
||||||
settings.cg63_aff5b4,
|
settings.cg63_aff5b4,
|
||||||
];
|
];
|
||||||
|
|
||||||
export let red = [
|
export const red = [
|
||||||
settings.cg33_490202,
|
settings.cg33_490202,
|
||||||
settings.cg43_67060c,
|
settings.cg43_67060c,
|
||||||
settings.cg56_8e1519,
|
settings.cg56_8e1519,
|
||||||
|
|
@ -84,7 +84,7 @@ export let red = [
|
||||||
settings.cg103_ffdcd7,
|
settings.cg103_ffdcd7,
|
||||||
];
|
];
|
||||||
|
|
||||||
export let purple = [
|
export const purple = [
|
||||||
settings.cg20_271052,
|
settings.cg20_271052,
|
||||||
settings.cg27_3c1e70,
|
settings.cg27_3c1e70,
|
||||||
settings.cg35_553098,
|
settings.cg35_553098,
|
||||||
|
|
@ -97,7 +97,7 @@ export let purple = [
|
||||||
settings.cg82_eddeff,
|
settings.cg82_eddeff,
|
||||||
];
|
];
|
||||||
|
|
||||||
export let pink = [
|
export const pink = [
|
||||||
settings.cg30_42062a,
|
settings.cg30_42062a,
|
||||||
settings.cg40_5e103e,
|
settings.cg40_5e103e,
|
||||||
settings.cg50_7d2457,
|
settings.cg50_7d2457,
|
||||||
|
|
@ -110,7 +110,7 @@ export let pink = [
|
||||||
settings.cg102_ffdaec,
|
settings.cg102_ffdaec,
|
||||||
];
|
];
|
||||||
|
|
||||||
export let coral = [
|
export const coral = [
|
||||||
settings.cg31_460701,
|
settings.cg31_460701,
|
||||||
settings.cg42_640D04,
|
settings.cg42_640D04,
|
||||||
settings.cg53_872012,
|
settings.cg53_872012,
|
||||||
|
|
@ -123,7 +123,7 @@ export let coral = [
|
||||||
settings.cg105_ffdfb6,
|
settings.cg105_ffdfb6,
|
||||||
];
|
];
|
||||||
|
|
||||||
export let calendar = [
|
export const calendar = [
|
||||||
settings.cg10_0e4429,
|
settings.cg10_0e4429,
|
||||||
settings.cg2_006d32,
|
settings.cg2_006d32,
|
||||||
settings.cg19_26a641,
|
settings.cg19_26a641,
|
||||||
|
|
@ -224,7 +224,7 @@ export function updateAccent(color) {
|
||||||
}
|
}
|
||||||
|
|
||||||
export function generateScheme(color, scheme, variation, distance) {
|
export function generateScheme(color, scheme, variation, distance) {
|
||||||
let s = new ColorScheme();
|
const s = new ColorScheme();
|
||||||
if (scheme === "analogic") {
|
if (scheme === "analogic") {
|
||||||
s.from_hex(chroma(color).hex().slice(-6))
|
s.from_hex(chroma(color).hex().slice(-6))
|
||||||
.scheme(scheme)
|
.scheme(scheme)
|
||||||
|
|
@ -242,7 +242,7 @@ export function generateScheme(color, scheme, variation, distance) {
|
||||||
}
|
}
|
||||||
|
|
||||||
export function generateSaturation(color, setting) {
|
export function generateSaturation(color, setting) {
|
||||||
let colors = [];
|
const colors = [];
|
||||||
for (let i = 0; i < 10; i++) {
|
for (let i = 0; i < 10; i++) {
|
||||||
/^\d/.test(color.slice(-4))
|
/^\d/.test(color.slice(-4))
|
||||||
? colors.push(
|
? colors.push(
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,11 @@
|
||||||
/*global chrome*/
|
/* global chrome */
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Set a key and autoreload
|
* Set a key and autoreload
|
||||||
* @param {string} setting - setting to update
|
* @param {string} setting - setting to update
|
||||||
*/
|
*/
|
||||||
export function pintSet(setting, value) {
|
export function pintSet(setting, value) {
|
||||||
var pintKey = {};
|
const pintKey = {};
|
||||||
pintKey[`${setting}`] = value;
|
pintKey[`${setting}`] = value;
|
||||||
chrome.storage.local.set(pintKey);
|
chrome.storage.local.set(pintKey);
|
||||||
chrome.tabs.reload();
|
chrome.tabs.reload();
|
||||||
|
|
@ -17,7 +17,7 @@ export function pintSet(setting, value) {
|
||||||
* @param {string} value - Color to replace the current color with
|
* @param {string} value - Color to replace the current color with
|
||||||
*/
|
*/
|
||||||
export function pintSetNoReload(setting, value) {
|
export function pintSetNoReload(setting, value) {
|
||||||
var pintKey = {};
|
const pintKey = {};
|
||||||
pintKey[`${setting}`] = value;
|
pintKey[`${setting}`] = value;
|
||||||
chrome.storage.local.set(pintKey);
|
chrome.storage.local.set(pintKey);
|
||||||
}
|
}
|
||||||
|
|
@ -38,7 +38,7 @@ export function pintGetUpdate(setting, func) {
|
||||||
* @param {string} color - Color to replace the current color with
|
* @param {string} color - Color to replace the current color with
|
||||||
*/
|
*/
|
||||||
export function updateMultiple(settings, color) {
|
export function updateMultiple(settings, color) {
|
||||||
for (var i = 0; i < settings.length; i++) {
|
for (let i = 0; i < settings.length; i++) {
|
||||||
pintSetNoReload(settings[i], color);
|
pintSetNoReload(settings[i], color);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,15 +0,0 @@
|
||||||
import { ReportHandler } from "web-vitals";
|
|
||||||
|
|
||||||
const reportWebVitals = (onPerfEntry?: ReportHandler) => {
|
|
||||||
if (onPerfEntry && onPerfEntry instanceof Function) {
|
|
||||||
import("web-vitals").then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
|
|
||||||
getCLS(onPerfEntry);
|
|
||||||
getFID(onPerfEntry);
|
|
||||||
getFCP(onPerfEntry);
|
|
||||||
getLCP(onPerfEntry);
|
|
||||||
getTTFB(onPerfEntry);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
export default reportWebVitals;
|
|
||||||
|
|
@ -1,5 +0,0 @@
|
||||||
// jest-dom adds custom jest matchers for asserting on DOM nodes.
|
|
||||||
// allows you to do things like:
|
|
||||||
// expect(element).toHaveTextContent(/react/i)
|
|
||||||
// learn more: https://github.com/testing-library/jest-dom
|
|
||||||
import "@testing-library/jest-dom";
|
|
||||||
|
|
@ -5,70 +5,44 @@ 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";
|
||||||
import react from "react";
|
import react from "react";
|
||||||
import { RgbaColorPicker } from "react-colorful";
|
import Sidebar from "../components/options/Sidebar";
|
||||||
import CardTitle from "../components/global/CardTitle";
|
|
||||||
import chroma from "chroma-js";
|
|
||||||
|
|
||||||
var settingsList = Object.keys(settings);
|
var settingsList = Object.keys(settings);
|
||||||
|
|
||||||
var defaultValue = { r: 200, g: 150, b: 35, a: 0.5 };
|
var defaultValue = "#c0ffee";
|
||||||
var stringifiedColor = `rgba(${defaultValue.r},${defaultValue.g},${defaultValue.b},${defaultValue.a})`;
|
|
||||||
|
|
||||||
export default function Options() {
|
export default function Options() {
|
||||||
const [color, setColor] = react.useState(defaultValue);
|
const [color, setColor] = react.useState(defaultValue);
|
||||||
const [hexColor, setHexColor] = react.useState(
|
const [filteredList, setFilter] = react.useState(settingsList);
|
||||||
chroma(stringifiedColor).hex()
|
|
||||||
);
|
|
||||||
|
|
||||||
react.useLayoutEffect(() => {
|
|
||||||
setHexColor(chroma(stringifiedColor).hex());
|
|
||||||
});
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="relative flex flex-col align justify-center items-center">
|
<div className="relative inline-flex flex-col align justify-center">
|
||||||
<div className="relative max-w-7xl flex flex-row">
|
<Header />
|
||||||
<div className=" w-[300px]"></div>
|
<div className="relative inline-flex flex-row self-center">
|
||||||
<div className=" fixed w-[300px]">
|
<Sidebar
|
||||||
<Header />
|
color={color}
|
||||||
<div className="flex flex-col rounded-lg mt-2 mx-3 p-1 bg-white">
|
setColor={setColor}
|
||||||
<div className=" bg-whiteflex-start align-left text-l p-1">
|
filteredList={filteredList}
|
||||||
<p>hex-rgba converter</p>
|
setFilter={setFilter}
|
||||||
<div className="flex-col">
|
setting={settingsList}
|
||||||
<div className="flex flex-row justify-between items-center">
|
/>
|
||||||
<p className="flex-start my-1">
|
<div className="inline-flex flex-col">
|
||||||
rgb({color.r},{color.g},{color.b},{color.a})
|
|
||||||
</p>
|
|
||||||
<p className="flex-end my-1">{hexColor}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="pint flex flex-row mb-2 mt-1 mx-2 text-center">
|
|
||||||
<div className="flex-1 flex-col rounded-lg m-1 p-1 bg-white">
|
|
||||||
<div className="flex flex-row justify-content text-left justify-center">
|
|
||||||
<CardTitle name="color picker" />
|
|
||||||
</div>
|
|
||||||
<div className="flex justify-content p-1">
|
|
||||||
<RgbaColorPicker
|
|
||||||
style={{ width: 258, height: 258 }}
|
|
||||||
color={color}
|
|
||||||
onChange={setColor}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="flex flex-col">
|
|
||||||
<p className="text-3xl text-white p-1 mt-2">all settings</p>
|
<p className="text-3xl text-white p-1 mt-2">all settings</p>
|
||||||
<p className="text-l text-white p-1 mb-2">
|
<p className="text-l text-white p-1 mb-2">
|
||||||
customise everything from every text to every div
|
customise everything from every text to every div
|
||||||
</p>
|
</p>
|
||||||
<div className="grid grid-cols-3 gap-1">
|
<div className="grid xl:grid-cols-3 lg:grid-cols-2 sm:grid-cols-1 gap-1">
|
||||||
{settingsList.map((setting) => {
|
{filteredList.length > 0 ? (
|
||||||
return (
|
filteredList.map((setting) => {
|
||||||
<ChangeCard settingName={setting} colorPickerColor={color} />
|
return (
|
||||||
);
|
<ChangeCard settingName={setting} colorPickerColor={color} />
|
||||||
})}
|
);
|
||||||
|
})
|
||||||
|
) : (
|
||||||
|
<div className="text-[#7e7e7e] p-1 w-[260px] ">
|
||||||
|
no setting found. try another search term?
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue