fix: favicon color issue (#1967)

tolgee · Oct 23, 2023 · 115836b · 115836b
1 parent a6fb271
commit 115836b
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 12 deletions.
diff --git a/webapp/public/favicon.svg b/webapp/public/favicon.svg
diff --git a/webapp/public/images/providers/tolgee-logo-light-in-context.svg b/webapp/public/images/providers/tolgee-logo-light-in-context.svg
diff --git a/webapp/src/component/layout/CompactFooter.tsx b/webapp/src/component/layout/CompactFooter.tsx
@@ -26,14 +26,20 @@ const StyledSocial = styled(Box)`
 `;
 
 const StyledLink = styled(Link)`
-  display: inline-flex;
+  display: grid;
   gap: 8px;
   align-items: center;
   color: ${({ theme }) => theme.palette.text.secondary};
   transition: color 50ms ease-in-out;
   &:hover {
     color: ${({ theme }) => theme.palette.text.primary};
   }
+  grid-template-columns: 25px auto;
+  justify-items: center;
+`;
+
+const StyledSocialText = styled('span')`
+  justify-self: start;
 `;
 
 export const CompactFooter = () => {
@@ -47,7 +53,7 @@ export const CompactFooter = () => {
             rel="noopener noreferrer"
           >
             <TwitterLogo />
-            <span>Twitter</span>
+            <StyledSocialText>Twitter</StyledSocialText>
           </StyledLink>
         </StyledSocial>
         <StyledSocial>
@@ -57,7 +63,7 @@ export const CompactFooter = () => {
             rel="noopener noreferrer"
           >
             <FacebookLogo />
-            <span>Facebook</span>
+            <StyledSocialText>Facebook</StyledSocialText>
           </StyledLink>
         </StyledSocial>
         <StyledSocial>
@@ -67,7 +73,7 @@ export const CompactFooter = () => {
             rel="noopener noreferrer"
           >
             <GitHubLogo />
-            <span>GitHub</span>
+            <StyledSocialText>GitHub</StyledSocialText>
           </StyledLink>
         </StyledSocial>
         <StyledSocial>
@@ -77,7 +83,7 @@ export const CompactFooter = () => {
             rel="noopener noreferrer"
           >
             <LinkedInLogo />
-            <span>LinkedIn</span>
+            <StyledSocialText>LinkedIn</StyledSocialText>
           </StyledLink>
         </StyledSocial>
         <StyledSocial>
@@ -87,7 +93,7 @@ export const CompactFooter = () => {
             rel="noopener noreferrer"
           >
             <SlackLogo />
-            <span>Slack</span>
+            <StyledSocialText>Slack</StyledSocialText>
           </StyledLink>
         </StyledSocial>
         <StyledSocial>
@@ -97,7 +103,7 @@ export const CompactFooter = () => {
             rel="noopener noreferrer"
           >
             <DiscussionsLogo />
-            <span>Discussions</span>
+            <StyledSocialText>Discussions</StyledSocialText>
           </StyledLink>
         </StyledSocial>
       </StyledContent>

diff --git a/webapp/src/component/layout/CompactView.tsx b/webapp/src/component/layout/CompactView.tsx
@@ -92,7 +92,7 @@ export const CompactView: React.FC<Props> = ({
       <GlobalStyles
         styles={(theme) => ({
           body: {
-            backgroundColor: theme.palette.emphasis[100] + ' !important',
+            backgroundColor: theme.palette.emphasis[50] + ' !important',
           },
         })}
       />