Skip to content

Commit 8bf3283

Browse files
JulienAuvoJulienAuvo
authored
Fix/remove daisyui (#82)
* refactoring: remove DaisyUI + refactor some tailwind classes and logic * refactoring: remove DaisyUI + refactor some tailwind classes and logic
1 parent d53a674 commit 8bf3283

File tree

9 files changed

+3879
-3275
lines changed

9 files changed

+3879
-3275
lines changed

‎infrastructure/eid-wallet/package.json‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,6 @@
5151
"@vitest/coverage-v8": "^3.0.9",
5252
"autoprefixer": "^10.4.21",
5353
"cupertino-pane": "^1.4.22",
54-
"daisyui": "^5.0.6",
5554
"playwright": "^1.51.1",
5655
"postcss": "^8.5.3",
5756
"storybook": "^8.6.7",

‎infrastructure/eid-wallet/src/app.css‎

Lines changed: 0 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,6 @@
11
@import "tailwindcss";
22
@import "flag-icons/css/flag-icons.min.css";
33

4-
@plugin "daisyui" {
5-
/* biome-ignore lint/correctness/noUnknownProperty: DaisyUI v5 specific stuff, not handled yet by Biome */
6-
themes: false;
7-
/* biome-ignore lint/correctness/noUnknownProperty: DaisyUI v5 specific stuff, not handled yet by Biome */
8-
darktheme: "light";
9-
}
10-
114
@font-face {
125
font-family: "Archivo";
136
src: url("/fonts/Archivo-VariableFont_wdth,wght.ttf") format("truetype");
@@ -17,7 +10,6 @@
1710

1811
@layer base {
1912
/* Typography */
20-
2113
h1 {
2214
@apply text-[90px] text-black font-semibold;
2315
}
@@ -80,8 +72,3 @@
8072
body {
8173
font-family: "Archivo", sans-serif;
8274
}
83-
84-
/* Custom classes */
85-
.spin-slow {
86-
animation: spin 3s linear infinite;
87-
}

‎infrastructure/eid-wallet/src/lib/ui/InputPin/InputPin.svelte‎

Lines changed: 6 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -97,7 +97,7 @@ const createValueSlot = (arr: number[]) => {
9797
);
9898
};
9999
100-
let uniqueId = `input${Math.random().toString().split(".")[1]}`;
100+
const uniqueId = `input${Math.random().toString().split(".")[1]}`;
101101
const cBase =
102102
"relative w-full margin-x-[auto] flex justify-between items-center gap-[10px] flex-row flex-nowrap select-none";
103103
</script>
@@ -115,11 +115,7 @@ const cBase =
115115
<input
116116
bind:value={pins[i]}
117117
maxLength="1"
118-
class="pin-item w-[68px] h-[81px] rounded-[64px] border-[1px] border-transparent text-xl text-center bg-gray select-none {pins[
119-
i
120-
]
121-
? 'has-value'
122-
: ''}"
118+
class="pin-item w-[68px] h-[81px] rounded-[64px] border-[1px] border-transparent text-xl text-center bg-gray select-none"
123119
class:error={isError}
124120
id={uniqueId}
125121
type="tel"
@@ -136,7 +132,10 @@ const cBase =
136132
placeholder=""
137133
/>
138134
{#if pins[i] !== ''}
139-
<div class="mask">·</div>
135+
<div
136+
class="mask w-[9px] h-[9px] bg-black rounded-full"
137+
class:hidden={!pins[i]}
138+
></div>
140139
{/if}
141140
</div>
142141
{/each}
@@ -154,8 +153,6 @@ const cBase =
154153
top: 50%;
155154
left: 50%;
156155
transform: translate(-50%, -50%);
157-
font-size: 24px;
158-
visibility: hidden;
159156
}
160157
161158
input.error + .mask {
@@ -178,9 +175,4 @@ const cBase =
178175
outline: none;
179176
border-color: var(--color-primary);
180177
}
181-
182-
/* Show the mask when the input has a value */
183-
.singular-input input.has-value + .mask {
184-
visibility: visible;
185-
}
186178
</style>

