Fix dark/light themes 🚀

chicio · chicio · commit d8b8fd236ae3 · 2021-04-22T15:38:30.000+02:00
diff --git a/graphql-types.ts b/graphql-types.ts
diff --git a/src/components/design-system/atoms/call-to-action-style.ts b/src/components/design-system/atoms/call-to-action-style.ts
@@ -3,7 +3,7 @@ import { css } from "styled-components";
 export const callToActionStyle = css`
   font-size: ${(props) => props.theme.fontSizes[3]};
   background-color: ${(props) => props.theme.light.accentColor};
-  color: ${(props) => props.theme.light.primaryColorText};
+  color: ${(props) => props.theme.light.textAbovePrimaryColor};
   padding: ${(props) => props.theme.spacing[2]};
   border: none;
   border-radius: 4px;
@@ -13,18 +13,18 @@ export const callToActionStyle = css`
 
   @media (prefers-color-scheme: dark) {
     background-color: ${(props) => props.theme.dark.accentColor};
-    color: ${(props) => props.theme.dark.primaryColorText};
+    color: ${(props) => props.theme.dark.textAbovePrimaryColor};
   }
 
-  color: ${(props) => props.theme.light.primaryColorText};
+  color: ${(props) => props.theme.light.textAbovePrimaryColor};
   text-decoration: none;
 
   &:hover {
-    color: ${(props) => props.theme.light.primaryColorText};
+    color: ${(props) => props.theme.light.textAbovePrimaryColor};
     text-decoration: none;
 
     @media (prefers-color-scheme: dark) {
-      color: ${(props) => props.theme.dark.primaryColorText};
+      color: ${(props) => props.theme.dark.textAbovePrimaryColor};
     }
   }
 `;
diff --git a/src/components/design-system/atoms/heading-style.ts b/src/components/design-system/atoms/heading-style.ts
@@ -1,7 +1,7 @@
 import { css } from "styled-components";
 
 export const headingStyle = css`
-  line-height: ${(props) => props.theme.lineHeight};
+  line-height: 1.4;
   color: ${(props) => props.theme.light.primaryTextColor};
   margin: ${(props) => props.theme.spacing[0]};
   font-weight: normal;
diff --git a/src/components/design-system/atoms/icon.tsx b/src/components/design-system/atoms/icon.tsx
@@ -3,6 +3,6 @@ import { StyledIconBase } from "@styled-icons/styled-icon";
 
 export const Icon = styled.div`
   ${StyledIconBase} {
-    color: ${(props) => props.theme.light.primaryColorText};
+    color: ${(props) => props.theme.light.textAbovePrimaryColor};
   }
 `;
diff --git a/src/components/design-system/atoms/list.tsx b/src/components/design-system/atoms/list.tsx
@@ -2,10 +2,10 @@ import styled from "styled-components";
 
 export const List = styled.ul`
   font-size: ${(props) => props.theme.fontSizes[2]};
-  color: ${(props) => props.theme.light.primaryColorText};
+  color: ${(props) => props.theme.light.primaryTextColor};
   line-height: ${(props) => props.theme.lineHeight};
 
   @media (prefers-color-scheme: dark) {
-    color: ${(props) => props.theme.dark.primaryColorText};
+    color: ${(props) => props.theme.dark.primaryTextColor};
   }
 `;
diff --git a/src/components/design-system/atoms/paragraph.tsx b/src/components/design-system/atoms/paragraph.tsx
@@ -2,11 +2,11 @@ import styled from "styled-components";
 
 export const Paragraph = styled.p`
   font-size: ${(props) => props.theme.fontSizes[2]};
-  color: ${(props) => props.theme.light.primaryColorText};
+  color: ${(props) => props.theme.light.primaryTextColor};
   margin: ${(props) => props.theme.spacing[0]};
   line-height: ${(props) => props.theme.lineHeight};
 
   @media (prefers-color-scheme: dark) {
-    color: ${(props) => props.theme.dark.primaryColorText};
+    color: ${(props) => props.theme.dark.primaryTextColor};
   }
 `;
