+
+
+
+
+
setShowTags(false)} />
+
+
+
+ setShowTags(false)} />
+
+
+
+
+
Link to Signup Page
- >
- );
+
+
+
+
+
+ >
+ )
}
diff --git a/src/pages/LoginView.tsx b/src/pages/LoginView.tsx
index 29c7f99..db4c236 100644
--- a/src/pages/LoginView.tsx
+++ b/src/pages/LoginView.tsx
@@ -1,13 +1,17 @@
-import {Card} from "../components/forms/signup/SignupCard.tsx";
-import LoginForm from "../components/forms/login/LoginForm.tsx"
+import styled from '@emotion/styled'
+import LoginCard from '../components/forms/login/LoginCard'
+
+const ViewContainer = styled.div`
+ width: 100%;
+ max-width: 500px;
+ padding: ${({ theme }) => theme.spacing.md};
+ box-sizing: border-box;
+`
export default function LoginView() {
return (
- <>
-
- Login
-
-
- >
+
+
+
)
}
\ No newline at end of file
diff --git a/src/pages/SignupView.tsx b/src/pages/SignupView.tsx
index a52dabe..4785df4 100644
--- a/src/pages/SignupView.tsx
+++ b/src/pages/SignupView.tsx
@@ -1,9 +1,17 @@
+import styled from '@emotion/styled'
import SignupCard from '../components/forms/signup/SignupCard'
+const ViewContainer = styled.div`
+ width: 100%;
+ max-width: 550px;
+ padding: ${({ theme }) => theme.spacing.md};
+ box-sizing: border-box;
+`
+
export default function SignupView() {
return (
-
+
-
+
);
}
\ No newline at end of file
diff --git a/src/styles/globalStyle.tsx b/src/styles/globalStyle.tsx
index 0f5dff3..81765a8 100644
--- a/src/styles/globalStyle.tsx
+++ b/src/styles/globalStyle.tsx
@@ -1,7 +1,34 @@
import { css } from '@emotion/react'
import type {Theme} from './theme'
+import MyFontFileSFProBold from '../assets/font/SF-Pro-Display-Bold.otf'
+import MyFontFileSFPro from '../assets/font/SFPRODISPLAYREGULAR.OTF'
export const globalStyle = (theme: Theme) => css`
+ @font-face {
+ font-family:'Tangkiwood';
+ src: url(${MyFontFileSFProBold}) format('truetype');
+ font-weight: normal;
+ font-style: normal;
+ }
+
+ @font-face {
+ font-family: 'SF Pro';
+ src: url(${MyFontFileSFPro}) format('opentype'); /* Format opentype pour .OTF */
+ font-weight: normal;
+ font-style: normal;
+ }
+
+
+
+ h1, h2, h3 {
+ font-family: 'Tangkiwood', sans-serif;
+ margin: 0;
+ /* Ajoute ces lignes : */
+ font-size: 2.5rem; /* Ajuste ce chiffre (2.5 est assez grand) */
+ font-weight: bold; /* Si tu veux qu'il soit plus épais */
+ line-height: 1.2; /* Pour éviter que les lignes se chevauchent */
+ }
+
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
@@ -20,10 +47,12 @@ export const globalStyle = (theme: Theme) => css`
color: ${theme.colors.textWhite};
background-color: ${theme.colors.bgPrimary};
font-size: ${theme.fontSize.sm};
- display: grid;
- place-items: center;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
backdrop-filter: blur(4px);
- overflow: hidden;
+ overflow-y: auto;
}
h1 {
diff --git a/src/styles/theme.tsx b/src/styles/theme.tsx
index ffbdd80..810ed13 100644
--- a/src/styles/theme.tsx
+++ b/src/styles/theme.tsx
@@ -5,7 +5,10 @@ export const theme = {
border: 'rgba(255, 255, 255, 0.20)',
borderHover: 'rgba(255, 255, 255, 0.5)',
backdrop: 'blur(10px)',
+ bgHeader: '#a5abbc',
focusShadow: '0 0 0 3px rgba(255, 255, 255, 0.1)',
+ bgPost: '#414755',
+ bgHomePage: '#e8e8e8',
},
colors: {
textWhite: '#fffafa',
@@ -48,10 +51,10 @@ export const theme = {
'2xl': '3rem',
},
input: {
- width: 'min(80vw, 500px)',
+ width: 'min(70vw, 380px)',
gap: '2vw',
- widthHalf: 'min(calc((min(80vw, 500px) - 2vw) / 2), 250px)',
- widthThird: 'min(calc((min(80vw, 500px) - (2vw * 2)) / 3), 160px)',
+ widthHalf: 'min(calc((min(70vw, 380px) - 2vw) / 2), 180px)',
+ widthThird: 'min(calc((min(70vw, 380px) - (2vw * 2)) / 3), 120px)',
height: '45px',
},
borderRadius: {