Merge pull request 'Finish Tailwind migration' (#67) from chore/finish_tailwind_migration into feature/wallet_history

Reviewed-on: #67

.drone.yml

@@ -29,9 +29,6 @@ steps:
       - yarn install
       - rake css:build
       - rake spec
-    when:
-      branch:
-        - master
   - name: rebuild-cache
     image: drillster/drone-volume-cache
     volumes:

app/assets/stylesheets/components/base.css

@@ -1,11 +1,12 @@
 @layer base {
   body {
-    @apply leading-none
+    @apply leading-none bg-cover bg-fixed;
+    background-image: linear-gradient(35deg, rgba(255,0,255,0.2) 0, rgba(13,79,153,0.8) 100%), url('/img/bg-1.jpg');
   }
 
-  /* h1, h2, h3 { */
+  body#admin {
-  /*   @apply font-light; */
+    background-image: linear-gradient(35deg, rgba(255,0,255,0.2) 0, rgba(153,12,14,0.9) 100%), url('/img/bg-1.jpg');
-  /* } */
+  }
 
   h1 {
     @apply text-3xl uppercase;
@@ -26,4 +27,16 @@
   main section:first-of-type {
     @apply pt-0;
   }
+
+  main p {
+    @apply mb-4 leading-6;
+  }
+
+  main ul {
+    @apply mb-6;
+  }
+
+  main ul li {
+    @apply leading-6;
+  }
 }

app/assets/stylesheets/legacy.sass.scss

@@ -1 +0,0 @@
-@import "legacy/layout";

app/assets/stylesheets/legacy/_layout.scss

@@ -1,58 +0,0 @@
-@import "variables";
-@import "mediaqueries";
-
-body {
-  background: linear-gradient(35deg, rgba(255,0,255,0.2) 0, rgba(13,79,153,0.8) 100%),
-              url('/img/bg-1.jpg');
-  background-size: cover;
-  background-attachment: fixed;
-}
-
-body#admin {
-  background: linear-gradient(35deg, rgba(255,0,255,0.2) 0, rgba(153,12,14,0.9) 100%),
-              url('/img/bg-1.jpg');
-  background-size: cover;
-  background-attachment: fixed;
-}
-
-.ks-site-icon {
-  svg {
-    display: inline-block;
-    height: 1.875rem;
-    vertical-align: top;
-    width: auto;
-  }
-}
-
-main {
-  p {
-    line-height: 1.5rem;
-    margin-bottom: 1rem;
-
-    &.notice {
-      text-align: center;
-    }
-  }
-
-  ul {
-    margin-bottom: 1.5rem;
-
-    li {
-      line-height: 1.5rem;
-    }
-  }
-}
-
-.grid {
-  display: grid;
-
-  &.services {
-    grid-template-columns: 1fr 1fr 1fr;
-    grid-row-gap: 1rem;
-    grid-column-gap: 2rem;
-
-    @include media-max(small) {
-      grid-template-columns: 1fr;
-    }
-  }
-}

app/assets/stylesheets/legacy/_mediaqueries.scss

@@ -1,33 +0,0 @@
-$breakpoints-max: (
-  small: 600px,
-  medium: 960px,
-  large: 1280px
-);
-
-$breakpoints-min: (
-  small: 601px,
-  medium: 961px,
-  large: 1281px
-);
-
-@mixin media-max($screen-size) {
-  @if map-has-key($breakpoints-max, $screen-size) {
-    @media (max-width: map-get($breakpoints-max, $screen-size)) {
-      @content;
-    }
-  } @else {
-    // Debugging
-    @warn "'#{$screen-size}' has not been declared as a breakpoint."
-  }
-}
-
-@mixin media-min($screen-size) {
-  @if map-has-key($breakpoints-min, $screen-size) {
-    @media (min-width: map-get($breakpoints-min, $screen-size)) {
-      @content;
-    }
-  } @else {
-    // Debugging
-    @warn "'#{$screen-size}' has not been declared as a breakpoint."
-  }
-}

app/assets/stylesheets/legacy/_variables.scss

