fix: icon-buttons in table are too large

czabaj · Jul 21, 2023 · b74d942 · b74d942
1 parent 2c406b8
commit b74d942
Show file tree

Hide file tree

Showing 9 changed files with 43 additions and 27 deletions.
diff --git a/src/components/ButtonMenu/ButtonMenu.module.css b/src/components/ButtonMenu/ButtonMenu.module.css
@@ -4,6 +4,7 @@
   top: anchor(bottom);
   right: anchor(right);
   padding: 0;
+  padding-block: 0.5rem;
 }
 .popover ul {
   list-style: none;

diff --git a/src/components/InputDonors/InputDonors.module.css b/src/components/InputDonors/InputDonors.module.css
@@ -3,10 +3,17 @@
   border-collapse: collapse;
   border-spacing: 0;
 }
-
 .root table :where(td, th) {
   text-align: left;
 }
-.root table :where(td, th):nth-child(2) {
-  text-align: right;
+.root table input[type="number"] {
+  inline-size: 8ch;
+}
+.root tbody th {
+  font-weight: var(--font-weight-regular);
+}
+
+.root legend {
+  font-weight: var(--font-weight-bold);
+  font-size: var(--font-size-18);
 }
diff --git a/src/components/InputDonors/InputDonors.res b/src/components/InputDonors/InputDonors.res
@@ -50,7 +50,7 @@ let make = (~errorMessage=?, ~legendSlot=?, ~persons, ~value, ~onChange) => {
             </td>
             <td>
               <button
-                className={`${Styles.button.base} ${Styles.button.iconOnly}`}
+                className={`${Styles.button.base} ${Styles.button.iconOnly} ${Styles.button.sizeExtraSmall}`}
                 onClick={_ => {
                   let newValue = value->Dict.copy
                   newValue->Dict.delete(name)
@@ -65,32 +65,37 @@ let make = (~errorMessage=?, ~legendSlot=?, ~persons, ~value, ~onChange) => {
         })
         ->React.array}
       </tbody>
+      <tbody>
+        <tr>
+          <td>
+            <select
+              disabled={availableNames->Array.length === 0}
+              onChange={event => {
+                let person = ReactEvent.Form.target(event)["value"]
+                if person !== "" {
+                  let newValue = value->Dict.copy
+                  newValue->Dict.set(person, 0)
+                  onChange(newValue)
+                }
+              }}
+              value="">
+              <option disabled={true} value=""> {React.string("Přidat vkladatele")} </option>
+              {availableNames
+              ->Array.map(name => <option key={name} value={name}> {React.string(name)} </option>)
+              ->React.array}
+            </select>
+          </td>
+        </tr>
+      </tbody>
       <tfoot>
         <tr>
           <th scope="row"> {React.string("Celkem")} </th>
-          <td>
+          <td colSpan=2>
             <FormattedCurrency value={amountsSum} />
           </td>
-          <td />
         </tr>
       </tfoot>
     </table>
-    <select
-      disabled={availableNames->Array.length === 0}
-      onChange={event => {
-        let person = ReactEvent.Form.target(event)["value"]
-        if person !== "" {
-          let newValue = value->Dict.copy
-          newValue->Dict.set(person, 0)
-          onChange(newValue)
-        }
-      }}
-      value="">
-      <option disabled={true} value=""> {React.string("Přidat vkladatele")} </option>
-      {availableNames
-      ->Array.map(name => <option key={name} value={name}> {React.string(name)} </option>)
-      ->React.array}
-    </select>
     {switch errorMessage {
     | None => React.null
     | Some(errorMessage) => <InputWrapper.ErrorMessage message={errorMessage} />

diff --git a/src/components/InputDonors/InputDonors.stories.tsx b/src/components/InputDonors/InputDonors.stories.tsx
@@ -27,7 +27,8 @@ const Wrapper = (args: any) => {
 
 export const Base: StoryObj = {
   args: {
-    value: {},
+    legendSlot: "Vkladatelé sudu",
+    value: { Petr: 10000 },
     persons: ["Petr", "Jana", "Karel"],
   },
   render: Wrapper,

diff --git a/src/components/TableConsumptions/TableConsumptions.res b/src/components/TableConsumptions/TableConsumptions.res
@@ -34,7 +34,7 @@ let make = (
           </td>
           <td>
             <button
-              className={`${Styles.button.base}`}
+              className={`${Styles.button.base} ${Styles.button.sizeExtraSmall}`}
               onClick={_ => onDeleteConsumption(consumption)}
               type_="button">
               {React.string("🗑️ Smáznout")}

diff --git a/src/pages/Place/DrinkDialog.module.css b/src/pages/Place/DrinkDialog.module.css
@@ -1,5 +1,5 @@
 .root > :global(.dialogWindow) {
-  --dialog-padding-inline: 3rem;
+  --dialog-padding-inline: clamp(1rem, 4vw, 3rem);
   inline-size: 60ch;
 }
 .root:modal {

diff --git a/src/pages/PlaceSetting/KegDetail.res b/src/pages/PlaceSetting/KegDetail.res
@@ -184,7 +184,7 @@ let make = (
                   {keg.depletedAt !== Null.null
                     ? React.null
                     : <button
-                        className={`${Styles.button.base}`}
+                        className={`${Styles.button.base} ${Styles.button.sizeExtraSmall}`}
                         onClick={_ => onDeleteConsumption(timestampStr)}
                         type_="button">
                         {React.string("🗑️ Smáznout")}

diff --git a/src/styles/components/Styles.res b/src/styles/components/Styles.res
@@ -7,6 +7,7 @@ type buttonClasses = {
   sizeLarge: string,
   sizeMedium: string,
   sizeSmall: string,
+  sizeExtraSmall: string,
   variantDanger: string,
   variantPrimary: string,
   variantStealth: string,

diff --git a/src/styles/components/button.module.css b/src/styles/components/button.module.css
@@ -116,8 +116,9 @@
 
 .sizeExtraSmall {
   --_padding-inline: 0.5rem;
-  --_block-size: 1.25rem;
+  --_block-size: 1rem;
   --_font-weight: var(--font-weight-1);
+  font-size: var(--font-size-14);
 }
 
 .flat {