From 3dc0208a73b818b53e14308d76f52161984ff7b6 Mon Sep 17 00:00:00 2001
From: ajnart <ajnart@pm.me>
Date: Thu, 26 May 2022 20:07:54 +0200
Subject: [PATCH] :lipstick: Styling changes

---
 src/components/Settings/SettingsMenu.tsx      | 35 ++++++++++++++++++-
 src/components/layout/Footer.tsx              |  4 +--
 .../modules/calendar/MediaDisplay.tsx         |  5 +--
 3 files changed, 37 insertions(+), 7 deletions(-)

diff --git a/src/components/Settings/SettingsMenu.tsx b/src/components/Settings/SettingsMenu.tsx
index d0d57fd5a..e9aee494b 100644
--- a/src/components/Settings/SettingsMenu.tsx
+++ b/src/components/Settings/SettingsMenu.tsx
@@ -7,10 +7,12 @@ import {
   SegmentedControl,
   TextInput,
   Drawer,
+  Anchor,
 } from '@mantine/core';
 import { useColorScheme, useHotkeys } from '@mantine/hooks';
 import { useState } from 'react';
-import { Settings as SettingsIcon } from 'tabler-icons-react';
+import { BrandGithub, Settings as SettingsIcon } from 'tabler-icons-react';
+import { CURRENT_VERSION } from '../../../data/constants';
 import { useConfig } from '../../tools/state';
 import { ColorSchemeSwitch } from '../ColorSchemeToggle/ColorSchemeSwitch';
 import ConfigChanger from '../Config/ConfigChanger';
@@ -92,6 +94,37 @@ function SettingsMenu(props: any) {
       >
         tip: You can upload your config file by dragging and dropping it onto the page
       </Text>
+      <Group position="center" direction="row" mr="xs">
+        <Group spacing={0}>
+          <ActionIcon<'a'> component="a" href="https://github.com/ajnart/homarr" size="lg">
+            <BrandGithub size={18} />
+          </ActionIcon>
+          <Text
+            style={{
+              position: 'relative',
+              fontSize: '0.90rem',
+              color: 'gray',
+            }}
+          >
+            {CURRENT_VERSION}
+          </Text>
+        </Group>
+        <Text
+          style={{
+            fontSize: '0.90rem',
+            textAlign: 'center',
+            color: '#a0aec0',
+          }}
+        >
+          Made with ❤️ by @
+          <Anchor
+            href="https://github.com/ajnart"
+            style={{ color: 'inherit', fontStyle: 'inherit', fontSize: 'inherit' }}
+          >
+            ajnart
+          </Anchor>
+        </Text>
+      </Group>
     </Group>
   );
 }
diff --git a/src/components/layout/Footer.tsx b/src/components/layout/Footer.tsx
index 34c4cb595..1ecd33ceb 100644
--- a/src/components/layout/Footer.tsx
+++ b/src/components/layout/Footer.tsx
@@ -1,5 +1,5 @@
-import React, { useEffect, useState } from 'react';
-import { createStyles, Anchor, Footer as FooterComponent, useMantineTheme } from '@mantine/core';
+import React, { useEffect } from 'react';
+import { createStyles, Footer as FooterComponent } from '@mantine/core';
 import { showNotification } from '@mantine/notifications';
 import { CURRENT_VERSION, REPO_URL } from '../../../data/constants';
 
diff --git a/src/components/modules/calendar/MediaDisplay.tsx b/src/components/modules/calendar/MediaDisplay.tsx
index 9496ca002..bef585649 100644
--- a/src/components/modules/calendar/MediaDisplay.tsx
+++ b/src/components/modules/calendar/MediaDisplay.tsx
@@ -36,10 +36,7 @@ function MediaDisplay(props: { media: IMedia }) {
           <Group style={{ minWidth: 400 }}>
             <Title order={3}>{media.title}</Title>
             {media.imdbId && (
-              <Anchor
-                href={`https://www.imdb.com/title/${media.imdbId}`}
-                target="_blank"
-              >
+              <Anchor href={`https://www.imdb.com/title/${media.imdbId}`} target="_blank">
                 <ActionIcon>
                   <Link />
                 </ActionIcon>