@@ -1,13 +0,0 @@
-$content-width: 800px;
-$content-max-width: 100%;
-
-$text-color-body: #222;
-$text-color-discreet: #888;
-
-$background-color-notice: #efffc4;
-$background-color-alert: #fff4c2;
-
-$color-blue: #0d4f99;
-$color-purple: #8955a0;
-$color-red-bright: #c00;
-$color-red-dark: #990c0e;

app/views/dashboard/index.html.erb

@@ -6,7 +6,7 @@
       Your Kosmos account and password currently give you access to these
       services:
     </p>
-    <div class="grid services mt-12">
+    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6 services mt-12">
       <div>
         <h3 class="mb-3.5">
           <%= link_to "Chat", "https://wiki.kosmos.org/Services:Chat", class: "ks-text-link" %>

app/views/layouts/application.html.erb

@@ -6,7 +6,6 @@
     <%= csp_meta_tag %>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link href="https://assets.kosmos.org/fonts/open-sans/open-sans.css" rel="stylesheet">
-    <%= stylesheet_link_tag 'legacy', "data-turbo-track": "reload" %>
     <%= stylesheet_link_tag 'application', "data-turbo-track": "reload" %>
     <%= javascript_importmap_tags %>
   </head>
@@ -18,7 +17,7 @@
             <div class="flex items-center justify-between h-16 px-4 sm:px-0">
               <div class="flex items-center">
                 <div class="ks-site-icon flex-shrink-0">
-                  <%= render partial: "shared/icons/comet" %>
+                  <%= render partial: "shared/icons/comet", locals: { custom_class: "inline-block align-top w-auto h-7" } %>
                 </div>
                 <% if user_signed_in? && current_user.confirmed? %>
                   <div class="hidden md:block">

app/views/shared/icons/_comet.html.erb

@@ -1 +1 @@
-<svg id="icon-comet" width="65.364" height="55.773" enable-background="new 0 0 100 100" version="1.1" viewBox="0 0 65.364 55.773" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><g id="layer1" transform="translate(28.868 20.259)" fill="#fff"><path id="path2" d="m22.81-9.2546-0.0137-0.0072c-0.0445-0.0196-0.0895-0.04052-0.13335-0.06078l-23.822-10.937s2.0034 9.219 2.914 11.778c0 0-27.292-8.1582-30.623-8.9354 1.0916 4.2618 20.006 40.848 20.006 40.848 3.8225 7.7608 12.677 12.083 21.912 12.083 12.949 0 23.446-10.497 23.446-23.446 6.6e-4 -9.4655-5.609-17.62-13.685-21.323z" fill="#fff" stroke-width=".65365"/></g></svg>
+<svg id="icon-comet" class="<%= custom_class %>" width="65.364" height="55.773" enable-background="new 0 0 100 100" version="1.1" viewBox="0 0 65.364 55.773" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><g id="layer1" transform="translate(28.868 20.259)" fill="#fff"><path id="path2" d="m22.81-9.2546-0.0137-0.0072c-0.0445-0.0196-0.0895-0.04052-0.13335-0.06078l-23.822-10.937s2.0034 9.219 2.914 11.778c0 0-27.292-8.1582-30.623-8.9354 1.0916 4.2618 20.006 40.848 20.006 40.848 3.8225 7.7608 12.677 12.083 21.912 12.083 12.949 0 23.446-10.497 23.446-23.446 6.6e-4 -9.4655-5.609-17.62-13.685-21.323z" fill="#fff" stroke-width=".65365"/></g></svg>

package.json

@@ -14,8 +14,7 @@
   },
   "version": "0.3.0",
   "scripts": {
-    "build:css:sass": "sass ./app/assets/stylesheets/legacy.sass.scss ./app/assets/builds/legacy.css --no-source-map --load-path=node_modules",
     "build:css:tailwind": "tailwindcss --postcss -i ./app/assets/stylesheets/application.tailwind.css -o ./app/assets/builds/application.css",
-    "build:css": "yarn run build:css:sass && yarn run build:css:tailwind"
+    "build:css": "yarn run build:css:tailwind"
   }
 }