feat: update checker page

src/assets/scss/components/_button.scss

@@ -24,6 +24,16 @@
 		}
 	}
 
+	&.btn-check {
+		background: #304810;
+		color: $white;
+
+		&:hover {
+			background: getColor('white.base');
+			color: getColor('black.base');
+		}
+	}
+
 	&.btn-link {
 		background: transparent;
 		color: getColor('black.base');

src/assets/scss/components/_card.scss

@@ -35,6 +35,14 @@
 	flex: 0 0 50%;
 }
 
+.checker-card {
+	color: $white;
+	background: linear-gradient(309.99deg, rgba(21, 23, 18, 0.6) -30.34%, rgba(21, 23, 18, 0.42) 99.87%);
+	border: 1px solid;
+	border-image-source: linear-gradient(280.47deg, rgba(48, 72, 16, 0.7) -6.26%, rgba(48, 72, 16, 0.3) 102.92%);
+	box-shadow: 0px 4px 4px 0px rgba(255, 228, 111, 0.25);
+}
+
 @media (min-width: 768px) {
 	.stat-cards {
 		flex-direction: column;

src/assets/scss/components/_gitaccount.scss

@@ -1,37 +1,39 @@
-.gitaccount{
+.gitaccount {
     display: flex;
     flex-direction: row;
     align-items: flex-start;
     justify-content: center;
-    @include mqmax('lg'){
+
+    @include mqmax('lg') {
         flex-direction: column;
         align-items: center;
     }
-    @include e(profile){
-        width:auto;
+
+    @include e(profile) {
+        width: auto;
         display: block;
     }
-    
-    @include e(content){
+
+    @include e(content) {
         max-width: 700px;
-        max-height:652px;
+        max-height: 652px;
         overflow-y: scroll;
         display: block;
 
-        @include mqmax('sm'){
+        @include mqmax('sm') {
             max-width: 100%;
-            margin:0 20px;
+            margin: 0 20px;
         }
 
-        @include mqmax('md'){
+        @include mqmax('md') {
             max-width: 100%;
-            margin:0 20px;
+            margin: 0 20px;
         }
 
     }
 
-    @include e(commit){
+    @include e(commit) {
         background-color: getColor('grey.20');
-        
+
     }
 }

src/components/SiteDetails.js

@@ -12,10 +12,10 @@ const checklistItems = [
  */
 const SiteDetails = () => (
   <div className="md:py-4 mb-6">
-    <div className="rounded mx-auto shadow w-3/4 sm:w-1/2 card card--bg-yellow">
+    <div className="rounded mx-auto shadow w-3/4 sm:w-1/2 checker-card">
       <div className="px-6 py-4">
         <div className="font-bold mb-4">
-          <p className="leading-normal text-lg mb-1 card__title">
+          <p className="leading-normal text-lg mb-1">
             Frogtoberfest is a spin-off of Hacktoberfest; a month-long Open Source contribution challenge for open
             source enthusiast.
           </p>
@@ -25,7 +25,7 @@ const SiteDetails = () => (
             <li className="flex leading-tight items-center mb-3" key={index}>
               <div className="circle">
               </div>
-              <span className="text-grey-darker text-m ml-2 card__text">{item}</span>
+              <span className="text-m ml-2">{item}</span>
             </li>
           ))}
         </ul>

src/components/UsernameForm/CheckButton.js

@@ -3,8 +3,11 @@ import React from 'react';
 const CheckButton = () => (
   <button
     type="submit"
-    style={{ outline: 'none' /* Tailwind's outline-none class doesn't remove default outlines */ }}
-    className="btn btn-primary border-radius-tbl-none"
+    style={{
+      outline: 'none'
+      /* Tailwind's outline-none class doesn't remove default outlines */
+    }}
+    className="btn btn-check border-radius-tbl-none"
   >
     Check
   </button>

src/components/UsernameForm/UsernameInput.js

@@ -6,15 +6,17 @@ const UsernameInput = ({ value, onChange }) => (
     type="text"
     name="username"
     aria-label="GitHub username"
-    placeholder="GitHub username"
+    placeholder="Search GitHub username"
     value={value}
     onChange={onChange}
     spellCheck="false"
     autoCapitalize="none"
     autoCorrect="off"
     autoComplete="off"
-    style={{ outline: 'none' }}
-    className="bn br--left leading-tight rounded-l flex-auto border-2 border-blue-lighter focus:border-blue-light border-r-0 text-grey-darkest"
+    style={{
+      outline: 'none', background: '#15171226', border: '1px solid #15171233'
+    }}
+    className="bn br--left leading-tight rounded-l flex-auto border-2"
   />
 );
 

src/pages/User/components/PullRequests/UserInfo/MotivationalMessage/index.js

@@ -11,7 +11,7 @@ const MotivationalMessage = ({ pullRequestCount, otherReposCount }) => {
     message = 'An error occured.';
   }
 
-  return <p className="font-small text-white-darker text-md m-3">{message}</p>;
+  return <p className="font-small text-black text-md m-3">{message}</p>;
 };
 
 MotivationalMessage.propTypes = {

src/pages/User/components/PullRequests/UserInfo/PullRequestCount.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 const PullRequestCount = ({ pullRequestCount, pullRequestAmount }) => (
-  <span className="block rounded white fs-32 text-primary">
+  <span className="block rounded white fs-32 text-black">
     {pullRequestCount}/{pullRequestAmount}
   </span>
 );

src/pages/User/components/PullRequests/UserInfo/ResultMessage/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-const ResultMessage = ({ message }) => <h3 className="my-1 font-light text-white fs-12">{message}</h3>;
+const ResultMessage = ({ message }) => <h3 className="my-1 font-light text-black fs-12">{message}</h3>;
 
 ResultMessage.propTypes = {
   message: PropTypes.string.isRequired