fix: tag styling

projectcaluma · Aug 25, 2023 · d41ad59 · d41ad59
1 parent 70160f0
commit d41ad59
Show file tree

Hide file tree

Showing 8 changed files with 52 additions and 26 deletions.
diff --git a/addon/components/document-list-item.hbs b/addon/components/document-list-item.hbs
@@ -31,7 +31,7 @@
     {{#each @document.marks as |mark|}}
       {{#if mark.active}}
         <div title={{mark.tooltip}}>
-          <FaIcon @icon={{mark.icon}} />
+          <FaIcon @icon={{mark.icon}} @fixedWidth={{true}} />
         </div>
       {{/if}}
     {{/each}}

diff --git a/addon/components/mark-manager.hbs b/addon/components/mark-manager.hbs
@@ -8,7 +8,7 @@
           'mark-mixed light-blue'
         }}"
     >
-      <FaIcon @icon={{mark.icon}} />
+      <FaIcon @icon={{mark.icon}} @size="xs" @fixedWidth={{true}} />
       <Input
         @type="checkbox"
         hidden

diff --git a/addon/components/tag-filter.hbs b/addon/components/tag-filter.hbs
@@ -8,18 +8,14 @@
     <button
       type="button"
       class="tag uk-text-small
-        {{if
-          (includes tag.id this.selectedTagsArray)
-          'uk-background-secondary'
-          'uk-background-primary'
-        }}"
+        {{if (includes tag.id this.selectedTagsArray) 'tag--active' }}"
       {{on "click" (fn this.toggleTag tag)}}
       data-test-tag
       data-test-tag-id={{tag.id}}
       title={{tag.tooltip}}
     >
       {{#if tag.isMark}}
-        <FaIcon @icon={{tag.icon}} />
+        <FaIcon @icon={{tag.icon}} @size="sm" @fixedWidth={{true}} />
       {{else}}
         {{tag.name}}
       {{/if}}

diff --git a/addon/components/tag-manager.hbs b/addon/components/tag-manager.hbs
@@ -8,10 +8,9 @@
       {{#if this.tags.length}}
         <div class="uk-margin-bottom">
           {{#each this.tags as |tag|}}
-            <span class="tag uk-text-small {{if tag.selectedByAll 'uk-background-primary' 'tag-mixed'}}">
+            <span class="tag uk-text-small {{if tag.selectedByAll 'tag--active'}}">
               {{tag.emberModel.name}}
               <button
-                class="uk-margin-small-left"
                 type="button"
                 uk-close
                 {{set-style color=(if tag.selectedByAll "white" "black")}}

diff --git a/app/styles/components/_document-details.scss b/app/styles/components/_document-details.scss
@@ -20,14 +20,14 @@
   margin-top: 1dvh;
 
   label {
-    height: 36px;
-    width: 36px;
+    height: 1.5rem;
+    width: 1.5rem;
     padding: 5px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     vertical-align: middle;
-    border-radius: 50px;
+    border-radius: 10px;
     border: 1px solid $global-muted-color;
     z-index: 0;
     background-color: #fff;
@@ -36,18 +36,18 @@
 
   label.mark-active {
     background-color: $global-primary-background;
+    border-color: $global-primary-background;
 
-    svg {
+    svg path {
       fill: #fff;
     }
   }
 
   label.mark-mixed {
-    border: 2px solid $global-primary-background;
+    border-color: $global-primary-background;
   }
-}
 
-.tag-mixed {
-  background-color: #fff;
-  color: #000 !important;
+  label:hover {
+    box-shadow: $tag-hover-shadow;
+  }
 }
diff --git a/app/styles/components/_document-list.scss b/app/styles/components/_document-list.scss
@@ -7,3 +7,7 @@
 .list-marks > div {
   margin-right: 4px;
 }
+
+.list-marks svg {
+  min-width: 1.25em;
+}
diff --git a/app/styles/ember-alexandria.scss b/app/styles/ember-alexandria.scss
@@ -3,6 +3,8 @@
 @import "ember-uikit";
 @import "skeleton-loading";
 
+$tag-hover-shadow: 0 2px 8px rgba(0 0 0 / 20%);
+
 // Components
 @import "components/category-nav/category";
 @import "components/document-card";
@@ -41,17 +43,42 @@
 
 // tag-manager, tag-filter
 .tag {
-  padding: 0.3em 0.6em;
-  margin: 0.1em;
-  border-radius: 500px;
+  padding: 0.2em 0.6em;
+  margin: 0.2em;
+  border-radius: 10px;
   display: inline-flex;
-  color: #fff;
-  border: 2px solid $global-primary-background;
+  color: $global-color;
+  border: 1px solid $global-muted-color;
+  background-color: white;
   align-items: center;
   cursor: pointer;
 
   svg {
     margin: 0.2rem;
-    fill: #fff;
+    height: $global-small-font-size;
+  }
+
+  &--active {
+    color: white;
+    border-color: $global-primary-background;
+    background-color: $global-primary-background;
+  }
+
+  &:hover {
+    text-decoration: none;
+    color: $global-color;
+    box-shadow: $tag-hover-shadow;
+  }
+
+  &--active:hover {
+    color: white;
+  }
+
+  .uk-close {
+    margin-left: 5px;
+
+    > svg {
+      width: 0.75rem;
+    }
   }
 }
diff --git a/tests/dummy/mirage/factories/category.js b/tests/dummy/mirage/factories/category.js
@@ -17,7 +17,7 @@ export default Factory.extend({
 
   withDocuments: trait({
     afterCreate(category, server) {
-      server.createList("document", 5, { category });
+      server.createList("document", 2, { category });
     },
   }),
 });