Mirroring/my-links
1
0
Fork 0
mirror of https://github.com/Sonny93/my-links.git synced 2025-12-08 22:53:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: styling login page

Browse Source
This commit is contained in:
Sonny
2024-05-19 14:57:25 +02:00
committed by Sonny
parent 25d70f2faf
commit 2ba0eccc9f
18 changed files with 222 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
inertia/components/dashboard/side_nav/side_navigation.tsx
View File

@@ -52,6 +52,9 @@ export default function SideNavigation() {
<AddButton href={route('collection.create-form').url}>
<AiOutlineFolderAdd /> {t('collection.create')}
</AddButton>
<Item>
<AiOutlineFolderAdd /> Archives
</Item>
</div>
<FavoriteList />
</SideMenu>

6
inertia/components/layouts/_theme_layout.tsx
View File

@@ -64,6 +64,12 @@ function GlobalStyles() {
boxShadow: '0 1px 0 rgba(0, 0, 0, 0.2), 0 0 0 2px #ffffff inset',
display: 'inline-block',
},
hr: {
color: localTheme.colors.secondary,
width: '100%',
marginBlock: '1em',
},
});
const documentStyle = css({

10
inertia/components/layouts/content_layout.tsx
View File

@@ -18,9 +18,15 @@ const ContentLayoutStyle = styled(TransitionLayout)(({ theme }) => ({
},
}));
const ContentLayout = ({ children }: { children: ReactNode }) => (
const ContentLayout = ({
children,
className,
}: {
children: ReactNode;
className?: string;
}) => (
<BaseLayout>
<ContentLayoutStyle>
<ContentLayoutStyle className={className}>
<Navbar />
<main>{children}</main>
<Footer />

28
inertia/components/quotes.tsx Normal file
View File

@@ -0,0 +1,28 @@
import styled from '@emotion/styled';
import { rgba } from '~/lib/color';
const Quotes = styled.p(({ theme }) => ({
position: 'relative',
width: 'fit-content',
whiteSpace: 'pre-wrap',
textAlign: 'center',
fontStyle: 'italic',
color: rgba(theme.colors.font, 0.75),
'&::before, &::after': {
position: 'absolute',
fontFamily: 'sans-serif',
fontSize: '2.25em',
},
'&::before': {
left: '-0.65em',
content: '"“"',
},
'&::after': {
right: '-0.5em',
content: '"”"',
},
}));
export default Quotes;

10
inertia/components/settings/modal.tsx
View File

@@ -1,9 +1,12 @@
import { Link } from '@inertiajs/react';
import { route } from '@izzyjs/route/client';
import { useTranslation } from 'react-i18next';
import { BsGear } from 'react-icons/bs';
import Modal from '~/components/common/modal/modal';
import LangSelector from '~/components/lang_selector';
import ThemeSwitcher from '~/components/theme_switcher';
import useToggle from '~/hooks/use_modal';
import useUser from '~/hooks/use_user';
export default function ModalSettings({
openItem: OpenItem,
@@ -13,6 +16,7 @@ export default function ModalSettings({
}) {
const { t } = useTranslation('common');
const { isShowing, open, close } = useToggle();
const { isAuthenticated } = useUser();
return (
<>
<OpenItem onClick={open}>
@@ -23,6 +27,12 @@ export default function ModalSettings({
<LangSelector />
<hr />
<ThemeSwitcher />
{isAuthenticated && (
<>
<hr />
<Link href={route('auth.logout').url}>{t('logout')}</Link>
</>
)}
</Modal>
</>
);

2
inertia/i18n/locales/en/common.json
View File

@@ -33,8 +33,8 @@
"remove-favorite": "Remove from favorites",
"favorites-appears-here": "Your favorites will appear here",
"no-item-found": "No item found",
"search": "Search",
"admin": "Administrator",
"search": "Search",
"avatar": "{{name}}'s avatar",
"generic-error": "Something went wrong",
"generic-error-description": "An error has occurred, if this happens again please <a href=\"https://github.com/Sonny93/my-links\" target=\"_blank\">create an issue</a> with as much detail as possible.",

5
inertia/i18n/locales/en/login.json
View File

@@ -1,5 +1,6 @@
{
"title": "Authentication",
"informative-text": "Authentication required to use MyLinks",
"continue-with": "Continue with {{provider}}"
}
"continue-with": "Continue with {{provider}}",
"accept-terms": "By continuing, you accept the"
}

3
inertia/i18n/locales/fr/common.json
View File

@@ -18,11 +18,10 @@
"collection": {
"collections": "Collection",
"collections_other": "Collections",
"collection": "Collection",
"name": "Nom de la collection",
"description": "Description de la collection",
"visibility": "Public",
"no-description": "Aucune description",
"visibility": "Public",
"create": "Créer une collection",
"edit": "Modifier une collection",
"delete": "Supprimer une collection",

5
inertia/i18n/locales/fr/login.json
View File

@@ -1,5 +1,6 @@
{
"title": "Authentification",
"informative-text": "Authentification requise pour utiliser MyLinks",
"continue-with": "Continuer avec {{provider}}"
}
"continue-with": "Continuer avec {{provider}}",
"accept-terms": "En poursuivant, vous acceptez les"
}

85
inertia/pages/login.tsx
View File

@@ -1,9 +1,82 @@
import styled from '@emotion/styled';
import { Head, Link } from '@inertiajs/react';
import { route } from '@izzyjs/route/client';
import { useTranslation } from 'react-i18next';
import { FcGoogle } from 'react-icons/fc';
import Button from '~/components/common/form/_button';
import ContentLayout from '~/components/layouts/content_layout';
import Quotes from '~/components/quotes';
const LoginPage = () => (
<ContentLayout>
<a href={route('auth.google').url}>Continue with Google</a>
</ContentLayout>
);
export default LoginPage;
const LoginContainer = styled.div({
width: '100%',
maxWidth: '100%',
whiteSpace: 'nowrap',
display: 'flex',
alignItems: 'center',
gap: '1.5em',
flexDirection: 'column',
});
const FormWrapper = styled.div(({ theme }) => ({
width: '100%',
backgroundColor: theme.colors.secondary,
padding: '2em',
borderRadius: theme.border.radius,
border: `1px solid ${theme.colors.lightGrey}`,
display: 'flex',
gap: '1em',
flex: 1,
alignItems: 'center',
justifyContent: 'center',
flexDirection: 'column',
}));
const InformativeText = styled.p(({ theme }) => ({
width: '100%',
padding: '10px',
textAlign: 'center',
color: theme.colors.darkBlue,
backgroundColor: theme.colors.lightestBlue,
borderRadius: theme.border.radius,
}));
const AgreementText = styled.p(({ theme }) => ({
color: theme.colors.grey,
}));
const ButtonLink = styled(Button.withComponent('a'))({
display: 'flex',
gap: '0.35em',
alignItems: 'center',
justifyContent: 'center',
});
export default function LoginPage() {
const { t } = useTranslation();
return (
<ContentLayout css={{ display: 'flex', alignItems: 'center' }}>
<LoginContainer css={{ width: '500px', marginTop: '50px' }}>
<Head title={t('login:title')} />
<img
src={'/logo-light.png'}
width={300}
height={100}
alt="MyLinks's logo"
/>
<Quotes css={{ marginBottom: '3em' }}>{t('common:slogan')}</Quotes>
<FormWrapper>
<h1>{t('login:title')}</h1>
<InformativeText>{t('login:informative-text')}</InformativeText>
<ButtonLink href={route('auth.google').url}>
<FcGoogle size="1.5em" />{' '}
{t('login:continue-with', { provider: 'Google' })}
</ButtonLink>
</FormWrapper>
<AgreementText>
{t('login:accept-terms')}{' '}
<Link href={route('terms').url}>{t('common:terms')}</Link>
</AgreementText>
</LoginContainer>
</ContentLayout>
);
}

3
inertia/styles/theme.ts
View File

@@ -4,6 +4,7 @@ import { rgba } from '~/lib/color';
export const primaryColor = '#3f88c5';
export const primaryDarkColor = '#005aa5';
const lightestBlue = '#d3e8fa';
const lightBlue = '#82c5fede';
const darkBlue = primaryDarkColor;
@@ -39,6 +40,7 @@ export const lightTheme: Theme = {
lightGrey: '#dadce0',
grey: '#888888',
lightestBlue,
lightBlue,
blue: primaryColor,
darkBlue,
@@ -68,6 +70,7 @@ export const darkTheme: Theme = {
lightGrey: '#323a47',
grey: '#999999',
lightestBlue,
lightBlue,
blue: '#4fadfc',
darkBlue,

1
inertia/types/emotion.d.ts vendored
View File

@@ -14,6 +14,7 @@ declare module '@emotion/react' {
lightGrey: string;
grey: string;
lightestBlue: string;
lightBlue: string;
blue: string;
darkBlue: string;

BIN
public/empty-image.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 596 B

BIN
public/favicon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

5
public/favicon.svg Normal file
View File

@@ -0,0 +1,5 @@
<?xml version="1.0" encoding="utf-8"?>
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<path d="M 106.813 73.354 L 86.501 73.355 C 86.501 84.421 95.594 93.398 106.813 93.398 C 124.952 93.398 139.996 108.476 139.996 126.656 L 140 126.656 C 140 144.835 124.956 159.913 106.816 159.913 L 0 159.913 L 62.001 200 L 62.001 189.977 C 62.001 184.441 66.476 179.956 72 179.956 L 106.816 179.956 L 106.816 179.962 C 136.14 179.962 159.999 156.048 159.999 126.656 C 159.999 97.266 136.14 73.354 106.813 73.354 Z" fill="#3f88c5" />
<path d="M 93.184 126.646 L 113.498 126.645 C 113.498 115.579 104.402 106.603 93.184 106.603 C 75.042 106.603 60 91.524 60 73.344 C 60 55.165 75.044 40.09 93.184 40.09 L 200 40.09 L 137.999 0 L 137.999 10.023 C 137.999 15.559 133.524 20.044 128 20.044 L 93.184 20.044 L 93.184 20.039 C 63.86 20.039 40.001 43.951 40.001 73.344 L 39.997 73.344 C 39.997 102.735 63.855 126.646 93.184 126.646 Z" fill="#3f88c5" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 957 B

BIN
public/logo-light.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.6 KiB

47
public/logo-light.svg Normal file
View File

@@ -0,0 +1,47 @@
<?xml version="1.0" encoding="utf-8"?>
<svg viewBox="0 0 500 165" xmlns="http://www.w3.org/2000/svg">
<g id="tight-bounds" transform="matrix(1.264159, 0, 0, 1.265787, 0, 0)">
<svg viewBox="0 0 395.52 130.3536553275838" height="130.3536553275838" width="395.52">
<g>
<svg viewBox="0 0 609.8756479073379 200.99999999999997" height="130.3536553275838" width="395.52">
<g>
<rect width="8.33878379307346" height="200.99999999999997" x="222.27426506352492" y="0" stroke-width="0" fill-opacity="1" class="rect-o-0" rx="1%" id="o-0" style="fill: rgb(72, 162, 255);" stroke="transparent"/>
</g>
<g transform="matrix(1,0,0,1,252.44232580181685,0.4999999999999858)">
<svg viewBox="0 0 357.43332210552103 200" height="200" width="357.43332210552103">
<g>
<svg viewBox="0 0 357.43332210552103 200" height="200" width="357.43332210552103">
<g>
<svg viewBox="0 0 357.43332210552103 200" height="200" width="357.43332210552103">
<g transform="matrix(1,0,0,1,0,0)">
<svg width="357.43332210552103" viewBox="3.7404773235321045 -36.008331298828125 142.35955810546875 76.29547882080078" height="200" data-palette-color="#005aa5">
<svg/>
<svg/>
<g>
<path xmlns="http://www.w3.org/2000/svg" d="M39.3-3.35v0c-0.033 0.967-0.4 1.783-1.1 2.45-0.7 0.667-1.533 0.983-2.5 0.95-0.967-0.033-1.783-0.4-2.45-1.1-0.667-0.7-0.983-1.533-0.95-2.5v0c0.067-2.167 0.033-8.567-0.1-19.2v0c-2.467 3.1-4.9 6.417-7.3 9.95v0c-0.567 0.8-1.317 1.29-2.25 1.47-0.933 0.187-1.8 0.013-2.6-0.52v0c-0.1-0.067-0.183-0.133-0.25-0.2v0c-0.367-0.233-0.683-0.517-0.95-0.85v0l-7.7-9.7c0.033 0.067 0.043 3.257 0.03 9.57-0.02 6.32-0.03 9.497-0.03 9.53v0c0 0.967-0.34 1.79-1.02 2.47-0.687 0.687-1.513 1.03-2.48 1.03-0.967 0-1.79-0.343-2.47-1.03-0.687-0.68-1.03-1.503-1.03-2.47v0c0-1.4 0.007-3.75 0.02-7.05 0.02-3.3 0.03-5.85 0.03-7.65 0-1.8-0.033-4.033-0.1-6.7v0c-0.067-2.367-0.183-4.817-0.35-7.35v0c-0.067-0.967 0.217-1.817 0.85-2.55 0.633-0.733 1.433-1.133 2.4-1.2v0c0.5-0.033 0.967 0.033 1.4 0.2v0c0.933 0.133 1.683 0.583 2.25 1.35v0l11.1 13.95c3.6-5 7.267-9.5 11-13.5v0c0.7-1.2 1.733-1.783 3.1-1.75v0c0.967 0.033 1.783 0.4 2.45 1.1 0.667 0.7 0.983 1.533 0.95 2.5v0c-0.1 3.167-0.1 8.007 0 14.52 0.1 6.52 0.117 11.28 0.05 14.28zM54.6-3.3v0c0-0.833-0.007-1.977-0.02-3.43-0.02-1.447-0.03-2.587-0.03-3.42v0-2.85l-5-8.3c-2.467-4.033-4.3-7.183-5.5-9.45v0c-0.467-0.833-0.567-1.71-0.3-2.63 0.267-0.913 0.827-1.603 1.68-2.07 0.847-0.467 1.73-0.567 2.65-0.3 0.913 0.267 1.603 0.833 2.07 1.7v0c1.1 1.967 3.6 6.183 7.5 12.65v0l2.7-4.2 5.7-8.6c0.5-0.8 1.217-1.317 2.15-1.55 0.933-0.233 1.81-0.093 2.63 0.42 0.813 0.52 1.337 1.247 1.57 2.18 0.233 0.933 0.083 1.817-0.45 2.65v0c-0.2 0.333-2.133 3.267-5.8 8.8v0c-1.967 2.967-3.517 5.45-4.65 7.45v0c0.033 0.767 0.05 2.45 0.05 5.05 0 2.6 0.017 4.5 0.05 5.7v0c0.033 0.967-0.283 1.8-0.95 2.5-0.667 0.7-1.483 1.067-2.45 1.1-0.967 0.033-1.8-0.283-2.5-0.95-0.7-0.667-1.067-1.483-1.1-2.45z" fill-rule="nonzero" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" style="mix-blend-mode: normal; fill: rgb(72, 162, 255);" stroke="none"/>
<path xmlns="http://www.w3.org/2000/svg" d="M7.9 39.93v0c-1.133-0.033-2.05-0.5-2.75-1.4v0c-0.667-0.667-1.017-1.483-1.05-2.45v0c-0.033-3.4-0.1-8.217-0.2-14.45v0l-0.15-14.05c0-0.967 0.333-1.793 1-2.48 0.667-0.68 1.483-1.027 2.45-1.04 0.967-0.02 1.793 0.303 2.48 0.97 0.68 0.667 1.037 1.483 1.07 2.45v0l0.15 13.1 0.15 12.6c1.633 0 4.01-0.017 7.13-0.05 3.113-0.033 5.403-0.05 6.87-0.05v0c0.967 0 1.793 0.323 2.48 0.97 0.68 0.653 1.02 1.447 1.02 2.38 0 0.933-0.34 1.74-1.02 2.42-0.687 0.687-1.513 1.03-2.48 1.03v0c-1.1 0-3.95 0.017-8.55 0.05v0c-4.633 0.033-7.5 0.033-8.6 0zM34.5 39.98v0c-0.967 0-1.8-0.327-2.5-0.98-0.7-0.647-1.067-1.453-1.1-2.42v0c0-0.867 0.277-1.643 0.83-2.33 0.547-0.68 1.237-1.087 2.07-1.22v0c0.033-5.8 0.017-13.15-0.05-22.05v0c-0.8-0.167-1.467-0.567-2-1.2-0.533-0.633-0.8-1.383-0.8-2.25v0c0-0.967 0.35-1.783 1.05-2.45 0.7-0.667 1.533-1 2.5-1v0l5.65 0.05c0.967 0 1.783 0.35 2.45 1.05 0.667 0.7 1 1.533 1 2.5v0c0 0.833-0.273 1.567-0.82 2.2-0.553 0.633-1.247 1.033-2.08 1.2v0c0.1 8.767 0.133 16.033 0.1 21.8v0c0.833 0.133 1.527 0.517 2.08 1.15 0.547 0.633 0.837 1.367 0.87 2.2v0c0 0.967-0.323 1.8-0.97 2.5-0.653 0.7-1.463 1.067-2.43 1.1v0zM76.15 39.63v0c-1.3 0.233-2.383-0.167-3.25-1.2v0c-2.233-2.633-5.05-6.533-8.45-11.7v0c-3.7-5.233-6.317-8.783-7.85-10.65v0c0.033 1.333 0.117 4.29 0.25 8.87 0.133 4.587 0.2 8.397 0.2 11.43v0c0 0.967-0.34 1.79-1.02 2.47-0.687 0.687-1.513 1.03-2.48 1.03-0.967 0-1.79-0.343-2.47-1.03-0.687-0.68-1.03-1.503-1.03-2.47v0c0-2.933-0.093-7.677-0.28-14.23-0.18-6.547-0.203-11.503-0.07-14.87v0c0.033-0.967 0.4-1.783 1.1-2.45 0.7-0.667 1.533-0.983 2.5-0.95v0c0.467 0.033 0.917 0.133 1.35 0.3v0c0.633 0.2 1.183 0.567 1.65 1.1v0c0.567 0.7 1.483 1.807 2.75 3.32 1.267 1.52 2.217 2.663 2.85 3.43v0c1.867 1.933 4.633 5.5 8.3 10.7v0l2.4 3.45c0.1-7.733 0.117-14.017 0.05-18.85v0c0-0.967 0.333-1.793 1-2.48 0.667-0.68 1.483-1.027 2.45-1.04 0.967-0.02 1.793 0.303 2.48 0.97 0.68 0.667 1.037 1.483 1.07 2.45v0c0.033 4.533-0.017 14.183-0.15 28.95v0c-0.033 0.933-0.367 1.723-1 2.37-0.633 0.653-1.417 1.013-2.35 1.08zM109.85 38.83l-11.25-14.45-4.2 3.45c0.1 2.7 0.217 5.617 0.35 8.75v0c0.033 0.933-0.273 1.757-0.92 2.47-0.653 0.72-1.453 1.107-2.4 1.16-0.953 0.047-1.787-0.257-2.5-0.91-0.72-0.647-1.113-1.453-1.18-2.42v0c-0.5-10.267-0.683-20.267-0.55-30v0c0.033-0.967 0.393-1.783 1.08-2.45 0.68-0.667 1.503-0.993 2.47-0.98 0.967 0.02 1.783 0.37 2.45 1.05 0.667 0.687 1 1.513 1 2.48v0c-0.067 4.233-0.067 8.217 0 11.95v0c5.233-4.467 10.083-9.217 14.55-14.25v0c0.667-0.7 1.477-1.067 2.43-1.1 0.947-0.033 1.78 0.283 2.5 0.95 0.713 0.667 1.087 1.473 1.12 2.42 0.033 0.953-0.283 1.797-0.95 2.53v0c-3.267 3.733-6.6 7.15-10 10.25v0l11.5 14.8c0.6 0.733 0.833 1.583 0.7 2.55v0c-0.1 0.967-0.523 1.75-1.27 2.35-0.753 0.6-1.613 0.843-2.58 0.73-0.967-0.12-1.75-0.563-2.35-1.33zM132.85 40.28v0c-2.567 0.067-4.883-0.333-6.95-1.2-2.067-0.867-3.7-2.133-4.9-3.8-1.2-1.667-1.8-3.6-1.8-5.8v0c0-1.333 0.383-2.377 1.15-3.13 0.767-0.747 1.633-1.12 2.6-1.12v0c0.967 0 1.75 0.34 2.35 1.02 0.6 0.687 0.9 1.447 0.9 2.28v0c0 0.833 0.05 1.527 0.15 2.08 0.1 0.547 0.35 1.053 0.75 1.52v0c0.767 0.933 2.717 1.4 5.85 1.4v0c1.7 0 3.15-0.35 4.35-1.05 1.2-0.7 1.8-1.7 1.8-3v0c0-0.867-0.7-1.7-2.1-2.5v0c-0.967-0.533-3.117-1.367-6.45-2.5v0c-3.633-1.2-6.367-2.593-8.2-4.18-1.833-1.58-2.75-3.737-2.75-6.47v0c0-2.1 0.6-3.933 1.8-5.5 1.2-1.567 2.777-2.767 4.73-3.6 1.947-0.833 4.02-1.25 6.22-1.25v0c2.267-0.067 4.45 0.3 6.55 1.1 2.1 0.8 3.793 1.94 5.08 3.42 1.28 1.487 1.92 3.163 1.92 5.03v0c0 1-0.367 1.857-1.1 2.57-0.733 0.72-1.583 1.08-2.55 1.08v0c-0.667 0-1.317-0.2-1.95-0.6-0.633-0.4-1.033-0.9-1.2-1.5v0c-0.2-0.8-0.49-1.417-0.87-1.85-0.387-0.433-0.897-0.833-1.53-1.2v0c-0.833-0.467-1.583-0.8-2.25-1-0.667-0.2-1.617-0.3-2.85-0.3v0c-1.467 0-2.673 0.273-3.62 0.82-0.953 0.553-1.43 1.263-1.43 2.13v0c0 1.1 0.543 2 1.63 2.7 1.08 0.7 2.603 1.367 4.57 2v0c3.8 1.267 6.333 2.25 7.6 2.95v0c2.1 1.167 3.583 2.4 4.45 3.7 0.867 1.3 1.3 2.933 1.3 4.9v0c0 2.1-0.633 3.973-1.9 5.62-1.267 1.653-2.923 2.937-4.97 3.85-2.053 0.92-4.18 1.38-6.38 1.38z" fill-rule="nonzero" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" style="mix-blend-mode: normal; fill: rgb(72, 162, 255);" stroke="none"/>
</g>
</svg>
</g>
</svg>
</g>
</svg>
</g>
</svg>
</g>
<g transform="matrix(1,0,0,1,0,0.5)">
<svg viewBox="0 0 200.44498811830644 199.99999999999997" height="199.99999999999997" width="200.44498811830644">
<g>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" viewBox="0 0.11100006103515625 100 99.77799987792969" enable-background="new 0 0 100 100" height="199.99999999999997" width="200.44498811830644" class="icon-icon-0" data-fill-palette-color="accent" id="icon-0">
<path d="M53.406 36.706L43.25 36.707c0 5.521 4.547 9.999 10.156 9.999 9.07 0 16.592 7.522 16.592 16.592H70c0 9.07-7.522 16.592-16.592 16.592H0l31 19.999v-5c0-2.762 2.238-5 5-5h17.408v0.003C68.07 89.892 80 77.962 80 63.298 80 48.636 68.07 36.706 53.406 36.706z" style="fill: rgb(72, 162, 255);"/>
<path d="M46.592 63.294l10.157-0.001c0-5.521-4.548-9.999-10.157-9.999C37.521 53.294 30 45.771 30 36.702c0-9.07 7.522-16.591 16.592-16.591H100l-31-20v5c0 2.762-2.238 5-5 5H46.592v-0.003C31.93 10.108 20 22.038 20 36.702h-0.002C19.998 51.364 31.928 63.294 46.592 63.294z" style="fill: rgb(72, 162, 255);"/>
</svg>
</g>
</svg>
</g>
</svg>
</g>
</svg>
<rect width="395.52" height="130.3536553275838" fill="none" stroke="none" visibility="hidden"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 9.0 KiB

24
public/manifest.json Normal file
View File

@@ -0,0 +1,24 @@
{
"name": "MyLinks",
"short_name": "MyLinks",
"description": "MyLinks is a free and open source software, that lets you manage your favorite links in an intuitive interface",
"launch_handler": {
"client_mode": [
"focus-existing",
"auto"
]
},
"icons": [
{
"src": "/favicon.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "any maskable"
}
],
"theme_color": "#f0eef6",
"background_color": "#f0eef6",
"start_url": "/",
"display": "standalone",
"orientation": "portrait"
}