clean-up/Remove locally defined fledbox classes

Author: LewisYoul

app/assets/stylesheets/helpers.scss

@@ -24,22 +24,6 @@
   overflow-y: hidden;
 }
 
-// FLEXBOX
-
-.flex { display: flex }
-.inline-flex { display: inline-flex; }
-.flex-column { flex-direction: column; }
-.v-center { align-items: center; }
-.v-bottom { align-items: baseline; }
-.h-center { justify-content: center; }
-.flex-end { justify-content: flex-end; }
-
-.space-between { justify-content: space-between; }
-
-.flex-1 { flex: 1; }
-.flex-2 { flex: 2; }
-.flex-3 { flex: 3; }
-
 // DISPLAY
 
 .block { display: block; }

app/views/devise/registrations/edit.html.erb

@@ -17,7 +17,7 @@
         <%= form_for current_user, url: modify_users_path, html: { data: { controller: "form", form_enabled_class: "button--cta-primary", form_disabled_class: "button--disabled" }, method: :put } do |f| %>
 
           <div>
-            <div id="upload" data-controller="upload modal" data-modal-url-value='/modals/users/edit_avatar' class="mt-1 edit-avatar--wrapper flex v-center">
+            <div id="upload" data-controller="upload modal" data-modal-url-value='/modals/users/edit_avatar' class="mt-1 edit-avatar--wrapper flex items-center">
               <img data-target="upload.avatar" src="<%= current_user.avatar_url %>" width="60" height="60" style="border-radius: 50%;">
               <button class="ml-4 button--cta-tertiary" data-action="click->upload#selectNewImage">Edit avatar</button>
               <%= f.file_field :avatar, class: "hidden", data: { target: "upload.fileInput", action: "change->upload#handleFileSelect open-avatar-modal@window->modal#present" } %>

app/views/shared/_sidebar.html.erb

@@ -3,7 +3,7 @@
     <span class="bold"><%= @page_title.upcase %></span>
   </div>
 
-  <div class="flex h-center">
+  <div class="flex justify-center">
     <%= link_to('NEW SNIPPET', @modal_url, data: { controller: 'modal', action: 'modal#present', modal_url_value: @modal_url }, class: 'button--sidebar') %>
   </div>
 

app/views/shared/_topbar.html.erb

@@ -1,13 +1,13 @@
 <div id="header">
   <div id="header-nav-wrapper">
     <div id="header-nav" class="position-relative">
-      <div class="flex v-center flex-1">
+      <div class="flex items-center flex-1">
         <%= link_to root_path do %>
           <div class="border-radius-50" style="background-color: #3AAFA9; height: 40px; width: 40px;"></div>
         <% end %>
       </div>
 
-      <div class="flex v-center relative">
+      <div class="flex items-center relative">
         <% if user_signed_in? %>
           <%= render partial: 'shared/nav_item', locals: { path: root_path, page_title: 'Feed', icon: 'home' } %>
           <%= render partial: 'shared/nav_item', locals: { path: folders_path, page_title: 'Folders', icon: 'folder' } %>
@@ -24,19 +24,12 @@
       </div>
 
       <% if user_signed_in? %>
-        <div class="flex v-center flex-1 flex-end">
+        <div class="flex items-center flex-1 justify-end">
           <%= render partial: 'shared/profile_nav_item.html.erb' %>
         </div>
       <% end %>
     </div>
   </div>
-
-  <%# <div class="flex h-center" style="margin-top: -14px; margin-bottom: -14px;">
-    <div class="inline-block padding-left padding-right" style="background-color: white; z-index: 50; padding-top: 4px; padding-bottom: 4px; border-radius: 20px; background-color: #DEF2F1; box-shadow: 0 2px 2px lightgrey;">
-      <h3 class="no-margin bold">page title</h3>
-    </div>
-  </div> %>
-  <%# <div class="bg-grey" style="height: 16px;"></div> %>
 </div>
 
 <div id="header-spacer"></div>

app/views/users/_notification_preview.html.erb

@@ -4,7 +4,7 @@
     data-hovercard-url="<%= hovercard_user_path(user) %>"
     data-action="mouseenter->hovercard#show mouseleave->hovercard#hide"
     data-is-hovering="false"
-    class="position-relative flex v-center"
+    class="position-relative flex items-center"
   >
     <%= link_to user_path(user) do %>
       <%= image_tag user.avatar_url, class: "user-preview--img", height: 48, width: 48 %>

app/views/users/show.html.erb

@@ -4,7 +4,7 @@
 
 <div class="card--container card--container-padding">
   <div class="flex">
-    <div class="flex flex-column">
+    <div class="flex flex-col">
       <img style="border-radius: 50%;" src="<%= @user.avatar_url %>" height="120" width="120" />
       <% if @user == current_user %>
         <%= button_to 'Edit Profile', edit_user_registration_path, method: :get, class: 'mt-2 button--cta-tertiary flex w-full justify-center' %>