From cf423284285d102df61597a18506c0e28f3b6d7b Mon Sep 17 00:00:00 2001 From: fuwaa Date: Tue, 26 Jul 2022 17:12:42 +0800 Subject: [PATCH 1/5] revamp: popup ui, scheme generation --- src/assets/images/pint.svg | 26 +- src/assets/styles/RC.css | 6 +- src/assets/styles/index.css | 7 +- src/components/global/CardTitle.tsx | 1 + src/components/popup/Header.tsx | 25 +- src/components/popup/QuickChange.tsx | 422 ++++++++++++++++++------- src/components/popup/QuickSettings.tsx | 36 --- src/methods/helpers/scaleHelper.js | 23 +- src/views/Options.tsx | 2 - src/views/Popup.tsx | 3 - 10 files changed, 378 insertions(+), 173 deletions(-) delete mode 100644 src/components/popup/QuickSettings.tsx diff --git a/src/assets/images/pint.svg b/src/assets/images/pint.svg index 77ed45e..9bfba44 100644 --- a/src/assets/images/pint.svg +++ b/src/assets/images/pint.svg @@ -1 +1,25 @@ - \ No newline at end of file + +Created with Fabric.js 3.5.0 + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/styles/RC.css b/src/assets/styles/RC.css index 3293983..1e8ccd2 100644 --- a/src/assets/styles/RC.css +++ b/src/assets/styles/RC.css @@ -9,17 +9,17 @@ } .custom-layout .react-colorful__saturation { - border-radius: 5px; + border-radius: 0px; border-bottom: none; width: inherit; height: inherit; - margin: 5px 0; + margin: 0; } .custom-layout .react-colorful__hue { order: -1; height: 14px; - border-radius: 5px; + border-radius: 0px; } .custom-layout .react-colorful__alpha { display: none; diff --git a/src/assets/styles/index.css b/src/assets/styles/index.css index 1403916..6e2d48d 100644 --- a/src/assets/styles/index.css +++ b/src/assets/styles/index.css @@ -6,10 +6,9 @@ html, body { /* width: 375px; */ margin: 0; - background-color: #0d1117; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", - "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", - sans-serif; + background-color: #010409; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, + sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } diff --git a/src/components/global/CardTitle.tsx b/src/components/global/CardTitle.tsx index 10a774b..09bbe92 100644 --- a/src/components/global/CardTitle.tsx +++ b/src/components/global/CardTitle.tsx @@ -4,6 +4,7 @@ interface Props { name: string; color?: string; textcolor?: string | "#ffffff"; + className?: string; } export default function CardTitle(props: Props) { diff --git a/src/components/popup/Header.tsx b/src/components/popup/Header.tsx index 8332ead..e8cf4e7 100644 --- a/src/components/popup/Header.tsx +++ b/src/components/popup/Header.tsx @@ -1,8 +1,16 @@ import logo from "../../assets/images/pint.svg"; import "../../assets/styles/App.css"; 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() { function openOptions() { chrome.runtime.openOptionsPage(); @@ -14,13 +22,16 @@ export default function Header() { selected: true, }); } + return ( -
+
- logo -
-

pint for github

-

2.0-dev - simple mode

+ logo +
+

pint for github

+

+ sign in to broadcast your palette +

diff --git a/src/components/popup/QuickChange.tsx b/src/components/popup/QuickChange.tsx index c638b9f..60a55f1 100644 --- a/src/components/popup/QuickChange.tsx +++ b/src/components/popup/QuickChange.tsx @@ -2,135 +2,345 @@ import react from "react"; import "../../assets/styles/App.css"; import "../../assets/styles/RC.css"; 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 { TextField } from "@mui/material"; -import { IoIosBrush } from "react-icons/io"; -import CardTitle from "../global/CardTitle"; -import { pintGetUpdate } from "../../methods/helpers/storageHelper"; +import { + pintGetUpdate, + updateMultiple, +} from "../../methods/helpers/storageHelper"; 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 quickScheme: string[] = []; + export default function QuickChange() { react.useLayoutEffect(() => { - pintGetUpdate("__color_canvas_default", setBgColor); - pintGetUpdate("__color_calendar_graph_day_L4_bg", setL4); - pintGetUpdate("__color_scale_gray_1", setTextColor); + 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); + quickScheme = scaleHelper.generateScheme(color, "analogic", "default", 0.5); }); - const [bgColor, setBgColor] = react.useState(`${defaultValue}`); const [color, setColor] = react.useState(`${defaultValue}`); - const [textColor, setTextColor] = react.useState(`${defaultValue}`); - // l1-l4 and other used shit - const [l4, setL4] = react.useState(`${defaultValue}`); + // scale colors + const [scaleGray, setScaleGray] = react.useState(`${defaultValue}`); - function paintAccent() { - scaleHelper.updateAccent(color); - setL4(color); + function paintGray() { + updateSpecific(color, 0, 0, scales.gray); + setScaleGray(color); } - function paintBg() { - setBgColor(color); - updateScale(color); - updateOpacity(); - chrome.tabs.reload(); + const [scaleYellow, setScaleYellow] = react.useState(`${defaultValue}`); + + function paintYellow() { + updateSpecific(color, 0, 0, scales.yellow); + 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() { - scaleHelper.updateText(color); - setTextColor(color); + updateMultiple(settings.cg106_ffffff, chroma(color).hex()); + 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 ( -
-
-
- - -
-
- +
+
+
+
+ +

+ Need ideas? These colors compliment your current pick! +

+
+
+ {quickScheme.map((qsColor) => { + return ( + + ); + })} +
-
- -
- - +
+
+
+ +
+

color picker

+
+ +
+
+ +
-
- - -
-
- - -
- {/*
-
-
-
-
*/} -
-

Made with ❤️ - fuwa

+
+
+ +
+

color painter

+
+
+
+
+

Click a button to set a color

+
+
+
+ + + + + + + + + + +
+ {/*
+

Not Enough Settings?

+
+
+

All Settings

+
+
+

Made with ❤️ - fuwa

+
*/}
diff --git a/src/components/popup/QuickSettings.tsx b/src/components/popup/QuickSettings.tsx deleted file mode 100644 index 89bdc7e..0000000 --- a/src/components/popup/QuickSettings.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import { Switch } from "@mui/material"; -import "../../assets/styles/App.css"; - -export default function QuickSettings() { - return ( -
-
-

quick settings

-
-
-

view global user pints?

- -
-
- -
- -
-
-
-
-
- ); -} diff --git a/src/methods/helpers/scaleHelper.js b/src/methods/helpers/scaleHelper.js index 32f074c..21df753 100644 --- a/src/methods/helpers/scaleHelper.js +++ b/src/methods/helpers/scaleHelper.js @@ -6,7 +6,7 @@ import * as settings from "../config/colorGroups.js"; import { updateMultiple } from "./storageHelper.js"; // ----------- ASSIGNABLES ----------- -let orange = [ +export let orange = [ settings.cg28_3d1300, settings.cg39_5a1e02, settings.cg47_762d0a, @@ -19,7 +19,7 @@ let orange = [ settings.cg105_ffdfb6, ]; -let yellow = [ +export let yellow = [ settings.cg23_341a00, settings.cg34_4b2900, settings.cg44_693e00, @@ -32,7 +32,7 @@ let yellow = [ settings.cg90_f8e3a1, ]; -let gray = [ +export let gray = [ settings.cg8_0d1117, settings.cg13_161b22, settings.cg17_21262d, @@ -45,7 +45,7 @@ let gray = [ settings.cg84_f0f6fc, ]; -let blue = [ +export let blue = [ settings.cg6_051d4d, settings.cg7_0c2d6b, settings.cg9_0d419d, @@ -58,7 +58,7 @@ let blue = [ settings.cg72_cae8ff, ]; -let green = [ +export let green = [ settings.cg5_04260f, settings.cg4_033a16, settings.cg11_0f5323, @@ -71,7 +71,7 @@ let green = [ settings.cg63_aff5b4, ]; -let red = [ +export let red = [ settings.cg33_490202, settings.cg43_67060c, settings.cg56_8e1519, @@ -84,7 +84,7 @@ let red = [ settings.cg103_ffdcd7, ]; -let purple = [ +export let purple = [ settings.cg20_271052, settings.cg27_3c1e70, settings.cg35_553098, @@ -97,7 +97,7 @@ let purple = [ settings.cg82_eddeff, ]; -let pink = [ +export let pink = [ settings.cg30_42062a, settings.cg40_5e103e, settings.cg50_7d2457, @@ -110,7 +110,7 @@ let pink = [ settings.cg102_ffdaec, ]; -let coral = [ +export let coral = [ settings.cg31_460701, settings.cg42_640D04, settings.cg53_872012, @@ -123,7 +123,7 @@ let coral = [ settings.cg105_ffdfb6, ]; -let calendar = [ +export let calendar = [ settings.cg10_0e4429, settings.cg2_006d32, settings.cg19_26a641, @@ -225,9 +225,10 @@ export function updateAccent(color) { export function generateScheme(color, scheme, variation, distance) { let s = new ColorScheme(); - s.from_hex(chroma(color).hex()) + s.from_hex(chroma(color).hex().slice(-6)) .scheme(scheme) .variation(variation) + .add_complement(true) .distance(distance); return s.colors(); diff --git a/src/views/Options.tsx b/src/views/Options.tsx index b5df974..9162e65 100644 --- a/src/views/Options.tsx +++ b/src/views/Options.tsx @@ -1,7 +1,6 @@ import React from "react"; import "../assets/styles/App.css"; import Header from "../components/options/Header"; -import QuickSettings from "../components/popup/QuickSettings"; import "../methods/config/settings.js"; import { settings } from "../methods/config/settings"; import ChangeCard from "../components/options/ChangeCard"; @@ -31,7 +30,6 @@ export default function Options() {
-

hex-rgba converter

diff --git a/src/views/Popup.tsx b/src/views/Popup.tsx index 69ece72..024cfd1 100644 --- a/src/views/Popup.tsx +++ b/src/views/Popup.tsx @@ -3,13 +3,10 @@ import "../assets/styles/App.css"; import QuickChange from "../components/popup/QuickChange"; import Header from "../components/popup/Header"; -import QuickSettings from "../components/popup/QuickSettings"; - function Popup() { return (
-
); From b88a2b63cfc0beee9b13253049cb86f11b0f0f7b Mon Sep 17 00:00:00 2001 From: Jariel Que Date: Tue, 26 Jul 2022 17:14:35 +0800 Subject: [PATCH 2/5] docs: fix missing image --- docs/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/README.md b/docs/README.md index c92d908..34db678 100644 --- a/docs/README.md +++ b/docs/README.md @@ -12,7 +12,7 @@ [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)

From 40e2562e7b7d7557d4cd67377a5445d439d4c9b3 Mon Sep 17 00:00:00 2001 From: "Restyled.io" Date: Tue, 26 Jul 2022 09:14:53 +0000 Subject: [PATCH 3/5] Restyled by clang-format --- src/methods/helpers/scaleHelper.js | 61 +++++++++++------------------- 1 file changed, 22 insertions(+), 39 deletions(-) diff --git a/src/methods/helpers/scaleHelper.js b/src/methods/helpers/scaleHelper.js index 21df753..4db3c94 100644 --- a/src/methods/helpers/scaleHelper.js +++ b/src/methods/helpers/scaleHelper.js @@ -3,7 +3,7 @@ import ColorScheme from "color-scheme"; import * as settings from "../config/colorGroups.js"; -import { updateMultiple } from "./storageHelper.js"; +import {updateMultiple} from "./storageHelper.js"; // ----------- ASSIGNABLES ----------- export let orange = [ @@ -167,14 +167,11 @@ export function updateCalendar(color, saturate, scale) { } for (let i = 0; i < scale.length; i++) { - updateMultiple( - scale[i], - chroma(color) - .brighten(3) - .saturate(saturate) - .alpha((i + 1) * 0.2) - .hex() - ); + updateMultiple(scale[i], chroma(color) + .brighten(3) + .saturate(saturate) + .alpha((i + 1) * 0.2) + .hex()); } } @@ -197,22 +194,16 @@ export function updateSpecific(color, desaturate, saturate, scale) { for (let i = 0; i < scale.length; i++) { /^\d/.test(color.slice(-4)) - ? updateMultiple( - scale[i], - chroma(color) - .brighten(i * 0.4) - .saturate(saturate) - .desaturate(desaturate) - .hex() - ) - : updateMultiple( - scale[i], - chroma(color) - .darken(i * 0.4) - .saturate(saturate) - .desaturate(desaturate) - .hex() - ); + ? updateMultiple(scale[i], chroma(color) + .brighten(i * 0.4) + .saturate(saturate) + .desaturate(desaturate) + .hex()) + : updateMultiple(scale[i], chroma(color) + .darken(i * 0.4) + .saturate(saturate) + .desaturate(desaturate) + .hex()); } } @@ -226,10 +217,10 @@ export function updateAccent(color) { export function generateScheme(color, scheme, variation, distance) { let s = new ColorScheme(); s.from_hex(chroma(color).hex().slice(-6)) - .scheme(scheme) - .variation(variation) - .add_complement(true) - .distance(distance); + .scheme(scheme) + .variation(variation) + .add_complement(true) + .distance(distance); return s.colors(); } @@ -238,15 +229,7 @@ export function generateSaturation(color, setting) { let colors = []; for (let i = 0; i < 10; i++) { /^\d/.test(color.slice(-4)) - ? colors.push( - chroma(color) - .darken(i * 0.4) - .hex() - ) - : colors.push( - chroma(color) - .brighten(i * 0.4) - .hex() - ); + ? colors.push(chroma(color).darken(i * 0.4).hex()) + : colors.push(chroma(color).brighten(i * 0.4).hex()); } } From 405b3233b32d470310fdc7fcf6a3a7a2b964409a Mon Sep 17 00:00:00 2001 From: "Restyled.io" Date: Tue, 26 Jul 2022 09:14:54 +0000 Subject: [PATCH 4/5] Restyled by prettier --- src/methods/helpers/scaleHelper.js | 61 +++++++++++++++++++----------- 1 file changed, 39 insertions(+), 22 deletions(-) diff --git a/src/methods/helpers/scaleHelper.js b/src/methods/helpers/scaleHelper.js index 4db3c94..21df753 100644 --- a/src/methods/helpers/scaleHelper.js +++ b/src/methods/helpers/scaleHelper.js @@ -3,7 +3,7 @@ import ColorScheme from "color-scheme"; import * as settings from "../config/colorGroups.js"; -import {updateMultiple} from "./storageHelper.js"; +import { updateMultiple } from "./storageHelper.js"; // ----------- ASSIGNABLES ----------- export let orange = [ @@ -167,11 +167,14 @@ export function updateCalendar(color, saturate, scale) { } for (let i = 0; i < scale.length; i++) { - updateMultiple(scale[i], chroma(color) - .brighten(3) - .saturate(saturate) - .alpha((i + 1) * 0.2) - .hex()); + updateMultiple( + scale[i], + chroma(color) + .brighten(3) + .saturate(saturate) + .alpha((i + 1) * 0.2) + .hex() + ); } } @@ -194,16 +197,22 @@ export function updateSpecific(color, desaturate, saturate, scale) { for (let i = 0; i < scale.length; i++) { /^\d/.test(color.slice(-4)) - ? updateMultiple(scale[i], chroma(color) - .brighten(i * 0.4) - .saturate(saturate) - .desaturate(desaturate) - .hex()) - : updateMultiple(scale[i], chroma(color) - .darken(i * 0.4) - .saturate(saturate) - .desaturate(desaturate) - .hex()); + ? updateMultiple( + scale[i], + chroma(color) + .brighten(i * 0.4) + .saturate(saturate) + .desaturate(desaturate) + .hex() + ) + : updateMultiple( + scale[i], + chroma(color) + .darken(i * 0.4) + .saturate(saturate) + .desaturate(desaturate) + .hex() + ); } } @@ -217,10 +226,10 @@ export function updateAccent(color) { export function generateScheme(color, scheme, variation, distance) { let s = new ColorScheme(); s.from_hex(chroma(color).hex().slice(-6)) - .scheme(scheme) - .variation(variation) - .add_complement(true) - .distance(distance); + .scheme(scheme) + .variation(variation) + .add_complement(true) + .distance(distance); return s.colors(); } @@ -229,7 +238,15 @@ export function generateSaturation(color, setting) { let colors = []; for (let i = 0; i < 10; i++) { /^\d/.test(color.slice(-4)) - ? colors.push(chroma(color).darken(i * 0.4).hex()) - : colors.push(chroma(color).brighten(i * 0.4).hex()); + ? colors.push( + chroma(color) + .darken(i * 0.4) + .hex() + ) + : colors.push( + chroma(color) + .brighten(i * 0.4) + .hex() + ); } } From 593ce4d5f5e67bdc13eadbf104bc6e07bd48ef35 Mon Sep 17 00:00:00 2001 From: "Restyled.io" Date: Tue, 26 Jul 2022 09:14:56 +0000 Subject: [PATCH 5/5] Restyled by whitespace --- src/assets/images/pint.svg | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/assets/images/pint.svg b/src/assets/images/pint.svg index 9bfba44..18ff3d7 100644 --- a/src/assets/images/pint.svg +++ b/src/assets/images/pint.svg @@ -22,4 +22,4 @@ - \ No newline at end of file +