change colors to match tailwind2 color palate

neel1996 · neel1996 · commit 5ab982e52c8a · 2020-12-12T11:20:36.000Z
diff --git a/Dockerfile b/Dockerfile
@@ -11,6 +11,7 @@ RUN apk add git
 RUN cd ui/ && \
     npm install && \
     export NODE_ENV=production && \
+    npm install tailwindcss postcss autoprefixer && \
     npx tailwindcss build -o src/index.css -c src/tailwind.config.js && \
     npm run build && \
     mv build/ gitconvex-ui/ && \
diff --git a/ui/src/Components/DashBoard/Compare/BranchCompareComponent/BranchCommitLogChanges.js b/ui/src/Components/DashBoard/Compare/BranchCompareComponent/BranchCommitLogChanges.js
@@ -59,7 +59,7 @@ export default function BranchCommitLogChanges(props) {
         commitLogs.map((commit) => {
           return (
             <div
-              className="my-4 border-b p-3 border border-gray-400 shadow-md rounded"
+              className="my-4 border-b p-3 border border-gray-200 shadow-md rounded"
               key={commit.date}
             >
               <div className="flex items-center gap-10 text-xl font-sans font-semibold text-gray-800 border-b">
diff --git a/ui/src/Components/DashBoard/Compare/CommitCompareComponent/CommitCompareComponent.js b/ui/src/Components/DashBoard/Compare/CommitCompareComponent/CommitCompareComponent.js
@@ -141,7 +141,7 @@ export default function CommitCompareComponent(props) {
             <div className="font-sans font-semibold text-xl border-b border-dashed">
               Commit to Compare
             </div>
-            <div className="text-xl font-sans font-semibold p-3 rounded-lg shadow text-gray-600 border-orange-400 border-2 border-dashed">
+            <div className="text-xl font-sans font-semibold p-3 rounded-lg shadow text-gray-600 border-yellow-300 border-2 border-dashed">
               {compareCommit.substring(0, 7)}
             </div>
             <div
diff --git a/ui/src/Components/DashBoard/Compare/CommitCompareComponent/CommitLogCardComponent.js b/ui/src/Components/DashBoard/Compare/CommitCompareComponent/CommitLogCardComponent.js
@@ -35,7 +35,7 @@ export default function CommitLogCardComponent(props) {
         <div className="shadow border rounded text-sm p-2 bg-indigo-100 font-mono font-semibold text-indigo-800">
           #{item.hash.substring(0, 7)}
         </div>
-        <div className="my-2 shadow border rounded text-sm p-2 bg-orange-100 font-sans font-semibold">
+        <div className="my-2 shadow border rounded text-sm p-2 bg-yellow-50 font-sans font-semibold">
           {relativeCommitTimeCalculator(item.commitTime)}
         </div>
       </div>
diff --git a/ui/src/Components/DashBoard/DashboardPaneComponents/LeftPane.js b/ui/src/Components/DashBoard/DashboardPaneComponents/LeftPane.js
@@ -17,7 +17,7 @@ export default function LeftPane(props) {
       icon: (
         <FontAwesomeIcon
           icon={["far", "folder"]}
-          className="text-3xl text-gray-600"
+          className="text-3xl text-gray-500"
         ></FontAwesomeIcon>
       ),
       label: "Repositories",
@@ -27,7 +27,7 @@ export default function LeftPane(props) {
       icon: (
         <FontAwesomeIcon
           icon={["fas", "object-group"]}
-          className="text-3xl text-gray-600"
+          className="text-3xl text-gray-500"
         ></FontAwesomeIcon>
       ),
       label: "Compare",
@@ -37,7 +37,7 @@ export default function LeftPane(props) {
       icon: (
         <FontAwesomeIcon
           icon={["fas", "cog"]}
-          className="text-3xl text-gray-600"
+          className="text-3xl text-gray-500"
         ></FontAwesomeIcon>
       ),
       label: "Settings",
@@ -47,7 +47,7 @@ export default function LeftPane(props) {
       icon: (
         <FontAwesomeIcon
           icon={["far", "question-circle"]}
-          className="text-3xl text-gray-600"
+          className="text-3xl text-gray-500"
         ></FontAwesomeIcon>
       ),
       label: "Help",
@@ -75,7 +75,7 @@ export default function LeftPane(props) {
             <NavLink
               to={`${entry.link}`}
               exact
-              activeClassName="bg-gray-300"
+              activeClassName="bg-gray-200"
               className="menu--link xl:justify-between lg:justify-between md:justify-center sm:justify-center justify-center xl:my-0 lg:my-0 md:my-6 sm:my-6 my-6"
               key={entry.label}
             >
diff --git a/ui/src/Components/DashBoard/Help/Help.js b/ui/src/Components/DashBoard/Help/Help.js
@@ -57,7 +57,7 @@ export default function Help() {
       label: "Gitconvex react project",
       link: "https://github.com/neel1996/gitconvex-ui",
       icon: ["fab", "react"],
-      color: ["bg-blue-500"],
+      color: ["bg-blue-400"],
       ind: "",
     },
     {
@@ -250,7 +250,7 @@ export default function Help() {
                 <div className="text-xl text-gray-800 text-left">
                   New update v{availableUpdate} available.
                 </div>
-                <div className="p-4 rounded-lg my-2 text-lg font-sans text-center bg-pink-600 text-white">
+                <div className="p-4 rounded-lg my-2 text-lg font-sans text-center bg-pink-500 text-white">
                   <a
                     href={`https://github.com/neel1996/gitconvex/releases/tag/${availableUpdate}`}
                     target="_blank"
@@ -265,7 +265,7 @@ export default function Help() {
         ) : null}
 
         <div
-          className="bg-indigo-500 shadow-lg w-20 h-20 rounded-full text-center cursor-pointer hover:bg-indigo-400 border-8 border-indigo-200"
+          className="bg-indigo-400 shadow-lg w-20 h-20 rounded-full text-center cursor-pointer hover:bg-indigo-300 border-8 border-indigo-200"
           onClick={() => {
             checkUpdateHandler();
           }}
diff --git a/ui/src/Components/DashBoard/Repository/GitComponents/GitDiffViewComponent.js b/ui/src/Components/DashBoard/Repository/GitComponents/GitDiffViewComponent.js
@@ -119,7 +119,7 @@ export default function GitDiffViewComponent() {
           changedFiles.map((entry) => {
             if (entry && entry.split(",")[0] === "M") {
               let fileEntry = entry.split(",")[1];
-              const styleSelector = " bg-indigo-100 border-b border-indigo-400";
+              const styleSelector = " bg-indigo-100 border-b border-indigo-300";
               return (
                 <div
                   className={`p-2 text-sm break-words hover:bg-indigo-100 cursor-pointer ${
@@ -262,10 +262,10 @@ export default function GitDiffViewComponent() {
         if (line[0] && line[0] === "+") {
           return (
             <div
-              className="git-diff--codeview--change bg-green-200"
+              className="git-diff--codeview--change bg-green-100"
               key={`${line}-${uuidv4()}`}
             >
-              <div className="git-diff--codeview--linenumber border-green-500 text-green-500">
+              <div className="git-diff--codeview--linenumber border-green-400 text-green-500">
                 {++lineCounter}
               </div>
               <pre className="w-5/6 mx-2">
@@ -284,10 +284,10 @@ export default function GitDiffViewComponent() {
         } else if (line[0] && line[0] === "-") {
           return (
             <div
-              className="git-diff--codeview--change bg-red-200"
+              className="git-diff--codeview--change bg-red-100"
               key={`${line}-${uuidv4()}`}
             >
-              <div className="git-diff--codeview--linenumber border-red-500 text-red-500">
+              <div className="git-diff--codeview--linenumber border-red-400 text-red-400">
                 -
               </div>
               <pre className="w-5/6 mx-2">
diff --git a/ui/src/Components/DashBoard/Repository/GitComponents/GitOperation/CommitComponent.js b/ui/src/Components/DashBoard/Repository/GitComponents/GitOperation/CommitComponent.js
@@ -119,7 +119,7 @@ export default function CommitComponent(props) {
               </div>
               <div className="text-xl my-4">Commit Message</div>
               {commitMessageWarning ? (
-                <div className="font-sans font-semibold italic p-2 border-b border-dotted border-orange-500 text-yellow-600">
+                <div className="font-sans font-semibold italic p-2 border-b border-dotted border-yellow-400 text-yellow-600">
                   <span role="img" aria-label="suggestion">
                     💡
                   </span>
diff --git a/ui/src/Components/DashBoard/Repository/GitComponents/GitOperation/GitOperationComponent.js b/ui/src/Components/DashBoard/Repository/GitComponents/GitOperation/GitOperationComponent.js
@@ -160,7 +160,7 @@ export default function GitOperationComponent(props) {
     let statusPill = (status) => {
       if (status === "M") {
         return (
-          <div className="git-ops--file--status text-yellow-700 border-yellow-500 ">
+          <div className="git-ops--file--status text-yellow-400 border-yellow-400 ">
             Modified
           </div>
         );
diff --git a/ui/src/Components/DashBoard/Repository/GitComponents/GitTrackedComponent.js b/ui/src/Components/DashBoard/Repository/GitComponents/GitTrackedComponent.js
@@ -129,7 +129,7 @@ export default function GitTrackedComponent(props) {
         var styleSelector = "p-1 ";
         switch (flag) {
           case "M":
-            styleSelector += "text-yellow-900 bg-yellow-200";
+            styleSelector += "text-yellow-900 bg-yellow-100";
             modifiedArtifacts.push(
               <div className="git-tracked--changes" key={name}>
                 <div className={`${styleSelector} w-11/12 break-all`}>
@@ -247,9 +247,9 @@ export default function GitTrackedComponent(props) {
             let styleSelector = "git-tracked--menu-default ";
             if (item === topMenuItemState) {
               styleSelector +=
-                "bg-blue-100 text-blue-800 border-b border-blue-700";
+                "bg-blue-100 text-blue-700 border-b border-blue-600";
             } else {
-              styleSelector += "bg-blue-600 text-white";
+              styleSelector += "bg-blue-500 text-white";
             }
             return (
               <div
diff --git a/ui/src/Components/DashBoard/Repository/RepoComponents/RepoDetails/RepoDetailBackdrop/AddRemoteRepoComponent.js b/ui/src/Components/DashBoard/Repository/RepoComponents/RepoDetails/RepoDetailBackdrop/AddRemoteRepoComponent.js
@@ -108,7 +108,7 @@ export default function AddRemoteRepoComponent({ repoId }) {
       </div>
       {paramMissing
         ? statusPillComponent(
-            "orange",
+            "yellow",
             "One or more required parameters are empty!"
           )
         : null}
diff --git a/ui/src/Components/DashBoard/Repository/RepoComponents/RepoDetails/RepoDetailBackdrop/BranchListComponent.js b/ui/src/Components/DashBoard/Repository/RepoComponents/RepoDetails/RepoDetailBackdrop/BranchListComponent.js
@@ -308,7 +308,7 @@ export default function BranchListComponent({ repoId, currentBranch }) {
                           Active
                         </div>
                       ) : (
-                        <div className="list-area--branches--pill bg-orange-200 border-orange-800">
+                        <div className="list-area--branches--pill bg-yellow-100 border-yellow-700">
                           Remote
                         </div>
                       )}
diff --git a/ui/src/Components/DashBoard/Repository/RepoComponents/RepoDetails/RepoDetailBackdrop/CodeFileViewComponent.js b/ui/src/Components/DashBoard/Repository/RepoComponents/RepoDetails/RepoDetailBackdrop/CodeFileViewComponent.js
@@ -137,8 +137,8 @@ export default function CodeFileViewComponent(props) {
                     : null}
                   {numberOfLines
                     ? topPanePills("Lines", numberOfLines, {
-                        text: "text-orange-500",
-                        bg: "bg-orange-200",
+                        text: "text-yellow-400",
+                        bg: "bg-yellow-100",
                       })
                     : null}
                 </div>
diff --git a/ui/src/Components/DashBoard/Repository/RepoComponents/RepoDetails/RepoDetailBackdrop/CommitLogComponent.js b/ui/src/Components/DashBoard/Repository/RepoComponents/RepoDetails/RepoDetailBackdrop/CommitLogComponent.js
@@ -275,7 +275,7 @@ export default function RepositoryCommitLogComponent(props) {
               {message}
             </div>
             {searchWarning ? (
-              <div className="my-4 mx-auto rounded shadow p-4 text-center font-sans text-orange-900 font-light bg-orange-100 border-b-4  border-dashed border-orange-300 text-md">
+              <div className="my-4 mx-auto rounded shadow p-4 text-center font-sans text-yellow-800 font-light bg-yellow-50 border-b-4  border-dashed border-yellow-200 text-md">
                 Make sure if you are searching with the right category and the
                 right search query
               </div>
@@ -298,7 +298,7 @@ export default function RepositoryCommitLogComponent(props) {
           defaultValue="default-search"
           id="searchOption"
           ref={searchOptionRef}
-          className="w-1/4 flex p-4 items-center bg-indigo-500 text-white cursor-pointer rounded-l-md text-lg font-sans font-semibold outline-none"
+          className="w-1/4 flex p-4 items-center bg-indigo-400 text-white cursor-pointer rounded-l-md text-lg font-sans font-semibold outline-none"
         >
           <option value="default-search" hidden disabled>
             Search for...
diff --git a/ui/src/Components/DashBoard/Repository/RepoComponents/RepoDetails/RepoDetailBackdrop/CommitLogFileCard.js b/ui/src/Components/DashBoard/Repository/RepoComponents/RepoDetails/RepoDetailBackdrop/CommitLogFileCard.js
@@ -74,7 +74,7 @@ export default function CommitLogFileCard({
             switch (type) {
               case "M":
                 iconSelector = "plus-square";
-                colorSelector = "text-yellow-600";
+                colorSelector = "text-yellow-400";
                 break;
               case "A":
                 iconSelector = "plus-square";
diff --git a/ui/src/Components/DashBoard/Repository/RepoComponents/RepoDetails/RepoInfoComponent.js b/ui/src/Components/DashBoard/Repository/RepoComponents/RepoDetails/RepoInfoComponent.js
@@ -6,11 +6,11 @@ export default function RepoInfoComponent(props) {
   return (
     <div className="repo-info">
       <div className="repo-info--label">Repo Name</div>
-      <div className="bg-blue-100 text-blue-900 border-blue-200 repo-info--data">
+      <div className="bg-blue-100 text-blue-900 border-blue-200 repo-info--data rounded shadow">
         {gitRepoName}
       </div>
       <div className="repo-info--label">Active Branch</div>
-      <div className="bg-orange-200 text-orange-900 border-orange-400 repo-info--data">
+      <div className="bg-yellow-50 text-yellow-800 border-yellow-300 repo-info--data rounded shadow">
         {gitCurrentBranch}
       </div>
     </div>
diff --git a/ui/src/Components/DashBoard/Repository/RepoComponents/RepoDetails/RepoRightPaneComponent.js b/ui/src/Components/DashBoard/Repository/RepoComponents/RepoDetails/RepoRightPaneComponent.js
@@ -106,15 +106,15 @@ export default function RepoRightPaneComponent(props) {
 
             <div className="flex justify-around mx-auto mt-4">
               <div
-                className="w-1/3 rounded text-center cursor-pointer p-2 bg-indigo-500 hover:bg-indigo-600 text-white font-sans nowrap"
+                className="w-1/3 rounded text-center cursor-pointer p-2 bg-indigo-400 hover:bg-indigo-500 text-white font-sans nowrap"
                 onClick={() => {
                   actionTrigger(actionType.FETCH);
                 }}
               >
                 Fetch from remote
               </div>
               <div
-                className="w-1/3 text-center cursor-pointer rounded text-white p-2 bg-blue-500 hover:bg-blue-600 font-sans"
+                className="w-1/3 text-center cursor-pointer rounded text-white p-2 bg-blue-400 hover:bg-blue-500 font-sans"
                 onClick={() => {
                   actionTrigger(actionType.PULL);
                 }}
diff --git a/ui/src/Components/DashBoard/Repository/RepoComponents/RepositoryAction.js b/ui/src/Components/DashBoard/Repository/RepoComponents/RepositoryAction.js
@@ -179,7 +179,7 @@ export default function RepositoryAction() {
         <div className="flex items-center">
           <div className="select--label">Choose saved repository</div>
           <select
-            className="top-pane--select bg-green-100 text-green-700 border-green-400"
+            className="top-pane--select bg-green-50 text-green-700 border-green-400"
             defaultValue={"checked"}
             onClick={() => {
               setBranchError(false);
@@ -222,7 +222,7 @@ export default function RepositoryAction() {
             <select
               value={activeBranch}
               defaultChecked={activeBranch}
-              className="top-pane--select bg-indigo-100 border-indigo-400 text-indigo-700"
+              className="top-pane--select bg-indigo-100 border-indigo-300 text-indigo-700"
               disabled={activeBranch ? false : true}
               onChange={(event) => {
                 event.persist();
diff --git a/ui/src/Components/styles/RepositoryDetails.css b/ui/src/Components/styles/RepositoryDetails.css
@@ -212,6 +212,11 @@
   cursor: pointer
 }
 
+.commitlogs--content:hover{
+  background-color: #fcc972;
+  box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.05));
+}
+
 .repo-rightpane {
   display: block;
   border-radius: 0.375rem;
diff --git a/ui/src/tailwind.config.js b/ui/src/tailwind.config.js
@@ -3,7 +3,17 @@ module.exports = {
   purge: {
     content: ["./src/**/*.html", "./src/**/*.js"],
     options: {
-      whitelist: ["hover:bg-blue-500", "hover:bg-green-500", "hover:bg-pink-500"],
+      whitelist: [
+        "hover:bg-blue-500",
+        "hover:bg-green-500",
+        "hover:bg-pink-500",
+        "border-yellow-900",
+        "bg-yellow-200",
+        "border-red-900",
+        "bg-red-200",
+        "border-green-900",
+        "bg-green-200",
+      ],
     },
   },
   theme: {},

Original file line number	Diff line number	Diff line change
`@@ -59,7 +59,7 @@ export default function BranchCommitLogChanges(props) {`
`59`	`59`	`commitLogs.map((commit) => {`
`60`	`60`	`return (`
`61`	`61`	`<div`
`62`		`- className="my-4 border-b p-3 border border-gray-400 shadow-md rounded"`
	`62`	`+ className="my-4 border-b p-3 border border-gray-200 shadow-md rounded"`
`63`	`63`	`key={commit.date}`
`64`	`64`	`>`
`65`	`65`	`<div className="flex items-center gap-10 text-xl font-sans font-semibold text-gray-800 border-b">`