‎infrastructure/eid-wallet/src/routes/(auth)/onboarding/+page.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ const handleNext = async () => {
1717

1818
<main class="pt-[3vh] px-[5vw] pb-[4.5vh]">
1919
<article class="flex justify-center mb-[4vh]">
20-
<img src="/images/Onboarding.svg" alt="info-graphic-card">
20+
<img class="aspect-square w-full object-cover" src="/images/Onboarding.svg" alt="Infographic card">
2121
</article>
2222
<section class="mb-[9.3vh]">
2323
<h2 class="text-[42px]/[1] font-medium mb-[1vh]">Your <br>

‎infrastructure/eid-wallet/src/routes/(auth)/register/+page.svelte‎

Lines changed: 44 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -53,56 +53,56 @@ $effect(() => {
5353
</script>
5454

5555
{#if firstStep}
56-
<main class="h-[100vh] pt-[5.2vh] px-[5vw] pb-[4.5vh] flex flex-col justify-between">
57-
<section>
58-
<h3 class="mb-[1vh]">Create a pin</h3>
59-
<p class="text-black-700 mb-[14vh]">Enter a 4-digit PIN code</p>
60-
<InputPin bind:pin/>
61-
</section>
62-
<ButtonAction class="w-full" variant="soft" callback={handleFirstStep}>Confirm</ButtonAction>
63-
</main>
56+
<main class="h-screen pt-[5.2vh] px-[5vw] pb-[4.5vh] flex flex-col justify-between">
57+
<section>
58+
<h3 class="mb-[1vh]">Create a pin</h3>
59+
<p class="text-black-700 mb-[14vh]">Enter a 4-digit PIN code</p>
60+
<InputPin bind:pin/>
61+
</section>
62+
<ButtonAction class="w-full" variant="soft" callback={handleFirstStep}>Confirm</ButtonAction>
63+
</main>
6464
{:else}
65-
<main class="h-[100vh] pt-[5.2vh] px-[5vw] pb-[4.5vh] flex flex-col justify-between">
66-
<section>
67-
<h3 class="mb-[1vh]">Re-enter your pin</h3>
68-
<p class="text-black-700 mb-[14vh]">Confirm by entering pin again</p>
69-
<InputPin bind:pin={repeatPin} {isError}/>
70-
<p class={`text-danger mt-[3.4vh] ${isError ? "block" : "hidden"}`}>Your PIN does not match, try again.</p>
71-
</section>
72-
<ButtonAction class="w-full" callback={handleConfirm}>Confirm</ButtonAction>
73-
</main>
65+
<main class="h-screen pt-[5.2vh] px-[5vw] pb-[4.5vh] flex flex-col justify-between">
66+
<section>
67+
<h3 class="mb-[1vh]">Re-enter your pin</h3>
68+
<p class="text-black-700 mb-[14vh]">Confirm by entering pin again</p>
69+
<InputPin bind:pin={repeatPin} {isError}/>
70+
<p class={`text-danger mt-[3.4vh] ${isError ? "block" : "hidden"}`}>Your PIN does not match, try again.</p>
71+
</section>
72+
<ButtonAction class="w-full" callback={handleConfirm}>Confirm</ButtonAction>
73+
</main>
7474
{/if}
7575

7676

7777
<Drawer bind:isPaneOpen={showDrawer} isCancelRequired={true}>
7878
{#if !isBiometricScreen}
79-
<div class="relative bg-gray w-[72px] h-[72px] rounded-[24px] flex justify-center items-center mb-[2.3vh]">
80-
<span class="relative z-[1]">
81-
<HugeiconsIcon icon={CircleLock01Icon} color="var(--color-primary)"/>
82-
</span>
83-
<img class="absolute top-0 start-0" src="/images/Line.svg" alt="line">
84-
<img class="absolute top-0 start-0" src="/images/Line2.svg" alt="line">
85-
</div>
86-
<h4>Pin code set!</h4>
87-
<p class="text-black-700! mt-[0.5vh] mb-[2.3vh]">Your PIN has been created. You’ll use it to access your digital entity securely.</p>
88-
<ButtonAction class="w-full" callback={handleNext}>Next</ButtonAction>
79+
<div class="relative bg-gray w-[72px] h-[72px] rounded-[24px] flex justify-center items-center mb-[2.3vh]">
80+
<span class="relative z-[1]">
81+
<HugeiconsIcon icon={CircleLock01Icon} color="var(--color-primary)"/>
82+
</span>
83+
<img class="absolute top-0 start-0" src="/images/Line.svg" alt="line">
84+
<img class="absolute top-0 start-0" src="/images/Line2.svg" alt="line">
85+
</div>
86+
<h4>Pin code set!</h4>
87+
<p class="text-black-700 mt-[0.5vh] mb-[2.3vh]">Your PIN has been created. You’ll use it to access your digital entity securely.</p>
88+
<ButtonAction class="w-full" callback={handleNext}>Next</ButtonAction>
8989
{:else}
90-
<div class="relative bg-gray w-[72px] h-[72px] rounded-[24px] flex justify-center items-center mb-[2.3vh]">
91-
<span class="relative z-[1]">
92-
<HugeiconsIcon icon={FaceIdIcon} color="var(--color-primary)" />
93-
</span>
94-
<img class="absolute top-0 start-0" src="/images/Line.svg" alt="line">
95-
<img class="absolute top-0 start-0" src="/images/Line2.svg" alt="line">
96-
</div>
97-
<h4>{isBiometricsAdded ? "You’re all set!" : "Add biometrics"}</h4>
98-
<p class="text-black-700! mt-[0.5vh] mb-[2.3vh]">{ isBiometricsAdded ? "Your biometrics have been successfully added." : "Use your fingerprint or face recognition for faster, more secure logins."}</p>
99-
{#if !isBiometricsAdded}
100-
<div class="flex justify-center items-center gap-[11px]">
101-
<ButtonAction class="w-full bg-primary-100 text-primary" callback={handleSkip}>Skip</ButtonAction>
102-
<ButtonAction class="w-full" callback={handleSetupBiometrics}>Set up</ButtonAction>
103-
</div>
104-
{:else}
105-
<ButtonAction class="w-full" callback={handleBiometricsAdded}>Continue</ButtonAction>
106-
{/if}
90+
<div class="relative bg-gray w-[72px] h-[72px] rounded-[24px] flex justify-center items-center mb-[2.3vh]">
91+
<span class="relative z-[1]">
92+
<HugeiconsIcon icon={FaceIdIcon} color="var(--color-primary)" />
93+
</span>
94+
<img class="absolute top-0 start-0" src="/images/Line.svg" alt="line">
95+
<img class="absolute top-0 start-0" src="/images/Line2.svg" alt="line">
96+
</div>
97+
<h4>{isBiometricsAdded ? "You’re all set!" : "Add biometrics"}</h4>
98+
<p class="text-black-700 mt-[0.5vh] mb-[2.3vh]">{ isBiometricsAdded ? "Your biometrics have been successfully added." : "Use your fingerprint or face recognition for faster, more secure logins."}</p>
99+
{#if !isBiometricsAdded}
100+
<div class="flex justify-center items-center gap-[11px]">
101+
<ButtonAction class="w-full bg-primary-100 text-primary" callback={handleSkip}>Skip</ButtonAction>
102+
<ButtonAction class="w-full" callback={handleSetupBiometrics}>Set up</ButtonAction>
103+
</div>
104+
{:else}
105+
<ButtonAction class="w-full" callback={handleBiometricsAdded}>Continue</ButtonAction>
106+
{/if}
107107
{/if}
108108
</Drawer>

‎infrastructure/eid-wallet/src/routes/(auth)/review/+page.svelte‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,12 @@ const handleNext = async () => {
88
};
99
</script>
1010

11-
<main class="h-[100vh] pt-[5.2vh] px-[5vw] pb-[4.5vh] flex flex-col justify-between">
11+
<main class="h-screen pt-[5.2vh] px-[5vw] pb-[4.5vh] flex flex-col justify-between">
1212
<section>
1313
<h3 class="mb-[0.5vh]">Here’s your eName</h3>
1414
<p class="text-black-700 mb-[3vh]">This identifier is permanently yours, and it stays with you for your whole life.</p>
1515

16-
<IdentityCard variant="eName" userId= "acbsdjk-14n14k43-12412" shareBtn={() => null} viewBtn={() => null}/>
16+
<IdentityCard variant="eName" userId="acbsdjk-14n14k43-12412" shareBtn={() => null} viewBtn={() => null}/>
1717
</section>
1818
<ButtonAction class="w-full" callback={handleNext}>Next</ButtonAction>
1919
</main>

‎infrastructure/eid-wallet/src/routes/(auth)/verify/+page.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { goto } from "$app/navigation";
33
import { ButtonAction } from "$lib/ui";
44
</script>
55

6-
<main class="h-[100vh] pt-[3vh] px-[5vw] pb-[4.5vh] flex flex-col justify-between items-center">
6+
<main class="h-screen pt-[3vh] px-[5vw] pb-[4.5vh] flex flex-col justify-between items-center">
77
<section>
88
<h3 class="mb-[1vh]">Verify your account</h3>
99
<p class="text-black-700 mb-[6vh]">Get your passport ready. You’ll be directed to a site where you can verify your account in a swift and secure process</p>

‎infrastructure/eid-wallet/src/routes/+layout.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ $effect(() => {
1212
</script>
1313

1414
{#if showSplashScreen}
15-
<div class="relative w-full h-[100vh] bg-primary">
15+
<div class="relative w-full h-screen bg-primary">
1616
<img class="absolute w-full bottom-[-80px] start-0" src="/images/Shape1.svg" alt="illustration">
1717
<img class="absolute w-full top-[50px] end-[100px]" src="/images/Shape2.svg" alt="illustration">
1818
<div class="absolute w-full top-[42%] start-[50%] translate-x-[-50%] translate-y-[-42%]">

0 commit comments

Comments
 (0)