revamp: popup ui, scheme generation

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)
 <br>
 <br>
 

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;

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;
 }

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) {

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 (
-    <div className="flex flex-row rounded-lg mb-1 m-2 mx-3 p-1  justify-between items-center">
+    <div className="flex flex-row mb-2 px-4 p-1 justify-between items-center bg-[#161b22] h-[64px]">
       <div className="flex flex-row">
-        <img src={logo} className="flex-none w-12" alt="logo" />
-        <div className="flex-col p-1 text-white">
-          <p className="flex-1 self-center text-xl"> pint for github </p>
-          <p className="flex-1 self-center text-l">2.0-dev - simple mode</p>
+        <img src={logo} className="flex-none w-10" alt="logo" />
+        <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 mb-1 text-gray-400">
+            sign in to broadcast your palette
+          </p>
         </div>
       </div>
       <div>