feat: add renko icon and credits

README.md

@@ -25,7 +25,7 @@ Strimertül is a single executable app that provides the following:
 - Twitch bot for handling chat messages and providing custom commands
 - Polling-based loyalty system for rewards and community goals
 
-At strimertul's core is [Kilovolt](https://github.com/strimertul/kilovolt), a pub/sub key-value store accessible via websocket. You can access every functionality of strimertul through the Kilovolt API. Check [this repository](https://github.com/strimertul/kilovolt-clients) for a list of officially supported kilovolt clients (or submit your own). You should be able to easily build a client yourself by just creating a websocket connection and using the [Kilovolt protocol](https://github.com/strimertul/kilovolt/blob/main/PROTOCOL.md).
+At strimertül's core is [Kilovolt](https://github.com/strimertul/kilovolt), a pub/sub key-value store accessible via websocket. You can access every functionality of strimertul through the Kilovolt API. Check [this repository](https://github.com/strimertul/kilovolt-clients) for a list of officially supported kilovolt clients (or submit your own). You should be able to easily build a client yourself by just creating a websocket connection and using the [Kilovolt protocol](https://github.com/strimertul/kilovolt/blob/main/PROTOCOL.md).
 
 Check out the [project's wiki](https://github.com/strimertul/strimertul/wiki) for more information on how to use the API to interact with strimertul, or the `docs` folder for more technical informations.
 
@@ -39,6 +39,12 @@ To run in live development mode, run `wails dev` in the project directory. This
 
 To build a redistributable, production mode package, use `wails build`.
 
+## Credits
+
+- Renko, strimertül's mascot and app icon, was drawn by [Sonic_Chan]
+
+[Sonic_Chan]: https://twitter.com/Sonic__Chan
+
 ## License
 
 Kilovolt's code is based on Gorilla Websocket's server example, licensed under [BSD-2-Clause](https://github.com/gorilla/websocket/blob/master/LICENSE)

frontend/src/locale/en/translation.json

@@ -236,7 +236,9 @@
       "need-help": "Need help?",
       "need-help-p1": "If you need help, want to report a bug or have suggestions on how to make {{APPNAME}} better, please reach out via any of the following channels:",
       "license-header": "License",
-      "license-notice-strimertul": "{{APPNAME}} is licensed under <license>GNU Affero General Public License v3.0</license>"
+      "license-notice-strimertul": "{{APPNAME}} is licensed under <license>GNU Affero General Public License v3.0</license>",
+      "credits-header": "Credits",
+      "credits-renko": "Renko, {{APPNAME}}'s mascot and app icon, was drawn by <artist>Sonic_Chan</artist>"
     },
     "dashboard": {
       "twitch-status": "Twitch stream status",

frontend/src/ui/pages/ServerSettings.tsx

@@ -27,7 +27,7 @@ export default function ServerSettingsPage(): React.ReactElement {
 
   return (
     <PageContainer>
-      <PageHeader>
+      <PageHeader css={{ paddingBottom: '1rem' }}>
         <PageTitle>{t('pages.http.title')}</PageTitle>
       </PageHeader>
       <form

frontend/src/ui/pages/Strimertul.tsx

@@ -50,7 +50,7 @@ const LogoName = styled('h1', {
   fontWeight: 200,
   textAlign: 'left',
   '@medium': {
-    fontSize: '80pt',
+    fontSize: '60pt',
   },
   paddingBottom: '0.5rem',
 });
@@ -64,7 +64,7 @@ const SectionParagraph = styled('p', {
 const ChannelList = styled('ul', { listStyle: 'none', padding: 0, margin: 0 });
 const Channel = styled('li', {
   marginBottom: '1rem',
-  fontSize: '1.5rem',
+  fontSize: '1rem',
 });
 const ChannelLink = styled(BrowserLink, {
   textDecoration: 'none',
@@ -114,24 +114,41 @@ export default function StrimertulPage(): React.ReactElement {
       </PageHeader>
       <Section>
         <SectionHeader>{t('pages.strimertul.need-help')}</SectionHeader>
-        <SectionParagraph>
+        <SectionParagraph css={{ paddingBottom: 0 }}>
           {t('pages.strimertul.need-help-p1', { APPNAME })}
         </SectionParagraph>
         <ChannelList>
           <Channel>
             <ChannelLink href="https://github.com/strimertul/strimertul/issues">
-              <GitHubLogoIcon width={32} height={32} />
+              <GitHubLogoIcon width={24} height={24} />
               github.com/strimertul/strimertul/issues
             </ChannelLink>
           </Channel>
           <Channel>
             <ChannelLink href="https://twitter.com/ashkeelvt">
-              <TwitterLogoIcon width={32} height={32} />
+              <TwitterLogoIcon width={24} height={24} />
               twitter.com/AshKeelVT
             </ChannelLink>
           </Channel>
         </ChannelList>
       </Section>
+      <Section>
+        <SectionHeader>{t('pages.strimertul.credits-header')}</SectionHeader>
+        <SectionParagraph>
+          <Trans
+            t={t}
+            i18nKey="pages.strimertul.credits-renko"
+            values={{ APPNAME }}
+            components={{
+              artist: (
+                <BrowserLink href="https://twitter.com/Sonic__Chan">
+                  Sonic_Chan
+                </BrowserLink>
+              ),
+            }}
+          />
+        </SectionParagraph>
+      </Section>
       <Section>
         <SectionHeader>{t('pages.strimertul.license-header')}</SectionHeader>
         <SectionParagraph>

frontend/src/ui/theme/pages.ts

@@ -7,9 +7,7 @@ export const PageContainer = styled('div', {
   margin: '0 auto',
 });
 
-export const PageHeader = styled('header', {
-  marginBottom: '3rem',
-});
+export const PageHeader = styled('header', {});
 
 export const PageTitle = styled('h1', {
   fontSize: '25pt',