Animations and login page styling

public/locales/en/layout/header/actions/toggle-edit-mode.json

@@ -1,5 +1,4 @@
 {
-    "tooltip": "The edit mode enables you to configure your dashboard",
     "description": "In edit mode, you can adjust the size and position of your tiles.",
     "button": {
         "disabled": "Enter Edit Mode",

src/components/Dashboard/Modals/SelectElement/Components/Overview/AvailableElementsOverview.tsx

@@ -2,6 +2,7 @@ import { Group, Space, Stack, Text, UnstyledButton } from '@mantine/core';
 import { closeModal } from '@mantine/modals';
 import { showNotification } from '@mantine/notifications';
 import { IconBox, IconBoxAlignTop, IconStack } from '@tabler/icons';
+import { motion } from 'framer-motion';
 import { useTranslation } from 'next-i18next';
 import { ReactNode } from 'react';
 import { v4 as uuidv4 } from 'uuid';
@@ -166,7 +167,12 @@ const ElementItem = ({ name, icon, onClick }: ElementItemProps) => {
       py="md"
     >
       <Stack className={classes.elementStack} align="center" spacing={5}>
-        {icon}
+        <motion.div
+          // On hover zoom in
+          whileHover={{ scale: 1.2 }}
+        >
+          {icon}
+        </motion.div>
         <Text className={classes.elementName} weight={500} size="sm">
           {name}
         </Text>

src/components/Dashboard/Tiles/Apps/AppTile.tsx

@@ -1,6 +1,7 @@
 import { Center, Text, UnstyledButton } from '@mantine/core';
 import { NextLink } from '@mantine/next';
 import { createStyles } from '@mantine/styles';
+import { motion } from 'framer-motion';
 import { AppType } from '../../../../types/app';
 import { useCardStyles } from '../../../layout/useCardStyles';
 import { useEditModeStore } from '../../Views/useEditModeStore';
@@ -29,7 +30,18 @@ export const AppTile = ({ className, app }: AppTileProps) => {
       </Text>
       <Center style={{ height: '75%', flex: 1 }}>
         {/* eslint-disable-next-line @next/next/no-img-element */}
-        <img className={classes.image} src={app.appearance.iconUrl} alt="" />
+        <motion.img
+          className={classes.image}
+          src={app.appearance.iconUrl}
+          alt=""
+          animate={{
+            scale: [0.8, 1.15, 1],
+            rotate: [0, 15, -15, 0],
+          }}
+          transition={{
+            duration: 0.5,
+          }}
+        />
       </Center>
     </>
   );

src/components/layout/header/Actions/ToggleEditMode/ToggleEditMode.tsx

@@ -1,6 +1,6 @@
 import axios from 'axios';
 import Consola from 'consola';
-import { ActionIcon, Button, Group, Popover, Stack, Text, Tooltip } from '@mantine/core';
+import { ActionIcon, Button, Group, Paper, Popover, Space, Text } from '@mantine/core';
 import { IconEditCircle, IconEditCircleOff, IconX } from '@tabler/icons';
 import { getCookie } from 'cookies-next';
 import { Trans, useTranslation } from 'next-i18next';
@@ -61,33 +61,31 @@ export const ToggleEditModeAction = () => {
   return (
     <Popover
       opened={enabled && !smallerThanSm && !popoverManuallyHidden}
-      width={250}
+      width="target"
+      transition="scale"
       zIndex={199}
-      withArrow
     >
       <Popover.Target>
-        <Tooltip label={t('tooltip')} withinPortal>
-          {smallerThanSm ? (
-            enabled ? (
-              <Group style={{ flexWrap: 'nowrap' }}>
-                <AddElementAction type="action-icon" />
-                <ToggleActionIconMobile />
-              </Group>
-            ) : (
+        {smallerThanSm ? (
+          enabled ? (
+            <Group style={{ flexWrap: 'nowrap' }}>
+              <AddElementAction type="action-icon" />
               <ToggleActionIconMobile />
-            )
-          ) : enabled ? (
-            <Button.Group>
-              <ToggleButtonDesktop />
-              {enabled && <AddElementAction type="button" />}
-            </Button.Group>
+            </Group>
           ) : (
+            <ToggleActionIconMobile />
+          )
+        ) : enabled ? (
+          <Button.Group>
             <ToggleButtonDesktop />
-          )}
-        </Tooltip>
+            {enabled && <AddElementAction type="button" />}
+          </Button.Group>
+        ) : (
+          <ToggleButtonDesktop />
+        )}
       </Popover.Target>
 
-      <Popover.Dropdown p={4} px={6}>
+      <Popover.Dropdown p={4} px={6} mt={-5}>
         <div style={{ position: 'absolute', top: 2, right: 2 }}>
           <ActionIcon onClick={() => setPopoverManuallyHidden(true)}>
             <IconX size={18} />

src/pages/login.tsx

@@ -32,19 +32,6 @@ export default function AuthenticationTitle() {
         justifyContent: 'center',
       }}
     >
-      <Group>
-        <Title
-          align="center"
-          sx={(theme) => ({ fontFamily: `Greycliff CF, ${theme.fontFamily}`, fontWeight: 900 })}
-        >
-          {t('title')}
-        </Title>
-      </Group>
-
-      <Text color="dimmed" size="sm" align="center" mt={5}>
-        {t('text')}
-      </Text>
-
       <Paper
         withBorder
         shadow="md"
@@ -53,6 +40,16 @@ export default function AuthenticationTitle() {
         radius="md"
         style={{ width: '100%', maxWidth: 420 }}
       >
+        <Title
+          align="center"
+          sx={(theme) => ({ fontFamily: `Greycliff CF, ${theme.fontFamily}`, fontWeight: 900 })}
+        >
+          {t('title')}
+        </Title>
+
+        <Text color="dimmed" size="sm" align="center" mt={5}>
+          {t('text')}
+        </Text>
         <form
           onSubmit={form.onSubmit((values) => {
             setCookie('password', values.password, {