Improve button styling. Reference #416

F43nd1r · Apr 1, 2023 · f10aa6f · f10aa6f
1 parent 74c304c
commit f10aa6f
Show file tree

Hide file tree

Showing 7 changed files with 32 additions and 18 deletions.
diff --git a/acrarium/frontend/styles/shared-styles.js b/acrarium/frontend/styles/shared-styles.js
@@ -64,4 +64,12 @@ registerStyles("vaadin-grid",
         }
     `
 )
+registerStyles("vaadin-button",
+    // language=css
+    css`
+        :host(:hover)::before {
+            opacity: 0.05;
+        }
+    `
+)
 
diff --git a/acrarium/src/main/dev-bundle/config/stats.json b/acrarium/src/main/dev-bundle/config/stats.json
@@ -283,7 +283,7 @@
     "elements/card.ts": "20a768900559e4c3763d3d80410d3f13788525e3e3334ecc61df53ac86273c10",
     "elements/dialog-content.ts": "ef0934719280aa60a47731e4213e88d1f43f4b1475b1c7a313f0c82d0d4f1db7",
     "elements/image-with-label.ts": "f55f5a9539e4a3dd4a4c496eeea6f5359a3c2b6649147ffeeb0e11ae1921195f",
-    "styles/shared-styles.js": "ef838ba9c2a42a34a6ef219d3b3dd04d8e5321179180a6037e5287ac8d432d0a",
+    "styles/shared-styles.js": "4144bb6f78b8f0393409f6f9d7a93fac70a756b24ba896037c6ebc5c69d0b006",
     "com/github/appreciated/apexcharts/apexcharts-wrapper-styles.css": "d837b7f39ff5cac62b2e0d4a48bb9a2c9c073451ee5c96ca4ba9394e7f91a542",
     "com/github/appreciated/apexcharts/apexcharts-wrapper.ts": "a7651281f94f4d2ec2eef5ce5dbe70985f2005212f4141f1ddcacefda799edff",
     "comboBoxConnector.js": "1d004c3dae9c76f8bcc68678abe1b8f7bdc8b456f5c9c4c7f190df8ed25d66cd",
@@ -309,7 +309,7 @@
   },
   "themeJsonContents": {},
   "entryScripts": [
-    "VAADIN/build/indexhtml-6dd69296.js"
+    "VAADIN/build/indexhtml-fc2335b1.js"
   ],
   "webComponents": [],
   "packageJsonHash": "f64b2504e1a1b91c9fe51134b19b44d17d016f6440fb0766e575bd33778d85e1"

diff --git a/acrarium/src/main/dev-bundle/webapp/index.html b/acrarium/src/main/dev-bundle/webapp/index.html
@@ -5,19 +5,19 @@
 
 <html lang="en">
 <head>
-    <meta charset="UTF-8"/>
-    <meta name="viewport" content="width=device-width, initial-scale=1"/>
-    <style>
-        body, #outlet {
-            height: 100vh;
-            width: 100%;
-            margin: 0;
-        }
-    </style>
-    <meta name="robots" content="noindex,nofollow"/>
-    <!-- index.ts is included here automatically (either by the dev server or during the build) -->
+  <meta charset="UTF-8"/>
+  <meta name="viewport" content="width=device-width, initial-scale=1"/>
+  <style>
+    body, #outlet {
+      height: 100vh;
+      width: 100%;
+      margin: 0;
+    }
+  </style>
+  <meta name="robots" content="noindex,nofollow"/>
+  <!-- index.ts is included here automatically (either by the dev server or during the build) -->
 
-    <script type="module" crossorigin src="./VAADIN/build/indexhtml-6dd69296.js"></script>
+  <script type="module" crossorigin src="./VAADIN/build/indexhtml-fc2335b1.js"></script>
 </head>
 <body>
 <!-- This outlet div is where the views are rendered -->

diff --git a/acrarium/src/main/kotlin/com/faendir/acra/ui/component/grid/renderer/ButtonRenderer.kt b/acrarium/src/main/kotlin/com/faendir/acra/ui/component/grid/renderer/ButtonRenderer.kt
@@ -1,5 +1,7 @@
 package com.faendir.acra.ui.component.grid.renderer
 
+import com.faendir.acra.ui.ext.SizeUnit
+import com.faendir.acra.ui.ext.setMargin
 import com.vaadin.flow.component.button.Button
 import com.vaadin.flow.component.button.ButtonVariant
 import com.vaadin.flow.component.icon.Icon
@@ -8,7 +10,8 @@ import com.vaadin.flow.data.renderer.ComponentRenderer
 
 class ButtonRenderer<T>(icon: VaadinIcon, onCreate: Button.(T) -> Unit = {}, onClick: (T) -> Unit) : ComponentRenderer<Button, T>({ t ->
     Button(Icon(icon)) { onClick(t) }.apply {
-        addThemeVariants(ButtonVariant.LUMO_TERTIARY_INLINE)
+        addThemeVariants(ButtonVariant.LUMO_TERTIARY)
+        setMargin(0, SizeUnit.PIXEL)
         onCreate(t)
     }
 }), InteractiveColumnRenderer
diff --git a/acrarium/src/main/kotlin/com/faendir/acra/ui/component/grid/renderer/RouteButtonRenderer.kt b/acrarium/src/main/kotlin/com/faendir/acra/ui/component/grid/renderer/RouteButtonRenderer.kt
@@ -1,5 +1,7 @@
 package com.faendir.acra.ui.component.grid.renderer
 
+import com.faendir.acra.ui.ext.SizeUnit
+import com.faendir.acra.ui.ext.setMargin
 import com.vaadin.flow.component.Component
 import com.vaadin.flow.component.button.Button
 import com.vaadin.flow.component.button.ButtonVariant
@@ -15,7 +17,8 @@ class RouteButtonRenderer<T>(icon: VaadinIcon, target: Class<out Component>, get
             element.setAttribute("target", "_blank")
             element.setAttribute("rel", "noopener noreferrer")
             add(Button(Icon(icon)).apply {
-                addThemeVariants(ButtonVariant.LUMO_TERTIARY_INLINE)
+                addThemeVariants(ButtonVariant.LUMO_TERTIARY)
+                setMargin(0, SizeUnit.PIXEL)
             })
         }
     }), InteractiveColumnRenderer
diff --git a/acrarium/src/main/kotlin/com/faendir/acra/ui/view/bug/tabs/admincards/PropertiesCard.kt b/acrarium/src/main/kotlin/com/faendir/acra/ui/view/bug/tabs/admincards/PropertiesCard.kt
@@ -52,7 +52,7 @@ class PropertiesCard(
                     value = bug.title
                     setWidthFull()
                     isClearButtonVisible
-                    val saveButton = Translatable.createButton(Messages.SAVE, theme = ButtonVariant.LUMO_TERTIARY_INLINE) {
+                    val saveButton = Translatable.createButton(Messages.SAVE, theme = ButtonVariant.LUMO_TERTIARY) {
                         bugRepository.setTitle(
                             appId,
                             bugId,

diff --git a/acrarium/src/main/kotlin/com/faendir/acra/ui/view/main/MainView.kt b/acrarium/src/main/kotlin/com/faendir/acra/ui/view/main/MainView.kt
@@ -83,7 +83,7 @@ class MainView(applicationContext: GenericApplicationContext) : Composite<AppLay
                     icon = VaadinIcon.POWER_OFF.create()
                     removeThemeVariants(ButtonVariant.LUMO_PRIMARY)
                     addThemeVariants(ButtonVariant.LUMO_TERTIARY)
-                    setPaddingRight(10.0, SizeUnit.PIXEL)
+                    setMarginRight(10.0, SizeUnit.PIXEL)
                 }
             )
         }