Use brand colors in components (#157)

Co-authored-by: ltagliaferri <[email protected]>
sourcegraph · Aug 11, 2021 · b8d3393 · b8d3393
1 parent fa27418
commit b8d3393
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 18 deletions.
diff --git a/components/Footer/FooterStyles.ts b/components/Footer/FooterStyles.ts
@@ -83,7 +83,7 @@ export const StyledFooterColumnListLink = styled.a`
     text-decoration: none;
 
     :hover {
-        color: #6c757d;
+        color: #000;
     }
 `
 export const StyledFooterLogo = styled.img`
@@ -100,13 +100,16 @@ export const StyledSocialIconsContainer = styled.ul`
     margin: .25rem auto 0;
     padding-left: 0;
 ` 
-
 export const StyledFooterSocialLink = styled.a`
-    color: #0d6efd;
+    color: #6c757d;
     display: inline-block;
     font-size: .9rem;
     padding: .3rem;
     text-decoration: none;
+
+    :hover {
+        color: #000;
+    }
 `
 export const StyledFooterPostscriptWrapper = styled.div`
     display: flex;
@@ -126,7 +129,7 @@ export const StyledFooterPostscriptListItem = styled.li`
     font-size: 14px;
 `
 export const StyledFooterPostscriptLink = styled.a`
-    color: #0d6efd;
+    color: #5033e1;
     display: block;
     padding: 0 .375rem;
     text-decoration: none;

diff --git a/components/atoms/Button/ButtonStyles.ts b/components/atoms/Button/ButtonStyles.ts
@@ -4,7 +4,7 @@ export const StyledButton = styled.a`
     background-color: transparent;
     border-radius: .25rem;
     border: 1px solid transparent;
-    color: #212529;
+    color: #000;
     cursor: pointer;
     display: inline-block;
     font-size: 1rem;
@@ -22,8 +22,8 @@ export const StyledButton = styled.a`
 
     &.primary {
         color: #fff;
-        background-color: #0d6efd;
-        border-color: #0d6efd;
+        background-color: #5033e1;
+        border-color: #5033e1;
     }
 
     &.small {
@@ -38,12 +38,12 @@ export const StyledButton = styled.a`
     }
 
     &.outline-primary {
-        color: #0d6efd;
-        border-color: #0d6efd;
+        color: #5033e1;
+        border-color: #5033e1;
 
         :hover {
-            background-color: #0d6efd;
-            border-color: #0d6efd;
+            background-color: #5033e1;
+            border-color: #5033e1;
             color: #fff;
         }
 
@@ -54,7 +54,7 @@ export const StyledButton = styled.a`
 
     &.extra-small {
         color: #fff;
-        background-color: #0d6efd;
+        background-color: #5033e1;
         border-radius: .25rem;
         display: inline-block;
         font-size: .75em;
@@ -67,5 +67,11 @@ export const StyledButton = styled.a`
         text-align: center;
         white-space: nowrap;
         vertical-align: baseline;
+
+        :hover {
+            color: #5033e1;
+            background-color: #fff;
+            border-color: #5033e1;
+        }
     }
 `
diff --git a/components/atoms/CollectionView/CollectionViewStyles.ts b/components/atoms/CollectionView/CollectionViewStyles.ts
@@ -34,13 +34,13 @@ export const StyledCollectionList = styled.div`
 `
 export const StyledCollectionListItem = styled.a<Props>`
     background-color: ${props => props.isActive
-    ? '#cfe2ff;'
-    : '#fff;'}
+    ? '#edeafc'
+    : '#fff'};
     border: 1px solid rgba(0,0,0,.125);
     border-width: 0 0 1px;
     color: ${props => props.isActive
-    ? '#084298;'
-    : '#212529;'}
+    ? '#20145a'
+    : '#212529'};
     display: block;
     padding: .5rem 1rem;
     position: relative;

diff --git a/components/atoms/TocWrapper/TocWrapperStyles.ts b/components/atoms/TocWrapper/TocWrapperStyles.ts
@@ -28,8 +28,14 @@ export const StyledTocWrapper = styled.div`
             }
 
             a {
-                color: #0d6efd;
+                color: #6c757d;
+                opacity: .85;
                 text-decoration: none;
+
+                :hover {
+                    color: #000;
+                    opacity: 1;
+                }
             }
         }
     }

diff --git a/components/templates/ArticleTemplate/ArticleTemplateStyles.ts b/components/templates/ArticleTemplate/ArticleTemplateStyles.ts
@@ -33,7 +33,7 @@ export const StyledMarkdownWrapper = styled.div`
     }
 
     a {
-        color: #0d6efd;
+        color: #3826cc;
         text-decoration: none;
     }
-Original file line number
+Diff line change
@@ Expand Up / @@ -33,7 +33,7 @@ export const StyledMarkdownWrapper = styled.div` @@
         }
         a {
-            color: #0d6efd;
+            color: #3826cc;
             text-decoration: none;
         }
@@ Expand Down @@