Add basic transitions (to buttons etc)

aliebald · aliebald · commit 3c92a83f02d5 · 2022-09-15T12:22:37.000+02:00
diff --git a/components/Molecules/BackToTopBtn/BackToTopBtn.tsx b/components/Molecules/BackToTopBtn/BackToTopBtn.tsx
@@ -15,6 +15,8 @@ const useStyles = createStyles((theme, _params) => ({
 		alignContent: "center",
 		alignItems: "center",
 		cursor: "pointer",
+		transitionProperty: "all !important",
+
 		"&:hover": {
 			color: theme.colors.dark[1],
 			borderColor: theme.colors.dark[1],
diff --git a/components/Molecules/ProjectCard/ProjectCard.tsx b/components/Molecules/ProjectCard/ProjectCard.tsx
@@ -23,6 +23,8 @@ const useStyles = createStyles((theme) => ({
 			cursor: "pointer",
 		},
 		padding: theme.spacing.md,
+		transition: ".35s ease",
+
 		[theme.fn.smallerThan("sm")]: {
 			padding: theme.spacing.sm,
 		},
diff --git a/components/Organisms/Header/Header.tsx b/components/Organisms/Header/Header.tsx
@@ -44,6 +44,7 @@ const useStyles = createStyles((theme) => ({
 		color: theme.colorScheme === "dark" ? theme.colors.dark[0] : theme.colors.gray[7],
 		fontSize: theme.fontSizes.sm,
 		fontWeight: 500,
+		transition: "var(--btn-transition)",
 
 		"&:hover": {
 			backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[6] : theme.colors.gray[0],
diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -2,7 +2,15 @@ import "../styles/globals.css";
 import Head from "next/head";
 import { useEffect, useState } from "react";
 import { AppProps } from "next/app";
-import { ColorScheme, ColorSchemeProvider, MantineProvider } from "@mantine/core";
+import {
+	ButtonStylesParams,
+	ColorScheme,
+	ColorSchemeProvider,
+	CSSObject,
+	MantineProvider,
+	MantineTheme,
+	MantineThemeOverride,
+} from "@mantine/core";
 import BackToTopBtn from "../components/Molecules/BackToTopBtn/BackToTopBtn";
 import Header from "../components/Organisms/Header/Header";
 import Footer from "../components/Organisms/Footer/Footer";
@@ -38,6 +46,18 @@ function App({ Component, pageProps }: AppProps) {
 		},
 	];
 
+	const globalTheme: MantineThemeOverride = {
+		colorScheme: colorScheme,
+		components: {
+			Button: {
+				styles: { root: { transition: "var(--btn-transition)" } },
+			},
+			ActionIcon: {
+				styles: { root: { transition: "var(--btn-transition)" } },
+			},
+		},
+	};
+
 	return (
 		<>
 			<Head>
@@ -53,7 +73,7 @@ function App({ Component, pageProps }: AppProps) {
 			</Head>
 
 			<ColorSchemeProvider colorScheme={colorScheme} toggleColorScheme={toggleColorScheme}>
-				<MantineProvider withGlobalStyles withNormalizeCSS theme={{ colorScheme }} emotionCache={emotionCache}>
+				<MantineProvider withGlobalStyles withNormalizeCSS theme={globalTheme} emotionCache={emotionCache}>
 					<Header links={links} />
 					<Component {...pageProps} />
 					<Footer />
diff --git a/styles/globals.css b/styles/globals.css
@@ -34,9 +34,17 @@ a {
 
 .hidden {
   visibility: hidden;
-  /* opacity: 0.1; */
 }
 
+/* =============================== 
+ *          CSS Variables
+ * =============================== */
+
+:root {
+  --btn-transition: .35s ease
+}
+
+
 /* =============================== 
  *        Global Animations      
  * =============================== */
