toil: cleanup css classes

Author: skipi

front/Dockerfile

@@ -47,9 +47,8 @@ RUN mix sentry_recompile && mix compile --warnings-as-errors
 # -- node stage
 FROM node:16-alpine AS node
 WORKDIR /assets
-COPY front/assets/package.json front/assets/package-lock.json ./
-RUN npm set progress=false && npm install
 COPY front/assets ./
+RUN npm ci --force
 # -- node stage
 
 # -- dev stage - for local development

front/assets/css/app.css

@@ -107,42 +107,22 @@ summary.no-expand::marker {
 }
 
 .material-symbols-outlined {
-  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 16;
-  font-size: 16px;
-}
-
-.material-symbols-outlined.f1 {
-  font-size: 3rem;
-}
-
-.material-symbols-outlined.f2 {
-  font-size: 2.25rem;
-}
-
-.material-symbols-outlined.f3 {
-  font-size: 1.5rem;
-}
-
-.material-symbols-outlined.f4 {
-  font-size: 1.25rem;
-}
-
-.material-symbols-outlined.f5 {
-  font-size: 1rem;
-}
-
-.material-symbols-outlined.f6 {
-  font-size: .875rem;
+  font-variation-settings:
+    'FILL' var(--material-symbol-fill, 0),
+    'wght' var(--material-symbol-weight, 300),
+    'GRAD' var(--material-symbol-grad, 0),
+    'opsz' var(--material-symbol-opsz, 20);
 }
 
-.material-symbols-outlined.f7 {
-  font-size: .75rem;
+.material-symbols-outlined.fill {
+  --material-symbol-fill: 1;
 }
 
 .material-symbols-outlined.b {
-  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
+  --material-symbol-weight: 400;
 }
 
+
 sem-tooltip slot[slot="content"],
 sem-popover slot[slot="content"] {
   display: none;
@@ -466,21 +446,43 @@ sem-popover {
           user-select: none;
 }
 
-.material-symbols-outlined {
-  font-variation-settings:
-  'FILL' 0,
-  'wght' 300,
-  'GRAD' 0,
-  'opsz' 20
+.gap1 {
+  gap: 0.25rem;
+}
+
+.gap2 {
+  gap: 0.5rem;
+}
+
+.gap3 {
+  gap: 0.75rem;
+}
+
+.gap4 {
+  gap: 1rem;
+}
+
+.flex1 {
+  flex: 1 1 0%;
+}
+
+.flex2 {
+  flex: 2 2 0%;
+}
+
+.flex3 {
+  flex: 3 3 0%;
+}
+
+.flex4 {
+  flex: 4 4 0%;
+}
+
+.flex-break {
+  flex-basis: 100%;
+  height: 0;
+}
+.break-column {
+  flex-basis: 100%;
+  width: 0;
 }
-.material-symbols-outlined.fill {
-  font-variation-settings:
-  'FILL' 1,
-  'wght' 300,
-  'GRAD' 0,
-  'opsz' 20
-}
-.material-symbols-outlined.md-18 { font-size: 18px; }
-.material-symbols-outlined.md-24 { font-size: 24px; }
-.material-symbols-outlined.md-36 { font-size: 36px; }
-.material-symbols-outlined.md-48 { font-size: 48px; }

front/lib/front_web/templates/deployments/_history.html.eex

@@ -18,7 +18,7 @@
     <%= if Enum.empty?(@page.deployments) do %>
         <div class="pa3 pv2">
             <div class="justify-between tc pa3">
-                <span class="material-symbols-outlined md-36">hourglass_empty</span>
+                <span class="material-symbols-outlined f1">hourglass_empty</span>
                 <div class="flex justify-around">
                     <p class="gray measure">
                         We didn't find any deployments matching your criteria.

front/lib/front_web/templates/deployments/index.html.eex

@@ -18,12 +18,12 @@
         </div>
         <div class="flex flex-row-reverse items-center">
           <a href="#" aria-label="grid-view" aria-controls="deployments-container" aria-selected="false">
-            <span class="material-symbols-outlined md-36 link-blue mr2" >
+            <span class="material-symbols-outlined f1 link-blue mr2" >
               window
             </span>
           </a>
           <a href="#" aria-label="list-view" aria-controls="deployments-container" aria-selected="true">
-            <span class="material-symbols-outlined md-36 link-blue mr2 fill">
+            <span class="material-symbols-outlined f1 link-blue mr2 fill">
               table_rows
             </span>
           </a>

front/lib/front_web/templates/deployments/items/__empty.html.eex

@@ -1,7 +1,7 @@
 <div class="pa3 pv2 bg-white">
     <div class="flex items-center justify-between tc pa3">
         <div class="flex items-center justify-around">
-            <span class="material-symbols-outlined md-24 mr3">rocket</span>
+            <span class="material-symbols-outlined f1 mr3">rocket</span>
             <p class="gray measure mb0">
                 Waiting for your first deployment. <br>
                 Connect this target to a pipeline and start shipping.

front/lib/front_web/templates/layout/_head.html.eex

@@ -14,7 +14,7 @@
 
   <!-- Semaphore CSS -->
   <link rel="stylesheet" media="screen" href="<%= assets_path() %>/css/app.css" />
-  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20,300,0,0;20,300,1,0;24,400,0,0;24,400,1,0&display=swap"/>
 
   <!-- Favicon -->
   <link rel="alternate icon" class="js-site-favicon" type="image/png" href="<%= assets_path() %>/images/favicon.png" />

front/lib/front_web/templates/layout/dashboard.html.eex

@@ -27,7 +27,7 @@
       </a>
       <%= if FeatureProvider.feature_enabled?(:organization_health, param: @conn.assigns[:organization_id]) do %>
         <a href=<%= dashboard_path(@conn, :index, dashboard: "organization-health") %> class="tab <%= if Map.get(assigns, :dashboard) == "organization-health", do: "tab--active" %>">
-            <span class="material-symbols-outlined mr2 md-18">hive</span>
+            <span class="material-symbols-outlined mr2 f3">hive</span>
             <span>Organization Health</span>
         </a>
       <% end %>

front/lib/front_web/templates/schedulers/history/page.html.eex

@@ -1,7 +1,7 @@
 <%= if Enum.empty?(@page.triggers) do %>
   <div class="pa3 pv2">
     <div class="justify-between tc pa3">
-      <span class="material-symbols-outlined md-36">hourglass_empty</span>
+      <span class="material-symbols-outlined f1">hourglass_empty</span>
       <div class="flex justify-around">
         <p class="gray measure">
           We didn't find any workflows matching your criteria.

front/lib/front_web/templates/schedulers/tasks/last_run.html.eex

@@ -9,7 +9,7 @@
     <% else %>
       <div class="flex items-center justify-between tc pa3">
         <div class="flex items-center justify-around">
-          <span class="material-symbols-outlined md-24 mr3">hourglass_top</span>
+          <span class="material-symbols-outlined f1 mr3">hourglass_top</span>
           <p class="gray measure mb0">
             Waiting for your first task execution.
           </p>

front/lib/front_web/templates/schedulers/workflows/conceiving.html.eex

@@ -1,4 +1,4 @@
 <div class="flex flex-row items-center justify-around">
-  <span class="material-symbols-outlined md-36 mr3 dark-indigo">pending</span>
+  <span class="material-symbols-outlined f1 mr3 dark-indigo">pending</span>
   <p class="measure mb0 dark-indigo">Your request is currently being processed and the workflow will start shortly.</p>
 </div>