sorted admin-page, reworked notice/aletrt bar, add button for dark/light theme

Author: lNewSkyl

app/.DS_Store

@@ -5,10 +5,59 @@
 
 
 
-
-
-
-
-body { background-color: Black; }
+@import url('https://fonts.googleapis.com/css?family=Josefin+Sans');
+
+body { 
+	background-color: Black; 
+	font-family: 'Josefin Sans', sans-serif;
+}
+
+
+$dark-background-color-base : #0d1117;
+$dark-border-color: #21262d;
+
+body {
+  font-family: 'Josefin Sans', sans-serif;
+}
+
+body.light {
+  color: black;
+  background-color: white;
+
+  #logo {
+    color: black;
+  }
+
+  #menu-links {
+    a {
+      color: black;
+    }
+  }
+}
+
+body.dark {
+  color: white;
+  background-color: $dark-background-color-base;
+  border-color: $dark-border-color !important;
+
+  #logo {
+    color: white;
+  }
+
+  header {
+    background-color: $dark-background-color-base;
+    border-color: $dark-border-color !important;
+  }
+
+  #menu-links {
+    a {
+      color: white;
+    }
+  }
+
+  #user-dropdown-button {
+    color: white;
+  }
+}
 
 

app/assets/.DS_Store

@@ -1,4 +1,16 @@
 class ApplicationController < ActionController::Base
+  before_action :set_theme
+
+
+  def set_theme
+    if params[:theme].present?
+      theme = params[:theme].to_sym
+      cookies[:theme] = theme
+      redirect_to(request.referrer || home_path)
+    end
+  end
+  
+
   def about
     render "/about"
   end

app/assets/js/.DS_Store

@@ -1,12 +1,12 @@
-  <% if user_signed_in? %>
-   <% if @article.user.email == current_user.email || current_user.email == "atom-1121@mail.ru" %>
-      <div class="btn-group container" role="group" aria-label="Basic mixed styles example">
-      <a href="<%= edit_article_path(@article) %>" class="btn btn-outline-success" role="button">Edit task</a>
-      <a class="btn btn-danger" <%= link_to "Delete task", article_path(@article),
-                      method: :delete,
-                      data: { confirm: "Are you sure?" } %></a></div>
-   <% end %>
-  <% end %>  
+<% if user_signed_in? %>
+ <% if @article.user.email == current_user.email || current_user.email == "atom-1121@mail.ru" %>
+    <div class="btn-group container" role="group" aria-label="Basic mixed styles example">
+    <a href="<%= edit_article_path(@article) %>" class="btn btn-outline-success" role="button">Edit task</a>
+    <a class="btn btn-danger" <%= link_to "Delete task", article_path(@article),
+                    method: :delete,
+                    data: { confirm: "Are you sure?" } %></a></div>
+ <% end %>
+<% end %>  
 <br><br>
 <div class="container">
   <div class="row">
@@ -25,8 +25,8 @@
     <div class="col">
       <style>.raz {text-align: right;}</style>
       <div class = raz>
-      <p class=text-muted>Created: <%= time_ago_in_words(@article.created_at) %> ago.<br>by <strong><%= link_to @article.user.username, @article.user %> </strong></p>
-    </div>
+        <p class=text-muted>Created: <%= time_ago_in_words(@article.created_at) %> ago.<br>by <strong><%= link_to @article.user.username, @article.user %> </strong></p>
+      </div>
     </div>
   </div>
 </div>

app/assets/stylesheets/.DS_Store

@@ -12,6 +12,28 @@
             <% end %>
           <% end %>
         </ul>
+
+     <% if cookies[:theme] == "light" %>
+        <%= link_to home_path(theme: "dark"), class: 'navbar-brand mb-0 h1' do %>
+          <button type="button" class="btn btn-outline-light">
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-moon" viewBox="0 0 16 16">
+              <path d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278zM4.858 1.311A7.269 7.269 0 0 0 1.025 7.71c0 4.02 3.279 7.276 7.319 7.276a7.316 7.316 0 0 0 5.205-2.162c-.337.042-.68.063-1.029.063-4.61 0-8.343-3.714-8.343-8.29 0-1.167.242-2.278.681-3.286z"/>
+            </svg>
+          </button>
+        <% end %>
+      <% else %>
+        <%= link_to home_path(theme: "light"), class: 'navbar-brand mb-0 h1' do %>
+          <button type="button" class="btn btn-outline-light">
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-brightness-high-fill" viewBox="0 0 16 16">
+              <path d="M12 8a4 4 0 1 1-8 0 4 4 0 0 1 8 0zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z"/>
+            </svg>
+          </button>
+        <% end %>
+      <% end %>
+
+
+
+        </ul>
         <form class="d-flex" action="/search">
           <input class="form-control me-2" name="q" type="search" placeholder="Search" aria-label="Search" >
           <button class="btn btn-outline-primary me-2" type="submit">Search</button>
@@ -34,4 +56,19 @@
           <a href="/users/sign_up" class="btn btn-primary" role="button" aria-pressed="true">Sign-up</a>
         <% end %>
     </header>
-    <div class="alert" role="alert" ><center><%= notice %><%= alert %></center></div>
+
+        <% if notice %>
+          <div class="alert alert-success alert-dismissible fade show" role="alert">
+            <center><%= notice %></center>
+            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+          </div>
+        <% elsif alert %>
+          <div class="alert alert-danger "><center><%= alert %></center></div>
+        <% else %>
+          <% flash.each do |message_type, message| %>
+            <div class="alert alert-<%= message_type %> alert-dismissible fade show" role="alert">
+              <center><%= message %></center>
+              <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+            </div>
+          <% end %>
+        <% end %>