Merge pull request #2 from JulienR1/fix/new-transaction-form-mobile-l…

…ayout New transaction form mobile layout
JulienR1 · Nov 1, 2023 · cf22136 · cf22136
2 parents 5e26362 + 2386d0b
commit cf22136
Show file tree

Hide file tree

Showing 8 changed files with 29 additions and 17 deletions.
diff --git a/web/src/modules/form/components/button.tsx b/web/src/modules/form/components/button.tsx
@@ -12,7 +12,7 @@ export const Button: Component<ButtonProps> = (props) => {
       {...props}
       class={
         props.class +
-        " group flex items-center rounded-2xl bg-gradient-to-tr from-primary to-secondary px-5 py-1 text-sm text-white transition-transform hover:shadow-md"
+        " group flex items-center rounded-2xl bg-gradient-to-tr from-primary to-secondary px-3 py-1 text-xs text-white transition-transform hover:shadow-md md:px-5 md:text-sm"
       }
     >
       {props.children}

diff --git a/web/src/modules/form/components/input.tsx b/web/src/modules/form/components/input.tsx
@@ -36,6 +36,8 @@ export const Input: Component<InputProps> = (props) => {
           <Icon
             {...props.leftIcon!}
             class={"ml-2 " + props.leftIcon?.class ?? ""}
+            size="lg"
+            mdSize="xl"
           />
         </Show>
 
@@ -47,7 +49,7 @@ export const Input: Component<InputProps> = (props) => {
             {...props}
             id={id}
             onInput={handleInput}
-            class="w-full rounded-lg p-2 pt-0 text-sm font-semibold text-black focus-visible:outline-none"
+            class="w-full rounded-lg p-1 pt-0 text-xs font-semibold text-black focus-visible:outline-none md:p-2 md:text-sm"
           />
         </div>
 

diff --git a/web/src/modules/form/components/toggle.tsx b/web/src/modules/form/components/toggle.tsx
@@ -33,7 +33,7 @@ export const Toggle: Component<ToggleProps> = (props) => {
           class="invisible absolute h-0 w-0 [&+div]:[--x-position:-50%] [&:checked+div]:[--x-position:50%]"
         />
         <div
-          class="relative flex h-6 w-12 items-center justify-center rounded-xl border-2"
+          class="relative flex h-5 w-10 items-center justify-center rounded-xl border-2 md:h-6 md:w-12"
           classList={{
             "border-primary": !props.color,
             "border-red-500": props.color === "red",

diff --git a/web/src/modules/transactions/components/category.tsx b/web/src/modules/transactions/components/category.tsx
@@ -6,10 +6,10 @@ type CategoryProps = CategorySchema;
 
 export const Category: Component<CategoryProps> = (props) => {
   return (
-    <div class="flex w-[180px] items-center justify-between rounded-md px-3 py-1 shadow-md">
-      <Icon name={props.icon} />
+    <div class="flex w-[120px] items-center justify-between rounded-md px-3 py-1 shadow-md md:w-[180px]">
+      <Icon name={props.icon} size="lg" mdSize="xl" />
       <p
-        class="overflow-hidden overflow-ellipsis whitespace-nowrap first-letter:capitalize"
+        class="overflow-hidden overflow-ellipsis whitespace-nowrap text-sm first-letter:capitalize md:text-base"
         style={{ width: "calc(100% - 36px)" }}
       >
         {props.label}

diff --git a/web/src/modules/transactions/new-transaction-form.tsx b/web/src/modules/transactions/new-transaction-form.tsx
@@ -79,7 +79,7 @@ const NewTransactionForm: Component<NewTransactionProps> = (props) => {
         <div class="mx-auto grid w-fit grid-cols-3 items-center justify-center gap-2">
           <div class="ml-auto">
             <p
-              class="duration-250 after:duration-250 w-fit transition-all after:block after:h-1 after:w-full after:max-w-0 after:rounded-sm after:bg-primary after:transition-all"
+              class="duration-250 after:duration-250 w-fit text-sm transition-all after:block after:h-1 after:w-full after:max-w-0 after:rounded-sm after:bg-primary after:transition-all md:text-base"
               classList={{
                 "after:max-w-[200px]": transactionType() === "expense",
               }}
@@ -95,7 +95,7 @@ const NewTransactionForm: Component<NewTransactionProps> = (props) => {
           />
           <div>
             <p
-              class="duration-250 after:duration-250 w-fit transition-all after:block after:h-1 after:w-full after:max-w-0 after:rounded-sm after:bg-primary after:transition-all"
+              class="duration-250 after:duration-250 w-fit text-sm transition-all after:block after:h-1 after:w-full after:max-w-0 after:rounded-sm after:bg-primary after:transition-all md:text-base"
               classList={{
                 "after:max-w-[200px]": transactionType() === "income",
               }}
@@ -111,12 +111,12 @@ const NewTransactionForm: Component<NewTransactionProps> = (props) => {
         leftIcon={{ name: "settings" }}
         controls={generalAccordion}
       >
-        <div class="grid grid-cols-[auto_180px] gap-3">
+        <div class="grid grid-cols-[auto_150px] gap-3 md:grid-cols-[auto_180px]">
           <Input
             id="description"
-            label="Description"
+            label="Titre"
             name="description"
-            placeholder="Saisir une description"
+            placeholder="Saisir un titre"
             leftIcon={{ name: "signature" }}
           />
           <Input
@@ -130,7 +130,7 @@ const NewTransactionForm: Component<NewTransactionProps> = (props) => {
           />
         </div>
 
-        <div class="grid grid-cols-[auto_180px] gap-3">
+        <div class="grid grid-cols-[auto_150px] gap-3 md:grid-cols-[auto_180px]">
           <Input
             id="receipt"
             label="Facture"
@@ -198,7 +198,7 @@ const NewTransactionForm: Component<NewTransactionProps> = (props) => {
         <div class="pt-2">
           <A
             href={location.pathname.replace(/\/$/, "") + "/category"}
-            class="group ml-auto mt-2 flex w-fit items-center rounded-2xl bg-gradient-to-tr from-primary to-secondary px-5 py-1 text-sm text-white hover:shadow-md"
+            class="group ml-auto mt-2 flex w-fit items-center rounded-2xl bg-gradient-to-tr from-primary to-secondary px-3 py-1 text-xs text-white hover:shadow-md md:px-5 md:text-sm"
           >
             <span class="font-semibold">Ajouter</span>
             <Icon

diff --git a/web/src/modules/ui/card.tsx b/web/src/modules/ui/card.tsx
@@ -12,17 +12,19 @@ export const Card: Component<CardProps> = (props) => {
   return (
     <div class="relative m-4 rounded-md bg-white shadow-md">
       <Show when={props.title}>
-        <div class="flex items-center border-b-2 p-4 pb-2 pt-6">
+        <div class="flex items-center border-b-2 p-4 pb-2 pt-4 md:pt-6">
           <Show when={props.leftIcon}>
             <Icon {...props.leftIcon!} class="pr-4" />
           </Show>
-          <h2 class="flex-grow text-lg font-semibold">{props.title}</h2>
+          <h2 class="flex-grow text-base font-semibold md:text-lg">
+            {props.title}
+          </h2>
           <Show when={props.rightIcon}>
             <Icon {...props.rightIcon!} class="pl-4" />
           </Show>
         </div>
       </Show>
-      <div class="p-4">{props.children}</div>
+      <div class="p-3 md:p-4">{props.children}</div>
     </div>
   );
 };
diff --git a/web/src/modules/ui/icon.tsx b/web/src/modules/ui/icon.tsx
@@ -7,6 +7,7 @@ export type IconProps = {
   class?: string;
   style?: JSX.CSSProperties | string;
   size?: FontSize;
+  mdSize?: FontSize;
   name: string;
   onClick?: (e: MouseEvent) => void;
 };
@@ -31,7 +32,9 @@ export const Icon: Component<IconProps> = (props) => {
       <span
         class={`material-symbols-outlined h-fit text-inherit text-${
           props.size ?? "xl"
-        } ${iconProps.class ?? ""}`}
+        } ${props.mdSize ? "md:text-" + props.mdSize ?? "xl" : ""} ${
+          iconProps.class ?? ""
+        }`}
         style={props.style}
       >
         {iconProps.name}

diff --git a/web/tailwind.config.js b/web/tailwind.config.js
@@ -1,11 +1,16 @@
 const plugin = require("tailwindcss/plugin");
 const defaultColors = require("tailwindcss/colors");
+const defaultTheme = require("tailwindcss/defaultTheme");
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: ["./src/**/*.{ts,tsx}"],
   theme: {
     extend: {
+      fontSize: {
+        ...defaultTheme.fontSize,
+        xxs: "0.6rem",
+      },
       fontFamily: {
         noto: ['"Noto Sans"'],
       },