From 61f581db09a364d3607975e423c1e5838454b52f Mon Sep 17 00:00:00 2001
From: Furkan Sahin <furkan-dev@proton.me>
Date: Wed, 1 Jun 2022 08:40:20 -0500
Subject: Play around with action bar CSS, make main background grey

---
 public/index.html                   |  2 +-
 src/components/EditorActions.svelte | 20 +++++++++++++++++---
 2 files changed, 18 insertions(+), 4 deletions(-)
diff --git a/public/index.html b/public/index.html
index 3e7c201..f7dbc53 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" style="background-color: grey;">
 <head>
 	<meta charset='utf-8'>
 	<meta name='viewport' content='width=device-width,initial-scale=1'>
diff --git a/src/components/EditorActions.svelte b/src/components/EditorActions.svelte
index fa2a041..aacbf0e 100644
--- a/src/components/EditorActions.svelte
+++ b/src/components/EditorActions.svelte
@@ -108,9 +108,15 @@
   <FileUpload accept="application/json" bind:files={dbFile}>
     <Label>Import DB</Label>
   </FileUpload>
-  <Button variant="raised" ripple={false} on:click={exportDB}>
+  <Button
+    variant="raised"
+    ripple={false}
+    on:click={exportDB}
+    style="overflow: hidden; margin-left: 0.1em; margin-right: 0.5em;"
+  >
     <Label>Export DB</Label>
   </Button>
+  <div id="info" />
 </div>
 <Snackbar bind:this={snackbar} labelText={snackbarText}>
   <Label />
@@ -120,9 +126,17 @@
 </Snackbar>
 
 <style>
+
   #action-bar {
+    display: flex;
+    justify-content: space-evenly;
+    align-content: center;
+    border-radius: 1em;
+    /* background-image: linear-gradient(to right, red, purple); */
+    background-size: 100vw;
+    max-height: 2em;
     max-width: 100vw;
-    overflow-x: auto;
-    white-space: nowrap;
+    overflow: hidden;
+    padding: 0.6em;
   }
 </style>
-- 
cgit v1.2.3

