Improved Colorization

Author: rstaib

website/gatsby-config.js

@@ -55,8 +55,8 @@ module.exports = {
           {
             resolve: `gatsby-remark-images`,
             options: {
-              maxWidth: 800,
-              quality: 90,
+              maxWidth: 1200,
+              quality: 100,
               backgroundColor: "transparent",
             },
           },

website/src/components/blog-article/blog-article-tags.tsx

@@ -43,7 +43,7 @@ const Tag = styled.li`
   margin: 0 5px 5px 0;
   border-radius: var(--border-radius);
   padding: 0;
-  background-color: var(--main-color);
+  background-color: var(--primary-color);
   font-size: 0.722em;
   letter-spacing: 0.05em;
   color: var(--text-color-contrast);

website/src/components/button.tsx

@@ -6,10 +6,10 @@ export const Button = styled.button`
   font-size: var(--font-size);
   color: var(--text-color-contrast);
 
-  background-color: var(--main-color);
+  background-color: var(--primary-color);
   transition: background-color 0.2s ease-in-out;
 
   &:hover {
-    background-color: var(--main-color-hover);
+    background-color: var(--secondary-color);
   }
 `;

website/src/components/mdx/copy.tsx

@@ -69,7 +69,7 @@ const ToastContainer = styled.div`
   transform: translateX(-50%);
   z-index: 9999;
 
-  background-color: var(--main-color);
+  background-color: var(--primary-color);
   box-shadow: 0px 3px 6px 0px #828282;
   padding: 20px;
   border-radius: var(--border-radius);

website/src/components/misc/global-style.tsx

@@ -26,8 +26,8 @@ export const GlobalLayoutStyle = createGlobalStyle`
 
 export const GlobalStyle = createGlobalStyle`
   :root {
-    --main-color: #3b4f74;//before: f40010;
-    --main-color-hover: #81a1e0;
+    --primary-color: #3b4f74;//before: f40010;
+    --secondary-color: #7989ab;
     --link-color: #b7020a;
     --text-color: #667;
     --heading-text-color: #334;

website/src/components/misc/page-elements.tsx

@@ -8,10 +8,10 @@ export const Intro = styled.header`
   align-items: center;
   padding: 25px 0;
   width: 100%;
-  background-color: var(--main-color);
+  background-color: var(--primary-color);
   background: linear-gradient(
     180deg,
-    var(--main-color) 70%,
+    var(--primary-color) 70%,
     #3d5f9f 100%
   ); //before: ff892a
 

website/src/components/misc/pagination.tsx

@@ -47,11 +47,11 @@ const Page = styled.li`
   margin: 0 5px;
   border-radius: var(--border-radius);
   padding: 0;
-  background-color: var(--main-color);
+  background-color: var(--primary-color);
 
   &.active,
   &:hover {
-    background-color: var(--main-color-hover);
+    background-color: var(--secondary-color);
   }
 `;
 

website/src/components/misc/search.tsx

@@ -191,11 +191,17 @@ const Container = styled.div`
 const SearchField = styled.input`
   border: 0;
   border-radius: var(--border-radius);
-  padding: 10px 15px;
   width: 100%;
+  padding: 10px 15px;
   font-family: "Roboto", sans-serif;
   font-size: 0.833em;
-  background-color: var(--text-color-contrast);
+  background-color: var(--secondary-color);
+  color: var(--text-color-contrast);
+
+  ::placeholder {
+    opacity: 0.7;
+    color: var(--text-color-contrast);
+  }
 `;
 
 interface HitComponentProps {
@@ -212,7 +218,7 @@ const HitsWrapper = styled.div<{ show: boolean }>`
   padding: 15px 20px;
   max-height: 80vh;
   overflow-y: initial;
-  background: white;
+  background: var(--text-color-contrast);
   box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.25);
 
   > * + * {
@@ -226,7 +232,7 @@ const HitsWrapper = styled.div<{ show: boolean }>`
     line-height: 1.667em;
 
     > a {
-      color: var(--main-color);
+      color: var(--primary-color);
 
       &:hover {
         color: var(--text-color);
@@ -251,7 +257,7 @@ const HitsWrapper = styled.div<{ show: boolean }>`
   mark {
     display: inline-block;
     padding: 3px 2px;
-    background: var(--main-color);
+    background: var(--primary-color);
     color: var(--text-color-contrast);
   }
 

website/src/components/structure/header.tsx

@@ -128,7 +128,7 @@ const Container = styled.header`
   z-index: 30;
   width: 100vw;
   height: 60px;
-  background-color: var(--main-color);
+  background-color: var(--primary-color);
   transition: box-shadow 0.2s ease-in-out;
 
   &.shadow {
@@ -217,7 +217,7 @@ const Navigation = styled.nav<{ open: boolean }>`
   flex: 1 1 auto;
   flex-direction: column;
   max-height: 100vh;
-  background-color: var(--main-color);
+  background-color: var(--primary-color);
   opacity: ${({ open }) => (open ? "1" : "0")};
   box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.25);
   transition: opacity 0.2s ease-in-out;
@@ -312,7 +312,7 @@ const NavLink = styled(Link)`
 
   &.active,
   &:hover {
-    background-color: var(--main-color-hover);
+    background-color: var(--secondary-color);
   }
 `;
 
@@ -354,7 +354,7 @@ const ToolLink = styled(Link)`
   }
 
   :hover > ${IconContainer} > svg {
-    fill: var(--main-color-hover);
+    fill: var(--secondary-color);
   }
 `;
 

website/src/components/support/support-card.tsx

@@ -50,10 +50,10 @@ const ContactUs = styled.a`
   font-weight: 600;
   border: 1px solid transparent;
   border-radius: 0.375rem;
-  background-color: var(--main-color);
+  background-color: var(--primary-color);
 
   :hover {
-    background-color: var(--main-color-hover);
+    background-color: var(--secondary-color);
   }
 `;