#56 add: more popup styling

qownnotes · Feb 6, 2024 · e000c15 · e000c15
1 parent d5f71bf
commit e000c15
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 19 deletions.
diff --git a/src/css/app.scss b/src/css/app.scss
@@ -4,12 +4,3 @@
 body.bex.q-body--prevent-scroll {
   position: inherit !important;
 }
-
-// https://quasar.dev/style/color-palette#color-list
-:root {
-  //--q-primary: #3f51b5;
-  --q-primary: rgb(40, 53, 147);
-  --q-secondary: rgb(92, 107, 192);
-  //--q-accent: #8c9eff;
-  --q-accent: rgb(40, 53, 147);
-}
diff --git a/src/css/quasar.variables.scss b/src/css/quasar.variables.scss
@@ -12,9 +12,11 @@
 // to match your app's branding.
 // Tip: Use the "Theme Builder" on Quasar's documentation website.
 
-$primary   : #1976D2;
-$secondary : #26A69A;
-$accent    : #9C27B0;
+// Color variables: https://quasar.dev/style/color-palette#color-list
+// List of color codes: https://quasar.dev/style/sass-scss-variables#variables-list
+$primary   : #283593;
+$secondary : #5c6bc0;
+$accent    : #283593;
 
 $dark      : #1D1D1D;
 $dark-page : #121212;

diff --git a/src/pages/PopupPage.vue b/src/pages/PopupPage.vue
@@ -61,18 +61,19 @@
     <PopupDrawer v-model="leftDrawerOpen" @importBrowserBookmarksClicked="importBrowserBookmarksDialog = true;" />
     <q-page-container>
       <q-page v-if="!inputTokenDialog" class="flex bookmarks-page">
-        <div class="q-pa-md">
+        <div class="q-pa-sm">
           <div class="row">
             <div class="col">
             </div>
             <div class="col">
             </div>
           </div>
           <div class="row">
-            <div class="col q-pa-md q-gutter-sm">
+            <div class="col q-pa-sm q-gutter-sm">
               <q-select
                 v-model="selectedTags"
                 multiple
+                dense
                 use-chips
                 use-input
                 clearable
@@ -89,18 +90,19 @@
                 </template>
               </q-select>
             </div>
-            <div class="col q-pa-md q-gutter-sm">
-              <q-btn round color="secondary" icon="open_in_new" @click="openFilteredBookmarks" accesskey="o">
+            <div class="col q-pa-sm q-gutter-sm text-right">
+              <q-btn size="sm" round color="secondary" icon="open_in_new" @click="openFilteredBookmarks" accesskey="o">
                 <q-tooltip class="bg-accent">{{ getLocale('OpenAllBookmarks') }}</q-tooltip>
               </q-btn>
-              <q-btn round color="secondary" icon="bookmarks" @click="bookmarkAllTabsDialog = true" accesskey="b">
+              <q-btn size="sm" round color="secondary" icon="bookmarks" @click="bookmarkAllTabsDialog = true" accesskey="b">
                 <q-tooltip class="bg-accent">{{ getLocale('BookmarkAllTabs') }}</q-tooltip>
               </q-btn>
-              <q-btn round color="primary" icon="bookmark_add" @click="addBookmarkDialog = true" accesskey="a">
+              <q-btn size="sm" round color="primary" icon="bookmark_add" @click="addBookmarkDialog = true" accesskey="a">
                 <q-tooltip class="bg-accent">{{ getLocale('AddBookmark') }}</q-tooltip>
               </q-btn>
             </div>
           </div>
+          <q-separator />
 
           <q-table
             flat
@@ -504,7 +506,7 @@ export default defineComponent({
 }
 
 .bookmarks-page {
-  min-width: 500px;
+  min-width: 550px;
 
   > div {
     width: 100%;