Use tailwind classes instead of custom styles

shipshapecode · Dec 22, 2019 · 23818a6 · 23818a6
1 parent 5b44e45
commit 23818a6
Show file tree

Hide file tree

Showing 4 changed files with 5 additions and 14 deletions.
diff --git a/app/components/color-picker.hbs b/app/components/color-picker.hbs
@@ -8,7 +8,7 @@
   @side="top-end"
   @spacing={{10}}
   @targetId="toggle-picker"
-  @tooltipClass="w-full"
+  @tooltipClass="bg-main border-menu text-alt w-full"
 >
   <div class="flex justify-between w-100">
     <button type="button" {{on "click" this.toggleIsShown}}>

diff --git a/app/components/color-picker.js b/app/components/color-picker.js
@@ -29,7 +29,7 @@ export default class ColorPicker extends Component {
       components: {
         // Main components
         preview: false,
-        opacity: true,
+        opacity: false,
         hue: true,
 
         // Input / output Options

diff --git a/app/styles/main.scss b/app/styles/main.scss
@@ -103,12 +103,6 @@ button:hover svg.icon * {
   color: var(--alt-color);
 }
 
-.ember-popover {
-  color: var(--alt-color);
-  background-color: var(--main-color);
-  border-color: var(--menu-color);
-}
-
 .ember-popover[x-placement^='bottom'] .custom-arrow {
   border-bottom-color: var(--main-color);
   top: -8px;
@@ -134,13 +128,9 @@ button:hover svg.icon * {
 }
 
 .pcr-app[data-theme='nano'] {
-  @apply rounded-lg w-full;
-
-  background-color: var(--menu-color);
-  overflow: hidden;
+  @apply bg-menu overflow-hidden rounded-lg w-full;
 
   .pcr-result {
-    background-color: var(--main-color);
-    color: var(--alt-color);
+    @apply bg-main text-alt;
   }
 }
diff --git a/app/templates/application.hbs b/app/templates/application.hbs
@@ -35,6 +35,7 @@
         @side="bottom"
         @spacing={{10}}
         @targetId="toggle-menu"
+        @tooltipClass="bg-main border-menu text-alt"
       >
         <LinkTo @route="contrast" {{on "click" this.toggleMenuIsShown}}>
           Check Contrast