add MyButton version to the footer (#22)

openscilab · Jun 28, 2024 · ec7376b · ec7376b
1 parent 5257d01
commit ec7376b
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 31 deletions.
diff --git a/src/App/Config/constants.ts b/src/App/Config/constants.ts
@@ -3,6 +3,7 @@ const BaseConfig = {
 	SERVER: '<SERVER_ADDRESS>',
 	APP_NAME: '<APP_NAME>',
 	APP_SHORT_NAME: '<APP_SHORT_NAME>',
+	VERSION: 0.1,
 };
 
 const LOCAL = {

diff --git a/src/Views/Layout/Footer/index.scss b/src/Views/Layout/Footer/index.scss
@@ -1,5 +1,5 @@
 .footer-layout {
-	@apply bg-white bg-opacity-30 flex-center py-4 z-10 backdrop-filter backdrop-blur-md shadow-light md:fixed bottom-0 w-full;
+	@apply bg-white bg-opacity-30 flex-center flex-col pt-4 pb-2 z-10 backdrop-filter backdrop-blur-md shadow-light md:fixed bottom-0 w-full;
 
 	-webkit-backdrop-filter: blur(12px);
 	backdrop-filter: blur(12px);
@@ -9,34 +9,41 @@
 		width: contain;
 	}
 
-	.social-links {
-		@apply flex-center text-gray-700;
+	.about-mybutton {
+		@apply flex-center;
+		.social-links {
+			@apply flex;
 
-		a {
-			@apply transition-all;
-			&:hover {
-				scale: 1.05;
+			a {
+				@apply transition-all;
+				&:hover {
+					scale: 1.05;
 
-				.fa-icon {
-					@apply bg-gray-900;
+					.fa-icon {
+						@apply bg-gray-900;
+					}
+				}
+				&:not(:last-of-type) {
+					@apply mr-2;
 				}
 			}
-			&:not(:last-of-type) {
-				@apply mr-2;
-			}
-		}
 
-		.social-icon {
-			@apply p-1 rounded-full bg-gray-500 transition-colors;
-			width: 1.6rem;
-			height: 1.6rem;
-			padding: 0.3rem;
+			.social-icon {
+				@apply p-1 rounded-full bg-primary bg-opacity-80 transition-colors;
+				width: 1.6rem;
+				height: 1.6rem;
+				padding: 0.3rem;
 
-			fill: white;
+				fill: white;
+			}
+		}
+		.empowered {
+			font-size: 0.8rem;
+			@apply text-gray-600 hover:text-gray-900 font-medium transition-colors mr-2;
 		}
 	}
-
-	.empowered {
-		@apply mr-5 text-xs text-gray-500 hover:text-gray-900 transition-colors;
+	.version {
+		font-size: 0.6rem;
+		@apply text-xs text-gray-500 mt-1;
 	}
 }
diff --git a/src/Views/Layout/Footer/index.tsx b/src/Views/Layout/Footer/index.tsx
@@ -1,21 +1,25 @@
 import './index.scss';
 import { ReactComponent as Github } from '@assets/icons/github.svg';
 import { ReactComponent as Discord } from '@assets/icons/discord.svg';
+import { CONFIG } from '@src/App/Config/constants';
 
 const Footer = () => {
 	return (
 		<div className='footer-layout'>
-			<a href='https://openscilab.com' target='_blank' rel='noreferrer' className='empowered'>
-				Empowered by OSL team
-			</a>
-			<div className='social-links'>
-				<a href='https://discord.gg/T2VzhzqU67' target='_blank' rel='noreferrer'>
-					<Discord className='social-icon' />
-				</a>
-				<a href='https://github.com/openscilab/mybutton' target='_blank' rel='noreferrer'>
-					<Github className='social-icon' />
+			<div className='about-mybutton'>
+				<a href='https://openscilab.com' target='_blank' rel='noreferrer' className='empowered'>
+					Empowered by OSL team
 				</a>
+				<div className='social-links'>
+					<a href='https://discord.gg/T2VzhzqU67' target='_blank' rel='noreferrer'>
+						<Discord className='social-icon' />
+					</a>
+					<a href='https://github.com/openscilab/mybutton' target='_blank' rel='noreferrer'>
+						<Github className='social-icon' />
+					</a>
+				</div>
 			</div>
+			<div className='version'>Version {CONFIG.VERSION}</div>
 		</div>
 	);
 };