fix: button styles & missing translations

src/components/button.tsx

@@ -50,6 +50,9 @@ const ButtonStyled = styled.div`
         max-width: 20px;
         max-height: 20px;
         transition: filter 0.1s;
+    }
+
+    &:not(.noeffects) img {
         ${({ theme }) => theme.type === 'dark' && 'filter: invert();'}
     }
 

src/language/en-GB.json

@@ -3,6 +3,10 @@
     "about": "My name is Franek. I'm {%years%} years, {%months%} months and {%days%} days old.",
     "switch_theme": "Switch theme to {%theme%}",
     "broad_music_spectrum": "Yeah, I know, I listen to a broad spectrum of music",
+    "theme": {
+        "light": "light",
+        "dark": "dark"
+    },
     "headers": {
         "facts": "Some facts about me",
         "skills": "I can...",

src/language/en-US.json

@@ -3,6 +3,10 @@
     "about": "My name is Franek. I'm {%years%} years, {%months%} months and {%days%} days old.",
     "switch_theme": "Switch theme to {%theme%}",
     "broad_music_spectrum": "Yeah I know, I listen to a broad spectrum of music",
+    "theme": {
+        "light": "light",
+        "dark": "dark"
+    },
     "headers": {
         "facts": "Some facts about me",
         "skills": "I can...",
@@ -10,7 +14,7 @@
         "bands": "I like these bands/singers:"
     },
     "skills": [
-        "play keyboard/organ",
+        "play the keyboard/organ",
         "mess with PCs from software to hardware",
         "code various apps and scripts"
     ],
@@ -43,7 +47,7 @@
     "most_used_languages": "Languages that I use the most:",
     "favourite_tools": "My favourite tools...",
     "languages": {
-        "pl": "Polski",
+        "pl": "Polish",
         "en-US": "United States",
         "en-GB": "United Kingdom"
     }

src/language/pl-PL.json

@@ -3,6 +3,10 @@
     "about": "Nazywam się Franek. Mam {%years%} lat, {%months%} miesięcy i {%days%} dni.",
     "switch_theme": "Zmień motyw na {%theme%}",
     "broad_music_spectrum": "Tak, zdaję sobie sprawę z tego, że słucham szerokiego spektrum muzyki",
+    "theme": {
+        "light": "jasny",
+        "dark": "ciemny"
+    },
     "headers": {
         "facts": "Kilka faktów o mnie",
         "skills": "Potrafię...",
@@ -10,8 +14,8 @@
         "bands": "Lubię tych wykonawców:"
     },
     "skills": [
-        "grać na pianinie/organach",
+        "grać na keyboardzie/organach",
-        "majstrować przy komputerach — od oprogramowania po sprzęt",
+        "majstrować przy komputerach od oprogramowania po sprzęt",
         "tworzyć różne aplikacje i skrypty"
     ],
     "about_me": [

src/sections/about.tsx

@@ -16,7 +16,11 @@ const About: React.FC = () => {
         <p>{$.tr("about", age)}</p>
         {asCardStack([
             {
-                content: $.tr("switch_theme", { theme: theme.type === "light" ? "dark" : "light" }),
+                content: $.tr("switch_theme", {
+                    theme: $.tr(
+                        "theme." + (theme.type === "light" ? "dark" : "light")
+                    )
+                }),
                 icon: "/icons/" + (theme.type === "light" ? "moon" : "sun") + ".svg",
                 primary: theme.type === "light",
                 onClick: toggleTheme