diff --git a/src/components/design-system/molecules/comments.tsx b/src/components/design-system/molecules/comments.tsx
@@ -9,6 +9,10 @@ interface CommentsProps {
 
 const CommentsContainer = styled.div`
   margin-bottom: ${(props) => props.theme.spacing[7]};
+
+  #thread__container {
+    font-family: "Open Sans", Arial, sans-serif;
+  }
 `;
 
 export const Comments: React.FC<CommentsProps> = ({ url, title }) => (
diff --git a/src/components/design-system/molecules/menu-item.tsx b/src/components/design-system/molecules/menu-item.tsx
@@ -8,22 +8,22 @@ interface MenuItemProps {
 export const MenuItem = styled(Link)<MenuItemProps>`
   color: ${(props) =>
     props.selected
-      ? props.theme.light.primaryColorText
+      ? props.theme.light.textAbovePrimaryColor
       : props.theme.light.primaryColorLight};
   font-weight: 500;
   text-decoration: none;
   line-height: ${(props) => props.theme.lineHeight};
 
   &:hover,
   &:focus {
-    color: ${(props) => props.theme.light.primaryColorText};
+    color: ${(props) => props.theme.light.textAbovePrimaryColor};
     text-decoration: none;
   }
 
   @media (prefers-color-scheme: dark) {
     color: ${(props) =>
       props.selected
-        ? props.theme.dark.primaryColorText
+        ? props.theme.dark.textAbovePrimaryColor
         : props.theme.dark.primaryColorLight};
   }
 `;
diff --git a/src/components/design-system/molecules/post-authors.tsx b/src/components/design-system/molecules/post-authors.tsx
@@ -7,7 +7,7 @@ import styled from "styled-components";
 import { ContainerFluid } from "../atoms/container-fluid";
 import { GatsbyImage } from "gatsby-plugin-image";
 import { Paragraph } from "../atoms/paragraph";
-import { StandardInternalLink } from "../atoms/standard-internal-link";
+import { StandardExternalLink } from "../atoms/standard-external-link";
 
 const PostAuthorsContainer = styled(ContainerFluid)`
   padding: 0;
@@ -82,18 +82,19 @@ export const PostAuthors: React.FC<PostAuthorsProps> = ({
             />
             <Paragraph>
               {enableUrl && (
-                <StandardInternalLink
+                <StandardExternalLink
                   onClick={() =>
                     track(
                       tracking.action.open_blog_author,
                       trackingCategory,
                       trackingLabel
                     )
                   }
-                  to={blogAuthor.url}
+                  href={blogAuthor.url}
+                  target={"_blank"}
                 >
                   {blogAuthor.name}
-                </StandardInternalLink>
+                </StandardExternalLink>
               )}
               {!enableUrl && blogAuthor.name}
             </Paragraph>
diff --git a/src/components/design-system/organism/profile-presentation.tsx b/src/components/design-system/organism/profile-presentation.tsx
@@ -7,6 +7,22 @@ import styled from "styled-components";
 import { CallToActionInternal } from "../atoms/call-to-action-internal";
 import { Heading2 } from "../atoms/heading2";
 
+const Author = styled(Heading2)`
+  color: ${(props) => props.theme.light.textAbovePrimaryColor};
+
+  @media (prefers-color-scheme: dark) {
+    color: ${(props) => props.theme.dark.textAbovePrimaryColor};
+  }
+`;
+
+const Job = styled(Heading5)`
+  color: ${(props) => props.theme.light.textAbovePrimaryColor};
+
+  @media (prefers-color-scheme: dark) {
+    color: ${(props) => props.theme.dark.textAbovePrimaryColor};
+  }
+`;
+
 const SocialContactsContainer = styled.div`
   display: flex;
   justify-content: center;
@@ -59,8 +75,8 @@ export const ProfilePresentation: React.FC<ProfilePresentationProps> = ({
       src={"../../../images/authors/fabrizio-duroni.jpg"}
       alt={author}
     />
-    <Heading2>{author}</Heading2>
-    <Heading5>Software Developer</Heading5>
+    <Author>{author}</Author>
+    <Job>Software Developer</Job>
     <SocialContactsContainer>
       <SocialContacts
         trackingCategory={tracking.category.home}
diff --git a/src/components/design-system/organism/projects.tsx b/src/components/design-system/organism/projects.tsx
@@ -161,59 +161,6 @@ const ID3TagEditor: React.FC = () => (
   />
 );
 
-const RangeUISlider: React.FC = () => (
-  <Project
-    reverse={false}
-    name={"RangeUISlider"}
-    image={
-      <StaticImage
-        width={500}
-        height={500}
-        src={"../../../images/projects/range-ui-slider.png"}
-        alt={"RangeUISlider"}
-      />
-    }
-    description={
-      <>
-        <Paragraph>
-          A highly customizable iOS range selection slider, developed using
-          autolayout and completely customizable using IBDesignabled and
-          IBInspectable. Distributed as a custom framework and with{" "}
-          <StandardExternalLink href="https://cocoapods.org/pods/RangeUISlider">
-            cocoapods
-          </StandardExternalLink>
-          .
-        </Paragraph>
-        <List>
-          <li>Cocoa Touch</li>
-          <li>Custom UI Component</li>
-          <li>Autolayout</li>
-          <li>IBDesignable</li>
-          <li>IBInspectable</li>
-          <li>iOS</li>
-          <li>Swift</li>
-        </List>
-      </>
-    }
-    callToActions={[
-      {
-        label: "Github",
-        trackingCategory: tracking.category.home,
-        trackingAction: tracking.action.open_rangeuislider_github,
-        trackingLabel: tracking.label.body,
-        link: "https://github.com/chicio/RangeUISlider",
-      },
-      {
-        label: "Docs",
-        trackingCategory: tracking.category.home,
-        trackingAction: tracking.action.open_rangeuislider_doc,
-        trackingLabel: tracking.label.body,
-        link: "https://rangeuislider.fabrizioduroni.it",
-      },
-    ]}
-  />
-);
-
 const TabBarUIAction: React.FC = () => (
   <Project
     reverse={true}
@@ -254,8 +201,7 @@ const TabBarUIAction: React.FC = () => (
         trackingCategory: tracking.category.home,
         trackingAction: tracking.action.open_tabbaruiaction_doc,
         trackingLabel: tracking.label.body,
-        link:
-          "https://tabbaruiaction.fabrizioduroni.it",
+        link: "https://tabbaruiaction.fabrizioduroni.it",
       },
     ]}
   />
@@ -313,6 +259,59 @@ const Mp3Id3Tagger: React.FC = () => (
   />
 );
 
+const RangeUISlider: React.FC = () => (
+  <Project
+    reverse={true}
+    name={"RangeUISlider"}
+    image={
+      <StaticImage
+        width={500}
+        height={500}
+        src={"../../../images/projects/range-ui-slider.png"}
+        alt={"RangeUISlider"}
+      />
+    }
+    description={
+      <>
+        <Paragraph>
+          A highly customizable iOS range selection slider, developed using
+          autolayout and completely customizable using IBDesignabled and
+          IBInspectable. Distributed as a custom framework and with{" "}
+          <StandardExternalLink href="https://cocoapods.org/pods/RangeUISlider">
+            cocoapods
+          </StandardExternalLink>
+          .
+        </Paragraph>
+        <List>
+          <li>Cocoa Touch</li>
+          <li>Custom UI Component</li>
+          <li>Autolayout</li>
+          <li>IBDesignable</li>
+          <li>IBInspectable</li>
+          <li>iOS</li>
+          <li>Swift</li>
+        </List>
+      </>
+    }
+    callToActions={[
+      {
+        label: "Github",
+        trackingCategory: tracking.category.home,
+        trackingAction: tracking.action.open_rangeuislider_github,
+        trackingLabel: tracking.label.body,
+        link: "https://github.com/chicio/RangeUISlider",
+      },
+      {
+        label: "Docs",
+        trackingCategory: tracking.category.home,
+        trackingAction: tracking.action.open_rangeuislider_doc,
+        trackingLabel: tracking.label.body,
+        link: "https://rangeuislider.fabrizioduroni.it",
+      },
+    ]}
+  />
+);
+
 export const Projects: React.FC = () => (
   <>
     <SpectralClaraLuxTracer />
diff --git a/src/components/design-system/organism/social-contacts.tsx b/src/components/design-system/organism/social-contacts.tsx
@@ -66,7 +66,7 @@ export const SocialContacts: React.FC<SocialContactsProps> = ({
         icon={<Linkedin size={30} title={"Linkedin"} />}
       />
       <SocialContact
-        link={data.site!.siteMetadata!.contacts!.email!}
+        link={`mailto:${data.site!.siteMetadata!.contacts!.email!}`}
         trackingAction={tracking.action.send_mail}
         trackingCategory={trackingCategory}
         trackingLabel={trackingLabel}
diff --git a/src/components/post-content.tsx b/src/components/post-content.tsx
@@ -113,6 +113,10 @@ export const PostContentContainer = styled.div`
     line-height: ${(props) => props.theme.lineHeight};
   }
 
+  & .katex * {
+    font-size: ${(props) => props.theme.fontSizes[4]};
+  }
+
   & .emoji-icon {
     top: 4px;
   }
diff --git a/src/components/styled.d.ts b/src/components/styled.d.ts
@@ -5,7 +5,7 @@ interface Colors {
   primaryColorDark: string;
   primaryColorLight: string;
   generalBackground: string;
-  primaryColorText: string;
+  textAbovePrimaryColor: string;
   primaryTextColor: string;
   secondaryTextColor: string;
   accentColor: string;
diff --git a/src/components/theme.ts b/src/components/theme.ts
@@ -6,7 +6,7 @@ export const theme: DefaultTheme = {
     primaryColorDark: "#303F9F",
     primaryColorLight: "#DFDFF1",
     generalBackground: "#181918",
-    primaryColorText: "#FFFFFF",
+    textAbovePrimaryColor: "#FFFFFF",
     primaryTextColor: "#FAFAFA",
     secondaryTextColor: "#A6A6A6",
     accentColor: "#4fA7ff",
@@ -18,11 +18,11 @@ export const theme: DefaultTheme = {
     primaryColor: "#3F51B5",
     primaryColorDark: "#303F9F",
     primaryColorLight: "#DFDFF1",
-    primaryColorText: "#FFFFFF",
+    textAbovePrimaryColor: "#FFFFFF",
     primaryTextColor: "#151515",
     secondaryTextColor: "#575757",
     generalBackground: "#FAFAFA",
-    accentColor: "#0F67FF",
+    accentColor: "#4fA7ff",
     generalBackgroundLight: "#FFFFFF",
     boxShadowLight: "rgba(0, 0, 0, 0.2)",
     dividerColor: "#BDBDBD",
diff --git a/src/templates/post.tsx b/src/templates/post.tsx
@@ -11,6 +11,11 @@ import { BlogPage } from "../components/design-system/templates/blog-page";
 import { PostTags } from "../components/design-system/molecules/post-tags";
 import { Heading2 } from "../components/design-system/atoms/heading2";
 import { PostContent } from "../components/post-content";
+import styled from "styled-components";
+
+const PostTitle = styled(Heading2)`
+  margin: 0;
+`;
 
 const Post: React.FC<PageProps<PostQuery>> = ({ data, location }) => {
   const post = data.markdownRemark!;
@@ -30,9 +35,9 @@ const Post: React.FC<PageProps<PostQuery>> = ({ data, location }) => {
       trackingCategory={tracking.category.blog_post}
     >
       <div>
-        <Heading2 className="blog-post-title">
+        <PostTitle className="blog-post-title">
           {post.frontmatter!.title}
-        </Heading2>
+        </PostTitle>
         <PostAuthors
           authors={post.frontmatter!.authors!}
           trackingCategory={tracking.category.blog_post}
diff --git a/src/utils/blog-authors.ts b/src/utils/blog-authors.ts
@@ -7,7 +7,7 @@ export interface BlogAuthor {
 export const blogAuthors: { [authorName: string]: BlogAuthor } = {
   fabrizio_duroni: {
     name: "Fabrizio Duroni",
-    url: "https://www.fabrizioduroni.it",
+    url: "https://www.linkedin.com/in/fabrizio-duroni/",
     image: "fabrizio-duroni-small.jpg",
   },
   francesco_bonfadelli: {

Original file line number	Diff line number	Diff line change
`@@ -3,6 +3,6 @@ import { StyledIconBase } from "@styled-icons/styled-icon";`
`3`	`3`
`4`	`4`	export const Icon = styled.div`
`5`	`5`	`${StyledIconBase} {`
`6`		`- color: ${(props) => props.theme.light.primaryColorText};`
	`6`	`+ color: ${(props) => props.theme.light.textAbovePrimaryColor};`
`7`	`7`	`}`
`8`	`8`	`;