button same size (#156)

pyronear · Jun 23, 2024 · 30a25d4 · 30a25d4
1 parent c40c5d0
commit 30a25d4
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 25 deletions.
diff --git a/app/assets/css/style.css b/app/assets/css/style.css
@@ -14,3 +14,20 @@
     background: #555;
   }
 
+/* custom.css */
+.btn-uniform {
+  width: 100%;
+  border: none;
+  text-align: center;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+
+/* custom.css */
+a.no-underline {
+  text-decoration: none;
+}
+
diff --git a/app/pages/homepage.py b/app/pages/homepage.py
@@ -46,11 +46,8 @@ def homepage_layout(user_headers, user_credentials):
                                             "Activer / Désactiver l'animation",
                                             id="auto-move-button",
                                             n_clicks=1,
-                                            style={
-                                                "backgroundColor": "#FD5252",
-                                                "width": "100%",
-                                                "border": "none",
-                                            },
+                                            className="btn-uniform",
+                                            style={"backgroundColor": "#FD5252"},
                                         ),
                                         width=3,
                                     ),
@@ -59,25 +56,20 @@ def homepage_layout(user_headers, user_credentials):
                                             "Afficher / Cacher la prédiction",
                                             id="hide-bbox-button",
                                             n_clicks=0,
-                                            style={
-                                                "backgroundColor": "#FEBA6A",
-                                                "width": "100%",
-                                                "border": "none",
-                                            },
+                                            className="btn-uniform",
+                                            style={"backgroundColor": "#FEBA6A"},
                                         ),
                                         width=3,
                                     ),
                                     dbc.Col(
                                         html.A(
                                             dbc.Button(
                                                 "Télécharger l'image",
-                                                style={
-                                                    "backgroundColor": "#2C796E",
-                                                    "width": "100%",
-                                                    "border": "none",
-                                                },
+                                                className="btn-uniform",
+                                                style={"backgroundColor": "#2C796E"},
                                                 id="dl-image-button",
                                             ),
+                                            className="no-underline",
                                             id="download-link",
                                             download="",
                                             href="",
@@ -90,16 +82,14 @@ def homepage_layout(user_headers, user_credentials):
                                             "Acquitter l'alerte",
                                             id="acknowledge-button",
                                             n_clicks=1,
-                                            style={
-                                                "backgroundColor": "#054546",
-                                                "width": "100%",
-                                                "border": "none",
-                                            },
+                                            className="btn-uniform",
+                                            style={"backgroundColor": "#054546"},
                                         ),
                                         width=3,
                                     ),
                                 ],
                                 className="mb-4",
+                                style={"display": "flex"},
                             ),
                         ],
                         width=8,
@@ -111,11 +101,8 @@ def homepage_layout(user_headers, user_credentials):
                             dbc.Row(
                                 dbc.Button(
                                     "Agrandir la carte",
-                                    style={
-                                        "backgroundColor": "#FEBA6A",
-                                        "width": "100%",
-                                        "border": "none",
-                                    },
+                                    className="btn-uniform",
+                                    style={"backgroundColor": "#FEBA6A"},
                                     id="map-button",
                                 ),
                                 className="mb-2",